@extends('template')

@section('conteudo')
    @php $edicao = $organizacao !== null; @endphp
    <nav class="mb-3" style="font-size:0.82rem;"><span class="text-muted" style="cursor:pointer;" onclick="carregarConteudo('/organizacoes')">Organizações</span><span class="text-muted mx-1">/</span><span style="color:var(--primary); font-weight:600;">{{ $edicao ? 'Editar Organização' : 'Nova Organização' }}</span></nav>

    <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-building-fill" style="font-size:2rem; color:var(--primary);"></i><div><h4 class="fw-bold mb-0" style="color:var(--primary);">{{ $edicao ? 'Editar Organização' : 'Nova Organização' }}</h4><span class="text-muted" style="font-size:0.82rem;">Dados cadastrais e contatos</span></div></div>
        <button type="button" class="btn btn-sm rounded-3 btn-outline-castelo" onclick="carregarConteudo('/organizacoes')"><i class="bi bi-arrow-left me-1"></i> Voltar</button>
    </div>

    <form id="form-organizacao" novalidate>
        @csrf
        <div class="form-container">
            <div class="form-secao">
                <div class="form-secao-titulo"><i class="bi bi-building me-2"></i>Dados da Organização</div>
                <div class="row g-3">
                    @if($edicao)<div class="col-md-2"><label class="form-label fw-semibold" style="font-size:0.82rem;">Código</label><input class="form-control form-control-sm rounded-3 bg-light" value="{{ $organizacao->codigo }}" readonly></div>@endif
                    <div class="col-md-2"><label class="form-label fw-semibold" style="font-size:0.82rem;">Tipo <span class="text-danger">*</span></label><select name="dados[tipo]" class="form-select form-select-sm rounded-3" required><option value="">Selecione...</option>@foreach(['escola'=>'Escola','agencia'=>'Agência','pessoa_fisica'=>'Pessoa física'] as $valor => $rotulo)<option value="{{ $valor }}" @selected(($organizacao->tipo->value ?? '') === $valor)>{{ $rotulo }}</option>@endforeach</select></div>
                    <div class="col-md-2"><label class="form-label fw-semibold" style="font-size:0.82rem;">Status</label><select name="dados[status]" class="form-select form-select-sm rounded-3"><option value="ativo" @selected(($organizacao->status->value ?? 'ativo') === 'ativo')>Ativo</option><option value="inativo" @selected(($organizacao->status->value ?? '') === 'inativo')>Inativo</option></select></div>
                    <div class="col-md-{{ $edicao ? '6' : '8' }}"><label class="form-label fw-semibold" style="font-size:0.82rem;">Nome/Razão social <span class="text-danger">*</span></label><input name="dados[nome_razao_social]" value="{{ $organizacao->nome_razao_social ?? '' }}" class="form-control form-control-sm rounded-3" required></div>
                    <div class="col-md-8"><label class="form-label fw-semibold" style="font-size:0.82rem;">Nome público</label><input name="dados[nome_publico]" value="{{ $organizacao->nome_publico ?? '' }}" class="form-control form-control-sm rounded-3"></div>
                    <div class="col-md-4"><label class="form-label fw-semibold" style="font-size:0.82rem;">CPF/CNPJ</label><input name="dados[cpf_cnpj]" value="{{ $organizacao->cpf_cnpj ?? '' }}" class="form-control form-control-sm rounded-3" data-mascara="cpf_cnpj" maxlength="18"></div>
                </div>
            </div>

            <div id="secao-unidades-organizacao" class="form-secao {{ (!$edicao || in_array($organizacao->tipo->value ?? '', ['escola', 'agencia'])) ? '' : 'd-none' }}">
                <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-geo-alt-fill me-2"></i>Unidades</div>
                    <button type="button" class="btn btn-sm rounded-3 btn-outline-castelo ms-3" onclick="adicionarUnidadeOrganizacao()">
                        <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="tabelaUnidadesOrganizacao" 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">Status</th><th class="fw-semibold text-end" style="width:60px;">Ações</th></tr></thead>
                        <tbody>
                            @if($organizacao && $organizacao->unidades->isNotEmpty())
                                @foreach($organizacao->unidades as $indice => $unidade)
                                    <tr>
                                        <td class="text-center align-middle"><span class="fw-bold text-muted unidade-indice" style="font-size:0.78rem;">{{ $indice + 1 }}</span><input type="hidden" name="unidades[{{ $indice }}][id]" value="{{ $unidade->id }}"></td>
                                        <td><input type="text" class="form-control form-control-sm rounded-3" name="unidades[{{ $indice }}][nome]" value="{{ $unidade->nome }}" required></td>
                                        <td><select class="form-select form-select-sm rounded-3" name="unidades[{{ $indice }}][status]"><option value="ativo" @selected($unidade->status->value === 'ativo')>Ativa</option><option value="inativo" @selected($unidade->status->value === 'inativo')>Inativa</option></select></td>
                                        <td class="text-end"><button type="button" class="btn btn-sm border-0 p-1 text-danger" onclick="removerUnidadeOrganizacao(this)" title="Remover unidade"><i class="bi bi-trash-fill"></i></button></td>
                                    </tr>
                                @endforeach
                            @else
                                <tr>
                                    <td class="text-center align-middle"><span class="fw-bold text-muted unidade-indice" style="font-size:0.78rem;">1</span></td>
                                    <td><input type="text" class="form-control form-control-sm rounded-3" name="unidades[0][nome]" required placeholder="Nome da unidade"></td>
                                    <td><select class="form-select form-select-sm rounded-3" name="unidades[0][status]"><option value="ativo">Ativa</option><option value="inativo">Inativa</option></select></td>
                                    <td class="text-end"><button type="button" class="btn btn-sm border-0 p-1 text-danger" onclick="removerUnidadeOrganizacao(this)" disabled title="É necessário manter uma unidade"><i class="bi bi-trash-fill"></i></button></td>
                                </tr>
                            @endif
                        </tbody>
                    </table>
                </div>
            </div>

            <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="adicionarContatoOrganizacao()">
                        <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="tabelaContatosOrganizacao" 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;">Ações</th>
                            </tr>
                        </thead>
                        <tbody>
                            @if($organizacao && $organizacao->contatos->isNotEmpty())
                                @foreach($organizacao->contatos as $indice => $contato)
                                <tr>
                                    <td class="text-center align-middle"><span class="fw-bold text-muted contato-indice" style="font-size:0.78rem;">{{ $indice + 1 }}</span></td>
                                    <td><input type="text" class="form-control form-control-sm rounded-3" name="contatos[{{ $indice }}][nome]" value="{{ $contato->nome }}" required></td>
                                    <td><input type="text" class="form-control form-control-sm rounded-3" name="contatos[{{ $indice }}][cargo]" value="{{ $contato->cargo }}" placeholder="Cargo"></td>
                                    <td><input type="text" class="form-control form-control-sm rounded-3" name="contatos[{{ $indice }}][telefone]" value="{{ $contato->telefone }}" data-mascara="telefone_fixo" maxlength="16"></td>
                                    <td><input type="text" class="form-control form-control-sm rounded-3" name="contatos[{{ $indice }}][celular]" value="{{ $contato->celular }}" data-mascara="celular" maxlength="16"></td>
                                    <td><input type="email" class="form-control form-control-sm rounded-3" name="contatos[{{ $indice }}][email]" value="{{ $contato->email }}"></td>
                                    <td class="text-center"><input type="radio" name="contato_principal_organizacao" onchange="marcarPrincipalOrganizacao(this)" style="accent-color:var(--primary);" {{ $contato->principal ? 'checked' : '' }}><input type="hidden" name="contatos[{{ $indice }}][principal]" value="{{ $contato->principal ? 1 : 0 }}"></td>
                                    <td class="text-end"><button type="button" class="btn btn-sm border-0 p-1 text-danger" onclick="removerContatoOrganizacao(this)" title="Remover contato"><i class="bi bi-trash-fill"></i></button></td>
                                </tr>
                                @endforeach
                            @else
                                <tr>
                                    <td class="text-center align-middle"><span class="fw-bold text-muted contato-indice" 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"></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_fixo" 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="celular" 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_organizacao" checked onchange="marcarPrincipalOrganizacao(this)" 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 text-danger" onclick="removerContatoOrganizacao(this)" disabled title="A primeira linha não pode ser removida"><i class="bi bi-trash-fill"></i></button></td>
                                </tr>
                            @endif
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="d-flex justify-content-end gap-2"><button type="button" class="btn btn-sm btn-outline-secondary rounded-3" onclick="carregarConteudo('/organizacoes')">Cancelar</button><button type="button" id="btn-salvar-organizacao" class="btn btn-sm rounded-3 text-white" style="background:var(--primary);" onclick="submeterForm('{{ $edicao ? '/organizacoes/' . $organizacao->id . '/atualizar' : '/organizacoes/salvar' }}', 'form-organizacao', 'btn-salvar-organizacao')"><i class="bi bi-floppy me-1"></i> Salvar</button></div>
    </form>
    <script src="{{ asset('js/organizacoes.js') }}"></script>
@endsection