@extends('layouts.app')

@section('title', 'Horários de funcionamento — '.config('app.name'))

{{--
    Horários de funcionamento da arena.

    Um acordeão com um bloco por dia. Cada dia é independente (sem
    data-bs-parent) de propósito: se a validação falhar num dia recolhido, ele
    é reaberto — um erro escondido atrás de um cabeçalho fechado passaria por
    "salvou" aos olhos de quem enviou.

    O botão "Copiar de Segunda-feira" e o liga/desliga dos campos de horário são
    conveniências de JavaScript (resources/js/schedule.js). O servidor valida e
    normaliza tudo de novo, então a tela funciona sem script — só menos
    confortável.
--}}

@section('content')
    <div class="page-head">
        <div>
            <h1 class="page-head__title">Horários de Funcionamento</h1>
            <p class="page-head__subtitle">Configure a abertura e o fechamento, ou marque como 24 horas.</p>
        </div>

        <div class="d-flex gap-2">
            <button type="button" class="btn btn-outline-primary" id="copy-monday" form="schedule-form">
                <i class="bi bi-files me-1"></i> Copiar de Segunda-feira
            </button>
            <a href="{{ route('organization.show') }}" class="btn btn-outline-secondary">Voltar</a>
        </div>
    </div>

    @include('partials.status')

    <form method="POST" action="{{ route('organization.schedule.update') }}" id="schedule-form">
        @csrf
        @method('PUT')

        <div class="accordion mb-4" id="schedule-accordion">
            @foreach ($weekdays as $day)
                @php
                    $key = $day->value;
                    $current = $schedule->day($key);
                    $open = (bool) old("schedule.{$key}.open", $current['open']);
                    $is24h = (bool) old("schedule.{$key}.is_24h", $current['is_24h']);
                    // Reabre o dia se ele tem erro, ou se é o primeiro (segunda).
                    $hasError = $errors->has("schedule.{$key}.opens_at") || $errors->has("schedule.{$key}.closes_at");
                    $expanded = $loop->first || $hasError;
                @endphp

                <div class="accordion-item" data-schedule-day="{{ $key }}">
                    <h2 class="accordion-header">
                        <button class="accordion-button @unless ($expanded) collapsed @endunless" type="button"
                                data-bs-toggle="collapse" data-bs-target="#day-{{ $key }}"
                                aria-expanded="{{ $expanded ? 'true' : 'false' }}">
                            {{ $day->label() }}
                        </button>
                    </h2>

                    <div id="day-{{ $key }}" class="accordion-collapse collapse @if ($expanded) show @endif">
                        <div class="accordion-body">
                            <div class="row g-3 align-items-end">
                                <div class="col-12 col-md-3">
                                    {{-- Hidden antes do checkbox: checkbox desmarcado
                                         não é enviado, e sem o 0 o servidor não
                                         distinguiria "fechado" de "não mexeu". --}}
                                    <input type="hidden" name="schedule[{{ $key }}][open]" value="0">
                                    <div class="form-check form-switch">
                                        <input type="checkbox" value="1" class="form-check-input"
                                               id="open-{{ $key }}" name="schedule[{{ $key }}][open]"
                                               data-schedule-open @checked($open)>
                                        <label class="form-check-label" for="open-{{ $key }}">Aberto neste dia</label>
                                    </div>
                                </div>

                                <div class="col-12 col-md-3">
                                    <input type="hidden" name="schedule[{{ $key }}][is_24h]" value="0">
                                    <div class="form-check form-switch">
                                        <input type="checkbox" value="1" class="form-check-input"
                                               id="is24h-{{ $key }}" name="schedule[{{ $key }}][is_24h]"
                                               data-schedule-24h @checked($is24h)>
                                        <label class="form-check-label" for="is24h-{{ $key }}">Funciona 24h</label>
                                    </div>
                                </div>

                                <div class="col-6 col-md-3">
                                    <label class="form-label small" for="opens-{{ $key }}">Abertura</label>
                                    <input type="time" id="opens-{{ $key }}"
                                           name="schedule[{{ $key }}][opens_at]"
                                           value="{{ old("schedule.{$key}.opens_at", $current['opens_at']) }}"
                                           data-schedule-opens
                                           class="form-control @error("schedule.{$key}.opens_at") is-invalid @enderror">
                                    @error("schedule.{$key}.opens_at")<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>

                                <div class="col-6 col-md-3">
                                    <label class="form-label small" for="closes-{{ $key }}">Fechamento</label>
                                    <input type="time" id="closes-{{ $key }}"
                                           name="schedule[{{ $key }}][closes_at]"
                                           value="{{ old("schedule.{$key}.closes_at", $current['closes_at']) }}"
                                           data-schedule-closes
                                           class="form-control @error("schedule.{$key}.closes_at") is-invalid @enderror">
                                    @error("schedule.{$key}.closes_at")<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>

        <button type="submit" class="btn btn-primary">Salvar horários</button>
    </form>
@endsection