@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();

    $lastRecordRestoreDate = old('lastRecordRestoreDate', optional($recordRestoreTreatments->first()?->treated_on)->toDateString());
    $loggedPlayCount = $album->relationLoaded('playLogs') ? $album->playLogs->count() : $album->playLogs()->count();
    $playsSinceLastRestore = $lastRecordRestoreDate
        ? ($album->relationLoaded('playLogs')
            ? $album->playLogs->filter(fn ($playLog) => $playLog->played_at && $playLog->played_at->toDateString() >= $lastRecordRestoreDate)->count()
            : $album->playLogs()->whereDate('played_at', '>=', $lastRecordRestoreDate)->count())
        : $loggedPlayCount;
    $needsTreatmentValue = old('needs_treatment', ($album->needs_treatment ?? false) ? '1' : '0');

    $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 class="album-hero">
        <div class="album-hero-inner">
            <div>
                <div class="album-kicker">Collection management</div>
                <h1 class="album-hero-title">Album edit</h1>
                <div class="album-hero-meta">
                    {{ $album->artist?->name ?: 'Unknown artist' }} · {{ $album->title }}
                </div>
            </div>

            <a href="{{ route('albums.index') }}" class="sca-btn album-back-btn">
                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

    <section class="sca-panel album-history-card">
        <div class="album-section-bar">Treatment history</div>

        <div class="album-history-grid">
            <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 ? 'One-time treatment 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 ($lastRecordRestoreDate)
                        Last treatment {{ \Illuminate\Support\Carbon::parse($lastRecordRestoreDate)->format('j M Y') }}
                    @else
                        No Record Restore treatments have been logged yet.
                    @endif
                </div>

                <div class="album-history-stats">
                    <div>
                        <span>Plays since restore</span>
                        <strong>{{ $playsSinceLastRestore }}</strong>
                    </div>
                    <div>
                        <span>Treatment due</span>
                        <strong>{{ (($album->needs_treatment ?? false) || $playsSinceLastRestore >= 10) ? 'Yes' : 'No' }}</strong>
                    </div>
                </div>
            </div>

            <div class="album-history-list-wrap">
                <div class="album-history-kicker">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>

    <form id="album_edit_form" method="POST" action="{{ route('albums.update', $album) }}">
        @csrf
        @method('PUT')

        <section class="sca-panel album-details-card">
            <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" 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">Frequency of use</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">Estimated prior plays</span>
                    <input type="number" name="estimated_prior_plays" value="{{ old('estimated_prior_plays', $album->estimated_prior_plays ?? 0) }}" class="album-input">
                </label>

                <label class="album-field">
                    <span class="album-field-label">Total play count</span>
                    <input type="text" value="{{ $album->total_play_count ?? 0 }}" class="album-input album-input-readonly" readonly>
                </label>

                <label class="album-field">
                    <span class="album-field-label">Logged plays</span>
                    <input type="text" value="{{ $loggedPlayCount }}" class="album-input album-input-readonly" readonly>
                </label>

                <label class="album-field">
                    <span class="album-field-label">Plays since last restore</span>
                    <input type="text" value="{{ $playsSinceLastRestore }}" class="album-input album-input-readonly" readonly>
                </label>

                <label class="album-field">
                    <span class="album-field-label">Treatment due</span>
                    <select name="needs_treatment" class="album-input">
                        <option value="0" @selected($needsTreatmentValue === '0')>No</option>
                        <option value="1" @selected($needsTreatmentValue === '1')>Yes</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">Last Record Restore</span>
                    <input type="date" name="lastRecordRestoreDate" value="{{ $lastRecordRestoreDate }}" 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-3" style="display:none;">
                    <div class="album-form-grid album-form-grid-nested">
                        <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 album-field-span-2">
                            <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-3">
                    <span class="album-field-label">Note</span>
                    <textarea name="notes" class="album-input" style="min-height:110px; padding-top:12px;">{{ old('notes', $album->notes) }}</textarea>
                </label>
            </div>
        </section>

        <div class="album-actions-row">
            <div class="album-main-actions">
                <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>

            <div class="album-delete-wrap">
                <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>
        </div>
    </form>

    <form id="album_delete_form" method="POST" action="{{ route('albums.destroy', $album) }}" style="display:none;">
        @csrf
        @method('DELETE')
    </form>
</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-hero {
    background: var(--sca-black);
    color: var(--sca-white);
    border: 1px solid var(--sca-black);
    padding: 24px;
    margin-bottom: 22px;
    box-shadow: 12px 12px 0 var(--sca-yellow);
}

.album-hero-inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    flex-wrap: wrap;
}

.album-kicker {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 10px;
    color: var(--sca-yellow);
}

.album-hero-title {
    font-size: 38px;
    line-height: 1;
    margin: 0 0 8px;
    font-family: var(--sca-font-display);
    color: var(--sca-white);
}

.album-hero-meta {
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255,255,255,0.82);
}

.album-back-btn {
    background: var(--sca-yellow) !important;
    color: var(--sca-black) !important;
    border-color: var(--sca-yellow) !important;
    min-width: 160px;
}

.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-history-card,
.album-details-card {
    padding: 0;
    overflow: hidden;
    margin-bottom: 22px;
    border: 1px solid var(--sca-black);
    box-shadow: 10px 10px 0 rgba(255, 214, 0, 0.85);
}

.album-history-grid {
    background: var(--sca-black);
    color: var(--sca-white);
    padding: 18px;
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 0.9fr) minmax(0, 1.2fr);
    gap: 16px;
}

.album-history-highlight,
.album-history-list-wrap {
    padding: 16px;
    border: 1px solid rgba(255, 214, 0, 0.42);
    border-radius: 12px;
    background: rgba(255,255,255,0.06);
    display: grid;
    gap: 8px;
    align-content: start;
}

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

.album-history-kicker {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sca-yellow);
}

.album-history-value {
    font-size: 26px;
    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.78);
}

.album-history-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 6px;
}

.album-history-stats div {
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 10px;
    padding: 10px;
    display: grid;
    gap: 4px;
}

.album-history-stats span {
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.64);
    font-weight: 700;
}

.album-history-stats strong {
    color: var(--sca-white);
    font-size: 18px;
}

.album-history-list {
    display: grid;
    gap: 10px;
    max-height: 220px;
    overflow-y: auto;
    padding-right: 4px;
}

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

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

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

.album-form-grid-nested {
    padding: 0;
    background: transparent;
}

.album-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

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

.album-field-span-3 {
    grid-column: span 3;
}

.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-input-readonly {
    background: #f4efe0;
    color: rgba(0,0,0,0.72);
}

.album-actions-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-top: 20px;
    flex-wrap: wrap;
    align-items: flex-start;
}

.album-main-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.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;
}

@media (max-width: 1040px) {
    .album-history-grid,
    .album-form-grid,
    .album-form-grid-nested {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

@media (max-width: 760px) {
    .album-history-grid,
    .album-form-grid,
    .album-form-grid-nested {
        grid-template-columns: 1fr;
    }

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

    .album-actions-row,
    .album-delete-wrap {
        justify-items: stretch;
        width: 100%;
    }

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