@extends('admin.layout')

@section('title', $booth->name)

@push('head')
<link rel="stylesheet" href="{{ asset('css/mexco-qrcode.css') }}">
<script>window.MEETUP_APP_ICON = @json(asset(config('mexco.logos.app_icon')));</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
<script src="{{ asset('js/mexco-qrcode.js') }}"></script>
@endpush

@push('styles')
<style>
    .booth-show-grid { display: grid; grid-template-columns: 1fr 320px; gap: 1.25rem; align-items: start; }
    @media (max-width: 900px) { .booth-show-grid { grid-template-columns: 1fr; } }
    .detail-card { padding: 1.35rem 1.5rem; }
    .detail-card h2 { font-size: 1rem; font-weight: 700; margin: 0 0 1rem; }
    .detail-row { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid #F1F5F9; font-size: .875rem; }
    .detail-row:last-child { border-bottom: none; }
    .detail-row span:first-child { color: var(--muted); }
    .qr-box { padding: 1.5rem; text-align: center; }
    .vote-stat {
        margin-top: 1rem; padding: 1rem; border-radius: 12px;
        background: #F5F3FF; border: 1px solid #EDE9FE; text-align: center;
    }
    .vote-stat .num { font-size: 1.75rem; font-weight: 800; color: #5B21B6; line-height: 1; }
    .vote-stat .lbl { font-size: .75rem; font-weight: 600; color: #7C3AED; margin-top: .35rem; }
</style>
@endpush

@section('content')
@php
    $typeStyles = [
        'exhibitor' => ['bg' => '#EDE9FE', 'color' => '#6D28D9', 'label' => 'Exhibitor'],
        'sponsor' => ['bg' => '#CCFBF1', 'color' => '#0F766E', 'label' => 'Sponsor'],
        'info_desk' => ['bg' => '#FFEDD5', 'color' => '#C2410C', 'label' => 'Info Desk'],
    ];
    $type = $typeStyles[$booth->booth_type] ?? null;
@endphp

<div class="pg-head">
    <div>
        <a href="{{ route('mexco.admin.booths') }}" class="cell-sub">Booths › {{ $booth->code }}</a>
        <h1 class="mt-1">{{ $booth->name }}</h1>
        <p class="d-flex flex-wrap gap-2 align-items-center mt-1">
            <span class="mono cell-sub">{{ $booth->code }}</span>
            @if($type)
                <span class="status-pill" style="background:{{ $type['bg'] }};color:{{ $type['color'] }}">{{ $type['label'] }}</span>
            @endif
            <form method="POST" action="{{ route('mexco.admin.booths.toggle-status', $booth) }}" class="d-inline-flex">
                @csrf
                <button type="submit"
                    class="status-toggle {{ $booth->status === 'active' ? 'is-active' : '' }}"
                    title="{{ $booth->status === 'active' ? 'Set inactive' : 'Set active' }}">
                    <span class="status-toggle-track" aria-hidden="true"></span>
                    <span class="status-toggle-label">{{ $booth->status === 'active' ? 'Active' : 'Inactive' }}</span>
                </button>
            </form>
        </p>
    </div>
    <div class="pg-actions">
        <a href="{{ route('mexco.admin.booths') }}" class="btn-outline">← Back</a>
        <a href="{{ route('mexco.admin.booths.print', ['booth' => $booth, 'auto' => 1]) }}" class="btn-outline" target="_blank">Print QR</a>
        <a href="{{ route('mexco.admin.booths.edit', $booth) }}" class="btn-purple">Edit Booth</a>
    </div>
</div>

<div class="booth-show-grid">
    <div class="card detail-card">
        <h2>Booth details</h2>
        <div class="detail-row">
            <span>Status</span>
            <form method="POST" action="{{ route('mexco.admin.booths.toggle-status', $booth) }}">
                @csrf
                <button type="submit"
                    class="status-toggle {{ $booth->status === 'active' ? 'is-active' : '' }}"
                    title="{{ $booth->status === 'active' ? 'Set inactive' : 'Set active' }}">
                    <span class="status-toggle-track" aria-hidden="true"></span>
                    <span class="status-toggle-label">{{ $booth->status === 'active' ? 'Active' : 'Inactive' }}</span>
                </button>
            </form>
        </div>
        @if($event->allow_voting)
            <div class="detail-row">
                <span>Voting</span>
                <form method="POST" action="{{ route('mexco.admin.booths.toggle-voting', $booth) }}">
                    @csrf
                    <button type="submit"
                        class="status-toggle {{ $booth->voting_enabled ? 'is-active' : '' }}"
                        title="{{ $booth->voting_enabled ? 'Turn voting off' : 'Turn voting on' }}">
                        <span class="status-toggle-track" aria-hidden="true"></span>
                        <span class="status-toggle-label">{{ $booth->voting_enabled ? 'On' : 'Off' }}</span>
                    </button>
                </form>
            </div>
            <div class="detail-row">
                <span>Votes</span>
                <strong>{{ $booth->votes_count ?? $booth->votes()->count() }}</strong>
            </div>
        @endif
        <div class="detail-row"><span>Booth code</span><strong class="mono">{{ $booth->code }}</strong></div>
        <div class="detail-row"><span>2-letter mark</span><strong class="mono">{{ $booth->mark }}</strong></div>
        <div class="detail-row"><span>Event</span><span>{{ $event->name }}</span></div>
        <div class="detail-row"><span>Location</span><span>{{ $booth->location ?: '-' }}</span></div>
        @if($booth->description)
            <div class="detail-row"><span>Description</span><span>{{ $booth->description }}</span></div>
        @endif
        @if($booth->notes)
            <div class="detail-row"><span>Notes</span><span>{{ $booth->notes }}</span></div>
        @endif
        <div class="detail-row"><span>Floor plan</span><span>{{ $booth->show_in_map ? 'Visible' : 'Hidden' }}</span></div>
        <div class="detail-row"><span>Public listing</span><span>{{ $booth->visible_public ? 'Yes' : 'No' }}</span></div>
    </div>

    <div class="card qr-box no-print">
        <h2 style="font-size:1rem;font-weight:700;margin:0 0 1rem">Stamp QR Code</h2>
        <p class="cell-sub mb-3">{{ config('mexco.apps.pass.name') }} branded QR for participant stamping at this booth.</p>
        <div id="qrcode"></div>
        <div class="cell-name mt-3">{{ $booth->name }}</div>
        <div class="cell-sub mono">{{ $booth->qrPayload() }}</div>
        @if($event->allow_voting && $booth->voting_enabled)
            <div class="vote-stat">
                <div class="num">{{ $booth->votes_count ?? $booth->votes()->count() }}</div>
                <div class="lbl">Votes cast by participants</div>
            </div>
        @endif
        @if($booth->logo_path)
            <img src="{{ asset('storage/'.$booth->logo_path) }}" alt="Logo" class="mt-3 rounded" style="max-height:48px">
        @endif
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    MexcoQR.render(document.getElementById('qrcode'), @json($booth->qrPayload()), 220, {
        colorDark: '#5B21B6'
    });
});
</script>
@endpush
