@extends('layouts.app')

@section('content')
@php
    $recordRestoreTreatments = $album->exists
        ? $album->treatments->filter(fn ($treatment) => strtolower((string) $treatment->treatment_type) === 'record restore')->values()
        : collect();

    $relaxedDateValue = old('relaxed_date', optional($album->relaxed_date)->format('Y-m-d'));
    $isRelaxed = $relaxedDateValue ? 'y' : 'n';
@endphp

<div style="max-width:1180px; margin:0 auto; padding:32px 24px 44px;">
    <section style="background:var(--sca-black); color:var(--sca-white); border:1px solid var(--sca-yellow); box-shadow:12px 12px 0 var(--sca-yellow); padding:24px; margin-bottom:22px;">
        <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.16em; text-transform:uppercase; margin-bottom:10px; color:var(--sca-yellow);">Collection management</div>
                <h1 style="font-size:38px; line-height:1; margin:0 0 12px; font-family:var(--sca-font-display); color:var(--sca-white);">
                    {{ $album->exists ? 'Album edit' : 'Album add' }}
                </h1>
                            </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:168px;">
                Back to listing
            </a>
        </div>
    </section>

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

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

            <div class="sca-panel" style="padding:0; overflow:hidden; border:1px solid var(--sca-black);">
                <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>

                    <div style="display:grid; grid-template-columns:minmax(0, 1fr); gap:12px; align-content:start;">
                        <label class="album-field">
                            <span class="album-field-label">Artist</span>
                            <select name="artist_id" class="album-input">
                                <option value="">{{ $album->exists ? 'Select artist' : '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 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>

                            <div id="new_artist_wrap"><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>
                        @endunless
                    </div>

                    <label class="album-field">
                        <span class="album-field-label">Format</span>
                        <input type="text" name="format_size" value="{{ old('format_size', $album->format_size) }}" class="album-input">
                    </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>
                        <input type="text" name="music_genre" value="{{ old('music_genre', $album->music_genre) }}" class="album-input">
                    </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(old('decade_year', $album->decade_year) == $y)>
                                        {{ $y }}s
                                    </option>
                                @endif
                            @endforeach
                        </select>
                    </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(old('digitised', $album->digitised ? 'y':'n') === 'n')>No</option>
                            <option value="y" @selected(old('digitised', $album->digitised ? 'y':'n') === '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:1fr; gap:18px;">
                            <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>
                </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>

        <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">{{ $relaxedDateValue ? 'Relaxed' : 'Not relaxed' }}</div>
                        <div class="album-history-meta">{{ $relaxedDateValue ? 'One-time treatment recorded on ' . \Illuminate\Support\Carbon::parse($relaxedDateValue)->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>

                    @if ($album->exists)
                        <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>
                    @else
                        <div class="album-history-empty">Save the album first to build a Record Restore history timeline here.</div>
                    @endif
                </div>
            </section>
        </aside>
    </div>
</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');
    const relaxedStatus = document.getElementById('relaxed_status');
    const relaxedDate = document.getElementById('relaxed_date');
    const relaxedWrap = document.getElementById('relaxed_date_wrap');

    const digitisedQuestionWrap = document.getElementById('digitised_question_wrap');
    const digitisedFieldsWrap = document.getElementById('digitised_fields_wrap');

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

    
    const newArtistWrap = document.getElementById('new_artist_wrap');

    function syncArtistInputs() {
        if (!artistSelect || !newArtistWrap) return;

        if (artistSelect.value !== '') {
            newArtistWrap.style.display = 'none';
        } else {
            newArtistWrap.style.display = 'block';
        }
    }

    if (artistSelect) {
        artistSelect.addEventListener('change', syncArtistInputs);
        syncArtistInputs();
    }

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

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

    function syncRelaxedState() {
        if (!relaxedStatus || !relaxedDate || !relaxedWrap) {
            return;
        }

        const enabled = relaxedStatus.value === 'y';
        relaxedWrap.style.opacity = enabled ? '1' : '0.72';
        relaxedDate.readOnly = !enabled;

        if (!enabled) {
            relaxedDate.value = '';
        }
    }

    if (relaxedStatus) {
        relaxedStatus.addEventListener('change', syncRelaxedState);
        syncRelaxedState();
    }
});
</script>

<style>
.album-edit-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(300px, 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-field-help {
    font-size: 12px;
    line-height: 1.55;
    color: rgba(0, 0, 0, 0.68);
}

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

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

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

.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, 214, 0, 0.55);
    background: rgba(255, 214, 0, 0.08);
    margin-bottom: 14px;
}

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

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

.album-history-value {
    font-family: var(--sca-font-display);
    font-size: 1.6rem;
    line-height: 1;
    margin-bottom: 8px;
    color: var(--sca-white);
}

.album-history-meta {
    font-size: 0.92rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.82);
}

.album-history-list-wrap {
    margin-top: 18px;
}

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

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

.album-history-row {
    display: grid;
    grid-template-columns: minmax(110px, 130px) minmax(0, 1fr);
    gap: 12px;
    padding: 12px;
    border: 1px solid rgba(255, 214, 0, 0.26);
    background: rgba(255, 255, 255, 0.03);
}

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

.album-history-row-meta,
.album-history-row-note,
.album-history-empty {
    font-size: 0.9rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.8);
}

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

@media (max-width: 860px) {
    .album-form-grid {
        grid-template-columns: 1fr !important;
    }

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

    .album-history-row {
        grid-template-columns: 1fr;
    }
}
</style>
@endsection