@extends('layouts.app')

@section('content')
@php
    $isDigitised = old('digitised', $album->digitised ? 'y' : 'n');
    $relaxedValue = old('relaxed_date', optional($album->relaxed_date)->format('Y-m-d'));
    $recordRestoreTreatments = ($album->treatments ?? collect())->filter(function ($treatment) {
        return strcasecmp((string) $treatment->treatment_type, 'Record Restore') === 0;
    })->values();
    $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:1240px; margin:0 auto; padding:32px 24px 40px;">
    <section style="background:var(--sca-black); color:var(--sca-white); 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 management</div>
                <h1 style="font-size:38px; line-height:1; margin:0 0 8px; font-family:var(--sca-font-display); color:var(--sca-white);">Edit Album</h1>
                <div style="font-size:14px; line-height:1.5; color:rgba(255,255,255,0.82);">
                    {{ $album->artist?->name ?: 'Unknown artist' }} · {{ $album->title }}
                </div>
            </div>

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

    <div class="album-edit-layout">
        <form method="POST" action="{{ route('albums.update', $album) }}" class="album-edit-form">
            @csrf
            @method('PUT')

            <section class="sca-panel" style="padding:0; overflow:hidden;">
                <div class="album-section-bar">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>

                    <label class="album-field">
                        <span class="album-field-label">Artist</span>
                        <select name="artist_id" class="album-input">
                            <option value="">Select 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>

                    <label class="album-field">
                        <span class="album-field-label">Format</span>
                        <select name="format_size" class="album-input">
                            <option value="">Select</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</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">
                            <option value="">Select</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">Edition / pressing</span>
                        <input type="text" name="edition_pressing" value="{{ old('edition_pressing', $album->edition_pressing) }}" class="album-input">
                    </label>

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

                    <label class="album-field">
                        <span class="album-field-label">Acquired on</span>
                        <input type="date" name="acquired_on" value="{{ old('acquired_on', optional($album->acquired_on)->format('Y-m-d')) }}" 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" class="album-input">
                            <option value="">Select genre</option>
                            @foreach($genreOptions as $genre)
                                <option value="{{ $genre }}" @selected(old('music_genre', $album->music_genre) === $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">Play frequency</span>
                        <select name="play_frequency" class="album-input">
                            <option value="">Select profile</option>
                            <option value="very_frequent" @selected(old('play_frequency', $album->play_frequency) === 'very_frequent')>Very frequent</option>
                            <option value="frequent" @selected(old('play_frequency', $album->play_frequency) === 'frequent')>Frequent</option>
                            <option value="sometimes" @selected(old('play_frequency', $album->play_frequency) === 'sometimes')>Sometimes</option>
                            <option value="rarely" @selected(old('play_frequency', $album->play_frequency) === 'rarely')>Rarely</option>
                        </select>
                    </label>

                    <label class="album-field">
                        <span class="album-field-label">Relaxed date</span>
                        <input id="relaxed_date" type="date" name="relaxed_date" value="{{ $relaxedValue }}" class="album-input album-input-contrast">
                    </label>

                    <div class="album-field" id="digitised_question_wrap">
                        <span class="album-field-label">Digitised?</span>
                        <select id="digitised" name="digitised" class="album-input">
                            <option value="n" @selected($isDigitised === 'n')>No</option>
                            <option value="y" @selected($isDigitised === 'y')>Yes</option>
                        </select>
                    </div>

                    <div id="digitised_fields_wrap" class="album-field-span-2" style="display:none;">
                        <div style="display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:18px 16px;">
                            <label class="album-field">
                                <span class="album-field-label">Digitised file name</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">Digitised 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>

                    <label class="album-field album-field-span-2">
                        <span class="album-field-label">Notes</span>
                        <textarea name="notes" class="album-input" style="min-height:110px; padding-top:12px;">{{ old('notes', $album->notes) }}</textarea>
                    </label>
                </div>
            </section>

            <section class="sca-panel" style="padding:0; overflow:hidden; margin-top:20px;">
                <div class="album-section-bar">Stored album values</div>
                <div class="album-summary-grid">
                    <div class="album-summary-item">
                        <span class="album-field-label">Estimated prior plays</span>
                        <div class="album-summary-value">{{ $album->estimated_prior_plays ?? 0 }}</div>
                    </div>
                    <div class="album-summary-item">
                        <span class="album-field-label">Total play count</span>
                        <div class="album-summary-value">{{ $album->total_play_count ?? 0 }}</div>
                    </div>
                    <div class="album-summary-item">
                        <span class="album-field-label">Logged plays</span>
                        <div class="album-summary-value">{{ $album->playLogs->count() }}</div>
                    </div>
                    <div class="album-summary-item">
                        <span class="album-field-label">Last Record Restore</span>
                        <div class="album-summary-value">{{ optional($recordRestoreTreatments->first()?->treated_on)->format('Y-m-d') ?: '—' }}</div>
                    </div>
                </div>
            </section>

            <div style="display:flex; justify-content:space-between; gap:12px; margin-top:20px; flex-wrap:wrap;">
                <div style="display:flex; gap:12px; 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:180px;">Save album changes</button>
                </div>

                <div class="album-delete-wrap">
                    <label class="album-delete-check">
                        <input type="checkbox" id="confirm_delete">
                        <span>Confirm delete</span>
                    </label>

                    <form method="POST" action="{{ route('albums.destroy', $album) }}" id="delete_album_form">
                        @csrf
                        @method('DELETE')
                        <button type="submit" id="delete_album_btn" class="sca-btn" style="background:var(--sca-black); color:var(--sca-white); min-width:168px;" disabled>Delete album</button>
                    </form>
                </div>
            </div>
        </form>

        <aside class="album-edit-aside">
            <section class="sca-panel album-history-card" style="padding:0; overflow:hidden;">
                <div class="album-section-bar">Treatment history</div>
                <div class="album-history-body">
                    <div class="album-history-highlight">
                        <div class="album-history-kicker">Relaxed status</div>
                        <div class="album-history-value">{{ $relaxedValue ? 'Relaxed' : 'Not relaxed' }}</div>
                        <div class="album-history-meta">{{ $relaxedValue ? 'Recorded on ' . \Illuminate\Support\Carbon::parse($relaxedValue)->format('j M Y') : 'No relaxing date is currently recorded.' }}</div>
                    </div>

                    <div class="album-history-highlight album-history-highlight-alt">
                        <div class="album-history-kicker">Record Restore</div>
                        <div class="album-history-value">{{ $recordRestoreTreatments->count() }} {{ \Illuminate\Support\Str::plural('treatment', $recordRestoreTreatments->count()) }}</div>
                        <div class="album-history-meta">
                            @if ($recordRestoreTreatments->isNotEmpty())
                                Last treatment {{ optional($recordRestoreTreatments->first()->treated_on)->format('j M Y') }}
                            @else
                                No Record Restore treatments have been logged yet.
                            @endif
                        </div>
                    </div>

                    <div class="album-history-list-wrap">
                        <div class="album-history-list-title">Record Restore history</div>

                        @if ($recordRestoreTreatments->isEmpty())
                            <div class="album-history-empty">No Record Restore entries yet for this album.</div>
                        @else
                            <div class="album-history-list">
                                @foreach ($recordRestoreTreatments as $treatment)
                                    <div class="album-history-row">
                                        <div>
                                            <div class="album-history-row-title">{{ optional($treatment->treated_on)->format('j M Y') }}</div>
                                            <div class="album-history-row-meta">{{ $treatment->treatment_type }}</div>
                                        </div>
                                        <div class="album-history-row-note">{{ $treatment->notes ?: 'No notes recorded' }}</div>
                                    </div>
                                @endforeach
                            </div>
                        @endif
                    </div>
                </div>
            </section>
        </aside>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const digitised = document.getElementById('digitised');
    const digitisedQuestionWrap = document.getElementById('digitised_question_wrap');
    const digitisedFieldsWrap = document.getElementById('digitised_fields_wrap');
    const fileInput = document.getElementById('digitised_file_name');
    const confirmDelete = document.getElementById('confirm_delete');
    const deleteButton = document.getElementById('delete_album_btn');

    function syncDigitisedState() {
        if (!digitised || !digitisedQuestionWrap || !digitisedFieldsWrap) {
            return;
        }

        const enabled = digitised.value === 'y';
        digitisedQuestionWrap.style.display = enabled ? 'none' : 'flex';
        digitisedFieldsWrap.style.display = enabled ? 'block' : 'none';
    }

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

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

    if (confirmDelete && deleteButton) {
        const syncDeleteState = () => {
            deleteButton.disabled = !confirmDelete.checked;
            deleteButton.style.opacity = confirmDelete.checked ? '1' : '0.45';
            deleteButton.style.cursor = confirmDelete.checked ? 'pointer' : 'not-allowed';
        };

        confirmDelete.addEventListener('change', syncDeleteState);
        syncDeleteState();
    }
});
</script>

