@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 id="album_edit_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 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">
                            <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" size="8" class="album-input album-scroll-select">
                            @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>

                    <label class="album-field">
                        <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>
                    </label>

                    <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>

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

        <aside class="album-edit-aside">
            <div class="album-delete-wrap" style="margin-bottom:20px;">
                <label class="album-delete-check">
                    <input type="checkbox" id="confirm_delete">
                    <span>Confirm delete</span>
                </label>

                <button type="button" id="delete_album_btn" class="sca-btn" style="background:var(--sca-black); color:var(--sca-white); min-width:168px;" disabled>
                    Delete album
                </button>
            </div>
            <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>
            </section>
        </aside>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const digitised = document.getElementById('digitised');
    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 || !digitisedFieldsWrap) {
            return;
        }
        digitisedFieldsWrap.style.display = digitised.value === 'y' ? '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();
    }

    const deleteForm = document.getElementById('album_delete_form');
    if (deleteButton && deleteForm && confirmDelete) {
        deleteButton.addEventListener('click', function () {
            if (!confirmDelete.checked) {
                return;
            }
            deleteForm.submit();
        });
    }
});
</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-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-contrast { background:#fff7bf; }
.album-scroll-select { min-height:160px; }
.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 {
    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 {
    font-size:13px;
    line-height:1.6;
    color:rgba(255,255,255,0.76);
}
@media (max-width: 980px) {
    .album-edit-layout { grid-template-columns:1fr; }
}
@media (max-width: 860px) {
    .album-form-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%;
    }
}


<form id="album_delete_form" method="POST" action="{{ route('albums.destroy', $album) }}" style="display:none;">
    @csrf
    @method('DELETE')
</form>

</style>
@endsection