@extends('layouts.app', ['activePage' => 'captura_polizas', 'menuParent' => 'operaciones', 'titlePage' => __('Contabilidad - Polizas')])

@section('content')
@include('includes.tailwind')
@include('contabilidad.includes.fetchCreacionPeriodo')

<div class="content">
    <div class="container-fluid mt-4">
        <div class="row mb-4">
            <div class="col-6">
                <h6 class="text-xl font-semibold text-gray-800">{{ isset($data['id']) ? 'EDICIÓN DE PÓLIZA' : 'CREACIÓN DE PÓLIZA' }}</h6>
            </div>
            <div class="col-6 text-right">
                <button class="bg-[#0A415F] hover:bg-[#083549] text-white px-4 py-1.5 text-sm rounded-md mr-2 transition-colors duration-200" data-toggle="modal" data-target="#modalBuscarPolizas" title="Buscar pólizas">
                    <i class="material-icons align-middle text-sm">search</i>
                </button>
                <button class="bg-green-500 hover:bg-green-600 text-white px-4 py-1.5 text-sm rounded-md transition-colors duration-200 " data-toggle="modal" data-target="#importarExcel" title="Importar movimientos contables">
                    Importar movimientos
                </button>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="row">
                    <!-- Columna izquierda -->
                    <div class="col-md-8">

                        <!-- Card de información general -->
                        <div class="bg-white rounded-lg shadow-md mb-4">
                            <div class="p-6">
                                <div class="grid grid-cols-12 gap-4">
                                    <div class="col-span-4">
                                        <label class="block text-sm font-medium text-gray-700 mb-1">Número de póliza: <span class="text-red-500">*</span></label>
                                        <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" id="numero_poliza" disabled>
                                    </div>
                                    <input type="hidden" id="idPolizaHidden" @if(isset($data['id'])) value="{{$data['id']}}" @else value="" @endif>
                                    <div class="col-span-4">
                                        <label class="block text-sm font-medium text-gray-700 mb-1">Tipo de póliza: <span class="text-red-500">*</span></label>
                                        <select id="tipo_poliza" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 select2">
                                            <option value="0">-Selecciona-</option>
                                            @foreach($data['tipospolizas'] as $p)
                                            <option value="{{$p->id}}" descripcionTP="{{$p->descripcion}}" tipoTP="{{$p->tipo}}">({{$p->tipo}}) {{$p->descripcion}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-span-4">
                                        <label class="block text-sm font-medium text-gray-700 mb-1">Fecha: <span class="text-red-500">*</span></label>
                                        <input type="date" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" id="fecha_creacion">
                                    </div>
                                </div>

                                <div class="grid grid-cols-12 gap-4 mt-2">
                                    <div class="col-span-6">
                                        <label class="block text-sm font-medium text-gray-700 mb-1">Descripción póliza: <span class="text-red-500">*</span></label>
                                        <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" id="descripcion">
                                    </div>
                                    <div class="col-span-6">
                                        <label class="block text-sm font-medium text-gray-700 mb-1">Referencia póliza:</label>
                                        <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" id="referencia_poliza">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Card de movimientos -->
                        <div class="bg-white rounded-lg shadow-md">
                            <div class="p-6">
                                <div class="overflow-x-auto table-scroll">
                                    <table class="min-w-full divide-y divide-gray-200 " id="tableMovimiento">
                                        <thead class="bg-gray-50 sticky top-0">
                                            <tr>
                                                <th class="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">Cuenta contable</th>
                                                <th class="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">Referencia</th>
                                                <th class="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">Cargo</th>
                                                <th class="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">Abono</th>
                                                <th class="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider w-1/8">Acciones</th>
                                            </tr>
                                        </thead>
                                        <tbody class="bg-white divide-y divide-gray-200" id="bodyMovimiento">
                                        </tbody>
                                    </table>
                                </div>
                                <div class="mt-2">
                                    <button class="bg-white text-blue-500 py-2 text-sm rounded-md transition-colors duration-200 inline-block" onclick="agregarFilaMovimiento(); return false;">
                                        <i class="material-icons align-middle">add</i> Agregar movimiento
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Columna derecha -->
                    <div class="col-md-4">
                        <div class="bg-white rounded-lg shadow-md">
                            <div class="p-6">
                                <div class="grid grid-cols-12 gap-4 mb-6 text-right">
                                    <div class="col-span-12" id="content-estatus-poliza">

                                    </div>
                                </div>
                                <!-- Totales -->
                                <div class="bg-gray-50 rounded-lg p-4 mb-6">
                                    <div class="grid grid-cols-3 gap-6">
                                        <div class="text-center">
                                            <p class="text-sm font-medium text-gray-600 mb-2">CARGOS</p>
                                            <h6 class="text-lg font-bold text-blue-600" id="cargosText">
                                                $0.00
                                            </h6>
                                        </div>
                                        <div class="text-center">
                                            <p class="text-sm font-medium text-gray-600 mb-2">ABONOS</p>
                                            <h6 class="text-lg font-bold text-blue-600" id="abonosText">
                                                $0.00
                                            </h6>
                                        </div>
                                        <div class="text-center">
                                            <p class="text-sm font-medium text-gray-600 mb-2">DIFERENCIA</p>
                                            <h6 class="text-lg font-bold text-blue-600" id="diferenciaText">$0.00</h6>
                                        </div>
                                    </div>
                                </div>

                                <!-- Acciones -->
                                <div class="bg-gray-50 rounded-lg p-4">
                                    <h3 class="text-lg font-semibold text-gray-900 mb-4 text-center">Acciones</h3>
                                    <div class="grid grid-cols-2 gap-3">


                                        <button class="w-full bg-[#0A415F] hover:bg-[#083549] text-white px-4 py-2 rounded-md transition-colors duration-200 text-sm font-medium shadow-sm flex items-center justify-center gap-2" onclick="calcularDiot()" id="btnDiot" @if(isset($data['id']) && isset($data['poliza']) && $data['poliza']->tipo_poliza == 'E') @else disabled @endif>
                                            <span>DIOT</span>
                                        </button>

                                        @if(isset($data['id']))
                                        <a id="btnPDF" class="w-full bg-[#0A415F] hover:bg-[#083549] text-white px-4 py-2 rounded-md transition-colors duration-200 text-sm font-medium shadow-sm flex items-center justify-center gap-2" href="{{ $data['pdf_poliza'] }}" target="_blank">
                                            <i class="material-icons text-base">picture_as_pdf</i>
                                            <span>PDF</span>
                                        </a>
                                        @endif

                                        <button class="w-full bg-[#0A415F] hover:bg-[#083549] text-white px-4 py-2 rounded-md transition-colors duration-200 text-sm font-medium shadow-sm" id="btnDuplicar" data-toggle="modal" data-target="#modalDuplicar" @if(!isset($data['id'])) disabled @endif>
                                            Duplicar
                                        </button>

                                        @if(isset($data['id']) && $data['estatus'] != 'Cancelada')
                                        <button id="btnCancelarPoliza" class="w-full bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-md transition-colors duration-200 text-sm font-medium shadow-sm" @if(isset($data['id'])) onclick="desactivar('Cancelada', {{ $data['id'] }})" @else disabled @endif>
                                            Cancelar
                                        </button>
                                        @endif

                                        @if(isset($data['id']) && $data['estatus'] == 'Cancelada')
                                        <button id="btnCancelarPoliza" class="w-full bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md transition-colors duration-200 text-sm font-medium shadow-sm" style="display: none;" onclick="desactivar('Activa', {{ $data['id'] }})">
                                            Activar
                                        </button>
                                        @endif

                                        <button class="w-full bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-md transition-colors duration-200 text-sm font-medium shadow-sm" onclick="guardarPoliza()">
                                            Guardar
                                        </button>

                                        <a id="btnNuevaPoliza" class="w-full bg-[#0A415F] hover:bg-[#083549] text-white px-4 py-2 rounded-md transition-colors duration-200 text-sm font-medium shadow-sm text-center" href="{{ route('polizas.index') }}" @if(!isset($data['id'])) style="display: none;" @endif>
                                            Nueva
                                        </a>

                                        <a class="w-full bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-md transition-colors duration-200 text-sm font-medium shadow-sm text-center" href="{{ route('polizas.index') }}">
                                            Restaurar
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade draggable" id="modalBuscarPolizas" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header bg-gray-50 border-b border-gray-200 px-6 py-4">
                <h4 class="modal-title text-lg font-semibold">Buscar pólizas</h4>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label class="block text-sm font-medium text-gray-700">Ejercicio:</label>
                    <select id="ejercicio_filter" class="select2" onchange="getPeriodo(this.value)">
                        <option value="0" selected disabled>-Selecciona-</option>
                        @foreach ($data['ejercicios'] as $p)
                        <option value="{{$p->anio}}"> {{$p->anio}}</option>
                        @endforeach
                    </select>
                </div>
                <div class="form-group">
                    <label class="block text-sm font-medium text-gray-700">Tipo de póliza: <span class="text-danger">*</span></label>
                    <select id="tipo_poliza_filter" class="select2" onchange="getPeriodo(this.value)">
                        @foreach($data['tipospolizas'] as $p)
                        <option value="{{$p->id}}">({{$p->tipo}}) {{$p->descripcion}}</option>
                        @endforeach
                    </select>
                </div>
                <div class="form-group">
                    <label class="block text-sm font-medium text-gray-700">Poliza: </label>
                    <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" id="polizas_search" placeholder="Buscar descripción o referencia de la póliza...">
                    <input type="hidden" class="form-control" id="id_poliza_hidden">
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade draggable" id="modalBuscarCuenta" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header bg-gray-50 border-b border-gray-200 px-6 py-4">
                <h4 class="modal-title">Buscar cuentas</h4>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label>Descripción: </label>
                    <input type="text" class="form-control bs-popover  form-control-sm" id="cuenta_search" data-container="body" data-trigger="hover" data-content="Ingresa la descripción de la cuenta contable.">
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade draggable" id="importarExcel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog ">
        <div class="modal-content">
            <div class="modal-header bg-gray-50 border-b border-gray-200 px-6 py-4">
                <h4 class="modal-title">Importar archivo CSV</h4>
            </div>
            <div class="modal-body">
                <h6 class="text-center card-description">Selecciona tu archivo CSV de movimientos contables a importar</h6>

                <div class="row">
                    <div class="col-md-12 m-1">
                        <input type="file" name="file-csv" id="file-csv" accept=".csv" style="width:130%">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modalVerPdf" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header bg-gray-50 border-b border-gray-200 px-6 py-4">
                <h4 class="modal-title">PDF de póliza</h4>
            </div>
            <div class="modal-body">
                <h5 class="text-center card-description">¿Abrir el PDF de la póliza generada?</h5>
            </div>
            <div class="modal-footer px-6 py-4 bg-gray-50 border-t border-gray-200">
                <button type="button" class="btn btn-danger btn-link" data-dismiss="modal" onclick="abrirPdf(3)">No</button>
                <button type="button" class="btn btn-success" onclick="abrirPdf(2)">Abrir</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="modalDuplicar" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header bg-gray-50 border-b border-gray-200 px-6 py-4">
                <h4 class="modal-title text-lg font-semibold">Duplicar póliza</h4>
            </div>
            <div class="modal-body">
                <!-- <h5 class="text-center card-description">¿Deseas duplicar esta póliza?</h5> -->
                <div class="form-group" data-toggle="popover" data-container="body" data-trigger="hover" data-placement="right" title="¡ADVERTENCIA!" data-content="Una vez guardada la póliza no será posible modificar el periodo.">
                    <label class="block text-sm font-medium text-gray-700">Fecha: <span class="text-danger">*</span></label>
                    <input type="date" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" id="newFecha_creacion" placeholder="10/01/2022" />
                </div>
                <div class="form-group">
                    <label class="block text-sm font-medium text-gray-700">Descripción: <span class="text-danger">*</span></label>
                    <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" id="newDescripcion" />
                </div>
            </div>
            <div class="modal-footer px-6 py-4 bg-gray-50 border-t border-gray-200">
                <button type="button" class="w-full bg-transparent text-red-500 hover:text-red-600 px-3 mr-2 py-1.5 rounded-md transition-colors duration-200 text-center text-sm" data-dismiss="modal">Cerrar</button>
                <button type="button" class="w-full bg-green-500 hover:bg-green-600 text-white px-3 py-1.5 rounded-md transition-colors duration-200 text-center text-sm" onclick="duplicarPoliza()">Duplicar</button>
            </div>
        </div>
    </div>
</div>

<div class="modal draggable fade" id="modalDiot" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header bg-gray-50 border-b border-gray-200 px-6 py-4">
                <h4 class="modal-title">DIOT</h4>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    <i class="las la-times"></i>
                </button>
            </div>
            <div class="modal-body">
                <h5 class="text-center card-description">Ingresa la información para la DIOT</h5>
                <div class="row">
                    <div class="col-md-3">
                        <div class="form-group">
                            <label>Proveedor RFC: <span class="text-danger">*</span></label>
                            <select id="rfc_diot" class="form-control " data-width="100%" data-style="select-with-transition" data-live-search="true" onchange="getFacturasProv(this.value)">
                                <option value="0">-Selecciona-</option>
                                @foreach($data['proveedores'] as $cc)
                                <option value="{{$cc->RFC}}">({{$cc->RFC}}) {{$cc->razon_social}} </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-2">
                        <div class="form-group filled-diot">
                            <label for="clave">Actos 16%:</label>
                            <input type="number" step="any" class="form-control " id="actos16_diot">
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group filled-diot">
                            <label for="clave">Actos 11% </label>
                            <input type="number" step="any" class="form-control " id="actos11_diot">
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group filled-diot">
                            <label for="clave">Actos 8%: </label>
                            <input type="number" step="any" class="form-control " id="actos08_diot">
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group filled-diot">
                            <label for="descripcion">Actos 0%:</label>
                            <input type="number" step="any" class="form-control " id="actos0_diot">
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group filled-diot">
                            <label for="clave">Actos exentos:</label>
                            <input type="number" step="any" class="form-control " id="actose_diot">
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group filled-diot">
                            <label for="clave">IVA retenido:</label>
                            <input type="number" step="any" class="form-control " id="ivare_diot">
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group filled-diot">
                            <label for="clave">IVA no acreditable 16%:</label>
                            <input type="number" step="any" class="form-control " id="iva16_diot">
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group filled-diot">
                            <label for="clave">IVA no acreditable 8%:</label>
                            <input type="number" step="any" class="form-control " id="iva08_diot">
                        </div>
                    </div>

                    <!-- <div class="col-md-2">
                        <div class="form-group filled">
                            <label for="clave" >IVA no acreditable 11%:</label>
                            <input type="number" step="any" class="form-control " id="causa_iva">
                        </div>
                    </div> -->
                    <div class="col-md-2">
                        <button type="button" class="btn btn-primary btn-sm" onclick="addActosDiot()">Agregar</button>
                    </div>
                </div>
                <div class="material-datatables">
                    <table class="table table-striped table-bordered table-hover" cellspacing="0" width="100%" style="width:100%" id="gridDiot">
                        <thead>
                            <tr>
                                <th>Serie y folio</th>
                                <th>RFC</th>
                                <th>Actos IVA 16%</th>
                                <th>Actos IVA 11%</th>
                                <th>Actos IVA 8%</th>
                                <th>Actos IVA 0%</th>
                                <th>Actos IVA exento</th>
                                <th>IVA retenido</th>
                                <th>IVA no acred. 16%</th>
                                <th>IVA no acred. 8%</th>
                                <th>Acciones</th>
                            </tr>
                        </thead>
                        <tbody id="bodyTableDetalles">
                        </tbody>
                    </table>
                </div>

            </div>
            <div class="modal-footer px-6 py-4 bg-gray-50 border-t border-gray-200">
                <button type="button" class="btn btn-danger btn-link" data-dismiss="modal">Cerrar</button>
                <button type="button" class="btn btn-primary" id="btnSaveDiot" style="display: none;" onclick="guardarDiot()">Guardar</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modalArchivosMovimiento" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog ">
        <div class="modal-content">
            <div class="modal-header bg-gray-50 border-b border-gray-200 px-6 py-4">
                <h4 class="modal-title">Agregar XML y PDF</h4>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label>XML:</label>
                    <input type="file" class="form-control" id="fileXMLMovimiento" accept=".xml" />
                </div>
                <div class="form-group">
                    <label>PDF: </label>
                    <input type="file" class="form-control " id="filePDFMovimiento" accept=".pdf" />
                </div>
                <div class="form-group">
                    <label>UUID:</label>
                    <input type="text" class="form-control" id="uuidMovimiento" readonly="true" />
                </div>
            </div>

            <div class="modal-footer px-6 py-4 bg-gray-50 border-t border-gray-200">
                <button type="button" class="btn btn-danger btn-link" data-dismiss="modal">Cerrar</button>
                <button type="button" class="btn btn-success" onclick="agregarArchivos()">Agregar</button>
            </div>
        </div>
    </div>
</div>

<input type="hidden" id="id_factura_hidden">
<input type="hidden" id="id_pdf_poliza_hidden">


<style>
    .table-scroll {
        max-height: 250px;
        /* Establece la altura máxima que quieres para el scroll vertical */
        overflow-y: auto;
        width: 100%;
    }
</style>

<style>
    .select2-container {
        width: 100% !important;
    }

    .select2-container .select2-selection--single {
        height: 40px !important;
    }

    .select2-container .select2-selection--single .select2-selection__rendered {
        line-height: 40px !important;
    }

    .ui-autocomplete-input {
        font-size: 14px;
        z-index: 900;
        position: relative;
    }

    .ui-menu .ui-menu-item a {
        font-size: 12px;
    }

    .ui-autocomplete {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1100 !important;
        float: left;
        display: none;
        padding: 4px 0;
        margin: 2px 0 0 0;
        list-style: none;
        background-color: #ffffff;
        border-color: #ccc;
        border-color: rgba(0, 0, 0, 0.2);
        border-style: solid;
        border-width: 1px;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        border-radius: 2px;
        -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        -webkit-background-clip: padding-box;
        -moz-background-clip: padding;
        background-clip: padding-box;
        *border-right-width: 2px;
        *border-bottom-width: 2px;
    }

    .ui-autocomplete {
        max-height: 200px;
        overflow-y: auto;
        /* prevent horizontal scrollbar */
        overflow-x: hidden;
        /* add padding to account for vertical scrollbar */
        padding-right: 20px;
    }

    .ui-menu-item>a.ui-corner-all {
        display: block;
        padding: 3px 15px;
        clear: both;
        font-weight: normal;
        line-height: 18px;
        color: #555555;
        white-space: nowrap;
        text-decoration: none;
    }

    .ui-state-hover,
    .ui-state-active {
        color: #ffffff;
        text-decoration: none;
        background-color: #0088cc;
        border-radius: 0px;
        -webkit-border-radius: 0px;
        -moz-border-radius: 0px;
        background-image: none;
    }
</style>



<input type="hidden" id="id_cuenta">

@endsection

@push('js')
<script>
    $(document).ready(function() {

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        let today = new Date();
        let dd = String(today.getDate()).padStart(2, '0');
        let mm = String(today.getMonth() + 1).padStart(2, '0');
        let yyyy = today.getFullYear();
        today = yyyy + '-' + mm + '-' + dd;
        $('#fecha_creacion').val(today);

        $('.select2').select2({
            placeholder: "-Selecciona-",
            width: '100%',
        });

        @if(isset($data['id']))
        let idPoliza = @json($data['id']);
        if (idPoliza != '') {
            $('#idPolizaHidden').val(idPoliza);
            let ejercicio = @json($data['ejercicio']);
            getPoliza(idPoliza, ejercicio);
        }
        @endif

        for (let i = 1; i <= 2; i++) {
            agregarFilaMovimiento();
        }

        $('#polizas_search').autocomplete({
            source: function(request, response) {
                $.ajax({
                    url: "{{route('polizas.get_polizas_filtro')}}",
                    dataType: 'json',
                    data: {
                        term: request.term,
                        ejercicio: $('#ejercicio_filter').val(),
                        tipo_poliza: $('#tipo_poliza_filter option:selected').val()
                    },
                    success: function(data) {
                        response(data)
                    }
                })
            },
            select: function(event, ui) {

                //redireccionar a "cont/listado-polizas/edit_poliza/{id}/{ejercicio}"
                window.location.href = "{{route('polizas.edit', ['id' => ':id', 'ejercicio' => ':ejercicio'])}}".replace(':id', ui.item.id).replace(':ejercicio', ui.item.ejercicio);
                return false;
            },
            selectFirst: true,
            minLength: 1
        });
    });


    function agregarFilaMovimiento() {
        var index = $('.row_movimiento').length;
        var newRow = `
            <tr class="bg-white text-sm row_movimiento" data-id-fila="${index}">
                <td class="px-2 py-2">
                    <input type="text" class="cuerta_search w-full px-1 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" id="cuenta_search_${index}" data-id-cuenta="">
                </td>
                <td class="px-2 py-2">
                    <input type="text" class="w-full px-1 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" id="referencia_${index}" placeholder="Referencia" style="min-width: 250px;">
                </td>
                <td class="px-2 py-2">
                    <input type="number" class="inputsCargoAbono w-[100%] px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-right" data-input-type="cargo" id="cargo_${index}" step="any" placeholder="0.00">
                </td>
                <td class="px-2 py-2">
                    <input type="number" class="inputsCargoAbono w-[100%] px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-right" data-input-type="abono" id="abono_${index}" step="any" placeholder="0.00">
                </td>
                <td class="px-2 py-2 text-center ">
                    <button class="text-red-600 hover:text-red-900 w-24" onclick="cancelarFilaMovimiento(this)">
                        <i class="material-icons">close</i>
                    </button>
                </td>
            </tr>
        `;

        $('#bodyMovimiento').append(newRow);

        // Initialize autocomplete
        $(`#cuenta_search_${index}`).autocomplete({
            source: function(request, response) {
                $.ajax({
                    url: "{{route('cuentas-contables.get-cuenta-contable-filter')}}",
                    dataType: 'json',
                    data: {
                        cuenta: request.term
                    },
                    success: function(data) {
                        if (data.length === 0) {
                            response([{
                                label: 'No se encontraron cuentas',
                                value: '',
                                id: '',
                                disabled: true
                            }]);
                            return;
                        }
                        response(data);
                    }
                });
            },
            select: function(event, ui) {
                $(this).val(ui.item.label);
                $(this).attr('data-id-cuenta', ui.item.id);
                $(this).attr('data-descripcion', ui.item.label);
                $('#cuenta_search_' + index).attr('data-id-cuenta', ui.item.id);
                return false;
            },
            minLength: 3
        });

        // Agregar event listener para Enter en todos los campos de la fila
        $(`#cuenta_search_${index}, #referencia_${index}, #cargo_${index}, #abono_${index}`).on('keydown', function(e) {
            if (e.key === 'Enter') {
                e.preventDefault();
                aplicarDiferenciaEnFila(index);
            }
        });

        $(`#cuenta_search_${index}`).focus();
    }

    function aplicarDiferenciaEnFila(indexFila) {
        // Calcular totales actuales excluyendo la fila actual
        var totalCargos = 0;
        var totalAbonos = 0;

        $('.inputsCargoAbono').each(function() {
            var valor = parseFloat($(this).val() || 0);
            var inputType = $(this).data('input-type');
            var filaActual = $(this).closest('tr').attr('data-id-fila');

            // Excluir la fila actual del cálculo
            if (filaActual != indexFila) {
                if (inputType === 'cargo' && valor > 0) {
                    totalCargos += valor;
                } else if (inputType === 'abono' && valor > 0) {
                    totalAbonos += valor;
                }
            }
        });

        // Calcular la diferencia
        var diferencia = totalCargos - totalAbonos;

        // Determinar en qué campo colocar la diferencia
        var cargoField = $(`#cargo_${indexFila}`);
        var abonoField = $(`#abono_${indexFila}`);
        var cargoValue = parseFloat(cargoField.val() || 0);
        var abonoValue = parseFloat(abonoField.val() || 0);

        // Si hay diferencia, colocarla en el campo correspondiente
        if (diferencia !== 0) {
            if (diferencia > 0) {
                // Si hay más cargos que abonos, poner la diferencia en abono
                abonoField.val(diferencia.toFixed(2));
                cargoField.val(cargoValue.toFixed(2));
            } else {
                // Si hay más abonos que cargos, poner la diferencia en cargo
                cargoField.val(Math.abs(diferencia).toFixed(2));
                abonoField.val(abonoValue.toFixed(2));
            }
        } else {
            // Si no hay diferencia, mantener los valores actuales
            cargoField.val(cargoValue.toFixed(2));
            abonoField.val(abonoValue.toFixed(2));
        }

        // Recalcular totales
        calcularTotal();
    }

    function cancelarFilaMovimiento(button) {
        $(button).closest('tr').remove();
        calcularTotal();
    }

    $(document).on('change', '.inputsCargoAbono', function() {
        calcularTotal();
    });

    function calcularTotal() {
        var totalCargos = 0;
        var totalAbonos = 0;

        $('.inputsCargoAbono').each(function() {
            var valor = parseFloat($(this).val() || 0);
            var inputType = $(this).data('input-type');

            if (inputType === 'cargo' && valor > 0) {
                totalCargos += valor;
            } else if (inputType === 'abono' && valor > 0) {
                totalAbonos += valor;
            }
        });

        $('#cargosText').text('$' + totalCargos.toLocaleString('es-MX', {
            minimumFractionDigits: 2,
            maximumFractionDigits: 2
        }));
        $('#abonosText').text('$' + totalAbonos.toLocaleString('es-MX', {
            minimumFractionDigits: 2,
            maximumFractionDigits: 2
        }));
        $('#diferenciaText').text('$' + (totalCargos - totalAbonos).toLocaleString('es-MX', {
            minimumFractionDigits: 2,
            maximumFractionDigits: 2
        }));
    }


    function guardarPoliza() {

        // Obtener información general
        const tipoPoliza = $('#tipo_poliza option:selected').val();
        const numeroPoliza = $('#numero_poliza').val();
        const idPoliza = $('#idPolizaHidden').val();
        const fecha = $('#fecha_creacion').val();
        const descripcion = $('#descripcion').val();
        const referencia = $('#referencia_poliza').val();

        if (!tipoPoliza || tipoPoliza === '0') {
            $('#tipo_poliza').focus();
            Swal.fire({
                icon: 'warning',
                title: '¡Atención!',
                html: '<div class="text-gray-700">El <b style="color:red">tipo de póliza</b> es requerido para poder guardar la póliza</div>',
                confirmButtonColor: '#3085d6',
                confirmButtonText: 'Cerrar'
            });
            return;
        }

        if (!fecha) {
            $('#fecha_creacion').focus();
            Swal.fire({
                icon: 'warning',
                title: '¡Atención!',
                html: '<div class="text-gray-700">La <b style="color:red">fecha</b> es requerida para poder guardar la póliza</div>',
                confirmButtonColor: '#3085d6',
                confirmButtonText: 'Cerrar'
            });
            return;
        }

        if (!descripcion) {
            $('#descripcion').focus();
            Swal.fire({
                icon: 'warning',
                title: '¡Atención!',
                html: '<div class="text-gray-700">La <b style="color:red">descripción</b> es requerida para poder guardar la póliza</div>',
                confirmButtonColor: '#3085d6',
                confirmButtonText: 'Cerrar'
            });
            return;
        }




        // Recolectar datos de movimientos
        var movimientos = [];
        var cuentaInvalida = false;
        $('.row_movimiento').each(function() {
            const idFila = $(this).attr('data-id-fila');
            if ($('#cuenta_search_' + idFila).attr('data-id-cuenta') == "") {
                Swal.fire({
                    icon: 'warning',
                    title: '¡Atención!',
                    html: '<div class="text-gray-700">Selecciona la <b style="color:red">cuenta contable</b> para el movimiento</div>',
                    confirmButtonColor: '#3085d6',
                    confirmButtonText: 'Cerrar'
                });
                $('#cuenta_search_' + idFila).focus();
                cuentaInvalida = true;
                return false;
            }
            movimientos.push({
                id_cuenta: $('#cuenta_search_' + idFila).attr('data-id-cuenta'),
                cargo: parseFloat($('#cargo_' + idFila).val()) || 0,
                abono: parseFloat($('#abono_' + idFila).val()) || 0,
                referencia: $('#referencia_' + idFila).val()
            });
        });
        if (cuentaInvalida) return;

        // Validar que haya movimientos
        if (movimientos.length == 0) {
            Swal.fire({
                icon: 'warning',
                title: '¡Atención!',
                html: '<div class="text-gray-700">Agrega al menos un <b style="color:red">movimiento</b></div>',
                confirmButtonColor: '#3085d6',
                confirmButtonText: 'Cerrar'
            });
            return;
        }

        // Validar cuadre de cargos y abonos
        const cargos = parseFloat($('#cargosText').text().replace('$', '')) || 0;
        const abonos = parseFloat($('#abonosText').text().replace('$', '')) || 0;
        const diferencia = cargos - abonos;

        if (diferencia !== 0) {
            Swal.fire({
                icon: 'warning',
                title: '¡Atención!',
                html: '<div class="text-gray-700">Hay <b style="color:red">diferencia entre los cargos y los abonos</b>, favor de ajustarla.</div>',
                confirmButtonColor: '#3085d6',
                confirmButtonText: 'Cerrar',
            });
            $('.inputsCargoAbono').first().focus();
            return;
        }

        $('#loadingLoad').modal('show');

        $.ajax({
                url: '{{route("polizas.save")}}',
                type: 'POST',
                dataType: 'json',
                data: {
                    tipo_poliza: tipoPoliza,
                    numero_poliza: numeroPoliza,
                    fecha: fecha,
                    id_poliza: idPoliza,
                    descripcion: descripcion,
                    referencia: referencia,
                    movimientos: movimientos,
                },
            })
            .done(function(resp) {
                if (resp.result == 'success') {
                    showNotification('success', 'top', 'center', 'success', '¡HECHO!', resp.mensaje);
                    // Show PDF in modal iframe
                    if (resp.pdf && resp.pdf.url) {
                        let modalHtml = `
                            <div class="modal fade draggable" id="pdfModal" tabindex="-1" role="dialog">
                                <div class="modal-dialog modal-lg">
                                    <div class="modal-content">
                                        <div class="modal-header bg-gray-50 border-b border-gray-200 px-6 py-4">
                                            <h5 class="modal-title text-lg font-semibold">Vista previa del PDF</h5>
                                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                                        </div>
                                        <div class="modal-body">
                                            <iframe src="${resp.pdf.url}" style="width:100%; height:500px;" frameborder="0"></iframe>
                                        </div>
                                    </div>
                                </div>
                            </div>`;

                        $('body').append(modalHtml);
                        $('#pdfModal').modal('show');

                        $('#pdfModal').on('hidden.bs.modal', function() {
                            $(this).remove();
                        });
                    }
                    return false;
                }

                if (resp.type && resp.type == 'periodo') {
                    Swal.fire({
                        icon: 'error',
                        title: 'Atención',
                        html: '<div class="text-gray-700">No se puede guardar la póliza, debido a: <span class="font-semibold text-red-500">' + resp.mensaje + '</span></div>',
                        confirmButtonColor: '#0A415F',
                        confirmButtonText: 'Abrir periodo',
                        showDenyButton: true,
                        denyButtonText: 'Cerrar',
                    }).then((result) => {
                        if (result.isConfirmed) {
                            fetchAbrirPeriodo($('#fecha_creacion').val());
                        }
                    });
                    return false;
                }
                showNotification('error', 'top', 'center', 'danger', '¡ERROR!', resp.mensaje);
            })
            .fail(function(xhr) {
                const errorInput = xhr.responseJSON?.field;
                if (errorInput) {
                    $(`#${errorInput}`).addClass('error-input').focus();
                }
            })
            .always(function() {
                $('#loadingLoad').modal('hide');
            });
    }

    function getPoliza(idPoliza, ejercicio) {
        $.ajax({
            url: '{{route("polizas.get-poliza")}}',
            type: 'POST',
            dataType: 'json',
            data: {
                id: idPoliza,
                ejercicio: ejercicio
            },
            success: function(resp) {
                // Set general poliza info
                $('#tipo_poliza').val(resp.poliza.id_tipopoliza).trigger('change');
                $('#fecha_creacion').val(resp.poliza.fecha);
                $('#descripcion').val(resp.poliza.descripcion);
                $('#referencia_poliza').val(resp.poliza.referencia);
                $('#numero_poliza').val(resp.poliza.numero_poliza);
                // Crear badge de estatus de la póliza
                let badgeColor = resp.poliza.estatus == 'Activa' ? 'bg-green-500' : 'bg-red-500';
                let badgeText = resp.poliza.estatus;
                $('#content-estatus-poliza').html(
                    `<span class="inline-block px-3 py-1 rounded-full text-white text-xs font-semibold ${badgeColor}">${badgeText}</span>`
                );

                if (resp.poliza.estatus != 'Activa') {
                    $('#btnCancelarPoliza').show();
                }
                // Clear existing rows
                $('#bodyMovimiento').empty();

                // Add rows for each detail
                resp.detalles.forEach((detalle, index) => {
                    // Add new row
                    agregarFilaMovimiento();

                    // Get the new row elements
                    const cuentaSearch = $(`#cuenta_search_${index}`);
                    const referencia = $(`#referencia_${index}`);
                    const cargo = $(`#cargo_${index}`);
                    const abono = $(`#abono_${index}`);

                    // Set values
                    cuentaSearch.val(detalle.cuenta);
                    cuentaSearch.attr('data-id-cuenta', detalle.id_cuenta);
                    referencia.val(detalle.referencia);
                    cargo.val(detalle.cargo);
                    abono.val(detalle.abono);
                });

                calcularTotal();
            }
        });
    }

    function duplicarPoliza() {
        var id = $('#idPolizaHidden').val();
        var fecha_creacion = $('#newFecha_creacion').val()
        var descripcion = $('#newDescripcion').val()
        var ejercicio = @json($data['ejercicio']);
        if (fecha_creacion == '' || descripcion == '') {
            // showNotification('error', 'top', 'center', 'danger', '¡ERROR!', 'Debes agregar la información de la póliza.')
            $('#error_message').text('Debes agregar la información de la póliza.');
            $('#error').show();
            return false;
        }
        $('#loadingLoad').modal('show');
        $.ajax({
                url: "{{route('polizas.duplicar_poliza')}}",
                type: 'POST',
                dataType: 'json',
                data: {
                    id: id,
                    fecha: fecha_creacion,
                    descripcion: descripcion,
                    ejercicio: ejercicio,
                }
            })
            .done(function(resp) {
                setTimeout(() => {
                    if (resp.result == 'success') {
                        showNotification('thumb_up', 'top', 'center', 'success', '¡BIEN!', resp.mensaje)
                        return false;
                    }
                    showNotification('error', 'top', 'center', 'danger', '¡ERROR!', resp.mensaje)
                    $('#modalDuplicar').modal('hide');
                }, 2000);
            })
            .fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");
                setTimeout(() => {
                    $('#loadingLoad').modal('hide');
                }, 2000);
            });
    }

    function desactivar(estatus, id) {
        var ejercicio = @json($data['ejercicio']);
        if (estatus == 'Cancelada') {
            txt = '¿Estas seguro de cancelar la póliza?'
            txt2 = 'Se inactivo correctamente'
        }
        if (estatus == 'Activa') {
            txt = '¿Estas seguro activar de la póliza?'
            txt2 = 'Se activo correctamente'
        }
        Swal.fire({
            title: txt,
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            cancelButtonText: 'Cancelar',
            confirmButtonText: 'Sí, ¡hazlo!'
        }).then((result) => {
            if (result.value) {
                $('#loadingModal').modal('show');
                $.ajax({
                        url: "{{route('polizas.updateEstatus')}}",
                        type: 'POST',
                        dataType: 'json',
                        data: {
                            estatus: estatus,
                            id: id,
                            ejercicio: ejercicio
                        }
                    })
                    .done(function(resp) {
                        setTimeout(() => {
                            // showNotification('thumb_up', 'top', 'center', 'success', '¡BIEN!', txt2)
                            $('#success_message').text(resp.mensaje);
                            $('#success').show();
                            // window.location.replace("{{url('cont/polizas')}}");
                            //recargar la pagina
                            location.reload();
                        }, 2000);
                    })
                    .fail(function() {
                        console.log("error");
                    })
                    .always(function() {
                        console.log("complete");
                        setTimeout(() => {
                            $('#loadingModal').modal('hide');
                        }, 2000);
                    });
            }
        })
    }
</script>
@endpush