@extends('layouts.layoutMaster')

@section('title', 'Cadastrar Novo Cliente')

@section('vendor-style')
<link rel="stylesheet" href="{{asset('assets/vendor/libs/select2/select2.css')}}" />
@endsection

@section('content')
<div class="container-xxl flex-grow-1">
    <!-- Hidden fields para upload (serão preenchidos após criar o cliente) -->
    <input type="hidden" id="clienteId" value="">
    <input type="hidden" id="empresaId" value="{{ $filters['id_empresa'] ?? Auth::user()->id_empresa ?? '' }}">
    <input type="hidden" id="fotoFilename" value="">
    
    <div class="row">
        <div class="col-12">
            <!-- Cabeçalho -->
            <div class="d-flex justify-content-between align-items-center mb-4">
                <div>
                    <h4 class="mb-1">Cadastrar Novo Cliente</h4>
                    <p class="text-muted mb-0">Preencha os dados do cliente</p>
                </div>
                <a href="{{ route('clientes.index') }}" class="btn btn-outline-secondary">
                    <i class="ti ti-arrow-left me-1"></i>
                    Voltar
                </a>
            </div>

            <!-- Formulário -->
            <div class="row">
                <div class="col-12">
                    <form id="clienteCreateForm" action="{{ route('clientes.store') }}" method="POST">
                        @csrf

                        <!-- Dados Básicos -->
                        <div class="card mb-4">
                            <div class="card-header">
                                <h5 class="mb-0">Dados Básicos</h5>
                            </div>
                            <div class="card-body">
                                <div class="row g-3">
                                    <input type="hidden" name="id_empresa" value="{{ $filters['id_empresa'] ?? Auth::user()->id_empresa ?? '' }}">

                                    <div class="col-md-6">
                                        <label class="form-label" for="nome">Nome / Razão Social <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control" id="nome" name="nome" required>
                                    </div>

                                    <div class="col-md-6">
                                        <label class="form-label" for="razao_social">Nome Fantasia</label>
                                        <input type="text" class="form-control" id="razao_social" name="razao_social">
                                    </div>

                                    <div class="col-md-4">
                                        <label class="form-label" for="id_tipo_pessoa">Tipo de Pessoa <span class="text-danger">*</span></label>
                                        <select class="form-select" id="id_tipo_pessoa" name="id_tipo_pessoa" required>
                                            <option value="1">Pessoa Física</option>
                                            <option value="2">Pessoa Jurídica</option>
                                        </select>
                                    </div>

                                    <div class="col-md-4" id="campo-cpf">
                                        <label class="form-label" for="cpf_cnpj">CPF <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control" id="cpf_cnpj" name="cpf_cnpj" data-mask="000.000.000-00" required>
                                    </div>

                                    <div class="col-md-4" id="campo-cnpj" style="display: none;">
                                        <label class="form-label" for="cnpj_input">CNPJ <span class="text-danger">*</span></label>
                                        <div class="input-group">
                                            <input type="text" class="form-control" id="cnpj_input" data-mask="00.000.000/0000-00">
                                            <button type="button" class="btn btn-outline-primary" id="btnConsultarCNPJ">
                                                <i class="ti ti-search me-1"></i>Consultar
                                            </button>
                                        </div>
                                    </div>

                                    <div class="col-md-4">
                                        <label class="form-label" for="rg_ie">RG/IE</label>
                                        <input type="text" class="form-control" id="rg_ie" name="rg_ie">
                                    </div>

                                    <div class="col-md-4">
                                        <label class="form-label" for="email">Email</label>
                                        <input type="email" class="form-control" id="email" name="email">
                                    </div>

                                    <div class="col-md-4">
                                        <label class="form-label" for="telefone">Telefone</label>
                                        <input type="text" class="form-control" id="telefone" name="telefone" data-mask="(00) 00000-0000">
                                    </div>

                                    <div class="col-md-4">
                                        <label class="form-label" for="data_nascimento">Data de Nascimento</label>
                                        <input type="date" class="form-control" id="data_nascimento" name="data_nascimento">
                                    </div>

                                    <div class="col-md-4">
                                        <label class="form-label" for="status">Status</label>
                                        <select class="form-select" id="status" name="status">
                                            <option value="ativo" selected>Ativo</option>
                                            <option value="inativo">Inativo</option>
                                            <option value="bloqueado">Bloqueado</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Endereço -->
                        <div class="card mb-4">
                            <div class="card-header">
                                <h5 class="mb-0">Endereço</h5>
                            </div>
                            <div class="card-body">
                                <div class="row g-3">
                                    <div class="col-md-3">
                                        <label class="form-label" for="cep">CEP</label>
                                        <input type="text" class="form-control" id="cep" name="cep" data-mask="00000-000">
                                    </div>

                                    <div class="col-md-7">
                                        <label class="form-label" for="endereco">Endereço</label>
                                        <input type="text" class="form-control" id="endereco" name="endereco">
                                    </div>

                                    <div class="col-md-2">
                                        <label class="form-label" for="numero">Número</label>
                                        <input type="text" class="form-control" id="numero" name="numero">
                                    </div>

                                    <div class="col-md-6">
                                        <label class="form-label" for="complemento">Complemento</label>
                                        <input type="text" class="form-control" id="complemento" name="complemento">
                                    </div>

                                    <div class="col-md-6">
                                        <label class="form-label" for="bairro">Bairro</label>
                                        <input type="text" class="form-control" id="bairro" name="bairro">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Endereço de Entrega -->
                        <div class="card mb-4">
                            <div class="card-header d-flex justify-content-between align-items-center">
                                <h5 class="mb-0">Endereço de Entrega</h5>
                                <button type="button" class="btn btn-sm btn-outline-primary" id="btnCopiarEndereco">
                                    <i class="ti ti-copy me-1"></i>Copiar Endereço Principal
                                </button>
                            </div>
                            <div class="card-body">
                                <div class="row g-3">
                                    <div class="col-md-3">
                                        <label class="form-label" for="cep_entrega">CEP</label>
                                        <input type="text" class="form-control" id="cep_entrega" name="cep_entrega" data-mask="00000-000">
                                    </div>

                                    <div class="col-md-7">
                                        <label class="form-label" for="endereco_entrega">Endereço</label>
                                        <input type="text" class="form-control" id="endereco_entrega" name="endereco_entrega">
                                    </div>

                                    <div class="col-md-2">
                                        <label class="form-label" for="numero_entrega">Número</label>
                                        <input type="text" class="form-control" id="numero_entrega" name="numero_entrega">
                                    </div>

                                    <div class="col-md-12">
                                        <label class="form-label" for="complemento_entrega">Complemento</label>
                                        <input type="text" class="form-control" id="complemento_entrega" name="complemento_entrega">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Botões de Ação -->
                        <div class="card">
                            <div class="card-body">
                                <div class="d-flex justify-content-end gap-2">
                                    <a href="{{ route('clientes.index') }}" class="btn btn-outline-secondary">Cancelar</a>
                                    <button type="submit" class="btn btn-primary">
                                        <i class="ti ti-check me-1"></i>Salvar Cliente
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('vendor-script')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js"></script>
@endsection