<style>
.album-edit-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.95fr);
    gap: 22px;
    align-items: start;
}

.album-edit-form,
.album-edit-aside {
    min-width: 0;
}

.album-section-bar {
    background: var(--sca-black);
    color: var(--sca-yellow);
    padding: 14px 20px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(255, 214, 0, 0.35);
}

.album-form-grid {
    padding: 22px 20px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 16px;
    background: linear-gradient(180deg, #fffef8 0%, #fff9dc 100%);
}

.album-summary-grid {
    padding: 22px 20px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    background: #fffef8;
}

.album-summary-item {
    border: 1px solid rgba(0,0,0,0.14);
    background: var(--sca-white);
    padding: 14px;
    border-radius: 10px;
}

.album-summary-value {
    margin-top: 8px;
    font-size: 20px;
    font-weight: 700;
    color: var(--sca-black);
}

.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;
    color: var(--sca-black);
}

.album-input {
    min-height: 46px;
    padding: 10px 12px;
    border: 1px solid var(--sca-black);
    background: var(--sca-white);
    color: var(--sca-black);
    border-radius: 10px;
    box-sizing: border-box;
    width: 100%;
}

.album-input:focus {
    outline: 2px solid var(--sca-yellow);
    outline-offset: 1px;
}

.album-input-contrast {
    background: #fff7bf;
}

