@extends('layouts.app', ['activePage' => 'configuracion', 'menuParent' => 'configuracion', 'titlePage' => __('Cátalogos')])

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



<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">Parámetros contables</h6>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="bg-white shadow rounded-lg">
                    <div class="px-4 ">
                        <div class="border-b border-gray-200">
                            <nav class="-mb-px flex space-x-8" aria-label="Tabs">
                                <a href="#link1" class="border-blue-500 text-blue-600 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm active" data-toggle="tab" role="tablist">
                                    Periodos y ejercicios
                                </a>
                                <a href="#link2" class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm" data-toggle="tab" role="tablist" onclick="loadAsignacionCuentasContables()">
                                    Asignación de cuentas
                                </a>
                                <a href="#link3" class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm" data-toggle="tab" role="tablist" onclick="loadTipoPolizas()">
                                    Tipos de pólizas
                                </a>

                                <a href="#link5" class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm" data-toggle="tab" role="tablist" onclick="loadMonedas()">
                                    Monedas
                                </a>
                                <a href="#link6" class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm" data-toggle="tab" role="tablist" onclick="loadConfiguracion()">
                                    Configuración
                                </a>
                                <!-- <a href="#link7" class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm" data-toggle="tab" role="tablist" onclick="loadFolios()">
                                    Folios
                                </a> -->
                            </nav>
                        </div>

                        <div class="tab-content tab-space mt-6">
                            <!-- PERIODOS Y EJECICIOS -->
                            <div class="tab-pane active" id="link1">
                                <div class="bg-white shadow rounded-lg p-6">
                                    <div class="flex justify-between items-center mb-6">
                                        <h3 class="text-lg font-semibold text-gray-800">Gestión de ejercicios y periodos</h3>
                                        <button onclick="nuevoEjercicio()" class="font-medium bg-[#0A415F] hover:bg-[#083549] text-white px-4 py-2 text-sm rounded-md transition-colors duration-200">
                                            <i class="material-icons text-sm mr-1">add</i>
                                            Nuevo ejercicio
                                        </button>
                                    </div>

                                    <div class="flex gap-2 mb-4 justify-end" id="acordeon-ejercicios-expandir-contraer" style="display: none;">
                                        <button onclick="expandirAccordionEjercicios()" class="px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors duration-200">
                                            <i class="material-icons align-middle text-sm">unfold_more</i> Expandir todo
                                        </button>
                                        <button onclick="contraerAccordionEjercicios()" class="px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors duration-200">
                                            <i class="material-icons align-middle text-sm">unfold_less</i> Contraer todo
                                        </button>
                                    </div>

                                    <div id="acordeon-ejercicios" class="space-y-4" style="max-height: 600px; overflow-y: auto;">
                                        <!-- El acordeón se cargará dinámicamente aquí -->
                                    </div>
                                </div>
                            </div>
                            <!-- ASIGNACIÓN DE CUENTAS -->
                            <div class="tab-pane " id="link2">
                                <div class="row mb-2">
                                    <div class="col-12 ">
                                        <button type="submit" class="font-medium bg-gray-200 hover:bg-gray-300 text-gray-700 px-4 py-2 mr-2 text-sm rounded-md transition-colors duration-200" onclick="limpiarAsignacion()"><i class="fas fa-broom mr-2"></i>Limpiar</button>
                                        <button type="submit" class="font-medium bg-[#0A415F] hover:bg-[#083549] text-white px-4 py-2 text-sm rounded-md transition-colors duration-200" onclick="guardarAsignacion()"><i class="fas fa-save mr-2"></i>Guardar</button>
                                    </div>
                                </div>

                                <div class="grid grid-cols-12 gap-4">
                                    <div class="col-span-4 bg-gray-110 shadow rounded-lg p-4">
                                        <label class="block text-lg font-medium text-gray-700 mb-1">
                                            <i class="fas fa-cog mr-2"></i>
                                            Generales
                                        </label>
                                        <div class="flex flex-col" id="content-asignacion-cuentas-generales">

                                        </div>
                                    </div>
                                    <div class="col-span-4 bg-gray-110 shadow rounded-lg p-4">
                                        <label class="block text-lg font-medium text-gray-700 mb-1">
                                            <i class="fas fa-truck mr-2"></i>
                                            Proveedores
                                        </label>
                                        <div class="flex flex-col" id="content-asignacion-cuentas-proveedores">

                                        </div>
                                    </div>
                                    <div class="col-span-4 bg-gray-110 shadow rounded-lg p-4">
                                        <label class="block text-lg font-medium text-gray-700 mb-1">
                                            <i class="fas fa-users mr-2"></i>
                                            Clientes
                                        </label>
                                        <div class="flex flex-col" id="content-asignacion-cuentas-clientes">

                                        </div>
                                    </div>
                                </div>

                            </div>
                            <!-- TIPOS DE POLIZAS -->
                            <div class="tab-pane" id="link3">
                                <div class="row col-12">
                                    <div class="col-md-4">
                                        <div class="bg-white shadow rounded-lg p-4">
                                            <input type="hidden" class="form-control" id="idTipoPHidden">
                                            <label class="block text-lg font-medium text-gray-700 mb-1">
                                                Nuevo tipo de póliza
                                            </label>
                                            <div class="flex flex-col">
                                                <div class="mb-2">
                                                    <label for="exampleEmail" class="block text-sm font-medium text-gray-700 mb-1">Tipo: <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="tipoP">
                                                </div>
                                                <div class="mb-2">
                                                    <label for="exampleEmail" class="block text-sm font-medium text-gray-700 mb-1">Descripción: <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="descripcionP">
                                                </div>
                                                <div class="mb-2">
                                                    <label class="block text-sm font-medium text-gray-700 mb-1">Estatus:<span class="text-red-500">*</span></label>
                                                    <select id="estatusP" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                                                        <option value="Activa" selected>Activa</option>
                                                        <option value="Restringida">Restringida</option>
                                                        <option value="Cancelada">Cancelada</option>
                                                    </select>
                                                </div>

                                                <div class="flex justify-end">
                                                    <button type="submit" class="font-medium bg-gray-200 hover:bg-gray-300 text-gray-700 px-4 py-2 mr-2 text-sm rounded-md transition-colors duration-200" onclick="limpiarModalTipoPolizas()">Limpiar</button>
                                                    <button type="submit" class="font-medium bg-[#0A415F] hover:bg-[#083549] text-white px-4 py-2 text-sm rounded-md transition-colors duration-200" onclick="guardarTipoPoliza()">Guardar</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row date-table-container layout-top-spacing col-md-8">
                                        <div class="table-responsive">
                                            <table class="min-w-full divide-y divide-gray-200" id="tableTiposPolizas">
                                                <thead class="bg-gray-50 px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                                    <tr>
                                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tipo de póliza</th>
                                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Descripción</th>
                                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Estatus</th>
                                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Acciones</th>
                                                    </tr>
                                                </thead>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- MONEDAS -->
                            <div class="tab-pane " id="link5">
                                <div class="row col-12">
                                    <div class="col-md-4">
                                        <div class="bg-white shadow rounded-lg p-4">
                                            <label class="block text-lg font-medium text-gray-700 mb-1">Nueva moneda</label>
                                            <input type="hidden" class="form-control" id="idMonedaHidden">

                                            <div class="flex flex-col">
                                                <div class="mb-2">
                                                    <label for="exampleEmail" class="block text-sm font-medium text-gray-700 mb-1">Divisa:<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="nombre_moneda">
                                                </div>

                                                <div class="mb-2">
                                                    <label for="exampleEmail" class="block text-sm font-medium text-gray-700 mb-1">Descripción:<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_moneda">
                                                </div>
                                                <div class="flex justify-end">
                                                    <button type="submit" class="font-medium bg-gray-200 hover:bg-gray-300 text-gray-700 px-4 py-2 mr-2 text-sm rounded-md transition-colors duration-200" onclick="limpiarModalMoneda()">Limpiar</button>
                                                    <button type="submit" class="font-medium bg-[#0A415F] hover:bg-[#083549] text-white px-4 py-2 text-sm rounded-md transition-colors duration-200" onclick="guardarMoneda()">Guardar</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row date-table-container layout-top-spacing col-md-8">
                                        <div class="table-responsive">
                                            <table class="min-w-full divide-y divide-gray-200" id="tableMonedas">
                                                <thead class="bg-gray-50 px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                                    <tr>
                                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID</th>
                                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Divisa</th>
                                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Descripción</th>
                                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Estatus</th>
                                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Acciones</th>
                                                    </tr>
                                                </thead>
                                                <tbody>

                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane " id="link6">
                                <div class="row col-12">
                                    <div class="col-md-4">
                                        <div class="bg-white shadow rounded-lg p-4">
                                            <label class="block text-lg font-medium text-gray-700 mb-1">Configuración de pólizas</label>
                                            <div class="flex flex-col">
                                                <div class="mb-2">
                                                    <label for="exampleEmail" class="block text-sm font-medium text-gray-700 mb-1">Pólizas de depositos:</label>
                                                    <select id="poliza_ingreso" id_tabla="1" descripcion_tabla="poliza_ingreso" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                                                        <option value="">-Selecciona-</option>
                                                        @foreach($data['tipospolizas'] as $m)
                                                        <option value="{{$m->id}}">({{$m->tipo}}) {{$m->descripcion}}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                                <div class="mb-2">
                                                    <label for="exampleEmail" class="block text-sm font-medium text-gray-700 mb-1">Pólizas de pagos:</label>
                                                    <select id="poliza_pago" id_tabla="2" descripcion_tabla="poliza_pago" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                                                        <option value="">-Selecciona-</option>
                                                        @foreach($data['tipospolizas'] as $m)
                                                        <option value="{{$m->id}}">({{$m->tipo}}) {{$m->descripcion}}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                                <div class="mb-2">
                                                    <label for="exampleEmail" class="block text-sm font-medium text-gray-700 mb-1">Pólizas de diario ventas:</label>
                                                    <select id="poliza_clientes" id_tabla="3" descripcion_tabla="poliza_clientes" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                                                        <option value="">-Selecciona-</option>
                                                        @foreach($data['tipospolizas'] as $m)
                                                        <option value="{{$m->id}}">({{$m->tipo}}) {{$m->descripcion}}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                                <div class="mb-2">
                                                    <label for="exampleEmail" class="block text-sm font-medium text-gray-700 mb-1">Pólizas de diario egresos:</label>
                                                    <select id="poliza_proveedores" id_tabla="4" descripcion_tabla="poliza_proveedores" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                                                        <option value="">-Selecciona-</option>
                                                        @foreach($data['tipospolizas'] as $m)
                                                        <option value="{{$m->id}}">({{$m->tipo}}) {{$m->descripcion}}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                                <div class="mb-2">
                                                    <label for="exampleEmail" class="block text-sm font-medium text-gray-700 mb-1">Pólizas de diario o cuadre:</label>
                                                    <select id="poliza_diario" id_tabla="5" descripcion_tabla="poliza_diario" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                                                        <option value="">-Selecciona-</option>
                                                        @foreach($data['tipospolizas'] as $m)
                                                        <option value="{{$m->id}}">({{$m->tipo}}) {{$m->descripcion}}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="flex justify-end">
                                                <button type="submit" class="font-medium bg-gray-200 hover:bg-gray-300 text-gray-700 px-4 py-2 mr-2 text-sm rounded-md transition-colors duration-200" onclick="limpiarModalConfiguracion()">Limpiar</button>
                                                <button type="submit" class="font-medium bg-[#0A415F] hover:bg-[#083549] text-white px-4 py-2 text-sm rounded-md transition-colors duration-200" onclick="guardarConfiguracion()">Guardar</button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="bg-white shadow rounded-lg p-4">
                                            <label class="block text-lg font-medium text-gray-700 mb-1">Configuración de pólizas automáticas</label>
                                            <div class="mt-4">
                                                <label class="block text-sm font-medium text-gray-700 mb-2">Pólizas de provisión automáticas</label>
                                                <div class="space-y-2">
                                                    <div class="inline-block mr-4">
                                                        <input type="radio" id="activado_provision" name="provision_automatica" value="Activado" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300" checked>
                                                        <label for="activado_provision" class="ml-2 text-sm text-gray-700">Activado</label>
                                                    </div>
                                                    <div class="inline-block">
                                                        <input type="radio" id="desactivado_provision" name="provision_automatica" value="Desactivado" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300">
                                                        <label for="desactivado_provision" class="ml-2 text-sm text-gray-700">Desactivado</label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="mt-4">
                                                <label class="block text-sm font-medium text-gray-700 mb-2">Pólizas de pagos/depositos automáticas</label>
                                                <div class="space-y-2">
                                                    <div class="inline-block mr-4">
                                                        <input type="radio" id="activado_pagos" name="pagos_depositos_automatica" value="Activado" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300" checked>
                                                        <label for="activado_pagos" class="ml-2 text-sm text-gray-700">Activado</label>
                                                    </div>
                                                    <div class="inline-block">
                                                        <input type="radio" id="desactivado_pagos" name="pagos_depositos_automatica" value="Desactivado" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300">
                                                        <label for="desactivado_pagos" class="ml-2 text-sm text-gray-700">Desactivado</label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="bg-white shadow rounded-lg p-4">
                                            <label class="block text-lg font-medium text-gray-700 mb-1">Configuración de pagos/depositos automáticos</label>
                                            <div class="mt-4">
                                                <label class="block text-sm font-medium text-gray-700 mb-2">Generar pagos/depositos automaticós para facturas PUE</label>
                                                <div class="space-y-2">
                                                    <div class="inline-block mr-4">
                                                        <input type="radio" id="activado_pagos_pue_auto" name="pagos_pue_auto" value="Activado" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300" checked>
                                                        <label for="activado_pagos_pue_auto" class="ml-2 text-sm text-gray-700">Activado</label>
                                                    </div>
                                                    <div class="inline-block">
                                                        <input type="radio" id="desactivado_pagos_pue_auto" name="pagos_pue_auto" value="Desactivado" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300">
                                                        <label for="desactivado_pagos_pue_auto" class="ml-2 text-sm text-gray-700">Desactivado</label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="mt-1">
                                                <label class="block text-sm font-medium text-gray-700 mb-2">Generar pagos/depositos automaticós para complementos de pagos</label>
                                                <div class="space-y-2">
                                                    <div class="inline-block mr-4">
                                                        <input type="radio" id="activado_pagos_complementos_auto" name="pagos_complementos_auto" value="Activado" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300" checked>
                                                        <label for="activado_pagos_complementos_auto" class="ml-2 text-sm text-gray-700">Activado</label>
                                                    </div>
                                                    <div class="inline-block">
                                                        <input type="radio" id="desactivado_pagos_complementos_auto" name="pagos_complementos_auto" value="Desactivado" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300">
                                                        <label for="desactivado_pagos_complementos_auto" class="ml-2 text-sm text-gray-700">Desactivado</label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="mb-2">
                                                <label for="exampleEmail" class="block text-sm font-medium text-gray-700 mb-1">Banco por defecto:</label>
                                                <select id="banco_pagos" id_tabla="2" class="pue_pagos_auto w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                                                    <option value="">-Selecciona-</option>
                                                    @foreach($data['bancos'] as $m)
                                                    <option value="{{$m->id}}">({{$m->nombre}}) {{$m->descripcion}}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <div class="mb-2">
                                                <label for="exampleEmail" class="block text-sm font-medium text-gray-700 mb-1">Forma de pago por defecto:</label>
                                                <select id="forma_pago_pagos" id_tabla="2" class="pue_pagos_auto w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                                                    <option value="">-Selecciona-</option>
                                                    @foreach($data['forma_pago'] as $m)
                                                    <option value="{{$m->idFormapago}}">{{$m->nombre}}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- FOLIOS -->
                            <div class="tab-pane " id="link7">
                                <div class="row">
                                    <div class="col-12 text-right">
                                        <button class="btn btn-primary " onclick="nuevoFolio()">Nuevo folio contable</button>
                                    </div>
                                </div>
                                <div class="row date-table-container layout-top-spacing">
                                    <div class="table-responsive">
                                        <table class="table table-striped table-bordered table-hover" cellspacing="0" width="100%" style="width:100%" id="tableFolios">
                                            <thead>
                                                <tr>
                                                    <th>Tipo póliza</th>
                                                    <th>Folio</th>
                                                    <th>Fecha de creación</th>
                                                    <th>Acciones</th>
                                                </tr>
                                            </thead>

                                            <tbody>

                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<div class="modal fade draggable" id="modalNuevoPeriodo" 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">
                <h5 class="modal-title text-lg font-semibold text-gray-900" id="title-modal-generar-pago">Nuevo periodo</h5>
                <button type="button" class="close text-gray-400 hover:text-gray-500" data-dismiss="modal" aria-label="Close">
                    <i class="material-icons">close</i>
                </button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="idPeriodoHidden">
                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700">Periodos contables: <span class="text-red-500">*</span></label>
                        <select id="periodo" 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" disabled selected>-Selecciona-</option>
                            @foreach($data['meses'] as $m)
                            <option value="{{$m->id}}" descripcion="{{$m->descripcion}}" mes="{{$m->mes}}">{{$m->descripcion}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700">Ejercicio:</label>
                        <select id="id_ejercicio" 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" disabled selected>-Selecciona-</option>
                            @foreach($data['ejercicios'] as $m)
                            <option value="{{$m->id}}" anio="{{$m->anio}}">{{$m->anio}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="flex items-center">
                        <input id="cerrarperiodo" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                        <label for="cerrarperiodo" class="ml-2 mt-2 block text-sm text-gray-900">Cerrar último periodo</label>
                    </div>
                </div>
            </div>
            <div class="modal-footer px-6 py-4 bg-gray-50 border-t border-gray-200 px-6 py-4">
                <button type="button" class="bg-transparent text-red-500 hover:text-red-600 mr-2 px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200" data-dismiss="modal">Cerrar</button>
                <button type="button" class="bg-[#0A415F] hover:bg-[#083549] text-white px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200" onclick="guardarPeriodo()">Guardar</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade draggable" id="modalNuevoEjercicio" 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">
                <h5 class="modal-title text-lg font-semibold text-gray-900" id="title-modal-generar-pago">Nuevo ejercicio</h5>
                <button type="button" class="close text-gray-400 hover:text-gray-500" data-dismiss="modal" aria-label="Close">
                    <i class="material-icons">close</i>
                </button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="idEjercicio">
                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700">Ejercicio contable:</label>
                        <input type="number" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" id="dateEjercicio" min="1900" max="2100" step="1" placeholder="Año" />
                    </div>
                    <div class="flex items-center">
                        <input id="cerrarejercicio" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                        <label for="cerrarejercicio" class="ml-2 mt-2 block text-sm text-gray-900">Cerrado</label>
                    </div>
                </div>
            </div>

            <div class="modal-footer px-6 py-4 bg-gray-50 border-t border-gray-200 px-6 py-4">
                <button type="button" class="bg-transparent text-red-500 hover:text-red-600 mr-2 px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200" data-dismiss="modal">Cerrar</button>
                <button type="button" class="bg-[#0A415F] hover:bg-[#083549] text-white px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200" onclick="guardarEjercicio()">Guardar</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade draggable" id="modalCierreEjercicio" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="bg-white rounded-lg shadow-xl">
            <div class="px-4 py-5 sm:px-6 border-b border-gray-200">
                <div class="flex items-center justify-between">
                    <h3 class="text-lg leading-6 font-medium text-gray-900">Cierre de ejercicio</h3>
                    <button type="button" class="text-gray-400 hover:text-gray-500" data-dismiss="modal" aria-label="Close">
                        <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                        </svg>
                    </button>
                </div>
            </div>
            <input type="hidden" id="idEjercicio">
            <div class="px-4 py-5 sm:p-6">
                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700">Cuenta de resultados: <span class="text-red-500">*</span></label>
                        <select class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md" id="cuentaResultados">
                            @foreach ($data['cuentasResultados'] as $cuenta)
                            <option value="{{ $cuenta['id'] }}"> {{ $cuenta['cuenta']  }} ({{ $cuenta['descripcion']  }})</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>
            <div class="px-4 py-3 bg-gray-50 text-right sm:px-6">
                <button type="button" class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500" data-dismiss="modal">Cerrar</button>
                <button type="button" class="ml-3 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" onclick="guardarCierreEjercicio();">Aceptar</button>
            </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">
                <h4 class="modal-title">PDF de póliza</h4>
            </div>
            <div class="modal-body">
                <h5 class="text-center card-description" style="margin-top: -20px;">¿Deseas abrir el PDF de la póliza generada?</h5>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger btn-link" data-dismiss="modal">No</button>
                <button type="button" class="btn btn-success" onclick="abrirPdf(2)">Abrir</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade draggable" id="modalNuevoFolio" tabindex="-1" aria-labelledby="myModalLabel" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="titleModalFolio">Folios contables</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <i class="las la-times"></i>
                </button>
            </div>
            <input type="hidden" id="idFolioHidden">
            <div class="modal-body">
                <div class="form-group">
                    <label>Tipo de póliza: <span class="text-danger">*</span></label>
                    <select id="tipo_poliza" class="form-control">
                        <option value="0" disabled selected>-Selecciona-</option>
                        @foreach($data['tipospolizas'] as $m)
                        <option value="{{$m->id}}">({{$m->tipo}}) {{$m->descripcion}}</option>

                        @endforeach
                    </select>
                </div>
                <div class="form-group ">
                    <label for="exampleEmail">Folio: <span class="text-danger">*</span></label>
                    <input type="text" class="form-control" id="folio" value="0">
                </div>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger btn-link" data-dismiss="modal">Cerrar</button>
                <button type="button" class="btn btn-primary" onclick="guardarFolio()">Guardar</button>
            </div>
        </div>
    </div>
</div>

<style>
    .tab-pane {
        display: none;
    }

    .tab-pane.active {
        display: block;
    }

    .tab-content {
        margin-top: 1.5rem;
    }

    .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;
    }


    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_processing,
    .dataTables_wrapper .dataTables_paginate {
        font-size: 13px;
    }

    .dataTables_wrapper .dataTables_length select,
    .dataTables_wrapper .dataTables_filter input {
        font-size: 13px !important;
    }

    table.dataTable thead th,
    table.dataTable thead td {
        font-size: 13px !important;
    }

    table.dataTable tfoot th,
    table.dataTable tfoot td {
        font-size: 13px !important;
    }

    table.dataTable tbody td {
        font-size: 13px !important;
    }


    table.dataTable tbody tr:hover {
        background-color: #f8f9fa;
        cursor: pointer;
    }

    .dataTables_wrapper .dataTables_filter input {
        padding: 0.25rem 0.5rem !important;
        border-radius: 0.375rem !important;
        border: 1px solid #e2e8f0 !important;
    }

    .dataTables_wrapper .dataTables_filter input:focus {
        outline: none !important;
        border-color: #0A415F !important;
        box-shadow: 0 0 0 2px rgba(10, 65, 95, 0.1) !important;
    }

    /* Estilos para el acordeón de ejercicios y periodos */
    .acordeon-ejercicio-item {
        border: 1px solid #d1d5db;
        border-radius: 0.5rem;
        margin-bottom: 0.5rem;
        overflow: hidden;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }

    .acordeon-ejercicio-header {
        background-color: #ffffff;
        padding: 1rem;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        transition: all 0.2s ease;
        border-bottom: 1px solid #f3f4f6;
    }

    .acordeon-ejercicio-header:hover {
        background-color: #f8fafc;
        border-left: 4px solid #3b82f6;
    }

    .acordeon-ejercicio-header.active {
        background-color: #f3f4f6;
        border-left: 4px solid #fbbf24;
    }

    .acordeon-ejercicio-content {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
        background-color: #fafafa;
    }

    .acordeon-ejercicio-content.active {
        max-height: 10000px;
    }

    .acordeon-ejercicio-icon {
        transition: transform 0.3s ease;
        color: #6b7280;
    }

    .acordeon-ejercicio-header.active .acordeon-ejercicio-icon {
        transform: rotate(180deg);
        color: #6b7280;
    }

    .periodo-item {
        padding: 1rem;
        border-bottom: 1px solid #e5e7eb;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #ffffff;
        transition: background-color 0.2s ease;
        margin: 0.5rem;
        border-radius: 0.375rem;
    }

    .periodo-item:hover {
        background-color: #f9fafb;
    }

    .periodo-item:last-child {
        border-bottom: none;
    }

    .periodo-info {
        flex: 1;
    }

    .periodo-acciones {
        display: flex;
        gap: 0.5rem;
    }

    .btn-accion-periodo {
        padding: 0.5rem 0.75rem;
        border-radius: 0.375rem;
        font-size: 0.75rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s ease;
        border: none;
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
    }

    .btn-editar-periodo {
        background-color: #2563eb;
        color: white;
    }

    .btn-editar-periodo:hover {
        background-color: #1d4ed8;
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2);
    }

    .btn-estatus-periodo {
        background-color: #059669;
        color: white;
    }

    .btn-estatus-periodo:hover {
        background-color: #047857;
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(5, 150, 105, 0.2);
    }

    .btn-estatus-periodo.inactivo {
        background-color: #7c3aed;
    }

    .btn-estatus-periodo.inactivo:hover {
        background-color: #6d28d9;
        box-shadow: 0 2px 4px rgba(124, 58, 237, 0.2);
    }

    .ejercicio-indicator {
        display: inline-flex;
        align-items: center;
        gap: 0.75rem;
        font-weight: 600;
    }

    .ejercicio-anio {
        font-weight: 700;
        color: #1f2937;
        font-size: 1.1rem;
    }

    .ejercicio-descripcion {
        color: #4b5563;
        font-size: 0.875rem;
        font-weight: 400;
    }

    .estatus-badge-ejercicio {
        padding: 0.375rem 0.75rem;
        border-radius: 9999px;
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .estatus-abierto {
        background-color: #d1fae5;
        color: #065f46;
        border: 1px solid #a7f3d0;
    }

    .estatus-cerrado {
        background-color: #fee2e2;
        color: #991b1b;
        border: 1px solid #fca5a5;
    }

    .btn-cerrar-ejercicio {
        background-color: #dc2626;
        color: white;
    }

    .btn-cerrar-ejercicio:hover {
        background-color: #b91c1c;
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(220, 38, 38, 0.2);
    }

    .btn-abrir-ejercicio {
        background-color: #059669;
        color: white;
    }

    .btn-abrir-ejercicio:hover {
        background-color: #047857;
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(5, 150, 105, 0.2);
    }

    .btn-nuevo-periodo {
        background-color: #059669;
        color: white;
    }

    .btn-nuevo-periodo:hover {
        background-color: #047857;
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(5, 150, 105, 0.2);
    }

    .periodo-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.5rem 1rem;
        background-color: #f8fafc;
        border-bottom: 1px solid #e5e7eb;
    }

    .periodo-header h4 {
        font-weight: 600;
        color: #374151;
        margin: 0;
    }
