@extends('template')

@section('conteudo')

    {{-- Breadcrumb --}}
    <nav class="mb-3" style="font-size:0.82rem;">
        <span class="text-muted" style="cursor:pointer;" onclick="carregarConteudo('{{ route('clientes.list') }}')">Clientes</span>
        <span class="text-muted mx-1">/</span>
        <span style="color:var(--primary); font-weight:600;">Novo Cliente</span>
    </nav>

    {{-- Cabecalho --}}
    <div class="d-flex align-items-start justify-content-between mb-4">
        <div class="d-flex align-items-center gap-3">
            <i class="bi bi-person-plus-fill" style="font-size:2rem; color:var(--primary);"></i>
            <div>
                <h4 class="fw-bold mb-0" style="color:var(--primary);">Novo Cliente</h4>
                <span class="text-muted" style="font-size:0.82rem;">Preencha os dados e adicione os contatos do cliente</span>
            </div>
        </div>
        <button type="button" class="btn btn-sm rounded-3 btn-outline-castelo"
                onclick="carregarConteudo('{{ route('clientes.list') }}')">
            <i class="bi bi-arrow-left me-1"></i> Voltar
        </button>
    </div>

    <form id="form-novo-cliente" novalidate>
        @csrf

        {{-- Formulario --}}
        <div class="form-container">

            {{-- Secao: Dados do Cliente --}}
            <div class="form-secao">
                <div class="form-secao-titulo">
                    <i class="bi bi-building me-2"></i>Dados do Cliente
                </div>

                <div class="row g-3">
                    <div class="col-md-2">
                        <label class="form-label fw-semibold" style="font-size:0.82rem;">Codigo</label>
                        <input type="text" class="form-control form-control-sm rounded-3 bg-light"
                               name="dados[codigo]" value="{{ $proximoCodigo }}" readonly>
                    </div>

                    <div class="col-md-2">
                        <label class="form-label fw-semibold" style="font-size:0.82rem;">
                            Tipo <span class="text-danger">*</span>
                        </label>
                        <select class="form-select form-select-sm rounded-3" name="dados[tipo]" required>
                            <option value="">Selecione...</option>
                            <option value="escola">Colégio</option>
                            <option value="agencia">Agência</option>
                        </select>
                        <div class="invalid-feedback">Selecione o tipo.</div>
                    </div>

                    <div class="col-md-2">
                        <label class="form-label fw-semibold" style="font-size:0.82rem;">
                            Status <span class="text-danger">*</span>
                        </label>
                        <select class="form-select form-select-sm rounded-3" name="dados[status]" required>
                            <option value="ativo" selected>Ativo</option>
                            <option value="inativo">Inativo</option>
                        </select>
                    </div>

                    <div class="col-md-6">
                        <label class="form-label fw-semibold" style="font-size:0.82rem;">
                            Nome <span class="text-danger">*</span>
                        </label>
                        <input type="text" class="form-control form-control-sm rounded-3"
                               name="dados[nome]" required
                               placeholder="Nome completo da escola ou agencia">
                        <div class="invalid-feedback">Informe o nome.</div>
                    </div>

                    <div class="col-md-3">
                        <label class="form-label fw-semibold" style="font-size:0.82rem;">CNPJ</label>
                        <input type="text" class="form-control form-control-sm rounded-3"
                               name="dados[cnpj]"
                               data-mascara="cnpj"
                               placeholder="00.000.000/0000-00" maxlength="18">
                    </div>

                    <div class="col-md-3">
                        <label class="form-label fw-semibold" style="font-size:0.82rem;">Telefone</label>
                        <input type="text" class="form-control form-control-sm rounded-3"
                               name="dados[telefone]"
                               data-mascara="telefone"
                               placeholder="(00) 0000-0000" maxlength="16">
                    </div>

                    <div class="col-md-6">
                        <label class="form-label fw-semibold" style="font-size:0.82rem;">E-mail</label>
                        <input type="email" class="form-control form-control-sm rounded-3"
                               name="dados[email]"
                               placeholder="contato@escola.com.br">
                        <div class="invalid-feedback">Informe um e-mail valido.</div>
                    </div>

                    <div class="col-md-4">
                        <label class="form-label fw-semibold" style="font-size:0.82rem;">Regiao</label>
                        <input type="text" class="form-control form-control-sm rounded-3"
                               name="dados[regiao]"
                               placeholder="Ex: Interior SP, Grande SP...">
                    </div>

                    <div class="col-md-8">
                        <label class="form-label fw-semibold" style="font-size:0.82rem;">Responsavel Comercial</label>
                        <input type="text" class="form-control form-control-sm rounded-3"
                               name="dados[responsavel_comercial]"
                               placeholder="Vendedor responsavel pela conta">
                    </div>
                </div>
            </div>

            {{-- Secao: Contatos --}}
            <div class="form-secao">
                <div class="d-flex align-items-center justify-content-between mb-3">
                    <div class="form-secao-titulo mb-0" style="flex:1;">
                        <i class="bi bi-person-lines-fill me-2"></i>Contatos
                    </div>
                    <button type="button" class="btn btn-sm rounded-3 btn-outline-castelo ms-3"
                            onclick="adicionarContatoForm()">
                        <i class="bi bi-plus-circle me-1"></i> Adicionar
                    </button>
                </div>

                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0" id="tabelaContatos" style="font-size:0.855rem;">
                        <thead>
                            <tr class="text-muted" style="font-size:0.78rem; border-bottom:2px solid #eef1fb;">
                                <th class="fw-semibold py-2" style="width:30px;">#</th>
                                <th class="fw-semibold">Nome <span class="text-danger">*</span></th>
                                <th class="fw-semibold">Cargo</th>
                                <th class="fw-semibold">Telefone</th>
                                <th class="fw-semibold">Celular</th>
                                <th class="fw-semibold">E-mail</th>
                                <th class="fw-semibold text-center" style="width:80px;">Principal</th>
                                <th class="fw-semibold text-end" style="width:60px;">Acoes</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="text-center align-middle">
                                    <span class="fw-bold text-muted" style="font-size:0.78rem;">1</span>
                                </td>
                                <td>
                                    <input type="text" class="form-control form-control-sm rounded-3"
                                           name="contatos[0][nome]" required
                                           placeholder="Nome do contato">
                                    <div class="invalid-feedback">Informe o nome.</div>
                                </td>
                                <td>
                                    <input type="text" class="form-control form-control-sm rounded-3"
                                           name="contatos[0][cargo]" placeholder="Cargo">
                                </td>
                                <td>
                                    <input type="text" class="form-control form-control-sm rounded-3"
                                           name="contatos[0][telefone]"
                                           data-mascara="telefone"
                                           placeholder="(00) 0000-0000" maxlength="16">
                                </td>
                                <td>
                                    <input type="text" class="form-control form-control-sm rounded-3"
                                           name="contatos[0][celular]"
                                           data-mascara="telefone"
                                           placeholder="(00) 00000-0000" maxlength="16">
                                </td>
                                <td>
                                    <input type="email" class="form-control form-control-sm rounded-3"
                                           name="contatos[0][email]"
                                           placeholder="email@exemplo.com">
                                </td>
                                <td class="text-center">
                                    <input type="radio" name="contato_principal" checked
                                           style="accent-color:var(--primary);">
                                    <input type="hidden" name="contatos[0][principal]" value="1">
                                </td>
                                <td class="text-end">
                                    <button type="button" class="btn btn-sm border-0 p-1"
                                            style="color:#c62828;"
                                            onclick="removerContatoForm(this)" disabled
                                            title="Remover contato">
                                        <i class="bi bi-trash-fill"></i>
                                    </button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

        </div>{{-- /.form-container --}}

        {{-- Acoes --}}
        <div class="d-flex justify-content-end gap-2">
            <button type="button" class="btn btn-sm btn-outline-secondary rounded-3"
                    onclick="carregarConteudo('{{ route('clientes.list') }}')">
                <i class="bi bi-x-circle me-1"></i> Cancelar
            </button>
            <button type="button" id="btn-salvar-cliente" class="btn btn-sm rounded-3 text-white"
                    style="background:var(--primary);"
                    onclick="submeterForm('/clientes/salvar', 'form-novo-cliente', 'btn-salvar-cliente')">
                <i class="bi bi-floppy me-1"></i> Salvar
            </button>
        </div>

    </form>

    <script src="{{ asset('js/clientes.js') }}"></script>

@endsection