.album-delete-wrap {
    display: grid;
    gap: 10px;
    justify-items: end;
}

.album-delete-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.album-history-card {
    border: 1px solid var(--sca-black);
    box-shadow: 10px 10px 0 rgba(255, 214, 0, 0.85);
}

.album-history-body {
    padding: 18px;
    background: var(--sca-black);
    color: var(--sca-white);
}

.album-history-highlight {
    padding: 16px;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 12px;
    background: rgba(255,255,255,0.06);
    display: grid;
    gap: 6px;
}

.album-history-highlight + .album-history-highlight {
    margin-top: 14px;
}

.album-history-highlight-alt {
    background: rgba(255,184,28,0.14);
    border-color: rgba(255,184,28,0.42);
}

.album-history-kicker,
.album-history-list-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.72);
}

.album-history-value {
    font-size: 24px;
    line-height: 1.05;
    font-family: var(--sca-font-display);
    color: var(--sca-white);
}

.album-history-meta,
.album-history-empty,
.album-history-row-meta,
.album-history-row-note {
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255,255,255,0.76);
}

.album-history-list-wrap {
    margin-top: 18px;
    display: grid;
    gap: 12px;
}

.album-history-list {
    display: grid;
    gap: 10px;
}

.album-history-row {
    display: grid;
    grid-template-columns: minmax(0, 132px) minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 12px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px;
    background: rgba(255,255,255,0.05);
}

.album-history-row-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--sca-white);
}

@media (max-width: 980px) {
    .album-edit-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 860px) {
    .album-form-grid,
    .album-summary-grid,
    #digitised_fields_wrap > div {
        grid-template-columns: 1fr !important;
    }

    .album-field-span-2 {
        grid-column: span 1;
    }

    .album-delete-wrap {
        justify-items: stretch;
        width: 100%;
    }
}
</style>
@endsection