@extends('layouts.app')

@section('content')
@php
    $isEdit = isset($turntable) && $turntable->exists;
    $formAction = $isEdit ? route('turntables.update', $turntable) : route('turntables.store');
    $pageTitle = $isEdit ? 'Edit Turntable' : 'Add Turntable';
    $tonearm1 = $turntable->tonearms[0] ?? null;
    $tonearm2 = $turntable->tonearms[1] ?? null;
    $deckType = old('deck_type', $turntable->deck_type ?? 'Turntable');
    $tonearmChangeable = old('tonearm_changeable', $turntable->tonearm_changeable ?? true);
    $cartridgeChangeable = old('cartridge_changeable', $turntable->cartridge_changeable ?? true);
    $supportsMultiple = old('supports_multiple_tonearms', $turntable->supports_multiple_tonearms ?? false);
    $isDefaultSelection = old('is_default_selection', $turntable->is_default_selection ?? false);
@endphp

<div class="sca-app">
    <style>
        :root {
            --sca-yellow: #FFB81C;
            --sca-black: #000000;
            --sca-white: #FFFFFF;
            --sca-font-display: Georgia, serif;
            --sca-font-ui: Arial, Helvetica, sans-serif;
        }
        .sca-app { min-height: 100vh; background: var(--sca-white); color: var(--sca-black); font-family: var(--sca-font-ui); }
        .sca-shell { max-width: 1120px; margin: 0 auto; padding: 24px; }
        .sca-top-rule, .sca-section-rule { height: 6px; background: var(--sca-yellow); border: 1px solid var(--sca-black); border-radius: 999px; }
        .sca-top-rule { margin-bottom: 24px; }
        .sca-header { display: grid; gap: 18px; margin-bottom: 28px; }
        .sca-wordmark { max-width: min(760px, 100%); height: auto; display: block; }
        .sca-display-title { font-family: var(--sca-font-display); font-size: 30px; line-height: 1; font-weight: 700; margin: 16px 0 0 0; }
        .sca-meta { font-size: 14px; line-height: 1.5; color: rgba(0,0,0,.72); }
        .sca-page-grid { display: grid; gap: 24px; }
        .sca-panel { border: 1px solid var(--sca-black); border-radius: 14px; background: var(--sca-white); overflow: hidden; }
        .sca-panel-accent { background: var(--sca-yellow); }
        .sca-panel-head { padding: 14px 14px 0 14px; display: grid; gap: 10px; }
        .sca-panel-body { padding: 14px; display: grid; gap: 14px; }
        .sca-panel-title { font-family: var(--sca-font-display); font-size: 18px; line-height: 1; font-weight: 700; margin: 0; }
        .sca-form-grid { display: grid; gap: 16px; }
        .sca-two-col { display: grid; gap: 14px; }
        .sca-field { display: grid; gap: 8px; }
        .sca-label { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0; }
        .sca-input, .sca-select, .sca-textarea { width: 100%; box-sizing: border-box; display: block; border: 1px solid var(--sca-black); border-radius: 10px; background: var(--sca-white); color: var(--sca-black); font-family: var(--sca-font-ui); font-size: 16px; font-weight: 500; }
        .sca-input, .sca-select { min-height: 48px; padding: 12px 14px; }
        .sca-textarea { min-height: 112px; padding: 12px 14px; resize: vertical; }
        .sca-input:focus-visible, .sca-select:focus-visible, .sca-textarea:focus-visible, .sca-btn:focus-visible { outline: 2px solid var(--sca-black); outline-offset: 2px; }
        .sca-btn-row { display: grid; gap: 12px; }
        .sca-btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; padding: 12px 18px; border: 1px solid var(--sca-black); border-radius: 999px; font-family: var(--sca-font-ui); font-size: 16px; font-weight: 600; cursor: pointer; text-decoration: none; }
        .sca-btn-primary { background: var(--sca-black); color: var(--sca-white); }
        .sca-btn-secondary { background: var(--sca-white); color: var(--sca-black); }
        .sca-alert { border: 1px solid var(--sca-black); border-radius: 10px; padding: 12px 14px; background: #fff1f1; color: #7a0000; font-size: 14px; }
        .sca-success { border: 1px solid var(--sca-black); border-radius: 10px; padding: 12px 14px; background: #eefbe9; color: #173d10; font-size: 14px; }
        @media (min-width: 900px) { .sca-two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sca-btn-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    </style>

    <div class="sca-shell">
        <div class="sca-top-rule"></div>

        <header class="sca-header">
            <div>
                <img class="sca-wordmark" src="{{ asset('images/SCA_wordmark.png') }}" alt="Secret Chord Analogue">
                <h1 class="sca-display-title">{{ $pageTitle }}</h1>
            </div>
            <div class="sca-meta">
                Configure decks, tonearm capability, and cartridge assignment using the same panel-based interaction style employed throughout Play Log.
            </div>

            @if(session('status'))
                <div class="sca-success">{{ session('status') }}</div>
            @endif

            @if($errors->any())
                <div class="sca-alert">
                    <strong>Please correct the following:</strong>
                    <ul style="margin:8px 0 0 18px; padding:0;">
                        @foreach($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif
        </header>

        <form method="POST" action="{{ $formAction }}">
            @csrf
            @if($isEdit)
                @method('PUT')
            @endif

            <div class="sca-page-grid">
                <section class="sca-panel sca-panel-accent">
                    <div class="sca-panel-head">
                        <div class="sca-panel-title">Deck Details</div>
                        <div class="sca-section-rule"></div>
                    </div>
                    <div class="sca-panel-body">
                        <div class="sca-form-grid">
                            <div class="sca-two-col">
                                <div class="sca-field">
                                    <label class="sca-label">Name</label>
                                    <input type="text" name="name" class="sca-input" value="{{ old('name', $turntable->name ?? '') }}" required>
                                </div>
                                <div class="sca-field">
                                    <label class="sca-label">Deck Type</label>
                                    <select id="deck_type" name="deck_type" class="sca-select">
                                        <option value="Turntable" @selected($deckType === 'Turntable')>Turntable</option>
                                        <option value="Record Player" @selected($deckType === 'Record Player')>Record Player</option>
                                    </select>
                                </div>
                            </div>

                            <div class="sca-two-col">
                                <div class="sca-field">
                                    <label class="sca-label">Manufacturer</label>
                                    <input type="text" name="manufacturer" class="sca-input" value="{{ old('manufacturer', $turntable->manufacturer ?? '') }}">
                                </div>
                                <div class="sca-field">
                                    <label class="sca-label">Model</label>
                                    <input type="text" name="model" class="sca-input" value="{{ old('model', $turntable->model ?? '') }}">
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

                <section class="sca-panel sca-panel-accent">
                    <div class="sca-panel-head">
                        <div class="sca-panel-title">Configuration</div>
                        <div class="sca-section-rule"></div>
                    </div>
                    <div class="sca-panel-body">
                        <div class="sca-two-col">
                            <div class="sca-field">
                                <label class="sca-label">Can the Tonearm be changed?</label>
                                <select id="tonearm_changeable" name="tonearm_changeable" class="sca-select">
                                    <option value="1" @selected((string)$tonearmChangeable === '1' || $tonearmChangeable === true)>Yes</option>
                                    <option value="0" @selected((string)$tonearmChangeable === '0' || $tonearmChangeable === false)>No</option>
                                </select>
                            </div>

                            <div class="sca-field">
                                <label class="sca-label">Can the Cartridge be changed?</label>
                                <select id="cartridge_changeable" name="cartridge_changeable" class="sca-select">
                                    <option value="1" @selected((string)$cartridgeChangeable === '1' || $cartridgeChangeable === true)>Yes</option>
                                    <option value="0" @selected((string)$cartridgeChangeable === '0' || $cartridgeChangeable === false)>No</option>
                                </select>
                            </div>
                        </div>

                        <div class="sca-two-col">
    <div class="sca-field" id="multiple-tonearms-wrapper" style="display:block;">
        <label class="sca-label">Supports Multiple Tonearms?</label>
        <select id="supports_multiple_tonearms" name="supports_multiple_tonearms" class="sca-select">
            <option value="0" @selected((string)$supportsMultiple === '0' || $supportsMultiple === false)>No</option>
            <option value="1" @selected((string)$supportsMultiple === '1' || $supportsMultiple === true)>Yes</option>
        </select>
    </div>

    <div class="sca-field">
        <label class="sca-label">Default for Play Log Entry?</label>
        <select name="is_default_selection" class="sca-select">
            <option value="0" @selected((string)$isDefaultSelection === '0' || $isDefaultSelection === false)>No</option>
            <option value="1" @selected((string)$isDefaultSelection === '1' || $isDefaultSelection === true)>Yes</option>
        </select>
    </div>
</div>

                        <div id="tonearm-assignment-block" class="sca-form-grid">
                            <div class="sca-two-col">
                                <div class="sca-field">
                                    <label class="sca-label">Tonearm 1</label>
                                    <select name="tonearm_1_id" class="sca-select">
                                        <option value="">— None —</option>
                                        @foreach(($tonearms ?? []) as $tonearm)
                                            <option value="{{ $tonearm->id }}" @selected(old('tonearm_1_id', $tonearm1?->id) == $tonearm->id)>
                                                {{ $tonearm->name }}{{ $tonearm->role ? ' (' . $tonearm->role . ')' : '' }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="sca-field" id="cartridge-1-wrapper">
                                    <label class="sca-label">Cartridge 1</label>
                                    <select name="cartridge_1_id" class="sca-select">
                                        <option value="">— None —</option>
                                        @foreach(($cartridges ?? []) as $cartridge)
                                            <option value="{{ $cartridge->id }}" @selected(old('cartridge_1_id', $tonearm1?->cartridge?->id) == $cartridge->id)>
                                                {{ $cartridge->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <div id="second-tonearm-block" class="sca-two-col" style="display: {{ $supportsMultiple ? 'grid' : 'none' }};">
                                <div class="sca-field">
                                    <label class="sca-label">Tonearm 2</label>
                                    <select name="tonearm_2_id" class="sca-select">
                                        <option value="">— None —</option>
                                        @foreach(($tonearms ?? []) as $tonearm)
                                            <option value="{{ $tonearm->id }}" @selected(old('tonearm_2_id', $tonearm2?->id) == $tonearm->id)>
                                                {{ $tonearm->name }}{{ $tonearm->role ? ' (' . $tonearm->role . ')' : '' }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="sca-field" id="cartridge-2-wrapper">
                                    <label class="sca-label">Cartridge 2</label>
                                    <select name="cartridge_2_id" class="sca-select">
                                        <option value="">— None —</option>
                                        @foreach(($cartridges ?? []) as $cartridge)
                                            <option value="{{ $cartridge->id }}" @selected(old('cartridge_2_id', $tonearm2?->cartridge?->id) == $cartridge->id)>
                                                {{ $cartridge->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

                <section class="sca-panel sca-panel-accent">
                    <div class="sca-panel-head">
                        <div class="sca-panel-title">Notes & Actions</div>
                        <div class="sca-section-rule"></div>
                    </div>
                    <div class="sca-panel-body">
                        <div class="sca-field">
                            <label class="sca-label">Notes</label>
                            <textarea name="notes" class="sca-textarea">{{ old('notes', $turntable->notes ?? '') }}</textarea>
                        </div>

                        <div class="sca-btn-row">
                            <button type="submit" class="sca-btn sca-btn-primary">{{ $isEdit ? 'Save Turntable Changes' : 'Create Turntable' }}</button>
                            <a href="{{ route('turntables.index') }}" class="sca-btn sca-btn-secondary">Cancel</a>
                        </div>
                    </div>
                </section>
            </div>
        </form>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const deckType = document.getElementById('deck_type');
    const tonearmChangeable = document.getElementById('tonearm_changeable');
    const cartridgeChangeable = document.getElementById('cartridge_changeable');
    const multipleWrapper = document.getElementById('multiple-tonearms-wrapper');
    const multipleSelect = document.getElementById('supports_multiple_tonearms');
    const tonearmBlock = document.getElementById('tonearm-assignment-block');
    const secondTonearmBlock = document.getElementById('second-tonearm-block');
    const cartridge1Wrapper = document.getElementById('cartridge-1-wrapper');
    const cartridge2Wrapper = document.getElementById('cartridge-2-wrapper');

    function refreshFormState() {
        const isRecordPlayer = deckType && deckType.value === 'Record Player';
        const canChangeTonearm = tonearmChangeable && tonearmChangeable.value === '1';
        const canChangeCartridge = cartridgeChangeable && cartridgeChangeable.value === '1';
        const supportsMultiple = multipleSelect && multipleSelect.value === '1';

        if (multipleWrapper) {
            multipleWrapper.style.display = (!isRecordPlayer && canChangeTonearm) ? 'grid' : 'none';
        }

        if (tonearmBlock) {
            tonearmBlock.style.display = canChangeTonearm ? 'grid' : 'none';
        }

        if (secondTonearmBlock) {
            secondTonearmBlock.style.display = (!isRecordPlayer && canChangeTonearm && supportsMultiple) ? 'grid' : 'none';
        }

        if (cartridge1Wrapper) {
            cartridge1Wrapper.style.display = canChangeCartridge ? 'grid' : 'none';
        }

        if (cartridge2Wrapper) {
            cartridge2Wrapper.style.display = canChangeCartridge ? 'grid' : 'none';
        }

        if (isRecordPlayer && multipleSelect) {
            multipleSelect.value = '0';
            if (secondTonearmBlock) {
                secondTonearmBlock.style.display = 'none';
            }
        }
    }

    [deckType, tonearmChangeable, cartridgeChangeable, multipleSelect].forEach(function (el) {
        if (el) {
            el.addEventListener('change', refreshFormState);
        }
    });

    refreshFormState();
});
</script>
@endsection