@extends('layouts.app')

@section('content')
@php
    $currentGenre = old('music_genre', $album->music_genre);
    $genreOptions = [
        'Rock', 'Pop', 'Jazz', 'Blues', 'Classical', 'Electronic', 'Hip Hop', 'Rap',
        'Soul', 'Funk', 'Reggae', 'Country', 'Folk', 'Metal', 'Punk', 'Disco',
        'House', 'Techno', 'Ambient', 'Soundtrack'
    ];
@endphp

<div style="max-width:1120px; margin:0 auto; padding:32px 24px 40px;">
    <section style="background:var(--sca-yellow); color: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 add
                </h1>
            </div>

            <a href="{{ route('albums.index') }}" class="sca-btn" style="background:var(--sca-black); color: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="{{ route('albums.store') }}">
        @csrf

        <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 class="album-form-grid">
                <label class="album-field">
                    <span class="album-field-label">Title</span>
                    <input type="text" name="title" value="{{ old('title', $album->title) }}" class="album-input">
                </label>

                <div style="display:grid; grid-template-columns:minmax(0, 1fr); gap:10px; align-content:start;">
                    <label class="album-field">
                        <span class="album-field-label">Artist</span>
                        <select id="artist_id" name="artist_id" class="album-input">
                            <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>

                    <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 class="album-field">
                            <span class="album-field-label">Add new artist</span>
                            <input id="artist_name" type="text" name="artist_name" value="{{ old('artist_name') }}" placeholder="Enter a new artist name" class="album-input">
                            <span class="album-field-help">Entering a new artist name will create it automatically and use it for this album.</span>
                        </label>
                    </div>
                </div>

                <label class="album-field">
                    <span class="album-field-label">Format</span>
                    <select name="format_size" class="album-input">
                        <option value="">Select format</option>
                        <option value='12"' @selected(old('format_size', $album->format_size) === '12"')>12"</option>
                        <option value='10"' @selected(old('format_size', $album->format_size) === '10"')>10"</option>
                        <option value='7"' @selected(old('format_size', $album->format_size) === '7"')>7"</option>
                    </select>
                </label>

                <label class="album-field">
                    <span class="album-field-label">Speed</span>
                    <select name="play_speed" class="album-input">
                        <option value="">Select speed</option>
                        <option value="33" @selected((string) old('play_speed', $album->play_speed) === '33')>33</option>
                        <option value="45" @selected((string) old('play_speed', $album->play_speed) === '45')>45</option>
                        <option value="78" @selected((string) old('play_speed', $album->play_speed) === '78')>78</option>
                    </select>
                </label>

                <label class="album-field">
                    <span class="album-field-label">Side count</span>
                    <select name="side_count" class="album-input" required>
                        <option value="">Select sides</option>
                        @foreach([2, 4, 6, 8] as $count)
                            <option value="{{ $count }}" @selected((string) old('side_count', $album->side_count) === (string) $count)>{{ $count }}</option>
                        @endforeach
                    </select>
                </label>

                <label class="album-field">
                    <span class="album-field-label">Storage location</span>
                    <input type="text" name="storage_location" value="{{ old('storage_location', $album->storage_location) }}" class="album-input">
                </label>

                <label class="album-field">
                    <span class="album-field-label">Acquisition type</span>
                    <select name="acquisition_type" class="album-input">
                        <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 class="album-field">
                    <span class="album-field-label">Cost</span>
                    <input type="number" step="0.01" name="cost" value="{{ old('cost', $album->cost) }}" class="album-input">
                </label>

                <label class="album-field">
                    <span class="album-field-label">Source</span>
                    <input type="text" name="source" value="{{ old('source', $album->source) }}" class="album-input">
                </label>

                <label class="album-field">
                    <span class="album-field-label">Genre</span>
                    <select name="music_genre" size="8" class="album-input album-scroll-select">
                        @foreach($genreOptions as $genre)
                            <option value="{{ $genre }}" @selected($currentGenre === $genre)>{{ $genre }}</option>
                        @endforeach
                    </select>
                </label>

                <label class="album-field">
                    <span class="album-field-label">Decade</span>
                    <select name="decade_year" class="album-input">
                        <option value="">Select decade</option>
                        @foreach(range(date('Y'), 1940) as $y)
                            @if($y % 10 === 0)
                                <option value="{{ $y }}" @selected((string) old('decade_year', $album->decade_year) === (string) $y)>{{ $y }}s</option>
                            @endif
                        @endforeach
                    </select>
                </label>

                <label class="album-field">
                    <span class="album-field-label">Digitised</span>
                    <select id="digitised" name="digitised" class="album-input">
                        <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>

                <div id="digitised_fields_wrap" class="album-field-span-2" style="display:none;">
                    <div style="display:grid; grid-template-columns:1fr; gap:18px;">
                        <label class="album-field">
                            <span class="album-field-label">Digitised Filename</span>
                            <input id="digitised_file_name" type="text" name="digitised_file_name" value="{{ old('digitised_file_name', $album->digitised_file_name) }}" class="album-input">
                        </label>

                        <label class="album-field">
                            <span class="album-field-label">File Location</span>
                            <input type="text" name="digitised_file_storage_address" value="{{ old('digitised_file_storage_address', $album->digitised_file_storage_address) }}" class="album-input">
                        </label>
                    </div>
                </div>
            </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 digitisedFieldsWrap = document.getElementById('digitised_fields_wrap');
    const artistSelect = document.getElementById('artist_id');
    const artistName = document.getElementById('artist_name');
    const newArtistWrap = document.getElementById('new_artist_wrap');

    function syncDigitisedState() {
        if (!digitised || !digitisedFieldsWrap) {
            return;
        }
        digitisedFieldsWrap.style.display = digitised.value === 'y' ? 'block' : 'none';
    }

    function syncArtistState() {
        if (!artistSelect || !newArtistWrap) {
            return;
        }
        newArtistWrap.style.display = artistSelect.value !== '' ? 'none' : 'grid';
    }

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

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

        artistSelect.addEventListener('change', function () {
            if (this.value !== '') {
                artistName.value = '';
            }
            syncArtistState();
        });
    }

    if (digitised) {
        digitised.addEventListener('change', syncDigitisedState);
    }

    syncDigitisedState();
    syncArtistState();
});
</script>

<style>
.album-form-grid {
    padding:22px 20px;
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:18px 16px;
}
.album-field {
    display:flex;
    flex-direction:column;
    gap:6px;
}
.album-field-span-2 {
    grid-column:span 2;
}
.album-field-label {
    font-size:12px;
    font-weight:700;
    letter-spacing:0.08em;
    text-transform:uppercase;
}
.album-field-help {
    font-size:12px;
    line-height:1.5;
    color:rgba(0, 0, 0, 0.65);
}
.album-input {
    min-height:46px;
    padding:10px 12px;
    border:1px solid var(--sca-black);
    background:var(--sca-white);
    color:var(--sca-black);
    box-sizing:border-box;
    width:100%;
}
.album-scroll-select {
    min-height:160px;
}
@media (max-width: 860px) {
    .album-form-grid {
        grid-template-columns:1fr !important;
    }

    .album-field-span-2 {
        grid-column:span 1;
    }
}
</style>
@endsection