@extends('layouts.app')

@section('title', 'Configurações — '.config('app.name'))

{{--
    Configurações da arena.

    Hoje há uma seção só: o PERÍODO DE ALUGUEL de cada quadra, em minutos. A
    tela lista todas as quadras cadastradas e grava tudo de uma vez — é um
    registro único de configuração, não uma coleção com criar/excluir.

    O botão "Copiar para todas" é conveniência de JavaScript
    (resources/js/rental-periods.js): copia o valor da PRIMEIRA quadra para as
    demais. O servidor valida e normaliza 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">Configurações</h1>
            <p class="page-head__subtitle">Preferências de operação da sua arena.</p>
        </div>
    </div>

    @include('partials.status')

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

        <div class="card">
            <div class="card-header d-flex flex-wrap gap-2 align-items-center justify-content-between">
                <div>
                    <h2 class="h6 mb-1">Período de aluguel</h2>
                    <p class="text-body-secondary small mb-0">
                        Quanto dura um aluguel em cada quadra, <strong>em minutos</strong>.
                        Ex.: <code>40</code> para 40 min, <code>60</code> para 1 h.
                        Deixe em branco para não definir.
                    </p>
                </div>

                @can(App\Support\Permissions::SETTINGS_UPDATE)
                    {{-- Copia o valor da 1ª quadra para as demais. Desabilitado
                         quando há uma quadra só: não haveria para onde copiar. --}}
                    <button type="button" class="btn btn-outline-primary btn-sm"
                            id="copy-first-period" @disabled($courts->count() < 2)>
                        <i class="bi bi-files me-1"></i> Copiar para todas
                    </button>
                @endcan
            </div>

            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0" id="rental-periods-table">
                    <thead>
                        <tr>
                            <th scope="col">Quadra</th>
                            <th scope="col" style="width: 14rem">Período (minutos)</th>
                            <th scope="col" style="width: 10rem">Equivale a</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($courts as $court)
                            @php($value = old("periods.{$court->id}", $periods->for($court->id)))
                            <tr>
                                <td>
                                    @if (filled($court->color))
                                        <span class="court-color-dot me-1" style="background: {{ $court->color }}"
                                              aria-label="Cor da quadra"></span>
                                    @endif
                                    <span class="fw-semibold">{{ $court->name }}</span>
                                </td>

                                <td>
                                    <input type="number" inputmode="numeric"
                                           class="form-control @error("periods.{$court->id}") is-invalid @enderror"
                                           name="periods[{{ $court->id }}]"
                                           value="{{ $value }}"
                                           min="{{ App\Support\RentalPeriods::MIN_MINUTES }}"
                                           max="{{ App\Support\RentalPeriods::MAX_MINUTES }}"
                                           step="1" placeholder="—"
                                           data-rental-period
                                           aria-label="Período de aluguel de {{ $court->name }}"
                                           @cannot(App\Support\Permissions::SETTINGS_UPDATE) disabled @endcannot>
                                    @error("periods.{$court->id}")
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </td>

                                {{-- Leitura humana do valor JÁ GRAVADO. Não
                                     acompanha a digitação de propósito: mostra o
                                     que está salvo, não o que se está montando. --}}
                                <td class="text-body-secondary">{{ $periods->summary($court->id) }}</td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="3" class="text-center py-5">
                                    <i class="bi bi-bounding-box fs-3 text-body-secondary d-block mb-2"></i>
                                    <span class="text-body-secondary">
                                        Nenhuma quadra cadastrada ainda.
                                        <a href="{{ route('courts.index') }}">Cadastre uma quadra</a> para definir o período.
                                    </span>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        @can(App\Support\Permissions::SETTINGS_UPDATE)
            @if ($courts->isNotEmpty())
                <div class="mt-3">
                    <button type="submit" class="btn btn-primary">Salvar configurações</button>
                </div>
            @endif
        @endcan
    </form>
@endsection