@section('page-script')
<script src="{{asset('assets/js/utils.js')}}"></script>
<script src="{{asset('assets/js/clientes-create.js')}}?v=20251207001"></script>
<script>
// Funcionalidade específica da página de criação
document.addEventListener('DOMContentLoaded', function() {
    // Aplicar máscaras
    $('#telefone').mask('(00) 00000-0000');
    $('#cep').mask('00000-000');
    $('#cep_entrega').mask('00000-000');
    
    // Máscara dinâmica para CPF/CNPJ
    const cpfCnpjInput = $('#cpf_cnpj');
    const tipoPessoaSelect = $('#id_tipo_pessoa');
    
    function updateCpfCnpjMask() {
        if (tipoPessoaSelect.val() == '1') {
            // Pessoa Física - CPF
            cpfCnpjInput.mask('000.000.000-00');
            cpfCnpjInput.attr('placeholder', '000.000.000-00');
        } else {
            // Pessoa Jurídica - CNPJ
            cpfCnpjInput.mask('00.000.000/0000-00');
            cpfCnpjInput.attr('placeholder', '00.000.000/0000-00');
        }
    }
    
    tipoPessoaSelect.on('change', updateCpfCnpjMask);
    updateCpfCnpjMask();
    
    // Copiar endereço principal para entrega
    $('#btnCopiarEndereco').on('click', function() {
        $('#cep_entrega').val($('#cep').val());
        $('#endereco_entrega').val($('#endereco').val());
        $('#numero_entrega').val($('#numero').val());
        $('#complemento_entrega').val($('#complemento').val());
        
        Swal.fire({
            icon: 'success',
            title: 'Endereço copiado!',
            text: 'Endereço principal copiado para endereço de entrega.',
            timer: 1500,
            showConfirmButton: false
        });
    });
    
    // Buscar CEP
    $('#cep').on('blur', function() {
        const cep = $(this).val().replace(/\D/g, '');
        if (cep.length === 8) {
            buscarCep(cep, '');
        }
    });
    
    $('#cep_entrega').on('blur', function() {
        const cep = $(this).val().replace(/\D/g, '');
        if (cep.length === 8) {
            buscarCep(cep, '_entrega');
        }
    });
    
    function buscarCep(cep, suffix) {
        $.ajax({
            url: `https://viacep.com.br/ws/${cep}/json/`,
            dataType: 'json',
            success: function(data) {
                if (!data.erro) {
                    $(`#endereco${suffix}`).val(data.logradouro);
                    $(`#bairro${suffix}`).val(data.bairro);
                    $(`#numero${suffix}`).focus();
                }
            }
        });
    }
});
</script>

@if(session('success'))
<script>
$(document).ready(function() {
    Swal.fire({
        icon: 'success',
        title: 'Sucesso!',
        text: '{{ session('success') }}',
        confirmButtonText: 'OK',
        timer: 3000,
        timerProgressBar: true
    });
});
</script>
@endif

@if(session('error'))
<script>
$(document).ready(function() {
    Swal.fire({
        icon: 'error',
        title: 'Erro!',
        text: '{{ session('error') }}',
        confirmButtonText: 'OK'
    });
});
</script>
@endif
@endsection