@extends('admin.layout')

@section('title', $booth ? 'Edit Booth' : 'Add Booth')

@push('styles')
<style>
    .booth-grid { display: grid; grid-template-columns: 1fr 340px; gap: 1.25rem; align-items: start; }
    @media (max-width: 1100px) { .booth-grid { grid-template-columns: 1fr; } }
    .booth-card { padding: 1.35rem 1.5rem; }
    .booth-card h2 { font-size: 1rem; font-weight: 700; margin: 0 0 1.15rem; }
    .form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
    @media (max-width: 640px) { .form-grid-2 { grid-template-columns: 1fr; } }
    .req::after { content: " *"; color: #EF4444; }
    .qr-placeholder {
        min-height: 200px; border: 2px dashed var(--border); border-radius: 14px;
        display: grid; place-items: center; text-align: center; padding: 1.5rem; background: #FAFBFC;
    }
    .qr-placeholder svg { color: #94A3B8; margin-bottom: .75rem; }
    .preview-table { width: 100%; font-size: .82rem; border-collapse: collapse; margin-top: 1rem; }
    .preview-table td { padding: .45rem 0; border-bottom: 1px solid var(--border); vertical-align: top; }
    .preview-table td:first-child { color: var(--muted); width: 42%; }
    .toggle-row { display: flex; justify-content: space-between; align-items: center; padding: .65rem 0; border-bottom: 1px solid #F1F5F9; }
    .toggle-row:last-child { border-bottom: none; }
    .toggle-row label { font-size: .875rem; font-weight: 500; margin: 0; cursor: pointer; }
    .form-switch .form-check-input { width: 2.5rem; height: 1.25rem; cursor: pointer; }
    .upload-zone {
        border: 2px dashed var(--border); border-radius: 12px; padding: 1.25rem; text-align: center;
        background: #FAFBFC; font-size: .82rem; color: var(--muted);
    }
    .form-actions { display: flex; justify-content: flex-end; gap: .75rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--border); }
</style>
@endpush

@section('content')
<div class="pg-head">
    <div>
        <a href="{{ route('mexco.admin.booths') }}" class="cell-sub">Booths › {{ $booth ? 'Edit Booth' : 'Add Booth' }}</a>
        <h1 class="mt-1">{{ $booth ? 'Edit Booth' : 'Add Booth' }}</h1>
    </div>
</div>

<form method="POST" action="{{ $booth ? route('mexco.admin.booths.update', $booth) : route('mexco.admin.booths.store') }}"
      enctype="multipart/form-data">
    @csrf
    @if($booth) @method('PUT') @endif

    <div class="booth-grid">
        <div class="card booth-card">
            <h2>Booth Information</h2>

            <div class="form-grid-2">
                <div class="form-row">
                    <label class="form-label req" for="code">Booth Code</label>
                    <input type="text" name="code" id="code" class="form-input mono @error('code') is-invalid @enderror"
                           value="{{ old('code', $booth->code ?? '') }}" placeholder="e.g. B09" maxlength="16" required
                           data-preview="code">
                    <span class="cell-sub d-block mt-1">Unique code (e.g. B01, B02)</span>
                    @error('code')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
                </div>
                <div class="form-row">
                    <label class="form-label req" for="mark">2-Letter Mark</label>
                    <input type="text" name="mark" id="mark" class="form-input mono @error('mark') is-invalid @enderror"
                           value="{{ old('mark', $booth->mark ?? '') }}" placeholder="e.g. 09" maxlength="2" required
                           data-preview="mark">
                    <span class="cell-sub d-block mt-1">Used in QR code and signage</span>
                    @error('mark')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
                </div>
            </div>

            <div class="form-row">
                <label class="form-label req" for="name">Booth Name</label>
                <input type="text" name="name" id="name" class="form-input @error('name') is-invalid @enderror"
                       value="{{ old('name', $booth->name ?? '') }}" placeholder="e.g. Tech Innovators" required
                       data-preview="name">
                @error('name')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
            </div>

            <div class="form-grid-2">
                <div class="form-row">
                    <label class="form-label" for="location">Location / Area</label>
                    <input type="text" name="location" id="location" class="form-input"
                           value="{{ old('location', $booth->location ?? '') }}" placeholder="e.g. Exhibition Hall A"
                           data-preview="location">
                </div>
                <div class="form-row">
                    <label class="form-label req" for="status">Status</label>
                    <select name="status" id="status" class="form-input" data-preview="status">
                        <option value="active" @selected(old('status', $booth->status ?? 'active') === 'active')>● Active</option>
                        <option value="inactive" @selected(old('status', $booth->status ?? '') === 'inactive')>Inactive</option>
                    </select>
                </div>
            </div>

            <div class="form-row">
                <label class="form-label" for="booth_type">Booth Type</label>
                <select name="booth_type" id="booth_type" class="form-input" data-preview="type">
                    <option value="">Select type</option>
                    <option value="exhibitor" @selected(old('booth_type', $booth->booth_type ?? '') === 'exhibitor')>Exhibitor</option>
                    <option value="sponsor" @selected(old('booth_type', $booth->booth_type ?? '') === 'sponsor')>Sponsor</option>
                    <option value="info_desk" @selected(old('booth_type', $booth->booth_type ?? '') === 'info_desk')>Info Desk</option>
                </select>
                <span class="cell-sub d-block mt-1">e.g. Exhibitor, Sponsor, Info Desk</span>
            </div>

            <div class="form-row">
                <label class="form-label" for="description">Description</label>
                <textarea name="description" id="description" class="form-input" rows="3"
                          placeholder="Brief description of the booth">{{ old('description', $booth->description ?? '') }}</textarea>
            </div>

            <div class="form-row">
                <label class="form-label" for="notes">Notes</label>
                <textarea name="notes" id="notes" class="form-input" rows="2"
                          placeholder="Internal notes (not visible to public)">{{ old('notes', $booth->notes ?? '') }}</textarea>
            </div>
        </div>

        <div class="d-flex flex-column gap-3">
            <div class="card booth-card">
                <h2>QR Code</h2>
                @if($booth)
                    <p class="cell-sub mb-2">QR is available because this booth is registered.</p>
                    <a href="{{ route('mexco.admin.booths.show', $booth) }}" class="btn-purple w-100 text-center">View QR code</a>
                @else
                    <div class="qr-placeholder">
                        <div>
                            <svg width="48" height="48" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
                                <rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/>
                            </svg>
                            <div class="fw-semibold" style="font-size:.9rem;color:var(--ink)">QR generated after save</div>
                            <div class="cell-sub mt-1">Complete registration to generate the stamp QR code.</div>
                        </div>
                    </div>
                @endif

                <table class="preview-table">
                    <tr><td>Booth Code</td><td id="pv-code">{{ old('code', $booth->code ?? '-') }}</td></tr>
                    <tr><td>Booth Name</td><td id="pv-name">{{ old('name', $booth->name ?? '-') }}</td></tr>
                    <tr><td>2-Letter Mark</td><td id="pv-mark">{{ old('mark', $booth->mark ?? '-') }}</td></tr>
                    <tr><td>Status</td><td id="pv-status">{{ ucfirst(old('status', $booth->status ?? 'active')) }}</td></tr>
                </table>
            </div>

            <div class="card booth-card">
                <h2>Settings</h2>
                @php
                    $toggles = [
                        'show_in_map' => ['Show in floor plan / map', old('show_in_map', $booth->show_in_map ?? true)],
                        'allow_checkin' => ['Allow check-in', old('allow_checkin', $booth->allow_checkin ?? false)],
                        'require_approval' => ['Require approval', old('require_approval', $booth->require_approval ?? false)],
                        'visible_public' => ['Visible to public', old('visible_public', $booth->visible_public ?? true)],
                    ];
                    if ($event->allow_voting) {
                        $toggles = [
                            'voting_enabled' => ['Enable voting (participants choose to vote; scans stay stamps only)', old('voting_enabled', $booth->voting_enabled ?? false)],
                        ] + $toggles;
                    }
                @endphp
                @foreach($toggles as $key => [$label, $checked])
                    <div class="toggle-row form-check form-switch">
                        <label for="{{ $key }}">{{ $label }}</label>
                        <input type="hidden" name="{{ $key }}" value="0">
                        <input class="form-check-input" type="checkbox" name="{{ $key }}" id="{{ $key }}" value="1"
                               @checked($checked)>
                    </div>
                @endforeach
            </div>

            <div class="card booth-card">
                <h2>Booth Logo <span class="cell-sub fw-normal">(Optional)</span></h2>
                @if($booth?->logo_path)
                    <img src="{{ asset('storage/'.$booth->logo_path) }}" alt="Booth logo" class="mb-2 rounded" style="max-height:80px">
                @endif
                <label class="upload-zone d-block" for="logo">
                    <div>Drag & drop or click to upload</div>
                    <div class="mt-1">PNG, JPG up to 2MB</div>
                </label>
                <input type="file" name="logo" id="logo" class="d-none" accept="image/png,image/jpeg,image/jpg">
            </div>
        </div>
    </div>

    <div class="form-actions">
        <a href="{{ route('mexco.admin.booths') }}" class="btn-outline">Cancel</a>
        <button type="submit" class="btn-purple">{{ $booth ? 'Save changes' : 'Save Booth' }}</button>
    </div>
</form>
@endsection

@push('scripts')
<script>
document.querySelectorAll('[data-preview]').forEach(el => {
    el.addEventListener('input', updatePreview);
    el.addEventListener('change', updatePreview);
});
function updatePreview() {
    const val = id => document.getElementById(id)?.value.trim() || '-';
    document.getElementById('pv-code').textContent = val('code').toUpperCase();
    document.getElementById('pv-name').textContent = val('name');
    document.getElementById('pv-mark').textContent = val('mark').toUpperCase();
    const st = document.getElementById('status')?.value || 'active';
    document.getElementById('pv-status').textContent = st.charAt(0).toUpperCase() + st.slice(1);
}
document.getElementById('logo')?.addEventListener('change', function() {
    const zone = this.previousElementSibling;
    if (this.files[0]) zone.querySelector('div').textContent = this.files[0].name;
});
</script>
@endpush
