@extends('adminlte::page')

@section('title', env('APP_NAME') . ' - Lista de Ventas')
@section('plugins.Select2', true)
@section('plugins.Datatables', true)
@section('content_header')
    <h1>Listado de Ventas</h1>
@stop

@section('content')

    <a href="{{ route('ventas.create') }}" class="btn btn-primary mr-3"> <i class="fa fa-plus"></i> Nueva Venta</a>
    <a href="#" class="btn btn-info mr-3" data-toggle="modal" data-target="#addpagoGlobalModal"> <i
            class="fa fa-dollar-sign"></i> Amortizar Pago</a>
    <a href="" class="btn btn-success mr-3" data-toggle="modal" data-target="#btnConsultarModal"> <i
            class="fa fa-search"></i> Estado de Cuenta</a>

    <div class="card mt-3">
        <div class="card-body">


            <div class="row mb-3">
                <div class="col-md-3">
                    <label for="searchDate">Buscar por Fecha:</label>
                    <input type="date" id="searchDate" class="form-control">
                </div>
                <div class="col-md-1">
                    <button id="filterButton" class="btn btn-primary" style="margin-top: 2rem;">Buscar</button>
                </div>
            </div>

            <div class="dt-responsive table-responsive ">
                <table id="table-sales" class="table  table-bordered table-hover" cellspacing="0"
                    style="width:100% !important">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Cliente</th>
                            <th>Serie Venta</th>
                            <th>Fecha Venta</th>
                            <th>Peso Neto</th>
                            <th>Forma de Pago</th>
                            <th>Monto Total</th>
                            <th>Monto Recibido</th>
                            <th>Saldo Favor</th>
                            <th>Monto Pendiente</th>
                            <th>Estado</th>
                            <th>Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        {{-- data ajax datatables --}}
                    </tbody>
                </table>
            </div>
        </div>
    </div>


    <!-- Modal generar pago Metodo A: Pagar parcialmente -->
    <div class="modal fade" id="agregarPagoModal" tabindex="-1" role="dialog" aria-labelledby="agregarPagoModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg " role="document">
            <div class="modal-content">
                <div class="modal-header bg-primary text-white">
                    <h5 class="modal-title" id="agregarPagoModalLabel">Agregar Pago | Metodo A: Pagar parcialmente</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="agregarPagoForm" action="{{ route('pagos.store') }}" method="POST"
                        enctype="multipart/form-data">
                        @csrf
                        <input type="hidden" name="venta_id" id="venta_id">
                        <input type="hidden" name="cliente_id" id="cliente_id">

                        <div class="row">
                            <div class="col">
                                <div class="form-group">
                                    <label for="">Monto a pagar</label>
                                    <input type="text" class="form-control" name="monto_total" id="monto_total" readonly>
                                </div>
                            </div>
                            <div class="col">
                                <div class="form-group">
                                    <label for="">Fecha del deposito</label>
                                    <input type="date" class="form-control" name="fecha" id="fecha"
                                        value="{{ date('Y-m-d') }}">
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col">
                                <div class="form-group">
                                    <label for="metodo_pago">Método de Pago</label>
                                    <select class="form-control" name="metodo_pago_id" id="metodo_pago_id" required>
                                        @foreach ($metodos as $metodo)
                                            <option value="{{ $metodo->id }}">{{ $metodo->descripcion }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <div class="col d-flex align-items-center justify-content-center">
                                <div class="form-group m-0">
                                    <div class="custom-control custom-switch">
                                        <input type="checkbox" class="custom-control-input" id="checkPagoCompleto">
                                        <label class="custom-control-label" for="checkPagoCompleto">¿Desea hacer el pago completo?</label>
                                </div>
                            </div>
                            </div>

                        </div>

                        <div class="form-group">
                            <label for="holder_id">Titular</label>
                            <select class="form-control" name="holder_id" id="holder_id" required>
                                <!-- Aquí deberías cargar dinámicamente los métodos de pago disponibles -->
                                @foreach ($holders as $holder)
                                    <option value="{{ $holder->id }}">{{ $holder->name }}</option>
                                @endforeach
                            </select>
                        </div>


                        <div class="form-group">
                            <label for="entidad">Cuenta destino</label>
                            <select name="banco_id" id="banco_id" class="form-control">
                                @foreach ($bancos as $entidad)
                                    <option value="{{ $entidad->id }}">{{ $entidad->nombre }}</option>
                                @endforeach
                            </select>
                        </div>


                        <div class="row">
                            <div class="col">
                                <div class="form-group">
                                    <label for="numero">Numero de Operación</label>
                                    <input type="text" class="form-control" name="num_operacion" id="num_operacion">
                                </div>
                            </div>
                            <div class="col">
                                <div class="form-group">
                                    <label for="monto">Ingresar Pago</label>
                                    <input type="number" step="0.01" class="form-control" id="monto" name="monto" required>
                                </div>
                            </div>
                        </div>


                        {{-- <div class="form-group">
                            <label for="destino">Destino del dinero</label>
                            <input type="text" class="form-control" name="destino" id="destino">
                        </div> --}}

                        <div class="form-group">
                            <label for="capture">Captura o Imagen del pago</label>
                            <input type="file" name="imagen" id="imagen" class="form-control">
                        </div>



                        <div class="form-group">
                            <label for="">Comentario</label>
                            <textarea class="form-control" name="comentario" id="comentario" rows="4"></textarea>
                        </div>

                        <div class="form-group">
                            <button type="submit" class="btn btn-primary float-right" id="btnAddpagoMetodoA"> <i class="fas fa-save"></i> Registrar Pago</button>
                        </div>

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

    {{-- Modal pago global Metodo B: Amortizar pago --}}
    <div class="modal fade" id="addpagoGlobalModal" tabindex="-1" role="dialog"
        aria-labelledby="addpagoGlobalModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header bg-primary text-white">
                    <!-- Título cambiado a 'Agregar Pago Global' -->
                    <h5 class="modal-title" id="addpagoGlobalModalLabel">Agregar Amortización de Pago | Metodo B: Amortizar pago</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="agregarPagoGlobalForm" action="#!" method="POST" enctype="multipart/form-data">
                        @csrf

                        <div class="form-group">
                            <div class="row">
                                <div class="col-md-10">
                                    <label for="">Cliente:</label>
                                    <select id="select_cliente_id" name="select_cliente_id"
                                        class="form-control" required>
                                        <option value="" disabled selected>Selecciona un cliente</option>
                                        @foreach ($clientes as $cliente)
                                            <option value="{{ $cliente->id }}">{{ $cliente->nombre_comercial }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-2">
                                    <label for="">Buscar deuda</label>
                                    <button type="button" id="btnBuscarCliente"
                                        class="btn btn-primary w-100">Buscar</button>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col">
                                <!-- Monto Total (se asume que es readonly, ya que es un monto global) -->
                                <div class="form-group">
                                    <label for="monto_total">Total a Pagar</label>
                                    <input type="text" class="form-control" name="total_pendiente"
                                        id="total_pendiente" readonly>
                                </div>
                            </div>
                            <div class="col">
                                <div class="form-group">
                                    <label for="">Fecha</label>
                                    <input type="date" class="form-control" name="fecha" id="fecha"
                                        value="{{ date('Y-m-d') }}">
                                </div>
                            </div>
                        </div>


                        <div class="row">
                            <div class="col">
                                <div class="form-group">
                                    <!-- Método de pago (sin cambios) -->
                                    <label for="metodo_pago_id">Método de Pago</label>
                                    <select class="form-control" name="metodo_pago_id" id="metodo_pago_id" required>
                                        @foreach ($metodos as $metodo)
                                            <option value="{{ $metodo->id }}">{{ $metodo->descripcion }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <div class="col d-flex align-items-center justify-content-center">
                                <div class="form-group m-0">
                                    <div class="custom-control custom-switch">
                                        <input type="checkbox" class="custom-control-input" id="checkPagoCompletoGlobal">
                                        <label class="custom-control-label" for="checkPagoCompletoGlobal">¿Desea hacer el pago completo?</label>
                                    </div>
                                </div>
                            </div>

                        </div>


                        <div class="form-group">
                            <label for="holder_id">Titular</label>
                            <select class="form-control" name="holder_id" id="holder_id" required>
                                @foreach ($holders as $holder)
                                    <option value="{{ $holder->id }}">{{ $holder->name }}</option>
                                @endforeach
                            </select>
                        </div>


                        <!-- Selección de Banco (Entidad Bancaria) -->
                        <div class="form-group">
                            <label for="banco_id">Cuenta destino</label>
                            <select name="banco_id" id="banco_id" class="form-control">
                                @foreach ($bancos as $entidad)
                                    <option value="{{ $entidad->id }}">{{ $entidad->nombre }}</option>
                                @endforeach
                            </select>
                        </div>


                        <!-- Número de operación bancaria -->
                        <div class="form-group">
                            <div class="row">
                                <div class="col">
                                    <label for="num_operacion">Número de Operación</label>
                                    <input type="text" class="form-control" name="num_operacion" id="num_operacion" required>
                                </div>
                                <div class="col">
                                    <!-- Monto a pagar (aquí debería ingresarse el pago real) -->
                                        <label for="monto">Monto a Pagar</label>
                                        <input type="number" step="0.01" class="form-control" name="monto_global"
                                            id="monto_global" required>
                                </div>
                            </div>

                        </div>

                        <!-- Destino del dinero (podría ser una descripción del uso del pago) -->
                        {{-- <div class="form-group">
                            <label for="destino">Destino del Dinero</label>
                            <input type="text" class="form-control" name="destino" id="destino">
                        </div> --}}


                        <!-- Imagen o captura del pago (opcional) -->
                        <div class="form-group">
                            <label for="imagen">Captura o Imagen del Pago</label>
                            <input type="file" name="imagen" id="imagen" class="form-control">
                        </div>

                        <div class="form-group">
                            <label for="">Comentario</label>
                            <textarea class="form-control" name="comentario" id="comentario" rows="4"></textarea>
                        </div>
                        <!-- Botón para registrar el pago -->
                        <button type="button" id="btnAddpagoMetodoB" class="btn btn-primary float-right"> <i class="fas fa-save"></i> Registrar Pago</button>
                    </form>
                </div>
            </div>
        </div>
    </div>


    {{-- Modal Estado de Cuenta Mejorado --}}
    <div class="modal fade" id="btnConsultarModal" tabindex="-1" role="dialog" aria-labelledby="btnConsultarModal"
        aria-hidden="true">
        <div class="modal-dialog modal-xl" role="document">
            <div class="modal-content">
                <div class="modal-header bg-primary text-white">
                    <h5 class="modal-title" id="btnConsultarModal">
                        <i class="fas fa-chart-line"></i> Estado de Cuenta - Consulta Completa
                    </h5>
                    <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <!-- Selector de Cliente -->
                    <div class="row mb-4">
                                <div class="col-md-10">
                            <label for="buscar_cliente_id" class="form-label">
                                <strong><i class="fas fa-user"></i> Seleccionar Cliente:</strong>
                            </label>
                            <select id="buscar_cliente_id" name="buscar_cliente_id" class="form-control" required>
                                <option value="" disabled selected>Selecciona un cliente para consultar su estado de cuenta</option>
                                        @foreach ($clientes as $cliente)
                                    <option value="{{ $cliente->id }}">{{ $cliente->nombre_comercial }} - {{ $cliente->razon_social }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-2">
                            <label class="form-label">&nbsp;</label>
                            <button type="button" id="btnBuscarDeudaCliente" class="btn btn-primary btn-block">
                                <i class="fas fa-search"></i> Consultar
                            </button>
                                </div>
                            </div>

                    <!-- Sistema de Tabs -->
                    <div id="tabs-container" style="display: none;">
                        <!-- Nav tabs -->
                        <ul class="nav nav-tabs" id="estadoCuentaTabs" role="tablist">
                            <li class="nav-item" role="presentation">
                                <a class="nav-link active" id="resumen-tab" data-toggle="tab" href="#resumen" role="tab" aria-controls="resumen" aria-selected="true">
                                    <i class="fas fa-chart-pie"></i> Resumen
                                </a>
                            </li>
                            <li class="nav-item" role="presentation">
                                <a class="nav-link" id="ventas-tab" data-toggle="tab" href="#ventas" role="tab" aria-controls="ventas" aria-selected="false">
                                    <i class="fas fa-shopping-cart"></i> Ventas del Día
                                </a>
                            </li>
                            <li class="nav-item" role="presentation">
                                <a class="nav-link" id="pagos-tab" data-toggle="tab" href="#pagos" role="tab" aria-controls="pagos" aria-selected="false">
                                    <i class="fas fa-money-bill-wave"></i> Pagos del Día
                                </a>
                            </li>
                            <li class="nav-item" role="presentation">
                                <a class="nav-link" id="saldo-favor-tab" data-toggle="tab" href="#saldo-favor" role="tab" aria-controls="saldo-favor" aria-selected="false">
                                    <i class="fas fa-gift"></i> Saldo a Favor
                                </a>
                            </li>
                            <li class="nav-item" role="presentation">
                                <a class="nav-link" id="saldo-pendiente-tab" data-toggle="tab" href="#saldo-pendiente" role="tab" aria-controls="saldo-pendiente" aria-selected="false">
                                    <i class="fas fa-clock"></i> Saldo Pendiente
                                </a>
                            </li>
                        </ul>

                        <!-- Tab panes -->
                        <div class="tab-content" id="estadoCuentaTabContent">
                            <!-- Tab Resumen -->
                            <div class="tab-pane fade show active" id="resumen" role="tabpanel" aria-labelledby="resumen-tab">
                                <div class="mt-3">
                                    <!-- Información del Cliente -->
                                    <div class="card border-info mb-3">
                                        <div class="card-header bg-info text-white">
                                            <h6 class="mb-0"><i class="fas fa-user-circle"></i> Información del Cliente</h6>
                                        </div>
                                        <div class="card-body">
                            <div class="row">
                                                <div class="col-md-6">
                                                    <p><strong>Razón Social:</strong> <span id="cliente-razon-social"></span></p>
                                                    <p><strong>Nombre Comercial:</strong> <span id="cliente-nombre-comercial"></span></p>
                                                </div>
                                                <div class="col-md-6">
                                                    <p><strong>RUC:</strong> <span id="cliente-ruc"></span></p>
                                                    <p><strong>Teléfono:</strong> <span id="cliente-telefono"></span></p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Resumen Financiero -->
                                    <div class="card border-success">
                                        <div class="card-header bg-success text-white">
                                            <h6 class="mb-0"><i class="fas fa-calculator"></i> Resumen Financiero del Día</h6>
                                        </div>
                                        <div class="card-body">
                                            <div class="row">
                                                <div class="col-md-3">
                                                    <div class="text-center">
                                                        <h4 class="text-primary">S/. <span id="venta-dia-monto" class="font-weight-bold">0.00</span></h4>
                                                        <p class="text-muted mb-0">Ventas del Día</p>
                                                    </div>
                                                </div>
                                                <div class="col-md-3">
                                                    <div class="text-center">
                                                        <h4 class="text-success">S/. <span id="pagos-hoy-monto" class="font-weight-bold">0.00</span></h4>
                                                        <p class="text-muted mb-0">Pagos del Día</p>
                                                    </div>
                                                </div>
                                                <div class="col-md-3">
                                                    <div class="text-center">
                                                        <h4 class="text-warning">S/. <span id="saldo-pendiente-monto" class="font-weight-bold">0.00</span></h4>
                                                        <p class="text-muted mb-0">Saldo Pendiente</p>
                                                    </div>
                                                </div>
                                                <div class="col-md-3">
                                                    <div class="text-center">
                                                        <h4 class="text-success">S/. <span id="saldo-favor-monto" class="font-weight-bold">0.00</span></h4>
                                                        <p class="text-muted mb-0">Saldo a Favor</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Tab Ventas del Día -->
                            <div class="tab-pane fade" id="ventas" role="tabpanel" aria-labelledby="ventas-tab">
                                <div class="mt-3">
                                    <div class="card border-primary">
                                        <div class="card-header bg-primary text-white">
                                            <h6 class="mb-0"><i class="fas fa-shopping-cart"></i> Ventas del Día</h6>
                                        </div>
                                        <div class="card-body">
                                            <div class="table-responsive">
                                                <table class="table table-sm table-bordered" id="tabla-ventas-dia">
                                                    <thead class="thead-light">
                                                        <tr>
                                                            <th>Serie</th>
                                                            <th>Fecha</th>
                                                            <th>Peso Neto</th>
                                                            <th>Monto Total</th>
                                                            <th>Monto Recibido</th>
                                                            <th>Saldo Favor</th>
                                                            <th>Monto Pendiente</th>
                                                            <th>Estado</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                                        <!-- Se llenará dinámicamente -->
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Tab Pagos del Día -->
                            <div class="tab-pane fade" id="pagos" role="tabpanel" aria-labelledby="pagos-tab">
                                <div class="mt-3">
                                    <div class="card border-success">
                                        <div class="card-header bg-success text-white">
                                            <h6 class="mb-0"><i class="fas fa-money-bill-wave"></i> Pagos del Día</h6>
                                        </div>
                                        <div class="card-body">
                                            <div class="table-responsive">
                                                <table class="table table-sm table-bordered" id="tabla-pagos-dia">
                                                    <thead class="thead-light">
                                                        <tr>
                                                            <th>Fecha</th>
                                                            <th>Venta</th>
                                                            <th>Método</th>
                                                            <th>N° Operación</th>
                                                            <th>Cuenta</th>
                                                            <th>Monto</th>
                                                            <th>Estado</th>
                                            </tr>
                                                    </thead>
                                                    <tbody>
                                                        <!-- Se llenará dinámicamente -->
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Tab Saldo a Favor -->
                            <div class="tab-pane fade" id="saldo-favor" role="tabpanel" aria-labelledby="saldo-favor-tab">
                                <div class="mt-3">
                                    <div class="card border-info">
                                        <div class="card-header bg-info text-white">
                                            <h6 class="mb-0">
                                                <i class="fas fa-gift"></i> Saldo a Favor del Cliente
                                                <span class="badge badge-light ml-2" id="total-saldo-favor">S/. 0.00</span>
                                            </h6>
                                        </div>
                                        <div class="card-body">
                                            <div class="table-responsive">
                                                <table class="table table-sm table-bordered" id="tabla-saldo-favor">
                                                    <thead class="thead-light">
                                                        <tr>
                                                            <th>Serie</th>
                                                            <th>Fecha</th>
                                                            <th>Monto Total</th>
                                                            <th>Monto Recibido</th>
                                                            <th>Saldo a Favor</th>
                                                            <th>Monto Pendiente</th>
                                                            <th>Estado</th>
                                            </tr>
                                                    </thead>
                                                    <tbody>
                                                        <!-- Se llenará dinámicamente -->
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Tab Saldo Pendiente -->
                            <div class="tab-pane fade" id="saldo-pendiente" role="tabpanel" aria-labelledby="saldo-pendiente-tab">
                                <div class="mt-3">
                                    <div class="card border-warning">
                                        <div class="card-header bg-warning text-dark">
                                            <h6 class="mb-0">
                                                <i class="fas fa-clock"></i> Saldo Pendiente por Pagar
                                                <span class="badge badge-light ml-2" id="total-saldo-pendiente">S/. 0.00</span>
                                            </h6>
                                        </div>
                                        <div class="card-body">
                                            <div class="table-responsive">
                                                <table class="table table-sm table-bordered" id="tabla-saldo-pendiente">
                                                    <thead class="thead-light">
                                                        <tr>
                                                            <th>Serie</th>
                                                            <th>Fecha</th>
                                                            <th>Monto Total</th>
                                                            <th>Monto Recibido</th>
                                                            <th>Saldo a Favor</th>
                                                            <th>Monto Pendiente</th>
                                                            <th>Días Pendiente</th>
                                                            <th>Estado</th>
                                            </tr>
                                                    </thead>
                                                    <tbody>
                                                        <!-- Se llenará dinámicamente -->
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">
                        <i class="fas fa-times"></i> Cerrar
                    </button>
                    <button type="button" class="btn btn-primary" id="btn-exportar-estado-cuenta">
                        <i class="fas fa-download"></i> Exportar
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal para agregar descuento -->
    <div class="modal fade" id="descuentoModal" tabindex="-1" aria-labelledby="descuentoModalLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="descuentoModalLabel">Descuento a la venta</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="descuentoForm" action="{{ route('ventas.descuentos.store') }}" method="POST">
                        @csrf
                        <input type="hidden" name="venta_id" id="venta_id">

                        <div class="mb-3">
                            <label for="monto_pendiente" class="form-label">Monto Pendiente</label>
                            <input type="number" step="0.01" class="form-control" id="monto_pendiente"
                                name="monto_pendiente" required readonly>
                        </div>

                        <!-- Monto del descuento -->
                        <div class="mb-3">
                            <label for="monto_descuento" class="form-label">Monto del Descuento</label>
                            <input type="number" step="0.01" class="form-control" id="monto_descuento"
                                name="monto_descuento" required>
                        </div>
                        <!-- Motivo del descuento -->
                        <div class="mb-3">
                            <label for="motivo_descuento" class="form-label">Motivo del Descuento</label>
                            <textarea class="form-control" id="motivo_descuento" name="motivo_descuento"
                                required></textarea>
                        </div>
                        <!-- Fecha de aplicación (puede ser pre-llenada) -->
                        <div class="mb-3">
                            <label for="fecha_descuento" class="form-label">Fecha del descuento</label>
                            <input type="datetime-local" class="form-control" id="fecha_descuento"
                                name="fecha_descuento" value="{{ now()->format('Y-m-d\TH:i') }}" required>
                        </div>

                        <div class="d-flex justify-content-end">
                            <button type="submit" class="btn btn-primary"> <i class="fas fa-save"></i> Registrar Descuento</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    {{-- Modal para agregar adicional --}}
    <div class="modal fade" id="addAdicionalModal" tabindex="-1" role="dialog" aria-labelledby="addAdicionalModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addAdicionalModalLabel">Agregar Adicional a la venta</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="addAdicionalForm" action="{{ route('ventas.adicionales.store') }}" method="POST">
                        @csrf
                        <input type="hidden" name="venta_id" id="venta_id">

                        <div class="mb-3">
                            <label for="monto_total_venta" class="form-label">Monto Total de la Venta</label>
                            <input type="number" step="0.01" class="form-control" id="monto_total_venta"
                                name="monto_total_venta" required readonly>
                        </div>


                        <div class="form-group">
                            <label for="monto">Monto Adicional</label>
                            <input type="number" step="0.01" class="form-control" name="monto_adicional" id="monto_adicional" required>
                        </div>

                        <div class="form-group">
                            <label for="descripcion">Motivo del Adicional</label>
                            <textarea class="form-control" name="descripcion_adicional" id="descripcion_adicional" required></textarea>
                        </div>

                        <div class="form-group">
                            <label for="fecha">Fecha</label>
                            <input type="datetime-local" class="form-control" name="fecha_adicional" id="fecha_adicional" required value="{{ now()->format('Y-m-d\TH:i') }}">
                        </div>

                        <div class="d-flex justify-content-end">
                            <button type="submit" class="btn btn-primary "> <i class="fas fa-save"></i> Registrar Adicional</button>
                        </div>

                    </form>
                </div>
            </div>
        </div>
    </div>
@stop

@section('css')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.1/dist/css/bootstrap-select.min.css">

    <style>
        .checkbox-label {
            display: flex;
            align-items: center;
            font-size: 16px;
            /* Tamaño del texto */
            cursor: pointer;
            /* Cambia el cursor al pasar sobre el texto */
        }

        .checkbox-label input[type="checkbox"] {
            width: 20px;
            /* Tamaño del checkbox */
            height: 20px;
            /* Tamaño del checkbox */
            margin-right: 10px;
            /* Espacio entre el checkbox y el texto */
            cursor: pointer;
            /* Cambia el cursor al pasar sobre el checkbox */
        }

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

        /* Estilos para los tabs */
        .nav-tabs .nav-link {
            border: none;
            border-bottom: 3px solid transparent;
            color: #6c757d;
            font-weight: 500;
            padding: 12px 20px;
            transition: all 0.3s ease;
        }

        .nav-tabs .nav-link:hover {
            border-color: #007bff;
            color: #007bff;
            background-color: #f8f9fa;
        }

        .nav-tabs .nav-link.active {
            border-bottom-color: #007bff;
            color: #007bff;
            background-color: #fff;
            font-weight: 600;
        }

        .nav-tabs .nav-link i {
            margin-right: 8px;
        }

        .tab-content {
            border: 1px solid #dee2e6;
            border-top: none;
            padding: 20px;
            background-color: #fff;
        }

        .tab-pane {
            min-height: 300px;
        }

        /* Mejorar la apariencia de las cards en los tabs */
        .tab-pane .card {
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            border-radius: 8px;
        }

        .tab-pane .card-header {
            border-radius: 8px 8px 0 0 !important;
        }
    </style>
@stop

@section('js')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="https://cdn.jsdelivr.net/npm/moment@2.29.1/moment.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.1/dist/js/bootstrap-select.min.js"></script>
    <script>
        const base_url = "{{ route('ventas.index') }}";
        $(document).ready(function() {

            const tipoVenta = "{{ $tipoVenta }}"; // 1: Ventas diarias, 0: Ventas historicas
            console.log('Tipo de venta Diarias: ' + tipoVenta);

            //Eliminar venta
            $(document).on('click', '.btnEliminarVenta', function(e) {
                e.preventDefault();
                const ventaId = $(this).data('venta-id');
                console.log('Eliminar venta: ' + ventaId);

                Swal.fire({
                    title: '¿Confirmar eliminación?',
                    text: '¿Estás seguro de eliminar esta venta?',
                    icon: 'warning',
                    input: 'text',
                    inputLabel: 'Motivo de eliminación',
                    inputPlaceholder: 'Ingrese el motivo de la eliminación...',
                    inputAttributes: {
                        'aria-label': 'Motivo de eliminación'
                    },
                    showCancelButton: true,
                    confirmButtonText: 'Sí, eliminar',
                    cancelButtonText: 'Cancelar',
                    inputValidator: (value) => {
                        if (!value) {
                            return 'Debe ingresar un motivo de eliminación';
                        }
                        if (value.length < 10) {
                            return 'El motivo debe tener al menos 10 caracteres';
                        }
                    }
                }).then((result) => {
                    if (result.isConfirmed) {
                        const comentario = result.value;

                        $.ajax({
                            url: '/ventas/' + ventaId,
                            type: 'DELETE',
                            data: {
                                comentario: comentario
                            },
                            success: function(response) {
                                // Verificar si la respuesta indica éxito o error
                                if (response.success === false) {
                                    // Es un error del backend
                                    Swal.fire(
                                        'Error!',
                                        response.message || 'No se pudo eliminar la venta',
                                        'error'
                                    );
                                } else {
                                    // Es un éxito
                                Swal.fire({
                                    icon: 'success',
                                    title: 'Éxito',
                                    text: 'Venta eliminada correctamente',
                                    showConfirmButton: false,
                                    timer: 1000
                                }).then(() => {
                                    location.reload(); // Recarga la página después de mostrar la alerta
                                });
                                }
                            },
                            error: function(xhr, status, error) {
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Error',
                                    text:  xhr.responseJSON.message || 'No se pudo eliminar la venta. Intenta nuevamente.'
                                });
                            }
                        });
                    }
                });

            });



            //Tabla de ventas diarias
            const tableOrders = $('#table-sales').DataTable({
                processing: true,
                serverSide: true,
                ajax: base_url, // Ruta para cargar los datos via AJAX
                columns: [{
                        data: 'id',
                        name: 'id',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'cliente.razon_social',
                        name: 'cliente.razon_social'
                    },
                    {
                        data: 'serie_venta',
                        name: 'serie_venta'
                    },
                    {
                        data: 'fecha_venta',
                        name: 'fecha_venta'
                    },
                    {
                        data: 'peso_neto',
                        name: 'peso_neto'
                    },
                    {
                        data: 'forma_de_pago',
                        name: 'forma_de_pago',
                        searchable: false,
                        orderable: false
                    },
                    {
                        data: 'monto_total',
                        name: 'monto_total'
                    },
                    {
                        data: 'monto_recibido',
                        name: 'monto_recibido'
                    },
                    {
                        data: 'saldo',
                        name: 'saldo'
                    },
                    {
                        data: 'monto_pendiente',
                        name: 'monto_pendiente'
                    },
                    {
                        data: 'estado',
                        name: 'estado',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'acciones',
                        name: 'acciones',
                        orderable: false,
                        searchable: false
                    }
                ],
                "pageLength": 10,
                order: [
                    [0, 'desc']
                ],
                dom: `<'row'
						<'col-md-7'l>
					<'col-md-5'f>
				>
				<'row '<'col-sm-12 col-12 col-md-12'tr>>
				<'row '<'col-sm-12 col-12 col-md-5 text-overflowp-2'i>
						<'col-sm-12 col-12  col-md-7 p-2'p>
				>`,
                iDisplayLength: 10,
                language: {
                    "url": "/js/spanish.json"
                },
            });

            //abir modal y pasar datos para la busqueda.
            $('#agregarPagoModal').on('show.bs.modal', function(event) {
                const button = $(event.relatedTarget); // Botón que abrió el modal
                const ventaId = button.data('venta-id'); // Extrae el ID de la venta
                const montoTotal = button.data('venta-monto');
                const clienteId = button.data('venta-cliente-id');

                const modal = $(this);
                modal.find('#venta_id').val(ventaId);
                modal.find('#monto_total').val(montoTotal);
                modal.find('#cliente_id').val(clienteId);
                modal.find('#holder_id').prop('selectedIndex', 4);

                console.log('ventaId: ' + ventaId);
                console.log('montoTotal: ' + montoTotal);
                console.log('clienteId: ' + clienteId);
            });

            //Agregar descuento de la venta, por devolucion Unidades y kg.
            $('#descuentoModal').on('show.bs.modal', function(event) {
                const button = $(event.relatedTarget); // Botón que abrió el modal
                const ventaId = button.data('venta-id'); // Extrae el ID de la venta
                const montoPendiente = button.data('venta-monto');

                const modal = $(this);
                modal.find('#venta_id').val(ventaId);
                modal.find('#monto_pendiente').val(montoPendiente);
            });

            //Agregar adicional a la venta
            $('#addAdicionalModal').on('show.bs.modal', function(event) {
                const button = $(event.relatedTarget); // Botón que abrió el modal
                const ventaId = button.data('venta-id'); // Extrae el ID de la venta
                const montoTotal = button.data('venta-monto-total');

                const modal = $(this);
                modal.find('#venta_id').val(ventaId);
                modal.find('#monto_total_venta').val(montoTotal);
            });

            // Manejo del envío del formulario, Agregar pago metodo dirigido a venta Metodo A.
            $('#agregarPagoForm').on('submit', function(event) {
                event.preventDefault(); // Evita el envío normal del formulario

                const form = $(this);
                const url = form.attr('action'); // Obtiene la URL de acción del formulario
                const data = new FormData(this); // 'this' hace referencia al formulario
                data.append('tipo_venta', tipoVenta);
                const monto = parseFloat($('#monto').val());
                const saldo = parseFloat($('#monto_total').val()); // Asegúrate de tener el saldo en el formulario

                Swal.fire({
                    title: '¿Confirmar registro?',
                    text: "¿Estás seguro de registrar este pago?",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Sí, registrar',
                    cancelButtonText: 'Cancelar'
                }).then((result) => {
                    if (result.isConfirmed) {
                        $.ajax({
                            url: url,
                            type: 'POST',
                            data: data,
                            processData: false, // No procesar los datos (importantísimo cuando se envía FormData)
                            contentType: false, // No se especifica el content-type (importantísimo cuando se envían archivos)
                            success: function(response) {
                                if (response.success) {
                                    Swal.fire({
                                        icon: 'success',
                                        title: 'Información',
                                        text: response.message,
                                        showConfirmButton: false,
                                        timer: 1000
                                    }).then(() => {
                                        location.reload(); // Recarga la página después de mostrar la alerta
                                    });
                                } else {
                                    let errorMessages = '';
                                    $.each(response.errors, function(field, messages) {
                                        errorMessages += messages.join(', ') +'\n';
                                    });

                                    Swal.fire({
                                        title: 'Error de validación',
                                        text: errorMessages, // Aquí mostramos los errores concatenados
                                        icon: 'error',
                                        confirmButtonText: 'Ok'
                                    });
                                }
                            },
                            error: function(xhr, status, error) {
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Error',
                                    text: xhr.responseJSON.message,
                                });
                            }
                        });
                    }
                });
            });

            //Manejo del envio, Agregar descuento a la venta.
            $('#descuentoForm').on('submit', function(event) {
                event.preventDefault();

                var form = $(this);
                var url = form.attr('action'); // Obtiene la URL de acción del formulario
                var data = new FormData(this); // 'this' hace referencia al formulario

                Swal.fire({
                    title: '¿Confirmar registro?',
                    text: "¿Estás seguro de registrar este descuento?",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Sí, registrar',
                    cancelButtonText: 'Cancelar'
                }).then((result) => {
                    if (result.isConfirmed) {

                        $.ajax({
                            url: url,
                            type: 'POST',
                            data: data,
                            processData: false, // No procesar los datos (importantísimo cuando se envía FormData)
                            contentType: false, // No se especifica el content-type (importantísimo cuando se envían archivos)
                            success: function(response) {
                                Swal.fire({
                                    icon: 'success',
                                    title: 'Éxito',
                                    text: 'Descuento agregado correctamente',
                                    showConfirmButton: false,
                                    timer: 1000
                                }).then(() => {
                                    location.reload(); // Recarga la página después de mostrar la alerta
                                });
                            },
                            error: function(xhr, status, error) {
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Error',
                                    text: 'No se pudo agregar el descuento. Intenta nuevamente.'
                                });
                            }
                        });
                    }
                });
            });

            //Manejo del envio, Agregar adicional a la venta.
            $('#addAdicionalForm').on('submit', function(event) {
                event.preventDefault();
                const form = $(this);
                const url = form.attr('action');
                const data = new FormData(this);
                data.append('tipo_venta', tipoVenta);

                Swal.fire({
                    title: '¿Confirmar registro?',
                    text: "¿Estás seguro de registrar este adicional?",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Sí, registrar',
                    cancelButtonText: 'Cancelar'
                }).then((result) => {
                    if (result.isConfirmed) {
                        $.ajax({
                            url: url,
                            type: 'POST',
                            data: data,
                            processData: false, // No procesar los datos (importantísimo cuando se envía FormData)
                            contentType: false, // No se especifica el content-type (importantísimo cuando se envían archivos)
                            success: function(response) {
                                Swal.fire({
                                    icon: 'success',
                                    title: 'Éxito',
                                    text: 'Adicional agregado correctamente',
                                    showConfirmButton: false,
                                    timer: 1000
                                }).then(() => {
                                    location.reload(); // Recarga la página después de mostrar la alerta
                                });
                            },
                            error: function(xhr, status, error) {
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Error',
                                    text: 'No se pudo agregar el adicional. Intenta nuevamente.'
                                });
                            }
                        });
                    }
                });
            });

            //Buscar cliente desde el Modal Metodo B
            $('#btnBuscarCliente').click(function(e) {
                e.preventDefault();
                // Obtener el ID del cliente de algún campo de la vista (ejemplo: un input con el id 'cliente_id')
                let clienteId = $('#select_cliente_id').val(); // Asumiendo que tienes un campo input con id "cliente_id"
                // Verificar si el clienteId tiene valor
                if (clienteId) {
                    $.ajax({
                        type: "GET", // Método de la solicitud
                        url: "/pagos/total-pendiente/" +
                        clienteId, // La URL que incluye el ID del cliente
                        dataType: "json", // El tipo de datos esperado (json)
                        data: {
                            tipo_venta: tipoVenta
                        },
                        success: function(response) {
                            // Verificar si la solicitud fue exitosa
                            if (response.success) {
                                // Si la respuesta es exitosa, mostrar el total pendiente
                                $('#total_pendiente').val(response.total_pendiente);

                            } else {
                                $('#total_pendiente').val(response.total_pendiente);
                            }
                        },
                        error: function(xhr, status, error) {
                            // Manejo de errores en la solicitud AJAX
                            Swal.fire({
                                title: 'Error',
                                text: xhr.responseJSON.message,
                                icon: 'error',
                                confirmButtonText: 'Ok'
                            });
                        }
                    });
                } else {
                    // Si el clienteId está vacío
                    Swal.fire({
                        title: 'Información',
                        text: 'Por favor, ingresa un ID de cliente válido.',
                        icon: 'error',
                        confirmButtonText: 'Ok'
                    });
                }
            });

            //Buscar estado de cuenta completo del cliente
            $('#btnBuscarDeudaCliente').click(function(e) {
                e.preventDefault();

                let clienteId = $('#buscar_cliente_id').val();

                if (!clienteId) {
                    Swal.fire({
                        title: 'Información',
                        text: 'Por favor, selecciona un cliente válido.',
                        icon: 'warning',
                        confirmButtonText: 'Ok'
                    });
                    return;
                }

                // Mostrar loading
                Swal.fire({
                    title: 'Consultando...',
                    text: 'Obteniendo información del estado de cuenta',
                    allowOutsideClick: false,
                    didOpen: () => {
                        Swal.showLoading();
                    }
                });

                    $.ajax({
                    type: "GET",
                    url: "/pagos/buscar-deuda-cliente/" + clienteId,
                    dataType: "json",
                        data: {
                            tipo_venta: tipoVenta
                        },
                        success: function(response) {
                        Swal.close();

                            if (response.success) {
                            // Eliminar mensaje de bienvenida si existe
                            $('#btnConsultarModal .modal-body .alert-info').remove();

                            // Mostrar información del cliente
                            mostrarInformacionCliente(response.cliente);

                            // Actualizar resumen financiero
                            actualizarResumenFinanciero(response);

                            // Mostrar detalles de ventas del día
                            mostrarVentasDelDia(response.ventas_dia);

                            // Mostrar detalles de pagos del día
                            mostrarPagosDelDia(response.pagos_dia);

                                                                                    // Mostrar saldo a favor
                            mostrarSaldoAFavor(response.saldo_a_favor, response.ventas_con_saldo_favor);

                            // Mostrar saldo pendiente
                            mostrarSaldoPendiente(response.saldo_pendiente, response.ventas_con_saldo_pendiente);

                            // Mostrar el contenedor de tabs
                            $('#tabs-container').show();

                            } else {
                            // Eliminar mensaje de bienvenida si existe
                            $('.modal-body .alert-info').remove();

                            // Mostrar mensaje de no hay datos
                            Swal.fire({
                                title: 'Sin datos',
                                text: response.message || 'No se encontraron datos para este cliente.',
                                icon: 'info',
                                confirmButtonText: 'Ok'
                            });

                                                        // Ocultar el contenedor de tabs
                            $('#tabs-container').hide();

                            // Mostrar mensaje de bienvenida nuevamente
                            $('#btnConsultarModal .modal-body').prepend(`
                                <div class="row mb-4">
                                    <div class="col-md-12">
                                        <div class="alert alert-info text-center">
                                            <i class="fas fa-info-circle"></i>
                                            <strong>Bienvenido al Estado de Cuenta</strong><br>
                                            Selecciona un cliente y haz clic en "Consultar" para ver su información financiera completa.
                                        </div>
                                    </div>
                                </div>
                            `);
                            }
                        },
                        error: function(xhr, status, error) {
                        Swal.close();
                            Swal.fire({
                                title: 'Error',
                            text: xhr.responseJSON?.message || 'Error al consultar el estado de cuenta',
                                icon: 'error',
                                confirmButtonText: 'Ok'
                            });
                        }
                });
            });

            // Función para mostrar información del cliente
            function mostrarInformacionCliente(cliente) {
                if (cliente) {
                    $('#cliente-razon-social').text(cliente.razon_social || 'N/A');
                    $('#cliente-nombre-comercial').text(cliente.nombre_comercial || 'N/A');
                    $('#cliente-ruc').text(cliente.ruc || 'N/A');
                    $('#cliente-telefono').text(cliente.telefono || 'N/A');
                }
            }

            // Función para actualizar resumen financiero
            function actualizarResumenFinanciero(response) {
                $('#venta-dia-monto').text(formatCurrency(response.venta_dia || 0));
                $('#pagos-hoy-monto').text(formatCurrency(response.pagos_hoy || 0));
                $('#saldo-pendiente-monto').text(formatCurrency(response.saldo_pendiente || 0));
                $('#saldo-total-monto').text(formatCurrency(response.saldo_total || 0));
            }

            // Función para mostrar ventas del día
            function mostrarVentasDelDia(ventas) {
                let tbody = $('#tabla-ventas-dia tbody');
                tbody.empty();

                if (ventas && ventas.length > 0) {
                    ventas.forEach(function(venta) {
                        tbody.append(`
                            <tr>
                                <td>${venta.serie_venta || 'N/A'}</td>
                                <td>${formatDate(venta.fecha_venta)}</td>
                                <td>${formatNumber(venta.peso_neto)} kg</td>
                                <td>S/. ${formatCurrency(venta.monto_total)}</td>
                                <td>S/. ${formatCurrency(venta.monto_recibido)}</td>
                                <td>S/. ${formatCurrency(venta.saldo_favor)}</td>
                                <td>S/. ${formatCurrency(venta.monto_pendiente)}</td>
                                <td><span class="badge badge-${venta.estado ? 'success' : 'danger'}">${venta.estado ? 'Activo' : 'Anulado'}</span></td>
                            </tr>
                        `);
                    });
                } else {
                    tbody.append('<tr><td colspan="8" class="text-center text-muted">No hay ventas registradas hoy</td></tr>');
                }
            }

            // Función para mostrar pagos del día
            function mostrarPagosDelDia(pagos) {
                let tbody = $('#tabla-pagos-dia tbody');
                tbody.empty();

                if (pagos && pagos.length > 0) {
                    pagos.forEach(function(pago) {
                        tbody.append(`
                            <tr>
                                <td>${formatDate(pago.fecha)}</td>
                                <td>${pago.venta?.serie_venta || 'N/A'}</td>
                                <td>${pago.metodo_pago?.descripcion || 'N/A'}</td>
                                <td>${pago.num_operacion || 'N/A'}</td>
                                <td>${pago.banco?.name || 'N/A'}</td>
                                <td>S/. ${formatCurrency(pago.monto)}</td>
                                <td><span class="badge badge-${pago.estado ? 'success' : 'danger'}">${pago.estado ? 'Activo' : 'Anulado'}</span></td>
                            </tr>
                        `);
                    });
                } else {
                    tbody.append('<tr><td colspan="7" class="text-center text-muted">No hay pagos registrados hoy</td></tr>');
                }
            }



                        // Función para mostrar saldo a favor
            function mostrarSaldoAFavor(saldoAFavor, ventasConSaldoFavor) {
                // Actualizar el total en el resumen
                $('#saldo-favor-monto').text(formatCurrency(saldoAFavor || 0));

                // Actualizar el badge en el header del tab
                $('#total-saldo-favor').text('S/. ' + formatCurrency(saldoAFavor || 0));

                let tbody = $('#tabla-saldo-favor tbody');
                tbody.empty();

                if (ventasConSaldoFavor && ventasConSaldoFavor.length > 0) {
                    ventasConSaldoFavor.forEach(function(venta) {
                        tbody.append(`
                            <tr>
                                <td>${venta.serie_venta || 'N/A'}</td>
                                <td>${formatDate(venta.fecha_venta)}</td>
                                <td>S/. ${formatCurrency(venta.monto_total)}</td>
                                <td>S/. ${formatCurrency(venta.monto_recibido)}</td>
                                <td><span class="text-success font-weight-bold">S/. ${formatCurrency(venta.saldo)}</span></td>
                                <td>S/. ${formatCurrency(venta.monto_pendiente)}</td>
                                <td><span class="badge badge-${venta.estado ? 'success' : 'danger'}">${venta.estado ? 'Activo' : 'Anulado'}</span></td>
                            </tr>
                        `);
                    });
                } else {
                    tbody.append('<tr><td colspan="7" class="text-center text-muted">No hay ventas con saldo a favor</td></tr>');
                }
            }

            // Función para mostrar saldo pendiente
            function mostrarSaldoPendiente(saldoPendiente, ventasConSaldoPendiente) {
                // Actualizar el badge en el header del tab
                $('#total-saldo-pendiente').text('S/. ' + formatCurrency(saldoPendiente || 0));

                let tbody = $('#tabla-saldo-pendiente tbody');
                tbody.empty();

                if (ventasConSaldoPendiente && ventasConSaldoPendiente.length > 0) {
                    ventasConSaldoPendiente.forEach(function(venta) {
                        const diasPendiente = calcularDiasPendiente(venta.fecha_venta);
                        tbody.append(`
                            <tr>
                                <td>${venta.serie_venta || 'N/A'}</td>
                                <td>${formatDate(venta.fecha_venta)}</td>
                                <td>S/. ${formatCurrency(venta.monto_total)}</td>
                                <td>S/. ${formatCurrency(venta.monto_recibido)}</td>
                                <td>S/. ${formatCurrency(venta.saldo)}</td>
                                <td><span class="text-black font-weight-bold">S/. ${formatCurrency(venta.monto_pendiente)}</span></td>
                                <td><span class="badge badge-${diasPendiente > 30 ? 'danger' : diasPendiente > 15 ? 'warning' : 'info'}">${diasPendiente} días</span></td>
                                <td><span class="badge badge-${venta.estado ? 'success' : 'danger'}">${venta.estado ? 'Activo' : 'Anulado'}</span></td>
                            </tr>
                        `);
                    });
                } else {
                    tbody.append('<tr><td colspan="8" class="text-center text-muted">No hay ventas con saldo pendiente</td></tr>');
                }
            }

            // Función para formatear moneda
            function formatCurrency(amount) {
                return parseFloat(amount || 0).toFixed(2);
            }

            // Función para formatear números
            function formatNumber(number) {
                return parseFloat(number || 0).toFixed(2);
            }

            // Función para formatear fecha
            function formatDate(dateString) {
                if (!dateString) return 'N/A';
                return new Date(dateString).toLocaleDateString('es-ES');
            }

            // Función para calcular días pendiente
            function calcularDiasPendiente(fechaVenta) {
                if (!fechaVenta) return 0;
                const fechaVentaDate = new Date(fechaVenta);
                const hoy = new Date();
                const diffTime = Math.abs(hoy - fechaVentaDate);
                const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
                return diffDays;
            }

            // Botón exportar estado de cuenta
            $('#btn-exportar-estado-cuenta').click(function() {
                let clienteId = $('#buscar_cliente_id').val();
                if (clienteId) {
                    window.open(`/pagos/exportar-estado-cuenta/${clienteId}?tipo_venta=${tipoVenta}`, '_blank');
                } else {
                    Swal.fire({
                        title: 'Información',
                        text: 'Primero selecciona un cliente para exportar',
                        icon: 'warning',
                        confirmButtonText: 'Ok'
                    });
                }
            });

                                    // Función para resetear el modal de estado de cuenta
            function resetearModalEstadoCuenta() {
                // Ocultar el contenedor de tabs
                $('#tabs-container').hide();

                // Resetear información del cliente
                $('#cliente-razon-social').text('');
                $('#cliente-nombre-comercial').text('');
                $('#cliente-ruc').text('');
                $('#cliente-telefono').text('');

                                // Resetear resumen financiero
                $('#venta-dia-monto').text('0.00');
                $('#pagos-hoy-monto').text('0.00');
                $('#saldo-pendiente-monto').text('0.00');
                $('#saldo-total-monto').text('0.00');
                $('#saldo-favor-monto').text('0.00');

                                // Limpiar tablas
                $('#tabla-ventas-dia tbody').empty();
                $('#tabla-pagos-dia tbody').empty();
                $('#tabla-saldo-favor tbody').empty();
                $('#tabla-saldo-pendiente tbody').empty();

                // Resetear badge del saldo a favor
                $('#total-saldo-favor').text('S/. 0.00');

                // Resetear badge del saldo pendiente
                $('#total-saldo-pendiente').text('S/. 0.00');

                // Resetear el select de cliente
                $('#buscar_cliente_id').val('').trigger('change');

                // Eliminar mensaje de bienvenida existente y agregar uno nuevo
                $('#btnConsultarModal .modal-body .alert-info').remove();
                $('#btnConsultarModal .modal-body').prepend(`
                    <div class="row mb-4">
                        <div class="col-md-12">
                            <div class="alert alert-info text-center">
                                <i class="fas fa-info-circle"></i>
                                <strong>Bienvenido al Estado de Cuenta</strong><br>
                                Selecciona un cliente y haz clic en "Consultar" para ver su información financiera completa.
                            </div>
                        </div>
                    </div>
                `);
            }

            //Amortizar pago Metodo B
            $('#btnAddpagoMetodoB').click(function(e) {
                e.preventDefault();

                const formData = new FormData($('#agregarPagoGlobalForm')[0]);
                formData.append('tipo_venta', tipoVenta);

                // Captura todo el formulario
                const clienteId = $('#select_cliente_id').val();

                if (!clienteId) {
                    Swal.fire({
                        title: 'Información',
                        text: 'Por favor, selecciona un cliente.',
                        icon: 'error',
                        confirmButtonText: 'Ok'
                    })
                    return; // Detenemos la ejecución si no hay cliente seleccionado
                }

                Swal.fire({
                    title: '¿Confirmar registro?',
                    text: "¿Estás seguro de registrar este pago?",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Sí, registrar',
                    cancelButtonText: 'Cancelar'
                }).then((result) => {
                    if (result.isConfirmed) {
                         //  Hacemos la solicitud AJAX
                        $.ajax({
                            type: "POST",
                            url: "/pagos/pago-global/" + clienteId, // Pasamos el clienteId a la URL
                            data: formData, // Enviamos los datos del formulario
                            dataType: "json", // Esperamos un JSON como respuesta
                            processData: false, // Impide que jQuery procese los datos (necesario para FormData)
                            contentType: false, // Impide que jQuery configure el tipo de contenido
                            success: function(response) {
                                if (response.success) {
                                    Swal.fire({
                                        title: 'Información',
                                        text: 'Pago realizado con éxito.',
                                        icon: 'success',
                                        showConfirmButton: false,
                                        timer: 1000
                                    }).then(() => {
                                        // Aquí puedes realizar alguna acción como limpiar el formulario o cerrar el modal
                                        $('#addpagoGlobalModal').modal('hide');
                                        location.reload(); // Recarga la página después de mostrar la alerta
                                    });
                                } else {

                                    let errorMessages = '';
                                    $.each(response.errors, function(field, messages) {
                                        errorMessages += messages.join(', ') + '\n';
                                    });

                                    Swal.fire({
                                        title: 'Error de validación',
                                        text: errorMessages, // Aquí mostramos los errores concatenados
                                        icon: 'error',
                                        confirmButtonText: 'Ok'
                                    });
                                }
                            },
                            error: function(xhr, status, error) {
                                // Si ocurre algún error en la solicitud AJAX
                                Swal.fire({
                                    title: 'Información',
                                    text: xhr.responseJSON.message,
                                    icon: 'error',
                                    confirmButtonText: 'Ok'
                                });
                                console.error(xhr.responseText); // Puedes ver el error para depuración
                            }
                        });
                    }
                });

            });


            //check si desea cancelar el monto total completo
            $('#checkPagoCompleto').change(function() {

                console.log('checkPagoCompleto');

                if ($(this).is(':checked')) {
                    // Obtener el monto total a pagar
                    var montoTotal = parseFloat($('#monto_total').val()) || 0;
                    // Establecer el monto recibido igual al monto total a pagar
                    $('#monto').val(montoTotal);
                } else {
                    // Si no está marcado, limpiar los campos
                    $('#monto').val('0.00');
                }
            });

            //check si desea cancelar el monto total completo
            $('#checkPagoCompletoGlobal').change(function() {
                if ($(this).is(':checked')) {
                    // Obtener el monto total a pagar
                    var montoTotal = parseFloat($('#total_pendiente').val()) || 0;
                    // Establecer el monto recibido igual al monto total a pagar
                    $('#monto_global').val(montoTotal);
                } else {
                    // Si no está marcado, limpiar los campos
                    $('#monto_global').val('0.00');
                }
            });

            // Filtrar cuando se hace clic en el botón de búsqueda
            $('#filterButton').on('click', function() {
                const selectedDate = $('#searchDate').val();
                tableOrders.ajax.url(base_url + "?date=" + selectedDate);
                tableOrders.draw();
            });



            $('#addpagoGlobalModal').on('shown.bs.modal', function() {
                // Pequeño delay para asegurar que el modal esté completamente cargado
                setTimeout(function() {
                    // Inicializa Bootstrap Select en el select específico del modal
                    $('#select_cliente_id').selectpicker({
                        liveSearch: true,
                        size: 10,
                        noneSelectedText: 'Selecciona un cliente',
                        noneResultsText: 'No se encontraron resultados'
                    });
                    // Configurar el holder por defecto
                    $('#holder_id').prop('selectedIndex', 4);
                }, 100);
            });

            $('#addpagoGlobalModal').on('hidden.bs.modal', function() {
                // Destruir Bootstrap Select cuando el modal se cierra
                $('#select_cliente_id').selectpicker('destroy').val(null).trigger('change');
            });

            // Inicializar Bootstrap Select para el modal de consultar deuda
            $('#btnConsultarModal').on('shown.bs.modal', function() {
                // Pequeño delay para asegurar que el modal esté completamente cargado
                setTimeout(function() {
                    $('#buscar_cliente_id').selectpicker({
                        liveSearch: true,
                        size: 10,
                        noneSelectedText: 'Selecciona un cliente',
                        noneResultsText: 'No se encontraron resultados'
                    });

                    // Mostrar mensaje de bienvenida si no hay información
                    if ($('#btnConsultarModal .modal-body .alert-info').length === 0) {
                        $('#btnConsultarModal .modal-body').prepend(`
                            <div class="row mb-4">
                                <div class="col-md-12">
                                    <div class="alert alert-info text-center">
                                        <i class="fas fa-info-circle"></i>
                                        <strong>Bienvenido al Estado de Cuenta</strong><br>
                                        Selecciona un cliente y haz clic en "Consultar" para ver su información financiera completa.
                                    </div>
                                </div>
                            </div>
                        `);
                    }
                }, 100);
            });

            $('#btnConsultarModal').on('hidden.bs.modal', function() {
                // Destruir Bootstrap Select cuando el modal se cierra
                $('#buscar_cliente_id').selectpicker('destroy').val(null).trigger('change');

                // Resetear toda la información del modal
                resetearModalEstadoCuenta();
            });


            $('#metodo_pago_id').change(function(e) {
                e.preventDefault();
                $('#num_operacion').val('');
            });

            // Función para reinicializar Bootstrap Select si es necesario
            function reinicializarBootstrapSelect(selector) {
                try {
                    $(selector).selectpicker('destroy');
                } catch (e) {
                    // Si no está inicializado, no hacer nada
                }

                setTimeout(function() {
                    $(selector).selectpicker({
                        liveSearch: true,
                        size: 10,
                        noneSelectedText: 'Selecciona un cliente',
                        noneResultsText: 'No se encontraron resultados'
                    });
                }, 50);
            }

            // Agregar evento para reinicializar si hay problemas
            $(document).on('click', '#select_cliente_id', function() {
                if (!$(this).hasClass('bs-select-hidden')) {
                    reinicializarBootstrapSelect('#select_cliente_id');
                }
            });

            $(document).on('click', '#buscar_cliente_id', function() {
                if (!$(this).hasClass('bs-select-hidden')) {
                    reinicializarBootstrapSelect('#buscar_cliente_id');
                }
            });



        });
    </script>
@stop