@extends('layouts.app')

@section('content')
<div style="max-width:1120px; margin:0 auto; padding:32px 24px 40px;">
    <section style="background:{{ $album->exists ? 'var(--sca-black)' : 'var(--sca-yellow)' }}; color:{{ $album->exists ? 'var(--sca-white)' : 'var(--sca-black)' }}; border:1px solid var(--sca-black); padding:24px; margin-bottom:20px;">
        <div style="display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap;">
            <div>
                <div style="font-size:12px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; margin-bottom:10px;">Collection entry</div>
                <h1 style="font-size:38px; line-height:1; margin:0 0 10px; font-family:var(--sca-font-display); color:inherit;">
                    {{ $album->exists ? 'Album edit' : 'Album add' }}
                </h1>
                <p style="margin:0; max-width:700px; font-size:15px; line-height:1.6; color:inherit; opacity:0.95;">Update collection details with branded contrast and a clearer field hierarchy for fast editing.</p>
            </div>

            <a href="{{ route('albums.index') }}" class="sca-btn" style="background:{{ $album->exists ? 'var(--sca-white)' : 'var(--sca-black)' }}; color:{{ $album->exists ? 'var(--sca-black)' : 'var(--sca-white)' }}; min-width:160px;">
                Back to listing
            </a>
        </div>
    </section>

    @if ($errors->any())
        <div class="sca-panel" style="padding:18px 20px; margin-bottom:20px; background:#fff7df;">
            <div style="font-weight:700; margin-bottom:8px;">Please review the highlighted information.</div>
            <ul style="margin:0; padding-left:18px; line-height:1.7;">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <form method="POST" action="{{ $album->exists ? route('albums.update', $album) : route('albums.store') }}">
        @csrf
        @if($album->exists) @method('PUT') @endif

        <div class="sca-panel" style="padding:0; overflow:hidden;">
            <div style="background:var(--sca-black); color:var(--sca-white); padding:14px 20px; font-size:12px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase;">Album details</div>

            <div style="padding:22px 20px; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:18px 16px;">
                <label style="display:flex; flex-direction:column; gap:6px;">
                    <span style="font-size:12px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;">Title</span>
                    <input type="text" name="title" value="{{ old('title', $album->title) }}" style="min-height:46px; padding:10px 12px;">
                </label>

                <div style="display:grid; grid-template-columns:minmax(0, 1fr); gap:10px; align-content:start;">
                    <label style="display:flex; flex-direction:column; gap:6px;">
                        <span style="font-size:12px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;">Artist</span>
                        <select name="artist_id" style="min-height:46px; padding:10px 12px;">
                            <option value="">Select existing artist</option>
                            @foreach($artists as $artist)
                                <option value="{{ $artist->id }}" @selected((string) $artist->id === (string) old('artist_id', $album->artist_id))>
                                    {{ $artist->name }}
                                </option>
                            @endforeach
                        </select>
                    </label>

                    @unless($album->exists)
                        <div id="new_artist_wrap" style="display:grid; gap:10px;">
                            <div style="display:flex; align-items:center; gap:10px;">
                                <div style="height:1px; background:rgba(0, 0, 0, 0.18); flex:1;"></div>
                                <span style="font-size:11px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:rgba(0, 0, 0, 0.6);">or</span>
                                <div style="height:1px; background:rgba(0, 0, 0, 0.18); flex:1;"></div>
                            </div>

                            <label style="display:flex; flex-direction:column; gap:6px;">
                                <span style="font-size:12px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;">Add new artist</span>
                                <input id="artist_name" type="text" name="artist_name" value="{{ old('artist_name') }}" style="min-height:46px; padding:10px 12px;">
                            </label>
                        </div>
                    @endunless
                </div><span style="font-size:11px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:rgba(0, 0, 0, 0.6);">or</span>
                            <div style="height:1px; background:rgba(0, 0, 0, 0.18); flex:1;"></div>
                        </div>

                        <label style="display:flex; flex-direction:column; gap:6px;">
                            <span style="font-size:12px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;">Add new artist</span>
                            <input id="artist_name" type="text" name="artist_name" value="{{ old('artist_name') }}" placeholder="Enter a new artist name" style="min-height:46px; padding:10px 12px;">
                            <span style="font-size:12px; line-height:1.5; color:rgba(0, 0, 0, 0.65);">Entering a new artist name will create it automatically and use it for this album.</span>
                        </label>
                    @endunless
                </div>

                <label style="display:flex; flex-direction:column; gap:6px;">
                    <span style="font-size:12px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;">Format</span>
                    <input type="text" name="format_size" value="{{ old('format_size', $album->format_size) }}" style="min-height:46px; padding:10px 12px;">
                </label>

                <label style="display:flex; flex-direction:column; gap:6px;">
                    <span style="font-size:12px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;">Side count</span>
                    <select name="side_count" style="min-height:46px; padding:10px 12px;" required>
                        <option value="">Select sides</option>
                        <option value="2" @selected((string) old('side_count', $album->side_count) === '2')>2</option>
                        <option value="4" @selected((string) old('side_count', $album->side_count) === '4')>4</option>
                        <option value="6" @selected((string) old('side_count', $album->side_count) === '6')>6</option>
                        <option value="8" @selected((string) old('side_count', $album->side_count) === '8')>8</option>
                    </select>
                </label>

                <label style="display:flex; flex-direction:column; gap:6px;">
                    <span style="font-size:12px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;">Storage location</span>
                    <input type="text" name="storage_location" value="{{ old('storage_location', $album->storage_location) }}" style="min-height:46px; padding:10px 12px;">
                </label>

                <label style="display:flex; flex-direction:column; gap:6px;">
                    <span style="font-size:12px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;">Acquisition type</span>
                    <select name="acquisition_type" style="min-height:46px; padding:10px 12px;">
                        <option value="">Select type</option>
                        <option value="new" @selected(old('acquisition_type', $album->acquisition_type) === 'new')>New</option>
                        <option value="second_hand" @selected(old('acquisition_type', $album->acquisition_type) === 'second_hand')>Second hand</option>
                    </select>
                </label>

                <label style="display:flex; flex-direction:column; gap:6px;">
                    <span style="font-size:12px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;">Cost</span>
                    <input type="number" step="0.01" name="cost" value="{{ old('cost', $album->cost) }}" style="min-height:46px; padding:10px 12px;">
                </label>

                <label style="display:flex; flex-direction:column; gap:6px;">
                    <span style="font-size:12px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;">Source</span>
                    <input type="text" name="source" value="{{ old('source', $album->source) }}" style="min-height:46px; padding:10px 12px;">
                </label>

                <label style="display:flex; flex-direction:column; gap:6px;">
                    <span style="font-size:12px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;">Genre</span>
                    <input type="text" name="music_genre" value="{{ old('music_genre', $album->music_genre) }}" style="min-height:46px; padding:10px 12px;">
                </label>

                <label style="display:flex; flex-direction:column; gap:6px;">
                    <span style="font-size:12px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;">Decade</span>
                    <select name="decade_year" style="min-height:46px; padding:10px 12px;">
                        <option value="">Select decade</option>
                        @foreach(range(date('Y'),1940) as $y)
                            @if($y % 10 === 0)
                                <option value="{{ $y }}" @selected(old('decade_year', $album->decade_year) == $y)>
                                    {{ $y }}s
                                </option>
                            @endif
                        @endforeach
                    </select>
                </label>

                <label style="display:flex; flex-direction:column; gap:6px;">
                    <span style="font-size:12px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;">Digitised</span>
                    <select id="digitised" name="digitised" style="min-height:46px; padding:10px 12px;">
                        <option value="n" @selected(old('digitised', $album->digitised ? 'y':'n') === 'n')>No</option>
                        <option value="y" @selected(old('digitised', $album->digitised ? 'y':'n') === 'y')>Yes</option>
                    </select>
                </label>

                <label style="display:flex; flex-direction:column; gap:6px; grid-column:span 2;">
                    <span style="font-size:12px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;">Digitised file name</span>
                    <input id="digitised_file_name" type="text" name="digitised_file_name" value="{{ old('digitised_file_name', $album->digitised_file_name) }}" style="min-height:46px; padding:10px 12px;">
                </label>

                <label style="display:flex; flex-direction:column; gap:6px; grid-column:span 2;">
                    <span style="font-size:12px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;">Digitised file location</span>
                    <input type="text" name="digitised_file_storage_address" value="{{ old('digitised_file_storage_address', $album->digitised_file_storage_address) }}" style="min-height:46px; padding:10px 12px;">
                </label>
            </div>
        </div>

        <div style="display:flex; justify-content:flex-end; gap:12px; margin-top:20px; flex-wrap:wrap;">
            <a href="{{ route('albums.index') }}" class="sca-btn">Cancel</a>
            <button type="submit" class="sca-btn sca-btn-primary" style="min-width:160px;">Save album</button>
        </div>
    </form>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const fileInput = document.getElementById('digitised_file_name');
    const digitised = document.getElementById('digitised');
    const artistSelect = document.querySelector('select[name="artist_id"]');
    const artistName = document.getElementById('artist_name');

    fileInput.addEventListener('input', function () {
        if (this.value.trim() !== '') {
            digitised.value = 'y';
        }
    });

    if (artistName && artistSelect) {
        artistName.addEventListener('input', function () {
            if (this.value.trim() !== '') {
                artistSelect.value = '';
            }
        });

        artistSelect.addEventListener('change', function () {
            if (this.value !== '') {
                artistName.value = '';
            }
        });
    }
});
</script>

<style>
@media (max-width: 860px) {
    form > .sca-panel > div:last-child {
        grid-template-columns: 1fr !important;
    }

    form > .sca-panel > div:last-child label[style*="grid-column:span 2"] {
        grid-column: span 1 !important;
    }
}
</style>
@endsection