@extends('admin.layout')

@section('title', 'Manage Booths')

@section('content')
@php
    $typeStyles = [
        'exhibitor' => ['bg' => '#EDE9FE', 'color' => '#6D28D9'],
        'sponsor' => ['bg' => '#CCFBF1', 'color' => '#0F766E'],
        'info_desk' => ['bg' => '#FFEDD5', 'color' => '#C2410C'],
    ];
@endphp

<div class="pg-head">
    <div>
        <div class="cell-sub">Booths › Manage Booths</div>
        <h1 class="mt-1">Manage Booths</h1>
        <p>Exhibitor booths, stamp QR codes and floor plan settings.</p>
    </div>
    <div class="pg-actions">
        <a href="{{ route('mexco.admin.booths.export') }}" class="btn-outline">Export ▾</a>
        <a href="{{ route('mexco.admin.booths.create') }}" class="btn-purple">+ Add Booth</a>
    </div>
</div>

@php
    $allVotingOn = $event->allow_voting
        && $totalCount > 0
        && $event->booths->every(fn ($b) => $b->voting_enabled);
@endphp

<div class="card">
    <form method="GET" class="filter-bar">
        <input type="search" name="q" value="{{ $q }}" class="filter-search" placeholder="Search booth code or name…">
        <select name="status" class="filter-select">
            <option value="">All Status</option>
            <option value="active" @selected($statusFilter === 'active')>Active</option>
            <option value="inactive" @selected($statusFilter === 'inactive')>Inactive</option>
        </select>
        <select name="type" class="filter-select">
            <option value="">All Types</option>
            <option value="exhibitor" @selected($typeFilter === 'exhibitor')>Exhibitor</option>
            <option value="sponsor" @selected($typeFilter === 'sponsor')>Sponsor</option>
            <option value="info_desk" @selected($typeFilter === 'info_desk')>Info Desk</option>
        </select>
        <button type="submit" class="filter-btn">
            <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M4 6h16M7 12h10M10 18h4"/></svg>
            Filters
        </button>
    </form>

    <div class="tbl-wrap">
        <table class="data-tbl">
            <thead>
                <tr>
                    <th style="width:36px"><input type="checkbox" disabled aria-label="Select all"></th>
                    <th>Code</th>
                    <th>Booth Name</th>
                    <th>2-Letter Mark</th>
                    <th>Type</th>
                    <th>Location</th>
                    @if($event->allow_voting)
                        <th>Votes</th>
                        <th>
                            <div class="d-flex align-items-center gap-2">
                                <span>Voting</span>
                                @if($totalCount > 0)
                                    <form method="POST" action="{{ route('mexco.admin.booths.toggle-all-voting') }}">
                                        @csrf
                                        <button type="submit"
                                            class="status-toggle {{ $allVotingOn ? 'is-active' : '' }}"
                                            title="{{ $allVotingOn ? 'Turn voting off for all booths' : 'Turn voting on for all booths' }}">
                                            <span class="status-toggle-track" aria-hidden="true"></span>
                                            <span class="status-toggle-label">{{ $allVotingOn ? 'All on' : 'All' }}</span>
                                        </button>
                                    </form>
                                @endif
                            </div>
                        </th>
                    @endif
                    <th>Status</th>
                    <th style="text-align:right">Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse($booths as $b)
                    @php
                        $typeStyle = $typeStyles[$b->booth_type] ?? ['bg' => '#F1F5F9', 'color' => '#64748B'];
                    @endphp
                    <tr>
                        <td><input type="checkbox" disabled aria-label="Select"></td>
                        <td><a href="{{ route('mexco.admin.booths.show', $b) }}" class="link-title mono">{{ $b->code }}</a></td>
                        <td><span class="cell-name">{{ $b->name }}</span></td>
                        <td><span class="mono cell-sub">{{ $b->mark }}</span></td>
                        <td>
                            @if($b->booth_type)
                                <span class="status-pill" style="background:{{ $typeStyle['bg'] }};color:{{ $typeStyle['color'] }}">
                                    {{ app(\App\Services\MeetupService::class)->boothTypeLabel($b->booth_type) }}
                                </span>
                            @else
                                <span class="cell-sub">-</span>
                            @endif
                        </td>
                        <td><span class="cell-sub">{{ $b->location ?: '-' }}</span></td>
                        @if($event->allow_voting)
                            <td>
                                @if($b->voting_enabled)
                                    <strong>{{ $b->votes_count ?? 0 }}</strong>
                                @else
                                    <span class="cell-sub">-</span>
                                @endif
                            </td>
                            <td>
                                <form method="POST" action="{{ route('mexco.admin.booths.toggle-voting', $b) }}">
                                    @csrf
                                    <button type="submit"
                                        class="status-toggle {{ $b->voting_enabled ? 'is-active' : '' }}"
                                        title="{{ $b->voting_enabled ? 'Turn voting off' : 'Turn voting on' }}">
                                        <span class="status-toggle-track" aria-hidden="true"></span>
                                        <span class="status-toggle-label">{{ $b->voting_enabled ? 'On' : 'Off' }}</span>
                                    </button>
                                </form>
                            </td>
                        @endif
                        <td>
                            <form method="POST" action="{{ route('mexco.admin.booths.toggle-status', $b) }}">
                                @csrf
                                <button type="submit"
                                    class="status-toggle {{ $b->status === 'active' ? 'is-active' : '' }}"
                                    title="{{ $b->status === 'active' ? 'Set inactive' : 'Set active' }}">
                                    <span class="status-toggle-track" aria-hidden="true"></span>
                                    <span class="status-toggle-label">{{ $b->status === 'active' ? 'Active' : 'Inactive' }}</span>
                                </button>
                            </form>
                        </td>
                        <td>
                            <div class="tbl-actions">
                                <a href="{{ route('mexco.admin.booths.show', $b) }}" class="icon-btn" title="View & QR">
                                    <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7z"/><circle cx="12" cy="12" r="3"/></svg>
                                </a>
                                <a href="{{ route('mexco.admin.booths.edit', $b) }}" class="icon-btn" title="Edit">
                                    <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M12 20h9M16.5 3.5a2.1 2.1 0 013 3L7 19l-4 1 1-4 12.5-12.5z"/></svg>
                                </a>
                                <form method="POST" action="{{ route('mexco.admin.booths.destroy', $b) }}"
                                      onsubmit="return confirm('Delete booth {{ $b->code }}?')">
                                    @csrf @method('DELETE')
                                    <button type="submit" class="icon-btn danger" title="Delete">
                                        <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M3 6h18M8 6V4h8v2M6 6l1 14h10l1-14"/></svg>
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="{{ $event->allow_voting ? 10 : 8 }}" style="text-align:center;padding:3rem;color:var(--muted)">
                            No booths yet. <a href="{{ route('mexco.admin.booths.create') }}">Add your first booth</a>.
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <div class="tbl-foot">
        <span>Showing {{ $booths->count() ? 1 : 0 }} to {{ $booths->count() }} of {{ $totalCount }} booths</span>
        <div class="pager"><span class="on">1</span></div>
    </div>
</div>
@endsection
