@extends('layouts.app')
@section('title', 'Sections')

@section('content')
<div class="space-y-6" x-data="{ ...modal() }">
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
        <div>
            <h1 class="text-xl font-bold">Sections</h1>
            <p class="text-sm text-ink-muted">Add extra bar counters, kitchens or restaurant areas, then allocate staff to one or more of them on the
                <a href="{{ route('settings.users.index') }}" class="text-primary-600 font-semibold hover:underline">Users</a> screen. A section's type decides which screen it unlocks. Sales are recorded against the section the person is working in; when none is picked they go to the <b>Main</b> section of that type.</p>
        </div>
        <div class="flex flex-wrap gap-2">
            @include('components.data-transfer', ['type'=>'sections','label'=>'Sections','exportPermission'=>'settings.users','managePermission'=>'users.manage'])
            @can('users.manage')
        <button class="btn-primary btn-sm" x-on:click="$dispatch('open-modal-add-section')"><i data-lucide="plus" class="w-3.5 h-3.5"></i> Add section</button>
        @endcan
        </div>
    </div>

    <div class="card overflow-x-auto">
        <table class="data-table">
            <thead><tr><th>Section</th><th>Unlocks</th><th>Staff</th><th>Status</th><th></th></tr></thead>
            <tbody>
                @forelse ($sections as $section)
                    <tr>
                        <td class="font-medium">{{ $section->name }} @if ($section->is_main)<x-badge color="amber">Main</x-badge>@endif</td>
                        <td><x-badge color="teal">{{ $section->typeLabel() }}</x-badge></td>
                        <td>{{ $section->users_count }}</td>
                        <td><x-badge :color="$section->is_active ? 'emerald' : 'slate'">{{ $section->is_active ? 'Active' : 'Off' }}</x-badge></td>
                        <td class="text-right whitespace-nowrap">
                            @can('users.manage')
                            @unless ($section->is_main)
                            <form method="POST" action="{{ route('settings.sections.main', $section) }}" class="inline">
                                @csrf
                                <button class="btn-ghost btn-sm" title="Unselected sales and earlier history are counted under the main section">Make main</button>
                            </form>
                            @endunless
                            <button class="btn-ghost btn-sm" x-on:click="$dispatch('open-modal-edit-section-{{ $section->id }}')">Edit</button>
                            <form method="POST" action="{{ route('settings.sections.destroy', $section) }}" class="inline" onsubmit="return confirm('Remove {{ addslashes($section->name) }}?')">
                                @csrf @method('DELETE')
                                <button class="btn-ghost btn-sm text-danger">Remove</button>
                            </form>
                            @endcan
                        </td>
                    </tr>

                    <x-modal id="edit-section-{{ $section->id }}" title="Edit {{ $section->name }}">
                        <form method="POST" action="{{ route('settings.sections.update', $section) }}" id="edit-section-{{ $section->id }}-form" class="space-y-4">
                            @csrf @method('PUT')
                            <div><label class="field-label">Name</label><input type="text" name="name" value="{{ $section->name }}" class="input" required></div>
                            <div>
                                <label class="field-label">Type</label>
                                <select name="type" class="input">
                                    @foreach (\App\Models\Section::types() as $value => $label)
                                        <option value="{{ $value }}" @selected($section->type === $value)>{{ $label }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <label class="flex items-center gap-2 text-sm"><input type="checkbox" name="is_active" value="1" @checked($section->is_active)> Active
                                <span class="text-[11px] text-ink-muted">(staff in an inactive section lose the access it gave them)</span></label>
                        </form>
                        <x-slot:footer>
                            <button class="btn-secondary" x-on:click="open = false">Cancel</button>
                            <button form="edit-section-{{ $section->id }}-form" class="btn-primary">Save</button>
                        </x-slot:footer>
                    </x-modal>
                @empty
                    <tr><td colspan="5" class="text-center text-ink-muted py-8">No sections yet.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <x-modal id="add-section" title="Add section">
        <form method="POST" action="{{ route('settings.sections.store') }}" id="add-section-form" class="space-y-4">
            @csrf
            <div><label class="field-label">Name</label><input type="text" name="name" class="input" required placeholder="e.g. Pool Bar, Grill Kitchen"></div>
            <div>
                <label class="field-label">Type</label>
                <select name="type" class="input">
                    @foreach (\App\Models\Section::types() as $value => $label)
                        <option value="{{ $value }}">{{ $label }}</option>
                    @endforeach
                </select>
            </div>
        </form>
        <x-slot:footer>
            <button class="btn-secondary" x-on:click="open = false">Cancel</button>
            <button form="add-section-form" class="btn-primary">Add section</button>
        </x-slot:footer>
    </x-modal>
</div>
@endsection