</style>

<input type="hidden" id="id_pdf_poliza_hidden">
<!-- NIVELES DE CUENTAS -->
<input type="hidden" id="idNivelesHidden">


@endsection

@push('js')

<script>
    const ajaxErrorMessage = {
        icon: 'error',
        title: '¡Lo sentimos!',
        text: ''
    }

    const workDoneMessage = {
        icon: 'success',
        title: '¡Hecho!',
        text: '',
    }

    const noContentMessageOptions = {
        icon: 'info',
        title: '¡Sin contenido!',
        text: '',
        confirmButtonText: 'Aceptar'
    }

    // Función para manejar los tabs
    function initTabs() {
        // Usar jQuery para evitar conflictos con Bootstrap Material Design
        $('[data-toggle="tab"]').off('click').on('click', function(e) {
            e.preventDefault();
            e.stopPropagation();

            var $this = $(this);
            var targetId = $this.attr('href').substring(1);

            // Remover clases activas de todos los tabs
            $('[data-toggle="tab"]').removeClass('border-blue-500 text-blue-600').addClass('border-transparent text-gray-500');

            // Agregar clases activas al tab clickeado
            $this.removeClass('border-transparent text-gray-500').addClass('border-blue-500 text-blue-600');

            // Ocultar todos los paneles
            $('.tab-pane').removeClass('active').hide();

            // Mostrar el panel correspondiente
            $('#' + targetId).addClass('active').show();

            // Ejecutar función específica del tab si existe
            var onclick = $this.attr('onclick');
            if (onclick) {
                // Remover el onclick del atributo para evitar ejecución doble
                $this.removeAttr('onclick');
                // Ejecutar la función
                setTimeout(function() {
                    eval(onclick);
                }, 100);
            }
        });

        // Mostrar el primer tab por defecto
        $('[data-toggle="tab"]').first().click();
    }

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

        // Inicializar tabs
        initTabs();

        loadEjerciciosAccordion();
    });

    function loadEjerciciosAccordion() {
        $('#acordeon-ejercicios').html(`
            <div class="flex flex-col justify-center items-center py-8">
                <svg class="animate-spin h-10 w-10 text-blue-700 mb-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"></path>
                </svg>
                <span class="text-lg font-semibold text-blue-700">Cargando ejercicios...</span>
            </div>
        `);

        $.ajax({
            url: "{{route('parametros.ejercicios.get')}}",
            type: "POST",
            data: {},
            success: function(response) {
                renderizarAcordeonEjercicios(response.data);
                $('#acordeon-ejercicios-expandir-contraer').show();
            },
            error: function() {
                $('#acordeon-ejercicios').html('<div class="text-center py-8"><i class="material-icons text-red-400 text-4xl mb-2">error</i><p class="text-red-500">Error al cargar los ejercicios</p></div>');
            }
        });
    }

    function renderizarAcordeonEjercicios(ejercicios) {
        if (!ejercicios || ejercicios.length === 0) {
            $('#acordeon-ejercicios').html('<div class="text-center py-8"><i class="material-icons text-gray-400 text-4xl mb-2">folder_open</i><p class="text-gray-500">No se encontraron ejercicios</p></div>');
            return;
        }

        let html = '';
        ejercicios.forEach(function(ejercicio, index) {
            html += generarItemAcordeonEjercicio(ejercicio, index);
        });

        $('#acordeon-ejercicios').html(html);

        // Inicializar eventos del acordeón
        inicializarEventosAcordeonEjercicios();
    }

    function generarItemAcordeonEjercicio(ejercicio, index) {
        const tienePeriodos = ejercicio.periodos && ejercicio.periodos.length > 0;
        const estatusClass = ejercicio.estatus.includes('ABIERTO') ? 'estatus-abierto' : 'estatus-cerrado';
        const estatusText = ejercicio.estatus.includes('ABIERTO') ? 'ABIERTO' : 'CERRADO';
        const btnAccionClass = ejercicio.estatus.includes('ABIERTO') ? 'btn-cerrar-ejercicio' : 'btn-abrir-ejercicio';
        const btnAccionText = ejercicio.estatus.includes('ABIERTO') ? 'Cerrar' : 'Abrir';
        const btnAccionOnClick = ejercicio.estatus.includes('ABIERTO') ? `desactEjer(2, ${ejercicio.id})` : `desactEjer(1, ${ejercicio.id})`;

        let html = `
            <div class="acordeon-ejercicio-item" data-ejercicio-id="${ejercicio.id}">
                <div class="acordeon-ejercicio-header" data-target="acordeon-ejercicio-${index}">
                    <div class="ejercicio-indicator">
                        <i class="material-icons text-blue-600">calendar_today</i>
                        <span class="ejercicio-anio">Ejercicio ${ejercicio.anio}</span>
                        <span class="ejercicio-descripcion">| ${ejercicio.periodos ? ejercicio.periodos.length : 0} periodos</span>
                    </div>
                    <div class="flex items-center gap-2">
                        <span class="estatus-badge-ejercicio ${estatusClass}">${estatusText}</span>
                        <button class="btn-accion-periodo ${btnAccionClass}" onclick="event.stopPropagation(); ${btnAccionOnClick}">
                            <i class="material-icons text-sm font-semibold">${ejercicio.estatus.includes('ABIERTO') ? 'lock' : 'lock_open'}</i>
                            <span>${btnAccionText}</span>
                        </button>
                        ${tienePeriodos ? '<i class="material-icons acordeon-ejercicio-icon">expand_more</i>' : ''}
                    </div>
                </div>
        `;

        if (tienePeriodos) {
            html += `<div class="acordeon-ejercicio-content" id="acordeon-ejercicio-${index}">`;

            // Header de periodos
            html += `
                <div class="periodo-header">
                    <h4>Periodos del ejercicio ${ejercicio.anio}</h4>
                    <button class="btn-accion-periodo btn-nuevo-periodo" onclick="nuevoPeriodo(${ejercicio.id})">
                        <i class="material-icons text-sm font-semibold">add</i>
                        <span>Nuevo periodo</span>
                    </button>
                </div>
            `;

            // Lista de periodos
            ejercicio.periodos.forEach(function(periodo) {
                html += generarItemPeriodo(periodo);
            });

            html += `</div>`;
        } else {
            // Si no tiene periodos, mostrar mensaje y botón para agregar
            html += `
                <div class="acordeon-ejercicio-content" id="acordeon-ejercicio-${index}">
                    <div class="periodo-header">
                        <h4>Periodos del ejercicio ${ejercicio.anio}</h4>
                        <button class="btn-accion-periodo btn-nuevo-periodo" onclick="nuevoPeriodo(${ejercicio.id})">
                            <i class="material-icons text-sm font-semibold">add</i>
                            <span>Nuevo periodo</span>
                        </button>
                    </div>
                    <div class="text-center py-8 text-gray-500">
                        <i class="material-icons text-4xl mb-2">event_busy</i>
                        <p>No hay periodos registrados para este ejercicio</p>
                    </div>
                </div>
            `;
        }

        html += `</div>`;
        return html;
    }

    function generarItemPeriodo(periodo) {
        const estatusClass = periodo.estatus.includes('Abierto') ? 'estatus-abierto' : 'estatus-cerrado';
        const estatusText = periodo.estatus.includes('Abierto') ? 'ABIERTO' : 'CERRADO';
        const btnEstatusClass = periodo.estatus.includes('Abierto') ? 'btn-estatus-periodo' : 'btn-estatus-periodo inactivo';
        const btnEstatusText = periodo.estatus.includes('Abierto') ? 'Cerrar' : 'Abrir';
        const btnEstatusOnClick = periodo.estatus.includes('Abierto') ? `desact('Cerrado', ${periodo.id})` : `desact('Abierto', ${periodo.id})`;

        return `
            <div class="periodo-item">
                <div class="periodo-info">
                    <div class="grid grid-cols-3 gap-4 text-sm">
                        <div class="flex items-center gap-2">
                            <i class="material-icons text-gray-500">event</i>
                            <div>
                                <strong class="text-gray-700 block">Periodo:</strong> 
                                <span class="text-gray-600">${periodo.periodo}</span>
                            </div>
                        </div>
                        <div class="flex items-center gap-2">
                            <i class="material-icons text-gray-500">description</i>
                            <div>
                                <strong class="text-gray-700 block">Descripción:</strong> 
                                <span class="text-gray-600">${periodo.descripcion}</span>
                            </div>
                        </div>
                        <div class="flex items-center gap-2">
                            <i class="material-icons text-gray-500">info</i>
                            <div>
                                <strong class="text-gray-700 block">Estatus:</strong> 
                                <span class="estatus-badge-ejercicio ${estatusClass}">${estatusText}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="periodo-acciones">
              
                    <button class="btn-accion-periodo ${btnEstatusClass}" onclick="${btnEstatusOnClick}">
                        <i class="material-icons text-sm">${periodo.estatus.includes('Abierto') ? 'lock' : 'lock_open'}</i>
                        <span>${btnEstatusText}</span>
                    </button>
                </div>
            </div>
        `;
    }

    function inicializarEventosAcordeonEjercicios() {
        $('.acordeon-ejercicio-header').off('click').on('click', function() {
            const target = $(this).data('target');
            const content = $(`#${target}`);
            const icon = $(this).find('.acordeon-ejercicio-icon');
            const currentItem = $(this).closest('.acordeon-ejercicio-item');

            // Si el contenido ya está activo, solo lo cerramos
            if (content.hasClass('active')) {
                content.removeClass('active');
                $(this).removeClass('active');
                icon.css('transform', 'rotate(0deg)');
                return;
            }

            // Cerrar todos los elementos del mismo nivel
            const parentContainer = currentItem.parent();
            parentContainer.find('.acordeon-ejercicio-content.active').removeClass('active');
            parentContainer.find('.acordeon-ejercicio-header.active').removeClass('active');
            parentContainer.find('.acordeon-ejercicio-icon').css('transform', 'rotate(0deg)');

            // Abrir el elemento actual
            content.addClass('active');
            $(this).addClass('active');
            icon.css('transform', 'rotate(180deg)');
        });
    }

    function expandirAccordionEjercicios() {
        $('.acordeon-ejercicio-item').each(function() {
            const $header = $(this).find('.acordeon-ejercicio-header');
            const $content = $(this).find('.acordeon-ejercicio-content');
            const $icon = $header.find('.acordeon-ejercicio-icon');

            // Solo expandir si no está ya expandido
            if (!$content.hasClass('active')) {
                $content.addClass('active');
                $header.addClass('active');
                // Rotar el icono
                if ($icon.length > 0) {
                    $icon.css('transform', 'rotate(180deg)');
                }
            }
        });
    }

    function contraerAccordionEjercicios() {
        $('.acordeon-ejercicio-item').each(function() {
            const $header = $(this).find('.acordeon-ejercicio-header');
            const $content = $(this).find('.acordeon-ejercicio-content');
            const $icon = $header.find('.acordeon-ejercicio-icon');

            // Solo contraer si está expandido
            if ($content.hasClass('active')) {
                $content.removeClass('active');
                $header.removeClass('active');
                // Restaurar el icono
                if ($icon.length > 0) {
                    $icon.css('transform', 'rotate(0deg)');
                }
            }
        });
    }

    function editarPeriodo(periodoId) {
        // Implementar la función de editar periodo
        // Por ahora, solo mostrar un mensaje
        showNotification('info', 'top', 'center', 'info', '¡INFO!', 'Función de editar periodo en desarrollo');
    }

    function loadPeriodos() {
        loadEjerciciosAccordion();
    }

    function nuevoPeriodo(ejercicioId = null) {
        $('#modalNuevoPeriodo').modal('show');
        $('#titleModalPeriodo').text('Nuevo periodo');

        // Si se pasa un ejercicioId, seleccionarlo automáticamente
        if (ejercicioId) {
            $('#id_ejercicio').val(ejercicioId).trigger('change');
        }
    }

    function guardarPeriodo() {
        var id = $('#idPeriodoHidden').val();
        var id_mes = $('#periodo option:selected').val();
        var id_ejercicio = $('#id_ejercicio option:selected').val();
        var descripcion_ejercicio = $('#id_ejercicio option:selected').attr('anio');
        var numero_mes = $('#periodo option:selected').attr('mes');
        var descripcion_mes = $('#periodo option:selected').attr('descripcion');
        if ($('#cerrarperiodo').prop('checked')) {
            var cerrarperiodo = 2;
        } else {
            var cerrarperiodo = 1;
        }
        $('#loadingLoad').modal('show');
        $.ajax({
                url: "{{ route('parametros.periodos.save')}}",
                type: 'POST',
                dataType: 'json',
                data: {
                    id: id,
                    id_mes: id_mes,
                    id_ejercicio: id_ejercicio,
                    descripcion_ejercicio: descripcion_ejercicio,
                    numero_mes: numero_mes,
                    descripcion_mes: descripcion_mes,
                    cerrarperiodo: cerrarperiodo,
                    estatus: 1
                }
            })
            .done(function(resp) {
                if (resp.result == 1) {
                    setTimeout(() => {
                        showNotification('success', 'top', 'center', 'success', '¡HECHO!', resp.mensaje);
                        $('#modalNuevoPeriodo').modal('hide');
                        loadEjerciciosAccordion();
                    }, 2000);
                } else if (resp.result == 2) {
                    setTimeout(() => {
                        showNotification('error', 'top', 'center', 'danger', '¡ERROR!', resp.mensaje);
                        $('#modalNuevoPeriodo').modal('hide');
                        loadEjerciciosAccordion();
                    }, 2000);
                }

            })
            .fail(function() {
                console.log("error");
            })
            .always(function() {
                setTimeout(() => {
                    $('#loadingLoad').modal('hide');
                }, 2000);
            });
    }

    function desact(estatus, id) {

        if (estatus == 'Abierto') {
            var title = '¿Estás seguro de abrir el periodo?'
        } else {
            var title = '¿Estás seguro de cerrar el periodo?'
        }
        Swal.fire({
            title: title,
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            cancelButtonText: 'Cancelar',
            confirmButtonText: 'Si, hazlo'
        }).then((result) => {
            $('#loadingLoad').modal('show')
            if (result.value) {
                $.ajax({
                        url: "{{ route('parametros.periodos.update')}}",
                        type: 'POST',
                        dataType: 'json',
                        data: {
                            id: id,
                            estatus: estatus
                        },
                    })
                    .done(function(resp) {
                        showNotification('success', 'top', 'center', 'success', '¡HECHO!', resp.mensaje);
                        loadEjerciciosAccordion();
                    })
                    .fail(function() {
                        console.log("error");
                    })
                    .always(function() {
                        $('#loadingLoad').modal('hide')
                    });
            }
        })
    }

    function loadEjercicio() {
        loadEjerciciosAccordion();
    }

    function nuevoEjercicio() {
        $('#modalNuevoEjercicio').modal('show');
        $('#titleModalEjercicio').text('Nuevo ejercicio');
        // setPeriodo()
    }

    function guardarEjercicio() {
        var id = $('#idEjercicioHidden').val();
        var ejercicio = $('#dateEjercicio').val();
        var estatus = $('#ejercicioEstatus option:selected').val();
        if ($('#cerrarejercicio').prop('checked')) {
            var cerrarejercicio = 2;
        } else {
            var cerrarejercicio = 1;
        }
        $('#loadingLoad').modal('show')
        $.ajax({
                url: "{{ route('parametros.ejercicios.save')}}",
                type: 'POST',
                dataType: 'json',
                data: {
                    id: id,
                    anio: ejercicio,
                    estatus: cerrarejercicio,
                }
            })
            .done(function(resp) {
                console.log(resp.data)
                if (resp.result == 'success') {
                    setTimeout(() => {
                        showNotification('success', 'top', 'center', 'success', '¡HECHO!', resp.mensaje);
                        $('#modalNuevoEjercicio').modal('hide');
                        loadEjerciciosAccordion();
                    }, 2000);
                    return false;
                }

                setTimeout(() => {
                    showNotification('error', 'top', 'center', 'danger', '¡ERROR!', resp.mensaje);
                    $('#modalNuevoEjercicio').modal('hide');
                    loadEjerciciosAccordion();
                }, 2000);
            })
            .fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");
                setTimeout(() => {
                    $('#loadingLoad').modal('hide')
                }, 2000);
            });
    }

    function desactEjer(estatus, id) {
        $('#idEjercicio').val(id);
        $('#modalCierreEjercicio').modal('show');
    }

    function guardarCierreEjercicio() {
        //  if (estatus == 1) {
        //         var title = '¿Estas seguro de abrir el ejercicio?'
        //         var text = 'Esta acción permitirá crear periodos dentro de este ejercicio'
        //     } else {
        var title = '¿Estas seguro de cerrar el ejercicio?'
        var text = 'Esta acción cerrar todos los periodos de este ejercicio'
        // }
        Swal.fire({
            icon: 'warning',
            title: title,
            text: text,
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            cancelButtonText: 'Cancelar',
            confirmButtonText: 'Si, hazlo'
        }).then((result) => {
            if (result.value) {

                $('#loadingLoad').modal('show')
                $.ajax({
                    url: "{{ url('cont/parametros/cierre_ejercicio')}}",
                    type: 'POST',
                    dataType: 'json',
                    data: {
                        ejercicio: $('#idEjercicio').val(),
                        cuentaResultados: $('#cuentaResultados').val(),
                    },
                    beforeSend: () => {
                        $("#loadingLoad").modal("show");
                    },
                    success: (res, _, jqXHR) => {
                        setTimeout(() => {
                            $("#loadingLoad").modal("hide")

                            console.log(jqXHR.status);
                            if (jqXHR.status == 500) {
                                noContentMessageOptions.text = res.message;
                                Swal.fire(noContentMessageOptions);
                                return false;
                            }
                            workDoneMessage.text = res.message;
                            Swal.fire(workDoneMessage);


                            let link = document.createElement('a');
                            link.href = res.url;
                            link.download = res.filename;

                            link.click();
                            link.remove();

                            loadEjerciciosAccordion();
                            $('#modalCierreEjercicio').modal('hide');

                        }, 2000);
                    },
                    error: (error) => {
                        setTimeout(() => {
                            $("#loadingLoad").modal("hide")
                            ajaxErrorMessage.text = error.responseJSON.message;
                            Swal.fire(ajaxErrorMessage);
                        }, 500);
                    }
                });
            }
        });
    }

    function abrirPdf(tipo) {
        var id = $('#id_pdf_poliza_hidden').val();
        if (tipo == 1) {
            $('#modalVerPdf').modal('show');
        } else if (tipo == 2) {
            // window.open("{{asset('archivos/PDFs/Polizas/Poliza_')}}" + id + '.pdf')
            // location.reload();
            window.open("{{url('contabilidad/polizascon/imprimir')}}/" + id);

            $('#modalVerPdf').modal('hide');
        }
    }

    //ASIGNACION DE CUENTAS

    var arrCuentas = @json($data['cuentasContables']);

    function loadAsignacionCuentasContables() {
        // Mostrar loading en los contenedores
        showLoadingInContainers();
        fetchCuentasAsignacionCuentasContables();
    }

    function showLoadingInContainers() {
        // Mostrar loading en cada contenedor usando jQuery
        $('#content-asignacion-cuentas-generales').html(`
                <div class="flex items-center justify-center p-4">
                    <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500"></div>
                    <span class="ml-2 text-gray-600">Cargando cuentas generales...</span>
                </div>
            `);

        $('#content-asignacion-cuentas-proveedores').html(`
                <div class="flex items-center justify-center p-4">
                    <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500"></div>
                    <span class="ml-2 text-gray-600">Cargando cuentas de proveedores...</span>
                </div>
            `);

        $('#content-asignacion-cuentas-clientes').html(`
                <div class="flex items-center justify-center p-4">
                    <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500"></div>
                    <span class="ml-2 text-gray-600">Cargando cuentas de clientes...</span>
                </div>
            `);
    }

    function fetchCuentasAsignacionCuentasContables() {
        $.ajax({
            url: "{{ route('parametros.asignacion-cuentas.get')}}",
            type: 'POST',
            dataType: 'json',
            success: function(response) {
                if (response.status === 'success') {
                    constructAsignacionCuentasContables(response.data);
                } else {
                    console.log("Error en la respuesta:", response);
                    showErrorInContainers();
                }
            },
            error: function(xhr, status, error) {
                console.log("Error en la petición:", error);
                showErrorInContainers();
            }
        });
    }

    function showErrorInContainers() {
        // Mostrar mensaje de error en los contenedores
        $('#content-asignacion-cuentas-generales').html(`
                <div class="flex items-center justify-center p-4 text-red-600">
                    <span>Error al cargar las cuentas generales</span>
                </div>
            `);

        $('#content-asignacion-cuentas-proveedores').html(`
                <div class="flex items-center justify-center p-4 text-red-600">
                    <span>Error al cargar las cuentas de proveedores</span>
                </div>
            `);

        $('#content-asignacion-cuentas-clientes').html(`
                <div class="flex items-center justify-center p-4 text-red-600">
                    <span>Error al cargar las cuentas de clientes</span>
                </div>
            `);
    }

    function constructAsignacionCuentasContables(data) {
        const asignacionGeneral = data.asignacionGenerales;
        const asignacionProveedores = data.asignacionProveedores;
        const asignacionClientes = data.asignacionClientes;

        // Limpiar contenedores usando jQuery
        $('#content-asignacion-cuentas-generales').empty();
        $('#content-asignacion-cuentas-proveedores').empty();
        $('#content-asignacion-cuentas-clientes').empty();

        // Construir contenido para cuentas generales
        asignacionGeneral.forEach(function(item) {
            const div = $('<div>').html(`
                    <div>
                        <label class="text-sm font-medium text-gray-700 block">${item.descripcion}</label>
                        <select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 select2-asignacion-cuentas select-asignacion" data-original-value="${item.id_cuenta_contable || ''}" data-item-id="${item.id || ''}">
                            <option value="" selected disabled>Seleccionar cuenta contable</option>
                            ${arrCuentas.map(function(cuenta) {
                                const selected = cuenta.id == item.id_cuenta_contable ? 'selected' : '';
                                return `<option value="${cuenta.id}" ${selected}>${cuenta.numero_cuenta} ${cuenta.cuenta}</option>`;
                            }).join('')}
                        </select>
                    </div>
                `);
            $('#content-asignacion-cuentas-generales').append(div);
        });

        // Construir contenido para cuentas de proveedores
        asignacionProveedores.forEach(function(item) {
            const div = $('<div>').html(`
                    <div>
                        <label class="text-sm font-medium text-gray-700 block">${item.descripcion}</label>
                        <select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 select2-asignacion-cuentas select-asignacion" data-original-value="${item.id_cuenta_contable || ''}" data-item-id="${item.id || ''}">
                            <option value="" selected disabled>Seleccionar cuenta contable</option>
                            ${arrCuentas.map(function(cuenta) {
                                const selected = cuenta.id == item.id_cuenta_contable ? 'selected' : '';
                                return `<option value="${cuenta.id}" ${selected}>${cuenta.numero_cuenta} ${cuenta.cuenta}</option>`;
                            }).join('')}
                        </select>
                    </div>
                `);
            $('#content-asignacion-cuentas-proveedores').append(div);
        });

        // Construir contenido para cuentas de clientes
        asignacionClientes.forEach(function(item) {
            const div = $('<div>').html(`
                    <div>
                        <label class="text-sm font-medium text-gray-700">${item.descripcion}</label>
                        <select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 select2-asignacion-cuentas select-asignacion" data-original-value="${item.id_cuenta_contable || ''}" data-item-id="${item.id || ''}">
                            <option value="" selected disabled>Seleccionar cuenta contable</option>
                            ${arrCuentas.map(function(cuenta) {
                                const selected = cuenta.id == item.id_cuenta_contable ? 'selected' : '';
                                return `<option value="${cuenta.id}" ${selected}>${cuenta.numero_cuenta} ${cuenta.cuenta}</option>`;
                            }).join('')}
                        </select>
                    </div>  
                `);
            $('#content-asignacion-cuentas-clientes').append(div);
        });

        // Inicializar select2 en los selectores
        $('.select2-asignacion-cuentas').select2({
            placeholder: "Seleccionar cuenta contable",
            allowClear: true
        });
    }

    function guardarAsignacion() {
        var cuentasAsignadas = [];

        // Obtener todos los selects de asignación que han sido editados
        $('.select-asignacion').each(function() {
            var $select = $(this);
            var selectedValue = $select.val();
            var itemId = $select.attr('data-item-id');
            var originalValue = $select.attr('data-original-value') || '';

            // Incluir si:
            // 1. Tiene un valor seleccionado y es diferente al original (asignación nueva o cambio)
            // 2. No tiene valor seleccionado pero tenía un valor original (asignación eliminada)
            if ((selectedValue && selectedValue !== '' && selectedValue !== originalValue) ||
                (!selectedValue && originalValue && originalValue !== '')) {
                cuentasAsignadas.push({
                    id: itemId,
                    id_cuenta_contable: selectedValue || null
                });
            }
        });

        // Validar que haya al menos una asignación modificada
        if (cuentasAsignadas.length === 0) {
            showNotification('error', 'top', 'center', 'danger', '¡ERROR!', 'No hay cambios para guardar. Modifica al menos una asignación de cuenta.');
            return false;
        }

        // Mostrar loading
        $('#loadingLoad').modal('show');

        // Enviar datos al backend
        $.ajax({
                url: "{{ route('parametros.asignacion-cuentas.save')}}",
                type: 'POST',
                dataType: 'json',
                data: {
                    cuentas_asignadas: cuentasAsignadas,
                    _token: "{{ csrf_token() }}"
                }
            })
            .done(function(resp) {
                if (resp.status === 'success') {
                    showNotification('success', 'top', 'center', 'success', '¡ÉXITO!', resp.mensaje);
                } else {
                    showNotification('error', 'top', 'center', 'danger', '¡ERROR!', resp.mensaje || 'Error al guardar las asignaciones');
                }
            })
            .fail(function(xhr, status, error) {
                showNotification('error', 'top', 'center', 'danger', '¡ERROR!', 'Error de conexión al guardar las asignaciones');
            })
            .always(function() {
                // Ocultar loading
                setTimeout(() => {
                    $('#loadingLoad').modal('hide');
                }, 1000);
            });
    }

    function limpiarAsignacion() {
        $('.select-asignacion').each(function() {
            var $select = $(this);
            var originalValue = $select.attr('data-original-value');

            // Solo limpiar si tenía un valor original
            if (originalValue && originalValue !== '') {
                $select.val('').trigger('change');
                // Actualizar el valor original a vacío para que se detecte como modificado
                $select.attr('data-original-value', '');
            }
        });
    }

    // TIPOS DE CUENTAS
    function loadTiposCuentas() {
        $('#tableTiposCuentas').dataTable().fnDestroy();
        $('#tableTiposCuentas').DataTable({
            "scrollX": true,
            language: {
                url: "{{asset('material/datatable_sp.json')}}"
            },
            ajax: {
                url: "{{route('parametros.tipos-cuentas.get')}}",
                type: "POST",
            },
            columns: [{
                    data: "nivel"
                },
                {
                    data: "descripcion"
                },
                {
                    data: "sub_nivel"
                },
                {
                    data: "descripcion_subnivel"
                },
                {
                    data: "cuenta_inicial"
                },
                {
                    data: "cuenta_final"
                },
                {
                    data: "acciones"
                },

            ],
            order: [
                [0, "asc"]
            ],

        });

    }

    function nuevoTipoCuenta() {
        $('#modalNuevoTipoCuenta').modal('show');
        $('#titleModal').text('Agregar tipo de cuenta')
        limpiarModal();
    }

    function guardarTipoCuenta() {
        var id = $('#idTipoHidden').val();
        var nivel = $('#nivel').val();
        var sub_nivel = $('#sub_nivel').val();
        var descripcion = $('#descripcion').val();
        var descripcion_subnivel = $('#descripcion_subnivel').val();
        var cuenta_inicial = $('#cuenta_inicial').val();
        var cuenta_final = $('#cuenta_final').val();
        // var naturaleza = $('#naturaleza option:selected').val();
        // var naturaleza = $('#naturaleza option:selected').text();

        if (nivel == '' || sub_nivel == '' || descripcion == '' || cuenta_inicial == '' || cuenta_final == '') {
            showNotification('error', 'top', 'center', 'danger', '¡ERROR!', 'Debes ingresar la información obligatoria')
            return false;
        }
        if ((cuenta_inicial || cuenta_final).length != $('#nivel_1').val()) {
            showNotification('error', 'top', 'center', 'danger', '¡ERROR!', 'La longitud de la cuenta inicial o final no corresponde con la longitud del nivel 1.')
            return false;
        }
        if (cuenta_inicial > cuenta_final) {
            showNotification('error', 'top', 'center', 'danger', '¡ERROR!', 'El numero de cuenta inicial debe ser menor al de la cuenta final.')
            return false;
        }

        $('#loadingLoad').modal('show');
        $.ajax({
                url: "{{ route('parametros.tipos-cuentas.save')}}",
                type: 'POST',
                dataType: 'json',
                data: {
                    id: id,
                    nivel: nivel,
                    sub_nivel: sub_nivel,
                    descripcion: descripcion,
                    descripcion_subnivel: descripcion_subnivel,
                    cuenta_inicial: cuenta_inicial,
                    cuenta_final: cuenta_final,
                    // naturaleza: naturaleza,
                },
            })
            .done(function(resp) {
                if (resp.result == 'success') {
                    $('#modalNuevoTipoCuenta').modal('hide');
                    limpiarModal();
                    showNotification('success', 'top', 'center', 'success', '¡HECHO!', resp.mensaje);
                    $('#tableTiposCuentas').DataTable().ajax.reload();
                    return false;
                }
                showNotification('error', 'top', 'center', 'danger', '¡ERROR!', resp.mensaje)

            })
            .fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");
                $('#loadingLoad').modal('hide');
            });
    }

    function limpiarModal() {
        $('#idTipoHidden').val('');
        $('#nivel').val('');
        $('#sub_nivel').val('');
        $('#descripcion').val('');
        $('#descripcion_subnivel').val('');
        $('#cuenta_inicial').val('');
        $('#cuenta_final').val('');
        // $('#naturaleza').val(0);
        $('.filled').removeClass('is-filled')

    }

    function getTipoCuenta(id) {
        $.ajax({
                url: "{{ route('parametros.tipos-cuentas.get-tipo-cuenta')}}",
                type: 'POST',
                dataType: 'json',
                data: {
                    id: id,

                },
            })
            .done(function(resp) {
                $('#titleModal').text('Actualizar tipo cuenta');
                $('#idTipoHidden').val(resp.data['id']);
                $('#nivel').val(resp.data['nivel']);
                $('#sub_nivel').val(resp.data['sub_nivel']);
                $('#descripcion').val(resp.data['descripcion']);
                $('#descripcion_subnivel').val(resp.data['descripcion_subnivel']);
                $('#cuenta_inicial').val(resp.data['cuenta_inicial']);
                $('#cuenta_final').val(resp.data['cuenta_final']);
                // if (resp.data['naturaleza'] == 'Deudora') {
                //     $('#naturaleza').val(2);;
                // } else {
                //     $('#naturaleza').val(1);;
                // }
                $('.filled').addClass('is-filled')

                $('#modalNuevoTipoCuenta').modal('show');
            })

            .fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");
            });
    }

    function eliminarTipoCuenta(id) {
        Swal.fire({
            title: '¿Estás seguro de eliminar?',
            text: "Esta acción no es reversible",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            cancelButtonText: 'Cancelar',
            confirmButtonText: 'Si, eliminado!'
        }).then((result) => {
            if (result.value) {
                $.ajax({
                        url: "{{ route('parametros.tipos-cuentas.delete')}}",
                        type: 'POST',
                        dataType: 'json',
                        data: {
                            id: id,
                        },
                    })
                    .done(function(resp) {
                        showNotification('success', 'top', 'center', 'success', '¡HECHO!', resp.mensaje);
                        $('#tableTiposCuentas').DataTable().ajax.reload();
                    })
                    .fail(function() {
                        console.log("error");
                    })
                    .always(function() {
                        console.log("complete");
                    });
            }
        })
    }

    // BANCOS
    function loadBancos() {

        //$('#').DataTable();
        $('#tableBancos').dataTable().fnDestroy();
        $('#tableBancos').DataTable({
            "scrollX": true,
            ajax: {
                url: "{{url('cont/parametros/get_bancos')}}",
                type: "POST",
            },
            columns: [{
                    data: "id"
                },
                {
                    data: "nombre"
                },
                {
                    data: "descripcion"
                },
                {
                    data: "moneda"
                },
                {
                    data: "cuenta"
                },
                {
                    data: "estatus"
                },
                {
                    data: "acciones"
                },

            ],
            order: [
                [0, "asc"]
            ],

        });

    }

    function guardarBanco() {
        var id = $('#idBancoHidden').val();
        var nombre = $('#nombre').val();
        var descripcion = $('#descripcionB').val();
        var id_moneda = $('#id_moneda option:selected').val();
        var id_cuenta = $('#id_cuenta option:selected').val();

        if (nombre == '' || descripcion == '' || id_moneda == '' || id_cuenta == '') {
            showNotification('error', 'top', 'center', 'danger', '¡ERROR!', 'Debes ingresar toda la información')
            return false;
        }
        $.ajax({
                url: "{{ url('cont/parametros/save_banco')}}",
                type: 'POST',
                dataType: 'json',
                data: {
                    id: id,
                    nombre: nombre,
                    descripcion: descripcion,
                    id_moneda: id_moneda,
                    id_cuenta: id_cuenta,
                    estatus: 1,
                },
            })
            .done(function(resp) {
                if (resp.result == 1) {
                    showNotification('success', 'top', 'center', 'success', '¡HECHO!', resp.mensaje);
                    limpiarBanco();
                    $('#tableBancos').DataTable().ajax.reload();

                } else {
                    showNotification('error', 'top', 'center', 'danger', '¡ERROR!', resp.mensaje);
                    limpiarBanco();
                    $('#tableBancos').DataTable().ajax.reload();
                }
            })
            .fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");
            });

    }

    function limpiarBanco() {
        $('#id').val('');
        $('#nombre').val('');
        $('#descripcionB').val('');
        $('#id_moneda').val('');
        $('#id_cuenta').val('');
        $('.filled2').removeClass('is-filled');


    }

    function activarDes(id) {
        //console.log(val,id)
        var act_des = 0

        if ($('#actdes_' + id).prop('checked')) {
            act_des = 1
        } else {
            act_des = 0

        }
        $.ajax({
                url: "{{ url('cont/parametros/update_banco')}}",
                type: 'POST',
                dataType: 'json',
                data: {
                    estatus: act_des,
                    id: id
                },
            })
            .done(function(resp) {
                if (resp.result == 1) {
                    showNotification('success', 'top', 'center', 'success', '¡HECHO!', resp.mensaje);
                }
            })
            .fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");
            });

    }

    function editar(id) {
        $.ajax({
                url: "{{url('cont/parametros/get_banco')}}",
                type: 'POST',
                dataType: 'json',
                data: {
                    id: id,
                }
            })
            .done(function(resp) {
                console.log("success");
                if (resp.result == 1) {

                    $('#idBancoHidden').val(resp.data['id']);
                    $('#nombre').val(resp.data['nombre']);
                    $('#descripcionB').val(resp.data['descripcion']);
                    $('#id_moneda').val(resp.data['id_moneda']);
                    $('#id_cuenta').val(resp.data['id_cuenta']);

                    $('.filled2').addClass('is-filled');
                }
            })
            .fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");
            });
    }

    function eliminarBanco(id) {
        Swal.fire({
            title: '¿Estás seguro de eliminar?',
            text: "Esta acción no es reversible",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            cancelButtonText: 'Cancelar',
            confirmButtonText: 'Si, eliminado!'
        }).then((result) => {
            if (result.value) {
                //$('#cargandoModal').modal()
                $.ajax({
                        url: "{{url('cont/parametros/delete_banco')}}",
                        type: 'POST',
                        dataType: 'json',
                        data: {
                            id: id,
                        }
                    })
                    .done(function(resp) {
                        console.log("success");
                        if (resp.result == 1) {
                            showNotification('success', 'top', 'center', 'success', '¡HECHO!', resp.mensaje);
                            $('#tableBancos').DataTable().ajax.reload();

                        }
                    })
                    .fail(function() {
                        console.log("error");
                    })
                    .always(function() {
                        console.log("complete");
                    });

            }
        })
    }

    // MONEDAS
    function loadMonedas() {
        //$('#').DataTable();
        $('#tableMonedas').dataTable().fnDestroy();
        $('#tableMonedas').DataTable({
            "scrollX": true,
            ajax: {
                url: "{{route('parametros.monedas.get')}}",
                type: "POST",
            },
            columns: [{
                    data: "id"
                },
                {
                    data: "nombre"
                },
                {
                    data: "descripcion"
                },
                {
                    data: "estatus"
                },
                {
                    data: "acciones"
                },

            ],
            order: [
                [0, "asc"]
            ],

        });

    }

    function guardarMoneda() {
        var id = $('#idMonedaHidden').val();
        var nombre = $('#nombre_moneda').val();
        var descripcion = $('#descripcion_moneda').val();
        //var tipo_cambio = $('#tipocambio_moneda').val();

        if (nombre == '' || descripcion == '') {
            showNotification('error', 'top', 'center', 'danger', '¡ERROR!', 'Debes ingresar toda la información')
            return false;
        }
        $('#loadingLoad').modal('show')
        $.ajax({
                url: "{{ route('parametros.monedas.save')}}",
                type: 'POST',
                dataType: 'json',
                data: {
                    id: id,
                    nombre: nombre,
                    descripcion: descripcion,
                    //tipo_cambio: tipo_cambio,
                    estatus: 1,
                },
            })
            .done(function(resp) {
                setTimeout(() => {
                    showNotification('success', 'top', 'center', 'success', '¡HECHO!', resp.mensaje);
                    limpiarMoneda();
                    $('#tableMonedas').DataTable().ajax.reload();
                }, 2000);

            })
            .fail(function() {
                console.log("error");
            })
            .always(function() {
                setTimeout(() => {
                    $('#loadingLoad').modal('hide')
                }, 2000);
            });

    }

    function limpiarMoneda() {
        $('#id').val('');
        $('#nombre_moneda').val('');
        $('#descripcion_moneda').val('');
        // $('#tipocambio_moneda').val('');
        $('.filledM').removeClass('is-filled');


    }

    function activarDesMoneda(id) {
        var act_des = 0
        if ($('#actdesM_' + id).prop('checked')) {
            act_des = 1
        } else {
            act_des = 0
        }
        $('#loadingLoad').modal('show');
        $.ajax({
                url: "{{ route('parametros.monedas.update')}}",
                type: 'POST',
                dataType: 'json',
                data: {
                    estatus: act_des,
                    id: id
                },
            })
            .done(function(resp) {
                setTimeout(() => {
                    showNotification('success', 'top', 'center', 'success', '¡HECHO!', resp.mensaje);
                }, 2000);
            })
            .fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");
                setTimeout(() => {
                    $('#loadingLoad').modal('hide');
                }, 2000);
            });
    }

    function editarMoneda(id) {
        $.ajax({
                url: "{{route('parametros.monedas.get-moneda')}}",
                type: 'POST',
                dataType: 'json',
                data: {
                    id: id,
                }
            })
            .done(function(resp) {
                console.log("success");
                $('#idMonedaHidden').val(resp.data['id']);
                $('#nombre_moneda').val(resp.data['nombre']);
                $('#descripcion_moneda').val(resp.data['descripcion']);
                // $('#tipocambio_moneda').val(resp.data['tipo_cambio']);
                $('.filledM').addClass('is-filled');
            })
            .fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");
            });
    }

    function eliminarMoneda(id) {
        Swal.fire({
            title: '¿Estás seguro de eliminar?',
            text: "Esta acción no es reversible",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            cancelButtonText: 'Cancelar',
            confirmButtonText: 'Si, eliminar'
        }).then((result) => {
            if (result.value) {
                $('#loadingLoad').modal('show')
                $.ajax({
                        url: "{{route('parametros.monedas.delete')}}",
                        type: 'POST',
                        dataType: 'json',
                        data: {
                            id: id,
                        }
                    })
                    .done(function(resp) {
                        console.log("success");
                        setTimeout(() => {
                            $('#tableMonedas').DataTable().ajax.reload();
                            showNotification('success', 'top', 'center', 'success', '¡HECHO!', resp.mensaje);
                        }, 2000);
                    })
                    .fail(function() {
                        console.log("error");
                    })
                    .always(function() {
                        setTimeout(() => {
                            $('#loadingLoad').modal('hide')
                        }, 2000);
                    });

            }
        })
    }
    // TIPOS DE POLIZAS
    function loadTipoPolizas() {
        //$('#').DataTable();
        $('#tableTiposPolizas').dataTable().fnDestroy();
        $('#tableTiposPolizas').DataTable({
            "scrollX": true,
            ajax: {
                url: "{{ route('parametros.tipos-polizas.get')}}",
                type: "POST",
            },
            columns: [{
                    data: "tipo"
                },
                {
                    data: "descripcion"
                },
                {
                    data: "estatus"
                },
                {
                    data: "acciones"
                },

            ],
            order: [
                [1, "asc"]
            ],
        });
    }

    function guardarTipoPoliza() {
        var id = $('#idTipoPHidden').val();
        var tipo = $('#tipoP').val();
        var descripcion = $('#descripcionP').val();
        var estatus = $('#estatusP option:selected').val();

        if (tipo == '' || descripcion == '') {
            showNotification('error', 'top', 'center', 'danger', '¡ERROR!', 'Debes ingresar toda la información')
            return false;
        }
        $('#loadingLoad').modal('show');
        $.ajax({
                url: "{{ route('parametros.tipos-polizas.save')}}",
                type: 'POST',
                dataType: 'json',
                data: {
                    id: id,
                    tipo: tipo,
                    descripcion: descripcion,
                    estatus: estatus,
                },
            })
            .done(function(resp) {
                if (resp.result == 1) {
                    showNotification('success', 'top', 'center', 'success', '¡HECHO!', resp.mensaje);
                    limpiarModalTipoPolizas();
                    $('#tableTiposPolizas').DataTable().ajax.reload();

                } else {
                    showNotification('error', 'top', 'center', 'danger', '¡ERROR!', resp.mensaje);
                    limpiarModalTipoPolizas();
                    $('#tableTiposPolizas').DataTable().ajax.reload();
                }
            })
            .fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");
                setTimeout(() => {
                    $('#loadingLoad').modal('hide');
                }, 2000);
            });

    }

    function limpiarModalTipoPolizas() {
        $('#tipoP').val('');
        $('#descripcionP').val('');
        $('#estatusP').val('Activa');
        $('#idTipoPHidden').val('');

    }

    function activarDes(id) {
        //console.log(val,id)
        var act_des = 0

        if ($('#actdes_' + id).prop('checked')) {
            act_des = 1
        } else {
            act_des = 0

        }
        $.ajax({
                url: "{{ url('cont/parametros/update_tipoP')}}",
                type: 'POST',
                dataType: 'json',
                data: {
                    estatus: act_des,
                    id: id
                },
            })
            .done(function(resp) {
                if (resp.result == 1) {
                    showNotification('success', 'top', 'center', 'success', '¡HECHO!', resp.mensaje);
                }
            })
            .fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");
            });

    }

    function editarTipoPoliza(id) {
        $.ajax({
                url: "{{route('parametros.tipos-polizas.get-tipo-poliza')}}",
                type: 'POST',
                dataType: 'json',
                data: {
                    id: id,
                }
            })
            .done(function(resp) {
                console.log("success");
                $('#idTipoPHidden').val(resp.data['id']);
                $('#tipoP').val(resp.data['tipo']);
                $('#descripcionP').val(resp.data['descripcion']);
                $('#estatusP').val(resp.data['estatus']);
            })
            .fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");
            });
    }

    function eliminarTipoPoliza(id) {
        Swal.fire({
            title: '¿Estás seguro de eliminar?',
            text: "Esta acción no es reversible",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            cancelButtonText: 'Cancelar',
            confirmButtonText: 'Si, eliminado!'
        }).then((result) => {
            if (result.value) {
                $('#loadingLoad').modal('show');
                $.ajax({
                        url: "{{route('parametros.tipos-polizas.delete')}}",
                        type: 'POST',
                        dataType: 'json',
                        data: {
                            id: id,
                        }
                    })
                    .done(function(resp) {
                        console.log("success");
                        if (resp.result == 1) {
                            setTimeout(() => {
                                showNotification('success', 'top', 'center', 'success', '¡HECHO!', resp.mensaje);
                                $('#tableTiposPolizas').DataTable().ajax.reload();
                            }, 2000);
                        } else {
                            setTimeout(() => {
                                showNotification('error', 'top', 'center', 'danger', '¡ERROR!', resp.mensaje)
                            }, 2000);
                        }
                    })
                    .fail(function() {
                        console.log("error");
                    })
                    .always(function() {
                        setTimeout(() => {
                            $('#loadingLoad').modal('hide');
                        }, 2000);
                    });

            }
        })
    }


    function loadConfiguracion() {
        $.ajax({
                url: "{{route('parametros.configuracion.get')}}",
                type: 'POST',
                dataType: 'json',
            })
            .done(function(resp) {


                $.each(resp.data, function(index, value) {
                    $('#' + value['poliza']).val(value['id_tipopoliza']).trigger('change');
                })
                $('input[name="provision_automatica"][value="' + resp.configuracion['polizas_provision_auto'] + '"]').prop('checked', true);
                $('input[name="pagos_depositos_automatica"][value="' + resp.configuracion['polizas_pago_auto'] + '"]').prop('checked', true);
                $('input[name="pagos_pue_auto"][value="' + resp.configuracion['pagos_auto'] + '"]').prop('checked', true);
                $('input[name="pagos_complementos_auto"][value="' + resp.configuracion['pagos_complementos_auto'] + '"]').prop('checked', true);
                $('#banco_pagos').val(resp.configuracion['banco_defecto_pago']);
                $('#forma_pago_pagos').val(resp.configuracion['forma_pago_defecto_pago']);
            })
            .fail(function() {
                console.log("error");
            })
            .always(function() {
                setTimeout(() => {
                    $('#loadingLoad').modal('hide');
                }, 2000);
            });

    }

    function limpiarSeleccionados() {
        $('#poliza_ingreso').val('')
        // $('#poliza_ingreso').selectpicker('refresh')
        $('#poliza_pago').val('')
        // $('#poliza_pago').selectpicker('refresh')
        $('#poliza_clientes').val('')
        // $('#poliza_clientes').selectpicker('refresh')
        $('#poliza_proveedores').val('')
        // $('#poliza_proveedores').selectpicker('refresh')
        $('#poliza_diario').val('')
        // $('#poliza_diario').selectpicker('refresh')
    }

    function guardarConfiguracion() {

        var tipos_polizas = new Array;
        $('#poliza_ingreso').each(function() {
            data = {
                id: $(this).attr('id_tabla'),
                id_tipopoliza: $(this).find('option:selected').val(),
                poliza: $(this).attr('descripcion_tabla'),
                // vVisaPasajeroCM: $(this).attr('vVisaPasajeroCM'),
            }
            tipos_polizas.push(data)
        });

        $('#poliza_pago').each(function() {
            data = {
                id: $(this).attr('id_tabla'),
                id_tipopoliza: $(this).find('option:selected').val(),
                poliza: $(this).attr('descripcion_tabla'),
                // vVisaPasajeroCM: $(this).attr('vVisaPasajeroCM'),
            }
            tipos_polizas.push(data)
        });

        $('#poliza_clientes').each(function() {
            data = {
                id: $(this).attr('id_tabla'),
                id_tipopoliza: $(this).find('option:selected').val(),
                poliza: $(this).attr('descripcion_tabla'),
                // vVisaPasajeroCM: $(this).attr('vVisaPasajeroCM'),
            }
            tipos_polizas.push(data)
        });


        $('#poliza_proveedores').each(function() {
            data = {
                id: $(this).attr('id_tabla'),
                id_tipopoliza: $(this).find('option:selected').val(),
                poliza: $(this).attr('descripcion_tabla'),
                // vVisaPasajeroCM: $(this).attr('vVisaPasajeroCM'),
            }
            tipos_polizas.push(data)
        });

        $('#poliza_diario').each(function() {
            data = {
                id: $(this).attr('id_tabla'),
                id_tipopoliza: $(this).find('option:selected').val(),
                poliza: $(this).attr('descripcion_tabla'),
                // vVisaPasajeroCM: $(this).attr('vVisaPasajeroCM'),
            }
            tipos_polizas.push(data)
        });

        $('#loadingLoad').modal('show');
        $.ajax({
                url: "{{route('parametros.configuracion.save')}}",
                type: 'POST',
                dataType: 'json',
                data: {
                    tipos_polizas: tipos_polizas,
                }
            })
            .done(function(resp) {
                if (resp.result == 1) {
                    showNotification('success', 'top', 'center', 'success', '¡HECHO!', resp.mensaje);
                } else {
                    showNotification('error', 'top', 'center', 'danger', '¡ERROR!', resp.mensaje);
                }

            })
            .fail(function() {
                console.log("error");
            })
            .always(function() {
                setTimeout(() => {
                    $('#loadingLoad').modal('hide');
                }, 2000);
            });
    }

    $('input[name="provision_automatica"]').on('change', function() {
        fetchGuardarConfiguracionPolizasAutomatica();
    });

    $('input[name="pagos_depositos_automatica"]').on('change', function() {
        fetchGuardarConfiguracionPolizasAutomatica();
    });

    $('input[name="pagos_pue_auto"]').on('change', function() {
        fetchGuardarConfiguracionPagosAutomaticos();
    });

    $('input[name="pagos_complementos_auto"]').on('change', function() {
        fetchGuardarConfiguracionPagosAutomaticos();
    });


    $('.pue_pagos_auto').on('change', function() {
        fetchGuardarConfiguracionPagosAutomaticos();
    });

    function fetchGuardarConfiguracionPolizasAutomatica() {
        $.ajax({
                url: "{{route('parametros.configuracion.save-polizas-automatica')}}",
                type: 'POST',
                dataType: 'json',
                data: {
                    polizas_provision_auto: $('input[name="provision_automatica"]:checked').val(),
                    polizas_pago_auto: $('input[name="pagos_depositos_automatica"]:checked').val(),
                },
            })
            .fail(function() {
                Swal.fire({
                    title: '¡ERROR!',
                    text: 'Ocurrió un error al guardar la configuración',
                    icon: 'error',
                    confirmButtonText: 'Aceptar'
                });
            });
    }

    function fetchGuardarConfiguracionPagosAutomaticos() {
        $.ajax({
                url: "{{route('parametros.configuracion.save-pagos-automatico')}}",
                type: 'POST',
                dataType: 'json',
                data: {
                    pagos_complementos_auto: $('input[name="pagos_complementos_auto"]:checked').val(),
                    pagos_auto: $('input[name="pagos_pue_auto"]:checked').val(),
                    banco_defecto_pago: $('#banco_pagos option:selected').val(),
                    forma_pago_defecto_pago: $('#forma_pago_pagos option:selected').val(),
                },
            })
            .fail(function() {
                Swal.fire({
                    title: '¡ERROR!',
                    text: 'Ocurrió un error al guardar la configuración',
                    icon: 'error',
                    confirmButtonText: 'Aceptar'
                });
            });
    }

    //FOLIOS

    function loadFolios() {
        //$('#').DataTable();
        $('#tableFolios').dataTable().fnDestroy();
        $('#tableFolios').DataTable({
            "scrollX": true,
            ajax: {
                url: "{{url('cont/parametros/get_folios')}}",
                type: "POST",
            },
            columns: [{
                    data: "tipo_poliza.descripcion"
                },
                {
                    data: "poliza"
                },
                {
                    data: "created_at"
                },
                {
                    data: "acciones"
                },

            ],
            order: [
                [0, "asc"]
            ],
        });
    }


    function nuevoFolio() {
        $('#modalNuevoFolio').modal('show');
        $('#titleModalFolio').text('Agregar folio contable')
        limpiarModalFolio();
    }

    function guardarFolio() {
        var id = $('#idFolioHidden').val();
        var poliza = $('#folio').val();
        var id_tipopoliza = $('#tipo_poliza option:selected').val();

        if (folio == '' || tipo_poliza == '') {
            showNotification('error', 'top', 'center', 'danger', '¡ERROR!', 'Debes ingresar la información obligatoria')
            return false;
        }

        $.ajax({
                url: "{{ url('cont/parametros/save_folio')}}",
                type: 'POST',
                dataType: 'json',
                data: {
                    id: id,
                    poliza: poliza,
                    id_tipopoliza: id_tipopoliza,
                },
            })
            .done(function(resp) {
                if (resp.result == 1) {
                    $('#modalNuevoFolio').modal('hide');
                    showNotification('success', 'top', 'center', 'success', '¡HECHO!', resp.mensaje);
                    $('#tableFolios').DataTable().ajax.reload();
                } else {
                    showNotification('error', 'top', 'center', 'danger', resp.mensaje, '¡ERROR!');
                }
            })
            .fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");
            });
    }

    function limpiarModalFolio() {
        $('#idFolioHidden').val('');
        $('#folio').val(0);
        $('#tipo_poliza').val(0).trigger('change');

    }

    function editarFolio(id) {
        $.ajax({
                url: "{{ url('cont/parametros/get_folio')}}",
                type: 'POST',
                dataType: 'json',
                data: {
                    id: id,

                },
            })
            .done(function(resp) {
                $('#titleModal').text('Actualizar folio contable');
                $('#idFolioHidden').val(resp.data['id']);
                $('#folio').val(resp.data['poliza']);
                $('#tipo_poliza').val(resp.data['id_tipopoliza']).trigger('change');
                $('#modalNuevoFolio').modal('show');
            })

            .fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");
            });
    }

    function eliminarFolio(id) {
        Swal.fire({
            title: '¿Estás seguro de eliminar?',
            text: "Esta acción no es reversible",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            cancelButtonText: 'Cancelar',
            confirmButtonText: 'Si, eliminado!'
        }).then((result) => {
            if (result.value) {
                $.ajax({
                        url: "{{ url('cont/parametros/delete_folio')}}",
                        type: 'POST',
                        dataType: 'json',
                        data: {
                            id: id,
                        },
                    })
                    .done(function(resp) {

                        if (resp.result == 1) {
                            showNotification('success', 'top', 'center', 'success', '¡HECHO!', resp.mensaje);
                            $('#tableFolios').DataTable().ajax.reload();
                        } else {
                            showNotification('error', 'top', 'center', 'danger', '¡ERROR!', resp.mensaje);
                        }
                    })
                    .fail(function() {
                        console.log("error");
                    })
                    .always(function() {
                        console.log("complete");
                    });
            }
        })
    }
</script>
@endpush