@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;">Editar 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-pencil-square" style="font-size:2rem; color:var(--primary);"></i>
            <div>
                <h4 class="fw-bold mb-0" style="color:var(--primary);">{{ $cliente->nome }}</h4>
                <span class="text-muted" style="font-size:0.82rem;">{{ $cliente->codigo }} &middot; Edicao de cadastro</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-editar-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="{{ $cliente->codigo }}" 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="escola"  {{ $cliente->tipo->value === 'escola'  ? 'selected' : '' }}>Colégio</option>
                            <option value="agencia" {{ $cliente->tipo->value === 'agencia' ? 'selected' : '' }}>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"   {{ $cliente->status->value === 'ativo'   ? 'selected' : '' }}>Ativo</option>
                            <option value="inativo" {{ $cliente->status->value === 'inativo' ? 'selected' : '' }}>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 value="{{ $cliente->nome }}"
                               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]" value="{{ $cliente->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]" value="{{ $cliente->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]" value="{{ $cliente->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]" value="{{ $cliente->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]" value="{{ $cliente->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>
                            @forelse($contatos as $i => $c)
                            <tr>
                                <td class="text-center align-middle">
                                    <span class="fw-bold text-muted" style="font-size:0.78rem;">{{ $i + 1 }}</span>
                                </td>
                                <td>
                                    <input type="hidden" name="contatos[{{ $i }}][id]" value="{{ $c->id }}">
                                    <input type="text" class="form-control form-control-sm rounded-3"
                                           name="contatos[{{ $i }}][nome]" required
                                           value="{{ $c->nome }}" 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[{{ $i }}][cargo]" placeholder="Cargo"
                                           value="{{ $c->cargo }}">
                                </td>
                                <td>
                                    <input type="text" class="form-control form-control-sm rounded-3"
                                           name="contatos[{{ $i }}][telefone]"
                                           placeholder="(00) 0000-0000" maxlength="16"
                                           data-mascara="telefone"
                                           value="{{ $c->telefone }}">
                                </td>
                                <td>
                                    <input type="text" class="form-control form-control-sm rounded-3"
                                           name="contatos[{{ $i }}][celular]"
                                           placeholder="(00) 00000-0000" maxlength="16"
                                           data-mascara="telefone"
                                           value="{{ $c->celular }}">
                                </td>
                                <td>
                                    <input type="email" class="form-control form-control-sm rounded-3"
                                           name="contatos[{{ $i }}][email]"
                                           placeholder="email@exemplo.com"
                                           value="{{ $c->email }}">
                                </td>
                                <td class="text-center">
                                    <input type="radio" name="contato_principal"
                                           style="accent-color:var(--primary);"
                                           onchange="marcarPrincipalForm(this)"
                                           {{ $c->principal ? 'checked' : '' }}>
                                    <input type="hidden" name="contatos[{{ $i }}][principal]"
                                           value="{{ $c->principal ? '1' : '0' }}">
                                </td>
                                <td class="text-end">
                                    <button type="button" class="btn btn-sm border-0 p-1"
                                            style="color:#c62828;"
                                            onclick="removerContatoForm(this)"
                                            {{ $c->principal ? 'disabled' : '' }}
                                            title="Remover contato">
                                        <i class="bi bi-trash-fill"></i>
                                    </button>
                                </td>
                            </tr>
                            @empty
                            <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>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>

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

        {{-- Acoes --}}
        <div class="d-flex justify-content-end gap-2 mb-4">
            <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-edicao" class="btn btn-sm rounded-3 text-white"
                    style="background:var(--primary);"
                    onclick="submeterForm('/clientes/{{ $cliente->id }}/atualizar', 'form-editar-cliente', 'btn-salvar-edicao')">
                <i class="bi bi-floppy me-1"></i> Atualizar
            </button>
        </div>

    </form>

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

@endsection