@extends('template.index')

@section('content')
    <div class="content">
        <div class="container mt-3">
            @if (session('success'))
                <div class="alert alert-success">
                    {{ session('success') }}
                </div>
            @endif

            @error('cadastrar')
                <div class="text-danger mt-2">{{ $message }}</div>
            @enderror


            <div class="d-flex align-items-center justify-content-between mb-3">
                <h1 class="mt-2">Cadastrar Plataforma</h1>
                <a class="btn btn-sm btn-primary" href="{{ route('plataformas.index') }}">
                    <span><i class="fa-solid fa-arrow-left mr-2"></i>Voltar</span>
                </a>
            </div>

            <form class="row" action="{{ route('plataformas.store') }}" method="POST">
                @csrf

                {{-- Nome da Plataforma --}}
                <div class="col-12 col-md-6 mb-3">
                    <label class="mb-3" for="name">Nome da Plataforma:</label>
                    <input class="form-control @error('name') is-invalid @enderror" id="name" type="text"
                        name="name" value="{{ old('name') }}" maxlength="120">
                    @error('name')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                {{-- Permissões --}}
                <div class="col-12 mb-3">
                    <h3>Login Permissões</h3>
                    <div class="d-flex flex-wrap">
                        {{-- VIP checkbox normal --}}
                        <div class="col-12 col-md-2">
                            <input class="form-check-input" type="checkbox" name="vip" id="vip" value="vip"
                                {{ old('vip') == 'vip' ? 'checked' : '' }}>
                            <label class="form-check-label" for="vip">Vip</label>
                        </div>

                        {{-- DM checkbox normal --}}
                        <div class="col-12 col-md-2">
                            <input class="form-check-input" type="checkbox" name="dm" id="dm" value="dm"
                                {{ old('dm') == 'dm' ? 'checked' : '' }}>
                            <label class="form-check-label" for="dm">DM</label>
                        </div>

                        {{-- Grupo exclusivo de checkboxes --}}
                        {{-- Livre para todos --}}
                        <div class="col-12 col-md-2">
                            <input class="form-check-input exclusive-checkbox" type="checkbox" name="permissao_free"
                                id="free" value="free" {{ old('permissao_free') == 'free' ? 'checked' : '' }}>
                            <label class="form-check-label" for="free">Livre para todos</label>
                        </div>

                        {{-- Livre por um período --}}
                        <div class="col-12 col-md-3">
                            <input class="form-check-input exclusive-checkbox" type="checkbox" name="permissao_periodo"
                                id="checkbox-periodo" value="livre_periodo"
                                {{ old('permissao_periodo') == 'livre_periodo' ? 'checked' : '' }}>
                            <label class="form-check-label" for="checkbox-periodo">Livre por um período</label>
                        </div>
                    </div>

                    {{-- Exibir erro de permissão customizada --}}
                    @error('permissao')
                        <div class="text-danger mt-2">{{ $message }}</div>
                    @enderror
                </div>

                {{-- Campos de Data (aparecem só se "Livre por um período" estiver marcado) --}}
                <div id="periodo-datas" class="col-12 mb-3" style="display: none;">
                    <div class="d-flex flex-wrap">
                        <div class="col-12 col-md-6 mb-3">
                            <label class="mb-3" for="data_inicio">Data Início</label>
                            <input class="form-control @error('data_inicio') is-invalid @enderror" id="data_inicio"
                                name="data_inicio" type="datetime-local"
                                value="{{ old('data_inicio', date('Y-m-d\TH:i')) }}">
                            @error('data_inicio')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-12 col-md-6 mb-3">
                            <label class="mb-3" for="data_fim">Data Fim</label>
                            <input class="form-control @error('data_fim') is-invalid @enderror" id="data_fim"
                                name="data_fim" type="datetime-local" value="{{ old('data_fim') }}">
                            @error('data_fim')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>

                {{-- Botão --}}
                <div class="col-12 mb-3">
                    <button class="btn btn-sm btn-primary">
                        <i class="fa-solid fa-floppy-disk mr-2"></i>Cadastrar
                    </button>
                </div>
            </form>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const checkboxPeriodo = document.getElementById('checkbox-periodo');
            const campoPeriodo = document.getElementById('periodo-datas');

            // Checkboxes exclusivas
            const exclusiveCheckboxes = document.querySelectorAll('.exclusive-checkbox');

            function togglePeriodoFields() {
                if (checkboxPeriodo.checked) {
                    campoPeriodo.style.display = 'block';
                } else {
                    campoPeriodo.style.display = 'none';
                }
            }

            // Garante que só um checkbox exclusivo seja selecionado
            exclusiveCheckboxes.forEach(checkbox => {
                checkbox.addEventListener('change', function() {
                    if (this.checked) {
                        exclusiveCheckboxes.forEach(cb => {
                            if (cb !== this) cb.checked = false;
                        });
                    }
                    togglePeriodoFields(); // atualiza visibilidade do campo período
                });
            });

            // Atualiza a visibilidade do campo período ao carregar a página
            togglePeriodoFields();
        });
    </script>
@endsection