@php
$title = 'Editar Cliente';
@endphp

<div>
    <nav aria-label="breadcrumb" class="mb-2" style="margin-top: 10px;">
        <ol class="breadcrumb bg-transparent px-0 py-1 mb-1" style="font-size: 0.98rem;">
            <li class="breadcrumb-item"><a href="/" class="text-decoration-none text-secondary">Início</a></li>
            <li class="breadcrumb-item"><a href="#" onclick="carregarConteudo(`{{ route('clientes.list') }}`)" class="text-decoration-none text-secondary">Clientes</a></li>
            <li class="breadcrumb-item active text-dark" aria-current="page">Editar Cliente</li>
        </ol>
    </nav>
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="fw-bold mb-0" style="font-size:2.1rem; letter-spacing:1px;">
                <i class="bi bi-people me-2 text-primary"></i>Editar Cliente
            </h1>
            <span class="text-muted small">Edite as informações do cliente</span>
        </div>
        <div>
            <button type="button" class="btn btn-sm btn-outline-info me-2" onclick="carregarConteudo(`{{ route('clientes.detail', $cliente->id) }}`)">
                <i class="bi bi-eye me-2"></i>Visualizar
            </button>
            <button type="button" class="btn btn-sm btn-outline-secondary" onclick="carregarConteudo(`{{ route('clientes.list') }}`)">
                <i class="bi bi-arrow-left me-2"></i>Voltar
            </button>
        </div>
    </div>

    <div class="card shadow border-0 mb-4">
        <div class="card-header bg-white border-0 pb-1">
            <span class="fw-bold">Dados do Cliente</span>
        </div>
        <div class="card-body">
            <form id="formEditarCliente" class="needs-validation" novalidate>
                @csrf
                @method('PUT')
                <input type="hidden" name="id" value="{{ $cliente->id }}">
                
                <div class="row mb-3">
                    <div class="col-md-2">
                        <label for="codigo" class="form-label required-field">Código</label>
                        <input type="text" class="form-control" id="codigo" name="dados[codigo]" value="{{ isset($cliente) ? $cliente->codigo : '' }}" readonly>
                        <div class="invalid-feedback">Por favor, informe o código.</div>
                    </div>
                    <div class="col-md-6">
                        <label for="razao_social" class="form-label">Razão Social</label>
                        <input type="text" class="form-control" id="razao_social" name="dados[razao_social]" value="{{ isset($cliente) ? $cliente->razao_social : '' }}">
                    </div>
                    <div class="col-md-4">
                        <label for="nome_fantasia" class="form-label required-field">Nome Fantasia</label>
                        <input type="text" class="form-control" id="nome_fantasia" name="dados[nome_fantasia]" value="{{ isset($cliente) ? $cliente->nome_fantasia : '' }}" required>
                        <div class="invalid-feedback">Por favor, informe o nome fantasia.</div>
                    </div>
                </div>
                <div class="row mb-3">
                    <div class="col-md-3">
                        <label for="cnpj" class="form-label">CNPJ</label>
                        <input type="text" class="form-control" id="cnpj" name="dados[cnpj]" value="{{ isset($cliente) ? $cliente->cnpj : '' }}" data-mask="cnpj">
                    </div>
                    <div class="col-md-3">
                        <label for="inscricao_estadual" class="form-label">Inscrição Estadual</label>
                        <input type="text" class="form-control" id="inscricao_estadual" name="dados[inscricao_estadual]" value="{{ isset($cliente) ? $cliente->inscricao_estadual : '' }}">
                    </div>
                    <div class="col-md-4">
                        <label for="inscricao_municipal" class="form-label">Inscrição Municipal</label>
                        <input type="text" class="form-control" id="inscricao_municipal" name="dados[inscricao_municipal]" value="{{ isset($cliente) ? $cliente->inscricao_municipal : '' }}">
                    </div>
                    <div class="col-md-2">
                        <label for="status" class="form-label required-field">Status</label>
                        <select class="form-select" id="status" name="dados[status]" required>
                            <option value="">Selecione...</option>
                            <option value="ATIVO" {{ isset($cliente) && $cliente->status == 'ATIVO' ? 'selected' : '' }}>Ativo</option>
                            <option value="INATIVO" {{ isset($cliente) && $cliente->status == 'INATIVO' ? 'selected' : '' }}>Inativo</option>
                        </select>
                        <div class="invalid-feedback">Por favor, selecione o status.</div>
                    </div>
                </div>
                <div class="row mb-3">
                    <div class="col-md-3">
                        <label for="telefone" class="form-label">Telefone</label>
                        <input type="text" class="form-control" id="telefone" name="dados[telefone]" value="{{ isset($cliente) ? $cliente->telefone : '' }}" data-mask="phone-flexible">
                    </div>
                    <div class="col-md-6">
                        <label for="email" class="form-label required-field">E-mail</label>
                        <input type="email" class="form-control" id="email" name="dados[email]" value="{{ isset($cliente) ? $cliente->email : '' }}" required>
                        <div class="invalid-feedback">Por favor, informe um e-mail válido.</div>
                    </div>
                    <div class="col-md-3">
                        <label for="data_criacao" class="form-label">Data Criação</label>
                        <div class="input-group">
                            <input type="text" class="form-control datepicker" id="data_criacao" name="dados[data_criacao]" style="z-index: 1 !important;" value="{{ isset($cliente) && $cliente->data_criacao ? $cliente->data_criacao->format('d/m/Y') : '' }}" autocomplete="off" data-mask="date" readonly>
                            <span class="input-group-text" data-datepicker-toggle><i class="bi bi-calendar"></i></span>
                        </div>
                    </div>
                </div>
                <div class="row mb-3">
                    <div class="col-md-2">
                        <label for="cep" class="form-label">CEP</label>
                        <input type="text" class="form-control" id="cep" name="dados[cep]" value="{{ isset($cliente) ? $cliente->cep : '' }}" data-mask="cep">
                    </div>
                    <div class="col-md-5">
                        <label for="endereco" class="form-label">Endereço</label>
                        <input type="text" class="form-control" id="endereco" name="dados[endereco]" value="{{ isset($cliente) ? $cliente->endereco : '' }}">
                    </div>
                    <div class="col-md-1">
                        <label for="numero" class="form-label">Nº</label>
                        <input type="text" class="form-control" id="numero" name="dados[numero]" value="{{ isset($cliente) ? $cliente->numero : '' }}">
                    </div>
                    <div class="col-md-2">
                        <label for="complemento" class="form-label">Complemento</label>
                        <input type="text" class="form-control" id="complemento" name="dados[complemento]" value="{{ isset($cliente) ? $cliente->complemento : '' }}">
                    </div>
                    <div class="col-md-2">
                        <label for="bairro" class="form-label">Bairro</label>
                        <input type="text" class="form-control" id="bairro" name="dados[bairro]" value="{{ isset($cliente) ? $cliente->bairro : '' }}">
                    </div>
                </div>
                <div class="row mb-3">
                    <div class="col-md-3">
                        <label for="cidade" class="form-label">Cidade</label>
                        <input type="text" class="form-control" id="cidade" name="dados[cidade]" value="{{ isset($cliente) ? $cliente->cidade : '' }}">
                    </div>
                    <div class="col-md-3">
                        <label for="estado" class="form-label">Estado</label>
                        <select class="form-select" id="estado" name="dados[estado]">
                            <option value="">Selecione...</option>
                            @foreach(['AC', 'AL', 'AP', 'AM', 'BA', 'CE', 'DF', 'ES', 'GO', 'MA', 'MT', 'MS', 'MG', 'PA', 'PB', 'PR', 'PE', 'PI', 'RJ', 'RN', 'RS', 'RO', 'RR', 'SC', 'SP', 'SE', 'TO'] as $uf)
                            <option value="{{ $uf }}" {{ isset($cliente) && $cliente->estado == $uf ? 'selected' : '' }}> {{ $uf }} </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label for="vendedor_area" class="form-label required-field">Vendedor/Área</label>
                        <select class="form-select select-search" 
                                id="vendedor_area" 
                                name="dados[vendedor_area]" 
                                data-placeholder="Selecione o vendedor..." 
                                required>
                            <option value="">Selecione...</option>
                            @foreach($vendedores as $vendedor)
                                <option value="{{ $vendedor->id }}" {{ isset($cliente) && $cliente->vendedor_area == $vendedor->id ? 'selected' : '' }}>
                                    {{ $vendedor->name }}{{ $vendedor->cargo ? ' - ' . $vendedor->cargo->nome : '' }}
                                </option>
                            @endforeach
                        </select>
                        <div class="invalid-feedback">Por favor, selecione um vendedor.</div>
                    </div>
                </div>

                <hr class="my-4">
                <h5 class="mb-3">Gestão Pedagógica</h5>

                <div class="border rounded p-3 mb-3" style="border-color: #dee2e6 !important;">
                    <div class="table-responsive">
                        <table class="table table-hover" id="tabelaCoordenadores">
                            <thead>
                                <tr>
                                    <th width="50">#</th>
                                    <th>Nome</th>
                                    <th>Seguimento</th>
                                    <th>Telefone</th>
                                    <th>Cargo</th>
                                    <th>Celular</th>
                                    <th>E-mail</th>
                                    <th width="100">Ações</th>
                                </tr>
                            </thead>
                            <tbody>
                                @if(isset($cliente->coordenadores) && $cliente->coordenadores->count() > 0)
                                    @foreach($cliente->coordenadores as $index => $coordenador)
                                    <tr>
                                        <td class="text-center align-middle">
                                            <span class="fw-bold text-muted">{{ $index + 1 }}</span>
                                            <input type="hidden" name="coordenadores[{{ $index }}][id]" value="{{ $coordenador->id }}">
                                        </td>
                                        <td>
                                            <div class="form-group">
                                                <input type="text" class="form-control form-control-sm" name="coordenadores[{{ $index }}][nome]" value="{{ $coordenador->nome }}" required>
                                                <div class="invalid-feedback">
                                                    Por favor, informe o nome do coordenador.
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            <select class="form-select form-select-sm" name="coordenadores[{{ $index }}][idTipoCoord]" required>
                                                <option value="0">Selecione</option>
                                                @if(isset($tiposCoordenador))
                                                    @foreach($tiposCoordenador as $tipo)
                                                        <option value="{{ $tipo->id }}" {{ $coordenador->idTipoCoord == $tipo->id ? 'selected' : '' }}>{{ $tipo->nome }}</option>
                                                    @endforeach
                                                @endif
                                            </select>
                                            <div class="invalid-feedback">
                                                Por favor, selecione o seguimento.
                                            </div>
                                        </td>
                                        <td>
                                            <div class="form-group">
                                                <input type="text" class="form-control form-control-sm" name="coordenadores[{{ $index }}][telefone]" value="{{ $coordenador->telefone }}" data-mask="phone">
                                            </div>
                                        </td>
                                        <td>
                                            <div class="form-group">
                                                <input type="text" class="form-control form-control-sm" name="coordenadores[{{ $index }}][cargo]" value="{{ $coordenador->cargo }}">
                                            </div>
                                        </td>
                                        <td>
                                            <div class="form-group">
                                                <input type="text" class="form-control form-control-sm" name="coordenadores[{{ $index }}][celular]" value="{{ $coordenador->celular }}" data-mask="mobile">
                                            </div>
                                        </td>
                                        <td>
                                            <div class="form-group">
                                                <input type="email" class="form-control form-control-sm" name="coordenadores[{{ $index }}][email]" value="{{ $coordenador->email }}">
                                            </div>
                                        </td>
                                        <td>
                                            <button type="button" class="btn btn-sm btn-success me-1" onclick="adicionarCoordenador()">
                                                <i class="bi bi-plus"></i>
                                            </button>
                                            <button type="button" class="btn btn-sm btn-danger" onclick="removerCoordenador(this)">
                                                <i class="bi bi-dash"></i>
                                            </button>
                                        </td>
                                    </tr>
                                    @endforeach
                                @else
                                <tr>
                                    <td class="text-center align-middle">
                                        <span class="fw-bold text-muted">1</span>
                                    </td>
                                    <td>
                                        <div class="form-group">
                                            <input type="text" class="form-control form-control-sm" name="coordenadores[0][nome]" required>
                                            <div class="invalid-feedback">
                                                Por favor, informe o nome do coordenador.
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <select class="form-select form-select-sm" name="coordenadores[0][idTipoCoord]" required>
                                            <option value="0">Selecione</option>
                                            @if(isset($tiposCoordenador))
                                                @foreach($tiposCoordenador as $tipo)
                                                    <option value="{{ $tipo->id }}">{{ $tipo->nome }}</option>
                                                @endforeach
                                            @endif
                                        </select>
                                        <div class="invalid-feedback">
                                            Por favor, selecione o seguimento.
                                        </div>
                                    </td>
                                    <td>
                                        <div class="form-group">
                                            <input type="text" class="form-control form-control-sm" name="coordenadores[0][telefone]" data-mask="phone">
                                        </div>
                                    </td>
                                    <td>
                                        <div class="form-group">
                                            <input type="text" class="form-control form-control-sm" name="coordenadores[0][cargo]">
                                        </div>
                                    </td>
                                    <td>
                                        <div class="form-group">
                                            <input type="text" class="form-control form-control-sm" name="coordenadores[0][celular]" data-mask="mobile">
                                        </div>
                                    </td>
                                    <td>
                                        <div class="form-group">
                                            <input type="email" class="form-control form-control-sm" name="coordenadores[0][email]">
                                        </div>
                                    </td>
                                    <td>
                                        <button type="button" class="btn btn-sm btn-success me-1" onclick="adicionarCoordenador()">
                                            <i class="bi bi-plus"></i>
                                        </button>
                                        <button type="button" class="btn btn-sm btn-danger" onclick="removerCoordenador(this)">
                                            <i class="bi bi-dash"></i>
                                        </button>
                                    </td>
                                </tr>
                                @endif
                            </tbody>
                        </table>
                    </div>
                </div>

                <hr class="my-4">
                <h5 class="mb-3">Observações</h5>
                <div class="row mb-3">
                    <div class="col-12">
                        <textarea class="form-control" id="observacoes" name="dados[observacoes]" rows="3">{{ isset($cliente) ? $cliente->observacoes : '' }}</textarea>
                    </div>
                </div>

                <hr class="my-4">
                <h5 class="mb-3">Contatos</h5>

                <div class="border rounded p-3 mb-3" style="border-color: #dee2e6 !important;">
                    <div class="table-responsive">
                        <table class="table table-hover" id="tabelaContatos">
                            <thead>
                                <tr>
                                    <th width="50">#</th>
                                    <th>Nome</th>
                                    <th>Cargo</th>
                                    <th>Telefone</th>
                                    <th>Celular</th>
                                    <th>Email</th>
                                    <th>Principal</th>
                                    <th width="100">Ações</th>
                                </tr>
                            </thead>
                            <tbody>
                                @if(isset($cliente->contatos) && $cliente->contatos->count() > 0)
                                    @foreach($cliente->contatos as $index => $contato)
                                    <tr>
                                        <td class="text-center align-middle">
                                            <span class="fw-bold text-muted">{{ $index + 1 }}</span>
                                            <input type="hidden" name="contatos[{{ $index }}][id]" value="{{ $contato->id }}">
                                        </td>
                                        <td>
                                            <div class="form-group">
                                                <input type="text" class="form-control form-control-sm" name="contatos[{{ $index }}][nome]" value="{{ $contato->nome }}" required>
                                                <div class="invalid-feedback">
                                                    Por favor, informe o nome do contato.
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            <input type="text" class="form-control form-control-sm" name="contatos[{{ $index }}][cargo]" value="{{ $contato->cargo }}" required>
                                            <div class="invalid-feedback">
                                                Por favor, informe o nome do cargo.
                                            </div>
                                        </td>
                                        <td>
                                            <div class="form-group">
                                                <input type="text" class="form-control form-control-sm" name="contatos[{{ $index }}][telefone]" value="{{ $contato->telefone }}" data-mask="phone" required>
                                                <div class="invalid-feedback">
                                                    Por favor, informe o telefone do contato.
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="form-group">
                                                <input type="text" class="form-control form-control-sm" name="contatos[{{ $index }}][celular]" value="{{ $contato->celular }}" data-mask="mobile">
                                            </div>
                                        </td>
                                        <td>
                                            <div class="form-group">
                                                <input type="email" class="form-control form-control-sm" name="contatos[{{ $index }}][email]" value="{{ $contato->email }}" required>
                                                <div class="invalid-feedback">
                                                    Por favor, informe um e-mail válido.
                                                </div>
                                            </div>
                                        </td>
                                        <td class="text-center">
                                            <input type="radio" name="contato_principal" value="{{ $index }}" {{ $contato->principal ? 'checked' : '' }} onchange="atualizarPrincipal(this)">
                                            <input type="hidden" name="contatos[{{ $index }}][principal]" value="{{ $contato->principal ? '1' : '0' }}">
                                        </td>
                                        <td>
                                            <button type="button" class="btn btn-sm btn-danger" onclick="removerContato(this)" {{ $cliente->contatos->count() == 1 ? 'disabled' : '' }}>
                                                <i class="bi bi-trash"></i>
                                            </button>
                                        </td>
                                    </tr>
                                    @endforeach
                                @else
                                <tr>
                                    <td class="text-center align-middle">
                                        <span class="fw-bold text-muted">1</span>
                                    </td>
                                    <td>
                                        <div class="form-group">
                                            <input type="text" class="form-control form-control-sm" name="contatos[0][nome]" required>
                                            <div class="invalid-feedback">
                                                Por favor, informe o nome do contato.
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <input type="text" class="form-control form-control-sm" name="contatos[0][cargo]" required>
                                        <div class="invalid-feedback">
                                            Por favor, informe o nome do cargo.
                                        </div>
                                    </td>
                                    <td>
                                        <div class="form-group">
                                            <input type="text" class="form-control form-control-sm" name="contatos[0][telefone]" data-mask="phone" required>
                                            <div class="invalid-feedback">
                                                Por favor, informe o telefone do contato.
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="form-group">
                                            <input type="text" class="form-control form-control-sm" name="contatos[0][celular]" data-mask="mobile">
                                        </div>
                                    </td>
                                    <td>
                                        <div class="form-group">
                                            <input type="email" class="form-control form-control-sm" name="contatos[0][email]" required>
                                            <div class="invalid-feedback">
                                                Por favor, informe um e-mail válido.
                                            </div>
                                        </div>
                                    </td>
                                    <td class="text-center">
                                        <input type="radio" name="contato_principal" checked readonly>
                                        <input type="hidden" name="contatos[0][principal]" value="1">
                                    </td>
                                    <td>
                                        <button type="button" class="btn btn-sm btn-danger" onclick="removerContato(this)" disabled>
                                            <i class="bi bi-trash"></i>
                                        </button>
                                    </td>
                                </tr>
                                @endif
                            </tbody>
                        </table>
                    </div>
                    <div class="row mt-3">
                        <div class="col-12">
                            <button type="button" class="btn btn-sm btn-primary" onclick="adicionarContato()">
                                <i class="bi bi-plus-circle me-2"></i>Adicionar Contato
                            </button>
                        </div>
                    </div>
                </div>

                <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                    <button type="button" class="btn btn-sm btn-outline-secondary me-md-2" onclick="carregarConteudo(`{{ route('clientes.list') }}`)">
                        <i class="bi bi-x-circle me-2"></i>Cancelar
                    </button>
                    <button type="button" class="btn btn-sm btn-primary" onclick="atualizar(`{{ route('clientes.update', $cliente->id) }}`, 'formEditarCliente')">
                        <i class="bi bi-check-circle me-2"></i>Atualizar
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>