@extends('layouts.admin.theme')
@section("title", env("APP_NAME") . " :: Credenciamento")
@section('content')
<div class="card shadow">
    @php $headLine = "<i class='fa-solid fa-guitar'></i> Credenciamento"; @endphp
    @include('components.buttons._headLineButtonsBackAdd', [
        'headLine' => __($headLine),
        "permission" => "GERENCIADOR_CREDENCIAMENTO_DE_MUSICOS",
    ])
    <div class="card-body">
        @include("errors.messageFlash")
        @include('components.modal._modelProfile')
        <hr>
        <ul class="nav nav-pills mb-3 justify-content-center bg-light p-2 rounded shadow-sm" role="tablist">
            @include('components.lists._liLinkBtnNavInterna', [
                'items' => [
                    ['class' => 'active bg-success disabled', 'hash' => 'primeiraSection', 'label' => 'Dados de Usuário'],
                    ['class' => 'active bg-success disabled', 'hash' => 'segundaSection', 'label' => 'Dados Pessoais'],
                    ['class' => 'active bg-success disabled', 'hash' => 'terceiraSection', 'label' => 'Documentos'],
                    ['class' => 'active bg-success disabled', 'hash' => 'quartaSection', 'label' => 'Endereço'],
                    ['class' => 'active bg-success disabled', 'hash' => 'quintaSection', 'label' => 'Credenciamento'],
                    ['class' => 'disabled', 'hash' => 'sextaSection', 'label' => 'Integrantes'],
                    ['class' => 'disabled', 'hash' => 'setimaSection', 'label' => 'Arquivos'],
                ]
            ])
        </ul>
        <form action="{{ route('admin.cultura.credenciamentoMusicos.credenciamento.update', $musico->id) }}" method="POST">
            @csrf
            @method('POST')
            <div class="mb-3">
                @include('components.inputs._selectType', [
                    "for" => "tipo_pessoa",
                    "label" => "Tipo de Credenciamento",
                    "name" => "tipo_pessoa",
                    "required" => true,
                    "readonly" => false,
                    "options" => [ 'PF' => 'Pessoa Física', 'PJ' => 'Pessoa Jurídica', 'AMBOS' => 'Ambos' ],
                    "selected" => old('tipo_pessoa', $musico->tipo_pessoa ?? 'PF'),
                    "placeholder" => "Selecione...",
                    "onchange" => "window.CredEmp.onTipoChange(this)"
                ])
            </div>
            <div id="empresasSection" class="mb-3" style="display:none">
                <div class="d-flex justify-content-between align-items-center mb-2">
                    <label class="form-label text-bold mb-0">{{ __('Empresas onde sou Responsável Legal') }}</label>
                    <button type="button" class="btn btn-sm btn-outline-info" onclick="window.CredEmp.openModal()">{{ __('Adicionar Empresa') }}</button>
                </div>
                <div id="listaEmpresas" class="list-group"></div>
            </div>
            <div class="modal fade" id="modalEmpresas" tabindex="-1" aria-hidden="true">
                <div class="modal-dialog modal-xl">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">{{ __('Adicionar Empresa ao Credenciamento') }}</h5>
                            <button type="button" class="btn-close mx-3" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <div class="mb-3">
                                <label class="form-label">CNPJ</label>
                                <input type="text" id="cnpjInput" class="form-control" placeholder="00.000.000/0000-00" oninput="aplicarMascaraCNPJ(this)" />
                            </div>
                            <div id="empresaResultado"></div>
                            <div id="empresaForm" style="display:none">
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label">Razão Social</label>
                                        <input type="text" id="razaoSocial" class="form-control" />
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label">Nome Fantasia</label>
                                        <input type="text" id="nomeFantasia" class="form-control" />
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label">Telefone</label>
                                        <input type="text" id="telefoneEmpresa" class="form-control" oninput="aplicarMascaraTelefone(this)" />
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label">Email</label>
                                        <input type="email" id="emailEmpresa" class="form-control" />
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-3 mb-3">
                                        <label class="form-label">CEP</label>
                                        <input type="text" id="cepEmpresa" class="form-control" oninput="aplicarMascaraCEP(this)" />
                                    </div>
                                    <div class="col-md-5 mb-3">
                                        <label class="form-label">Logradouro</label>
                                        <input type="text" id="logradouroEmpresa" class="form-control" />
                                    </div>
                                    <div class="col-md-2 mb-3">
                                        <label class="form-label">Número</label>
                                        <input type="text" id="numeroEmpresa" class="form-control" />
                                    </div>
                                    <div class="col-md-2 mb-3">
                                        <label class="form-label">Complemento</label>
                                        <input type="text" id="complementoEmpresa" class="form-control" />
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label">Cidade</label>
                                        <input type="text" id="cidadeEmpresa" class="form-control" />
                                    </div>
                                    <div class="col-md-4 mb-3">
                                        <label class="form-label">Bairro</label>
                                        <input type="text" id="bairroEmpresa" class="form-control" />
                                    </div>
                                    <div class="col-md-2 mb-3">
                                        <label class="form-label">UF</label>
                                        <input type="text" id="ufEmpresa" class="form-control" maxlength="2" />
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ __('Fechar') }}</button>
                            <button type="button" id="btnVerificarEmpresa" class="btn btn-primary" onclick="window.CredEmp.verify()">{{ __('Verificar') }}</button>
                            <button type="button" id="btnSalvarEmpresa" class="btn btn-success" style="display:none" onclick="window.CredEmp.store()">{{ __('Salvar Empresa') }}</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="d-flex justify-content-between mt-4">
                <a class="btn btn-outline-secondary" href="{{ route('admin.cultura.credenciamentoMusicos.endereco', $musico->id) }}">
                    <i class="fa-solid fa-arrow-left-long"></i> {{ __("Anterior") }}
                </a>
                <button class="btn btn-primary d-inline" type="submit">
                    <i class="fa-solid fa-user-plus"></i> {{ __("Salvar e Prosseguir") }}
                </button>
            </div>
        </form>
    </div>
</div>
@endsection
@push('scripts')
<script>
window.CredEmp = {
    musicoId: '{{ $musico->id }}',
    tipoInput: null,
    init() {
        this.tipoInput = document.querySelector('[name=tipo_pessoa]');
        this.onTipoChange(this.tipoInput);
        this.refreshList();
    },
    edit(empresaId) {
        this.editingEmpresaId = empresaId;
        fetch(`{{ route('admin.cultura.credenciamentoMusicos.empresas.get', $musico->id) }}`, {
            method: 'POST',
            headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}', 'Content-Type': 'application/json' },
            body: JSON.stringify({ empresa_id: empresaId })
        }).then(async r => {
            const data = await r.json();
            if (!r.ok || !data.ok) { alert(data.error || 'Erro ao carregar empresa'); return; }
            document.getElementById('empresaResultado').innerHTML = '';
            document.getElementById('empresaForm').style.display = 'block';
            document.getElementById('btnSalvarEmpresa').style.display = 'inline-block';
            document.getElementById('btnVerificarEmpresa').style.display = 'none';
            document.getElementById('cnpjInput').value = data.empresa.cnpj;
            document.getElementById('razaoSocial').value = data.empresa.razaoSocial;
            document.getElementById('nomeFantasia').value = data.empresa.nomeFantasia;
            document.getElementById('telefoneEmpresa').value = data.empresa.telefone || '';
            document.getElementById('emailEmpresa').value = data.empresa.email || '';
            const e = data.endereco || {};
            document.getElementById('cepEmpresa').value = e.cep || '';
            document.getElementById('logradouroEmpresa').value = e.logradouro || '';
            document.getElementById('numeroEmpresa').value = e.numero || '';
            document.getElementById('complementoEmpresa').value = e.complemento || '';
            document.getElementById('cidadeEmpresa').value = e.cidade || '';
            document.getElementById('bairroEmpresa').value = e.bairro || '';
            document.getElementById('ufEmpresa').value = e.uf || '';
            const modal = new bootstrap.Modal(document.getElementById('modalEmpresas'));
            modal.show();
        }).catch(() => alert('Erro ao carregar empresa'));
    },
    detach(empresaId) {
        if (!confirm('Remover o vínculo desta empresa?')) return;
        fetch(`{{ route('admin.cultura.credenciamentoMusicos.empresas.detach', $musico->id) }}`, {
            method: 'POST',
            headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}', 'Content-Type': 'application/json' },
            body: JSON.stringify({ empresa_id: empresaId })
        }).then(async r => {
            const data = await r.json();
            if (!r.ok || !data.ok) { alert(data.error || 'Erro ao remover vínculo'); return; }
            this.refreshList();
        }).catch(() => alert('Erro ao remover vínculo'));
    },
    onTipoChange(el) {
        const val = el.value;
        const show = (val === 'PJ' || val === 'AMBOS');
        document.getElementById('empresasSection').style.display = show ? 'block' : 'none';
    },
    openModal() {
        const modal = new bootstrap.Modal(document.getElementById('modalEmpresas'));
        document.getElementById('cnpjInput').value = '';
        document.getElementById('empresaResultado').innerHTML = '';
        modal.show();
    },
    verify() {
        const input = document.getElementById('cnpjInput');
        const cnpj = input.value.trim();
        const digits = cnpj.replace(/\D/g,'');
        if (digits.length !== 14) {
            document.getElementById('empresaResultado').innerHTML = '<div class="alert alert-danger">CNPJ incompleto.</div>';
            return;
        }
        console.log('empresas.verify: request', { cnpj });
        fetch(`{{ route('admin.cultura.credenciamentoMusicos.empresas.verify', $musico->id) }}`, {
            method: 'POST',
            headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}', 'Content-Type': 'application/json' },
            body: JSON.stringify({ cnpj })
        }).then(async r => {
            const data = await r.json();
            console.log('empresas.verify: response', { status: r.status, ok: r.ok, data });
            if (!r.ok) {
                document.getElementById('empresaResultado').innerHTML = `<div class="alert alert-danger">${data.error || 'CNPJ inválido'}</div>`;
                return;
            }
            const res = document.getElementById('empresaResultado');
            if (data.exists) {
                const owned = (data.empresa.responsavel_id === '{{ $user->id }}');
                res.innerHTML = `
                    <div class="alert ${owned ? 'alert-success' : 'alert-warning'}">
                        <div><strong>Nome:</strong> ${data.empresa.nomeFantasia}</div>
                        <div><strong>CNPJ:</strong> ${data.empresa.cnpj}</div>
                        ${owned ? '' : '<div class="mt-2">Você não é o responsável legal desta empresa.</div>'}
                    </div>
                    ${owned ? `<button class="btn btn-primary" onclick="window.CredEmp.link('${data.empresa.id}')">Vincular ao credenciamento</button>` : ''}
                `;
                document.getElementById('empresaForm').style.display = 'none';
                document.getElementById('btnSalvarEmpresa').style.display = 'none';
                document.getElementById('btnVerificarEmpresa').style.display = 'inline-block';
            } else {
                res.innerHTML = `<div class="alert alert-info">Empresa não encontrada. Preencha os dados abaixo para cadastrar.</div>`;
                document.getElementById('empresaForm').style.display = 'block';
                document.getElementById('btnSalvarEmpresa').style.display = 'inline-block';
                document.getElementById('btnVerificarEmpresa').style.display = 'none';
            }
        }).catch((e) => {
            console.log('empresas.verify: network error', e);
            document.getElementById('empresaResultado').innerHTML = '<div class="alert alert-danger">Erro na verificação.</div>';
        });
    },
    store() {
        const payload = {
            cnpj: document.getElementById('cnpjInput').value.trim(),
            razaoSocial: document.getElementById('razaoSocial').value.trim(),
            nomeFantasia: document.getElementById('nomeFantasia').value.trim(),
            telefone: document.getElementById('telefoneEmpresa').value.trim(),
            email: document.getElementById('emailEmpresa').value.trim(),
            cep: document.getElementById('cepEmpresa').value.trim(),
            logradouro: document.getElementById('logradouroEmpresa').value.trim(),
            numero: document.getElementById('numeroEmpresa').value.trim(),
            complemento: document.getElementById('complementoEmpresa').value.trim(),
            cidade: document.getElementById('cidadeEmpresa').value.trim(),
            bairro: document.getElementById('bairroEmpresa').value.trim(),
            uf: document.getElementById('ufEmpresa').value.trim().toUpperCase()
        };
        // validação mínima client-side
        const required = ['cnpj','razaoSocial','nomeFantasia','cep','logradouro','cidade','bairro','uf'];
        const missing = required.filter(k => !payload[k]);
        if (missing.length) {
            alert('Preencha os campos obrigatórios: ' + missing.join(', '));
            return;
        }
        console.log('empresas.store: request', { editing: this.editingEmpresaId, payload });
        const url = this.editingEmpresaId ? `{{ route('admin.cultura.credenciamentoMusicos.empresas.update', $musico->id) }}` : `{{ route('admin.cultura.credenciamentoMusicos.empresas.store', $musico->id) }}`;
        const body = this.editingEmpresaId ? JSON.stringify(Object.assign({ empresa_id: this.editingEmpresaId }, payload)) : JSON.stringify(payload);
        fetch(url, {
            method: 'POST',
            headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}', 'Content-Type': 'application/json', 'Accept': 'application/json' },
            body
        }).then(async r => {
            const data = await r.json();
            console.log('empresas.store: response', { status: r.status, ok: r.ok, data });
            if (!r.ok) {
                const errors = data.errors ? Object.values(data.errors).flat().join('\n') : null;
                alert(errors || data.error || (data.message || 'Erro ao cadastrar empresa'));
                return;
            }
            bootstrap.Modal.getInstance(document.getElementById('modalEmpresas')).hide();
            this.editingEmpresaId = null;
            this.refreshList();
        }).catch((e) => { console.log('empresas.store: network error', e); alert('Erro ao cadastrar empresa'); });
    },
    link(empresaId) {
        console.log('empresas.link: request', { empresaId });
        fetch(`{{ route('admin.cultura.credenciamentoMusicos.empresas.link', $musico->id) }}`, {
            method: 'POST',
            headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}', 'Content-Type': 'application/json' },
            body: JSON.stringify({ empresa_id: empresaId })
        }).then(r => r.json()).then(data => {
            console.log('empresas.link: response', data);
            if (data.ok) {
                bootstrap.Modal.getInstance(document.getElementById('modalEmpresas')).hide();
                this.refreshList();
            } else {
                alert(data.error || 'Erro ao vincular empresa');
            }
        }).catch(() => alert('Erro ao vincular empresa'));
    },
    refreshList() {
        console.log('empresas.list: request');
        fetch(`{{ route('admin.cultura.credenciamentoMusicos.empresas.list', $musico->id) }}`).then(r => r.json()).then(data => {
            console.log('empresas.list: response', data);
            const cont = document.getElementById('listaEmpresas');
            cont.innerHTML = '';
            data.empresas.forEach(emp => {
                const checked = data.selecionadas.includes(emp.id);
                const item = document.createElement('div');
                item.className = 'list-group-item d-flex justify-content-between align-items-center';
                const left = document.createElement('label');
                left.className = 'mb-0';
                left.innerHTML = `<input type="checkbox" name="empresa_ids[]" value="${emp.id}" class="form-check-input me-2" ${checked ? 'checked' : ''}> <a href="#" onclick="window.CredEmp.edit('${emp.id}');return false;">${emp.nomeFantasia} (${emp.cnpj})</a>`;
                const right = document.createElement('button');
                right.className = 'btn btn-sm btn-outline-danger';
                right.innerHTML = '<i class="fa-solid fa-trash"></i>';
                right.onclick = () => window.CredEmp.detach(emp.id);
                item.appendChild(left);
                item.appendChild(right);
                cont.appendChild(item);
            });
        }).catch((e) => {
            console.log('empresas.list: network error', e);
            const cont = document.getElementById('listaEmpresas');
            cont.innerHTML = '<div class="alert alert-warning">Não foi possível carregar empresas.</div>';
        });
    }
};
document.addEventListener('DOMContentLoaded', () => window.CredEmp.init());
</script>
@endpush