@push('styles')
<style> 

    .contain-body button {
    margin-right: 1%; 
    }

    .border-right{ 
        border-right: 2px solid #ccc;
    }

    .label-totales{ 
        margin-top: 35px !important;
    }

      .icon-search{ 
        text-align: end !important;
    }

    .alto-badge{ 
        height: 25px;
        margin-top: 20px !important;
        text-align: center;
        margin-bottom: 15px !important;
        margin-left: 15px !important;
        margin-right: 15px !important;
    }

    input { 
        background: transparent !important;
        font-size: 1rem;
        font-weight: 400;
        line-height: 2.5;
        color: var(--bs-body-color);
        background-color: var(--bs-secondary-bg);
        background-clip: padding-box;
        border: var(--bs-border-width) solid var(--bs-border-color);
        /* appearance: none; */
        border-radius: var(--bs-border-radius);
        transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
        padding-left: 10px;
        
    }

    input:focus-visible { 
        border: none !important;
        outline: none;
    }

    span i { 
        font-size: 1.25rem;
        color: var(--bs-gray-600);
        margin-right: 5px;
    }

    /* h1 { 
        margin-top: 20px !important;
    } */

    .button{ 
        background-color: #1fa8e0;
        color: white
    }

    h5 {
        font-size: 1.5rem !important;
        color: #1fa8e0
        !important;
        padding-right: 0 !important;
        text-align: center;
    }

    th {
        font-size: 1.16rem !important;
        color: #1fa8e0
        !important;
        padding-right: 0 !important;
        text-align: start;
    }


    .text-brand{ 
        color: #52D1E5;
    }

    .modal-nuevo button {
        font-size: 18px;
        margin: 10px;
        padding-top: 5px !important;
        padding-bottom: 5px !important;
        padding-left: 70px;
        padding-right: 70px;
    }

    .modal-content {
        padding: 30px;
        /* width: 550px !important; */
        /* height: 330px; */
    }

    .leyenda-inferior{ 
       font-size: 9px !important;
       font-weight: 500 !important;
       color: #ed5555;
       padding-left: 3px;
       margin-top: 10px;
    }

    .contenido-modal{ 
        justify-content: center;
    }

    .modal-nuevo {
        display: flex;
        position: fixed;
        justify-content: center;
        align-items: center;
        z-index: 10;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgba(0, 0, 0, 0.8);
    }
    
    .elemento{ 
        margin-top: 10px;
    }

    .texto-principal{ 
        margin-bottom: 20px;
    }

 
    h5.modal-title{ 
        margin-top: 10px;
    }

    .texto-secundario{ 
        font-weight: 400 !important;   
    }

    td{ 
        font-weight: 400 !important;
    }

    p{ 
        margin-bottom: 0 !important;
    }

    .input-with-icon {
        position: relative; 
    }
    .input-with-icon input {
        padding-left: 30px; 
    }
    .input-icon {
        position: absolute;
        left: 20px; 
        top: 50%; 
        transform: translateY(-50%);
        width: 20px; 
        height: 20px;
        background-size: cover; 
        background-repeat: no-repeat; 
    }

    .botonera{ 
        margin-top: 25px;
    }

    .botonera-aprobaciones{ 
        margin-top: 25px;
        gap: 30px;
    }

    .hidden{ 
        display: none;
    }

    .show{ 
        display: flex !important;
    }
    .dt-search {
        position: relative !important; 
        margin-top: -30px;
        width: 800px;
    }

    div.dt-container div.dt-layout-row {
    display: flex;
    justify-content: flex-start; 
    align-items: flex-start; 
    width: 100%;
    margin: 0.75em 0;
    }

    div.dt-container div.dt-layout-row div.dt-layout-cell.dt-layout-end {
        justify-content: flex-start !important;
        margin-left: 0;
    }
    
    div.dt-container .dt-search input {
    border: 1px solid #aaa;
    border-radius: 10px;
    padding: 5px;
    background-color: transparent;
    color: inherit;
    margin-left: 3px;
    width: 90%;
    text-align: start;
    margin-top: 20px;
    }

    .dt-input{ 
        padding-left: 30px; 

    }

    .dt-column-title{
        text-align: center !important;
    }

    table.dataTable th.dt-type-numeric, table.dataTable th.dt-type-date, table.dataTable td.dt-type-numeric, table.dataTable td.dt-type-date {
    text-align: start;
    }

    label{
        margin-right: 20px;
    }

    td{
        text-align: center !important;
    }

    .bg-orange{
        background-color: #FF9F00;
    }

    .bg-purple{
        background-color: #7341A6;
    }

    .custom-select-dropdown {
    z-index: 1;
    position: absolute;
    width: 95%;
    background-color: #fff;
    border: 1px solid #ddd;
    top: 100%;
    margin-top: -1px;
    border-bottom-left-radius: 2.5px;
    border-bottom-right-radius: 2.5px;
    max-height: 300px;
    overflow-y: auto; 
    overflow-x: hidden;
    word-break: break-all;
    will-change: visibility;
    background-color: var(--bs-secondary-bg) !important;
    border-color: var(--bs-border-color-translucent) !important;
    box-shadow: var(--bs-box-shadow) !important;
    border: 1px solid #ddd;
    }

    .custom-select-option {
        padding: 10px;
        cursor: pointer;
    }

    .custom-select-option:hover {
        background-color: var(--bs-tertiary-bg) !important;
    }

    .custom-select-option.selected {
        background-color: #ddd;
    }

    .custom-placeholder{ 
        display: inline-block;
        padding: 4px 16px 4px 4px;
        width: 100%;
        font-size: 14px !important;
    }

    .custom-select-wrapper {
    display: block;
    width: 100%;
    font-size: .925rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--bs-body-color);
    background-color: var(--bs-secondary-bg);
    background-clip: padding-box;
    border: var(--bs-border-width) solid var(--bs-border-color);
    appearance: none;
    border-radius: var(--bs-border-radius);
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    }

    .custom-select {
        padding: .25rem 2.5rem .25rem .5rem;
        background-color: var(--bs-secondary-bg);
        vertical-align: middle;
        border-radius: var(--bs-border-radius);
        min-height: 38px;
        font-size: 14px;
        padding-bottom: .25rem;
        border-bottom-color: var(--bs-border-color) !important;    
        cursor: pointer;
        position: relative;
        overflow: hidden;
        font-size: 16px;
    }

    .custom-select-icon {
        position: absolute;
        top: 20px;
        right: 10px;
        transform: translateY(-50%);
        font-size: 18px;
        font-weight: 700;
    }

    .container-selector-modal{
        margin-top: 40px;
    }

    .label-select-modal{
        font-size: 16px;
        font-weight: 600;
    }

    .contenedor-toggle{
        margin-top: 20px;
    }

    th{
        text-align: center;
    }

    .check-solicitud{
        height: 20px;
        width: 20px;
        border-radius: 5px !important;
        border-color: #C2C2C2;
        padding-left: 0px;
        margin: 5px;
    }

    .icono-info{
        font-size: 50px;
    }

    .list-inline-item a {
        cursor: pointer;
    }

    .fecha-solicitud{
        font-size: 10px;
        color: gray;
    }

    .descripcion-solicitud{
        padding-right: 20px;
        font-size: 12px;
    }

    .monto-solicitud{
        font-weight: 600;
    }

    .lista-elementos{
        text-align: center;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .lista-lg{
        height: 220px; 
    }

    .lista-md{
        height: 180px; 
    }

    .lista-sm{
        height: 70px;
    }

    .text-align-end{
        text-align: end;
    }

    .text-align-start{
        text-align: start;
    }

    .text-align-center{
        text-align: center;
    }

    .hidden-desktop, .hidden-mobile {
        display: none;
    }

    .accordion{
      width: 700px;
    }

    @media (min-width: 768px) {
        .hidden-mobile {
            display: block;
        }

    }

    @media (max-width: 767px){
         .hidden-desktop {
            display: block;
        }

        .accordion{
            width: 500px;
        }

    }


    .fixed-buttons {
        position: fixed;
        bottom: 20px; 
        right: 20px;  
        display: flex;
        align-items: center; 
        gap: 10px; 
        z-index: 8; 
    }

    .fixed-buttons button {
        padding: 10px 20px;
        font-size: 16px;
        border-radius: 5px;
        cursor: pointer;
        width: 200px;
    }

    .btn-aprobaciones{
        margin-bottom: 10px;
        padding-bottom: 0;
        padding-top: 2px;
        padding-left: 5px;
        padding-right: 5px;
    }

    .button-excel{
        background-color: #409850;
    }

    table.dataTable thead th, table.dataTable thead td, table.dataTable tfoot th, table.dataTable tfoot td {
        text-align: center !important;
    }

    .aprobacion-master:hover{
        background-color: #1fa8e0 !important;
    }

    .check-doble{
        accent-color: red;
    }


    .accordion-button:not(.collapsed) {
        background-color: transparent !important;
    }

    .bg-orange {
        background-color: #fd7e14 !important;
    }

    .badge{
        cursor: pointer;
    }
</style>
@endpush

@section('title')
   Aprobaciones Pendientes
@endsection
@section('css')
<link rel="stylesheet" href="https://cdn.datatables.net/2.1.3/css/dataTables.dataTables.css" />
@endsection
@section('page-title')
   Aprobaciones Pendientes
@endsection
<div>
    <div class="contenido">
        @if(session()->has('success'))
            <div class="alert alert-success" style="margin-top: 15px;">
                {{ session()->get('success') }}
            </div>
        @endif

        @if(session()->has('error'))
            <div class="alert alert-danger" style="margin-top: 15px;">
                {{ session()->get('error') }}
            </div>
        @endif
        
        <div class="row align-items-center">
            <div class="col-md-6 mt-5 input-with-icon">
                <h1> Aprobaciones pendientes</h1>
            </div>

            <div class="col-md-6 mt-5">
                <div class="d-flex flex-wrap align-items-center justify-content-end gap-2">
                    <a id="export-excel" class="btn button button-excel">
                        <i class="mdi mdi-microsoft-excel me-1"></i> Descargar excel
                    </a>
                    <a href="{{url('/generar-solicitud')}}" class="btn button button-brand">
                        <i class="bx bx-plus me-1"></i> Añadir solicitud
                    </a>
                    <a href="{{url('/aprobaciones')}}" class="btn button button-brand">
                        <i class="bx bx-list-ul me-1"></i> Historial de aprobaciones
                    </a>
                </div>
            </div>
        </div>
    
        <div class="row mt-4">
            <div class="col-lg-12 col-md-12 col-sm-12">
                @if($perfil == 'Master' || $perfil == 'Contralor' || $perfil == 'Administrador' )
                    <div wire:ignore class="card hidden-mobile">
                        <div class="card-body">
                            <div class="mx-n4" data-simplebar>
                                <div class="table-responsive">
                                    @if($solicitudesPendientes->count() > 0)

                                        <table id="myTable" wire:ignore
                                            class="table table-striped table-centered align-middle table-nowrap mb-0 table-check">
                                            <thead>
                                                <tr>
                                                    <th style="padding-right: .75rem !important;">Fecha limite</th>
                                                    <th style="width: 190px; padding-right: .75rem !important;">Solicitante</th>
                                                    <th style="padding-right: .75rem !important;">Proveedor/Acreedor</th>
                                                    <th style="padding-right: .75rem !important;">Tipo</th>
                                                    <th style="padding-right: .75rem !important;">Fecha</th>
                                                    <th style="padding-right: .75rem !important;">Empresa</th>
                                                    <th style="padding-right: .75rem !important;">Sucursal</th>
                                                    <th style="padding-right: .75rem !important;">Monto</th>
                                                    <th style="padding-right: .75rem !important;">Descripción</th>
                                                    <th style="width: 30px; padding-right: .75rem !important;">
                                                       &nbsp;C&nbsp; | &nbsp;M&nbsp; | &nbsp;A&nbsp;
                                                    </th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                    @foreach($solicitudesPendientes as $pendiente)
                                                        <tr>
                                                            @php
                                                                $hoy = now()->startOfDay();
                                                                $fechaPago = \Carbon\Carbon::parse($pendiente->fechaPago)->startOfDay();
                                                                $diasDiferencia = $hoy->diffInDays($fechaPago, false);
                                                                
                                                                if ($diasDiferencia < 0) {
                                                                    $badgeClass = 'bg-danger';
                                                                }elseif($diasDiferencia == 0){
                                                                    $badgeClass = 'bg-secondary';
                                                                } elseif ($diasDiferencia <= 1) {
                                                                    $badgeClass = 'bg-danger'; 
                                                                } elseif ($diasDiferencia <= 5) {
                                                                    $badgeClass = 'bg-warning text-white'; 
                                                                } elseif ($diasDiferencia <= 15) {
                                                                    $badgeClass = 'bg-info text-white';
                                                                } else {
                                                                    $badgeClass = 'bg-success'; 
                                                                }
                                                            @endphp
                                                            <td>
                                                                <span class="badge {{ $badgeClass }}"
                                                                      data-bs-toggle="tooltip" 
                                                                    data-bs-placement="top" 
                                                                    title="Fecha de pago: {{ $pendiente->fecha_pago }}"
                                                                >
          
                                                                    {{ $diasDiferencia }}
                                                                </span>
                                                            </td>
                                                            <td style="width: 190px;">
                                                                <div class="d-flex align-items-center">
                                                                    <div class="flex-grow-1 ms-3">
                                                                        {{$pendiente->solicitante}}
                                                                    </div>
                                                                </div>
                                                            </td>
                                                            <td>{{$pendiente->destinatario}}</td>
                                                            <td class="fw-semibold"> {{$pendiente->categoria}} - {{$pendiente->catalogo}} </td>
                                                            <td>
                                                            {{ \Carbon\Carbon::parse($pendiente->created_at)->format('d/m/Y') }}
                                                            </td>
                                                            <td>
                                                                {{ $pendiente->empresa}}
                                                            </td>
                                                            <td>
                                                                {{$pendiente->sucursal}}
                                                            </td>
                                                            <td>
                                                                ${{number_format($pendiente->monto, 2, '.', ',') }}
                                                            </td>
                                                            <td>
                                                                {{$pendiente->descripcion}}
                                                            </td>
                                                            <td>
                                                                @if($perfil == 'Master')
                                                                    <input type="checkbox" disabled {{$pendiente->aprobacion_controlor == 1 ? 'checked' : ''}}  class="check-solicitud" value="{{$pendiente->id}}"

                                                                    @if($pendiente->aprobacion_master == 1 && $pendiente->aprobacion_controlor == 0)
                                                                        <button  wire:click="aprobarMaster({{$pendiente->id}})" class="btn button button-brand btn-aprobaciones"><i class="bx bx-user-check icon nav-icon"></i></button>
                                                                    @else
                                                                        <input type="checkbox" wire:model="aprobaciones" wire:change="verificarAprobaciones" class="check-solicitud" value="{{$pendiente->id}}">
                                                                    @endif
                                                                    <input type="checkbox" disabled {{$pendiente->aprobacion_admin == 1 ? 'checked' : ''}}  class="check-solicitud" value="{{$pendiente->id}}">
                                                                @elseif($perfil == 'Administrador')
                                                                        <input type="checkbox" disabled {{$pendiente->aprobacion_controlor == 1 ? 'checked' : ''}}  class="check-solicitud" value="{{$pendiente->id}}">
                                                                        <input type="checkbox" disabled {{$pendiente->aprobacion_master == 1 ? 'checked' : ''}}  class="check-solicitud" value="{{$pendiente->id}}">
                                                                    @if($pendiente->aprobacion_admin == 1)
                                                                        <input type="checkbox" checked disabled class="check-solicitud" value="{{$pendiente->id}}">
                                                                    @else
                                                                        <input type="checkbox" wire:model="aprobaciones" wire:change="verificarAprobaciones" class="check-solicitud" value="{{$pendiente->id}}">
                                                                    @endif
                                                                @elseif($perfil == 'Contralor')
                                                                    @if($pendiente->aprobacion_controlor == 1)
                                                                        <input type="checkbox" checked disabled class="check-solicitud" value="{{$pendiente->id}}">
                                                                    @else
                                                                        <input type="checkbox" wire:model="aprobaciones" wire:change="verificarAprobaciones" class="check-solicitud" value="{{$pendiente->id}}">
                                                                    @endif
                                                                        <input type="checkbox" disabled {{$pendiente->aprobacion_master == 1 ? 'checked' : ''}}  class="check-solicitud" value="{{$pendiente->id}}">
                                                                        <input type="checkbox" disabled {{$pendiente->aprobacion_admin == 1 ? 'checked' : ''}}  class="check-solicitud" value="{{$pendiente->id}}">
                                                                @endif

                                                            </td>
                                                        </tr>
                                                    @endforeach
                                            </tbody>
                                        </table>
                                    @else
                                        <h5>No hay solicitudes pendientes por aprobar</h5>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>

                    @foreach($solicitudesPendientes as $pendiente)
                        <div class="card hidden-desktop">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-8">
                                        <h5 class="mt-3 font-size-20" style="text-align: start;"> {{$pendiente->categoria}} - {{$pendiente->catalogo}}</h5>
                                    </div>
                                    <div class="col-4" style="margin-left: -10px; text-align: end;">
                                        <div class="mt-3 row">
                                            @if($perfil == 'Master')
                                                <p class="col-3 mt-1">C</p>
                                                <input type="checkbox" disabled {{$pendiente->aprobacion_controlor == 1 ? 'checked' : ''}}  class="check-solicitud" value="{{$pendiente->id}}">
                                                @if($pendiente->aprobacion_master == 1 && $pendiente->aprobacion_controlor == 0)
                                                    <p class="col-3 mt-1">M</p>                                                     
                                                    <input type="checkbox" checked wire:click="verificarAprobacionesMaster({{$pendiente->id}})" id="aprobacion-{{$pendiente->id}}" class="check-solicitud btn-aprobaciones check-doble" value="{{$pendiente->id}}">
                                                @else
                                                    <p class="col-3 mt-1">M</p> 
                                                    <input type="checkbox" wire:click="verificarAprobacionesMaster({{$pendiente->id}})" id="aprobacion-{{$pendiente->id}}" class="check-solicitud btn-aprobaciones" value="{{$pendiente->id}}">
                                                @endif
                                                <p class="col-3 mt-1">A</p> 
                                                <input type="checkbox" disabled {{$pendiente->aprobacion_admin == 1 ? 'checked' : ''}}  class="check-solicitud col-3" value="{{$pendiente->id}}">
                                            @elseif($perfil == 'Administrador')
                                                <p class="col-3 mt-1">C</p>
                                                <input type="checkbox" disabled {{$pendiente->aprobacion_controlor == 1 ? 'checked' : ''}}  class="check-solicitud" value="{{$pendiente->id}}">
                                                @if($pendiente->aprobacion_master == 1 && $pendiente->aprobacion_controlor == 0)
                                                    <p class="col-3 mt-1">M</p> 
                                                    <input type="checkbox" disabled {{$pendiente->aprobacion_master == 1 ? 'checked' : ''}}  class="check-solicitud col-3" value="{{$pendiente->id}}">
                                                @else
                                                    <p class="col-3 mt-1">M</p> 
                                                    <input type="checkbox" wire:model="aprobaciones" wire:change="verificarAprobaciones" class="check-solicitud col-3" value="{{$pendiente->id}}">
                                                @endif
                                                <p class="col-3 mt-1">A</p> 
                                                    <input type="checkbox" disabled {{$pendiente->aprobacion_master == 1 ? 'checked' : ''}}  class="check-solicitud col-3" value="{{$pendiente->id}}">
                                            @elseif($perfil == 'Contralor')
                                                @if($pendiente->aprobacion_controlor == 1)
                                                    <p class="col-3 mt-1">C</p> 
                                                    <input type="checkbox" checked disabled class="check-solicitud col-3" value="{{$pendiente->id}}">
                                                @else
                                                    <p class="col-3 mt-1">C</p> 
                                                    <input type="checkbox" wire:model="aprobaciones" wire:change="verificarAprobaciones" class="check-solicitud col-3" value="{{$pendiente->id}}">
                                                @endif
                                                <p class="col-3 mt-1">M</p> 
                                                <input type="checkbox" disabled {{$pendiente->aprobacion_master == 1 ? 'checked' : ''}}  class="check-solicitud col-3" value="{{$pendiente->id}}">
                                                <p class="col-3 mt-1">A</p> 
                                                <input type="checkbox" disabled {{$pendiente->aprobacion_master == 1 ? 'checked' : ''}}  class="check-solicitud col-3" value="{{$pendiente->id}}">
                                            @endif
                                        </div>
                                    </div>
                                </div>

                                <div>
                                    <p class="mt-2">{{$pendiente->solicitante}} en {{$pendiente->sucursal}} de empresa {{$pendiente->empresa}}</p>
                                    <p class="mt-2 monto-solicitud">${{number_format($pendiente->monto, 2, '.', ',') }}</p>
                                </div>
                            
                                <div class="d-flex justify-content-between mt-4">
                                    <p class="mb-0 descripcion-solicitud"> {{$pendiente->descripcion}}</p>
                                    <p class="mb-0 fecha-solicitud">{{ \Carbon\Carbon::parse($pendiente->created_at)->format('d/m/Y') }}</p>
                                </div>
                            </div>
                        </div>
                    @endforeach

                    @if($solicitudesPendientes->count() > 0 && $verificacionAprobaciones)
                        <div class="fixed-buttons">
                            <button class="btn btn-danger" wire:click="abrirModalRechazar">Rechazar</button>
                            <button  class="btn btn-primary button-brand" wire:click="{{$perfil == 'Master' ? 'abrirModalAprobarMaster' : 'abrirModalAprobar'  }} ">Aprobar</button>
                        </div>
                    @endif
                @endif
            </div>
        </div>
    </div>

    @if($modalAprobacion === true) 
        <div class="modal-nuevo" tabindex="-1" role="dialog">
            <div class="modal-dialog modal-dialog-centered ">
                <div class="card contenido-modal" >
                    <div class="modal-content" >
                        <!-- <div class="d-flex elemento justify-content-center">
                            <h4 class="texto-secundario text-brand" > <i class="bx bx-info-circle icono-info"></i></h4> 
                        </div> -->

                        <div class="d-flex justify-content-center texto-principal" style="text-align: center;">
                                <h5 class="modal-title" >¿Está seguro de que desea aprobar <br>
                                 las solicitudes seleccionadas? </h5>
                        </div> 
                                
                       <div class="lista-elementos {{count($elementosModal) >= 6 ? 'lista-lg' : ''}} {{count($elementosModal) < 6 && count($elementosModal) > 2 ? 'lista-md' : ''}} {{count($elementosModal) < 2 ? 'lista-sm' : ''}}">
                            @foreach($elementosModal as $elemento)
                                <div class="row mt-2">
                                    <p class="col-6 text-align-end text-brand">{{$elemento->categoria}} - {{$elemento->catalogo}} </p>
                                    <p class="col-6 text-align-start">{{$elemento->descripcion != null ? $elemento->descripcion : 'Sin descripción'}}</p>
                                </div>
                            @endforeach
                       </div>

                        <div class="d-flex flex-wrap justify-content-center botonera" >
                            <button class="btn btn-secondary" wire:click="{{$segundaAprobacion == true ? 'cerrarModalMaster' : 'abrirModalAprobar'}} ">Cancelar</button>
                            
                            <button class="btn button button-brand" wire:click="aprobarSolicitudes">Aprobar</button>
                        </div>

                        <div class="d-flex justify-content-center" style=" margin-bottom: 0 !important; text-align: center;">
                                <p class="leyenda-inferior">Una vez que cambien de estatus, no podrán ser modificadas<br> <br>
                                </p>
                        </div>    
                    </div>
                </div>
            </div>
        </div>
    @endif 

    @if($modalRechazar === true) 
        <div class="modal-nuevo" tabindex="-1" role="dialog">
            <div class="modal-dialog modal-dialog-centered ">
                <div class="card contenido-modal" >
                    <div class="modal-content" >

                        <div class="d-flex justify-content-center texto-principal" style="text-align: center;">
                                <h5 class="text-danger" >¿Está seguro de que desea rechazar <br>
                                 las solicitudes seleccionadas? </h5>
                        </div> 
                                
                        <div class="lista-elementos {{count($elementosModal) >= 6 ? 'lista-lg' : ''}} {{count($elementosModal) < 6 && count($elementosModal) > 2 ? 'lista-md' : ''}} {{count($elementosModal) < 2 ? 'lista-sm' : ''}}">
                            @foreach($elementosModal as $elemento)
                                <div class="row mt-2">
                                    <p class="col-6 text-align-end text-brand">{{$elemento->categoria}} - {{$elemento->catalogo}} </p>
                                    <p class="col-6 text-align-start">{{$elemento->descripcion != null ? $elemento->descripcion : 'Sin descripción'}}</p>
                                </div>
                            @endforeach
                       </div>

                        <div class="d-flex flex-wrap justify-content-center botonera" >
                            <button class="btn btn-secondary" wire:click="abrirModalRechazar">Cancelar</button>
                            <button class="btn btn-danger" wire:click="rechazarSolicitudes">Rechazar</button>
                        </div>

                        <div class="d-flex justify-content-center" style=" margin-bottom: 0 !important; text-align: center;">
                                <p class="leyenda-inferior">Una vez que cambien de estatus, no podrán ser modificadas <br> <br>
                                </p>
                        </div>    
                    </div>
                </div>
            </div>
        </div>
    @endif  

    @if($modalAprobacionMaster === true) 
        <div class="modal-nuevo" tabindex="-1" role="dialog">
            <div class="modal-dialog modal-dialog-centered ">
                <div class="card contenido-modal" >
                    <div class="modal-content" >
                        <!-- <div class="d-flex elemento justify-content-center">
                            <h4 class="texto-secundario text-brand" > <i class="bx bx-info-circle icono-info"></i></h4> 
                        </div> -->

                        <div class="d-flex justify-content-center texto-principal" style="text-align: center;">
                                <h5 class="modal-title" >¿Está seguro de que desea aprobar<br>
                                 las solicitudes seleccionadas? </h5>
                        </div> 
                        
                       <div class="lista-elementos lista-lg">
                            <div class="accordion" id="aprobsAccordion">
                                <!-- Aprobaciones simples -->

                                @if(count($elementosModal) > 0)
                                    <div class="accordion-item">
                                        <h2 class="accordion-header" id="headingOne">
                                            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                            <span class="badge rounded-pill bg-info" style="margin-right: 10px;">{{count($elementosModal)}}</span>  Aprobaciones simples
                                            </button>
                                        </h2>
                                        <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#aprobsAccordion">
                                            <div class="accordion-body p-0" style="max-height: {{ count($elementosModalDobles) > 0 ? '100px' : '150px' }}; overflow-y: auto;">
                                                <div class="container-fluid" style="width: calc(100% - 1.5rem);"> 
                                                    @foreach($elementosModal as $elemento)
                                                        <div class="row mt-2 mx-0">
                                                            <p class="col-4 text-end text-brand pe-2">{{$elemento->categoria}} - {{$elemento->catalogo}}</p>
                                                            <p class="col-8 text-start ps-2">{{$elemento->descripcion != null ? $elemento->descripcion : 'Sin descripción'}}</p>
                                                        </div>
                                                    @endforeach
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endif

                                @if(count($elementosModalDobles) > 0)
                                    <!-- Aprobaciones master -->
                                    <div class="accordion-item">
                                        <h2 class="accordion-header" id="headingTwo">
                                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                               <span class="badge rounded-pill bg-info" style="margin-right: 10px;">{{count($elementosModalDobles)}}</span>  Aprobaciones master
                                                <small class="ms-2" style="font-size: 12px;">(serán aprobadas directamente)</small>
                                            </button>
                                        </h2>
                                        <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#aprobsAccordion">
                                            <div class="accordion-body p-0" style="max-height: {{ count($elementosModal) > 0 ? '100px' : '150px' }} ; overflow-y: auto;">
                                                <div class="container-fluid" style="width: calc(100% - 1.5rem);">
                                                    @foreach($elementosModalDobles as $elementoDoble)
                                                        <div class="row mt-2 mx-0">
                                                            <p class="col-4 text-end text-brand pe-2">{{$elementoDoble->categoria}} - {{$elementoDoble->catalogo}}</p>
                                                            <p class="col-8 text-start ps-2">{{$elementoDoble->descripcion != null ? $elementoDoble->descripcion : 'Sin descripción'}}</p>
                                                        </div>
                                                    @endforeach
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endif
                            </div>
                       </div>

                        <div class="d-flex flex-wrap justify-content-center botonera" >
                            <button class="btn btn-secondary" wire:click="cerrarModalAprobacionMaster">Cancelar</button>
                            
                            <button class="btn button button-brand" wire:click="aprobarSolicitudesMaster">Aprobar</button>
                        </div>

                        <div class="d-flex justify-content-center" style=" margin-bottom: 0 !important; text-align: center;">
                                <p class="leyenda-inferior">Una vez que cambien de estatus, no podrán ser modificadas<br> <br>
                                </p>
                        </div>    
                    </div>
                </div>
            </div>
        </div>
    @endif 

</div>




@section('scripts')
<script
  src="https://code.jquery.com/jquery-3.7.1.min.js"
  integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
  crossorigin="anonymous"></script>

        <script src="https://cdn.datatables.net/2.1.3/js/dataTables.js"></script>
        <script src="https://cdn.datatables.net/buttons/2.2.3/js/dataTables.buttons.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
        <script src="https://cdn.datatables.net/buttons/2.2.3/js/buttons.html5.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
        <script>

let dataTableInstance;
const tabla = document.getElementById('myTable');

var aprobadosMultiples = [];

Livewire.on('iniciar-tabla', function(data, flag, editFlag) {
    var eliminar = data.flag;
    var master = data.master;
    var admin = data.admin;
    var contralor = data.contralor;
    var html;
    

    if (dataTableInstance) {
        dataTableInstance.clear().rows.add(data.data).draw();
    } else {
            dataTableInstance = new DataTable(tabla, {
            searching: true,
            lengthChange: false,
            data: data.data,
            
            pageLength: 15,
            columns: [
                {
                    data: null,
                    name: 'dias_restantes',
                    render: function(data, type, row) {
                        if (type === 'display' || type === 'filter') {
                            // Parsear fechas con moment.js
                            
                            var hoy = moment().startOf('day');
                            var fechaPago = moment(data.fecha_pago).startOf('day');
                            var diasDiferencia = fechaPago.diff(hoy, 'days');

                            if(diasDiferencia === 0) {
                                diasDiferencia = 1;
                            }
            
                            var badgeClass = '';
                            
                            if (diasDiferencia < 0) {
                                badgeClass = 'badge bg-danger';
                            } else if (diasDiferencia <= 1) {
                                badgeClass = 'badge bg-danger';
                            } else if (diasDiferencia <= 5) {
                                badgeClass = 'badge bg-orange text-white';
                            } else if (diasDiferencia <= 15) {
                                badgeClass = 'badge bg-warning text-white';
                            } else {
                                badgeClass = 'badge bg-success';
                            }
                            
                            // Formatear fecha para tooltip
                            var textoDias = data.fecha_pago != null ? diasDiferencia : 0;
                            var fechaTooltip = data.fecha_pago != null ? data.fecha_pago : 'N/A';
                            badgeClass =  data.fecha_pago != null ? badgeClass : 'badge bg-secondary';
                            
                            // Crear elemento span con tooltip
                            return `<span class="${badgeClass}" 
                                        data-bs-toggle="tooltip" 
                                        data-bs-placement="top" 
                                        title="Fecha de pago: ${fechaTooltip}">
                                    ${textoDias}
                                </span>`;
                        }
                        return '';
                    }
                },
                { data: 'solicitante', name: 'Solicitante' },
                { data: 'destinatario', name: 'Proveedor/Acreedor' },
                {
                    data: null, 
                    name: 'Tipo',
                    render: function (data) {
                        return data.categoria + '/' + data.catalogo;
                    }
                },               
                { 
                    data: 'created_at', 
                    name: 'Fecha',
                    render: function(data, type, row) {
                        if (type === 'display' || type === 'filter') {
                            return moment(data).format('YYYY-MM-DD'); 
                        }
                        return data;
                    }
                },                
                { data: 'empresa', name: 'Empresa' },
                { data: 'sucursal', name: 'Sucursal' },
                { data: 'monto', name: 'Monto',
                    render: function(data, type, row) {
                            return numeral(data).format('$0,0'); 
                        } 
                },
                { data: 'descripcion', name: 'Descripción' },       
                {
                    data: null,
                    name: 'Acciones',
                    render: function(data) {
                        // Suponiendo que la variable master está definida en JavaScript
                        if (master) {
                            let checkedControlor = data.aprobacion_controlor == 1 ? 'checked' : '';
                            let checkedMaster = data.aprobacion_master == 1 ? 'checked' : '';
                            let checkedAdmin = data.aprobacion_admin == 1 ? 'checked' : '';

                            // Si aprobacion_master es 1 y aprobacion_controlor es 0, mostrar botón de aprobar
                            if (data.aprobacion_master == 1 && data.aprobacion_controlor == 0) {
                                return `
                                    <input type="checkbox" disabled ${checkedControlor} class="check-solicitud" value="${data.id}">
                                    <input type="checkbox" checked wire:click="verificarAprobacionesMaster(${data.id})" id="aprobacion-${data.id}" class="check-solicitud btn-aprobaciones check-doble" value="${data.id}">
                                    <input type="checkbox" disabled ${checkedAdmin} class="check-solicitud" value="${data.id}">
                                `;
                            } else {
                                return `
                                    <input type="checkbox" disabled ${checkedControlor} class="check-solicitud" value="${data.id}">
                                    <input type="checkbox" wire:click="verificarAprobacionesMaster(${data.id})" id="aprobacion-${data.id}" class="check-solicitud btn-aprobaciones" value="${data.id}">
                                    <input type="checkbox" disabled ${checkedAdmin} class="check-solicitud" value="${data.id}">
                                `;
                            }
                        } else if(admin) {
                            let checkedControlor = data.aprobacion_controlor == 1 ? 'checked' : '';
                            let checkedMaster = data.aprobacion_master == 1 ? 'checked' : '';
                            let checkedAdmin = data.aprobacion_admin == 1 ? 'checked' : '';

                                if(data.aprobacion_admin == 1){
                                    return `
                                        <input type="checkbox" disabled ${checkedControlor} class="check-solicitud" value="${data.id}">
                                        <input type="checkbox" disabled ${checkedMaster} class="check-solicitud" value="${data.id}">
                                        <input type="checkbox"  ${checkedAdmin} class="check-solicitud" value="${data.id}">
                                    `;
                                }else{
                                    return `
                                        <input type="checkbox" disabled ${checkedControlor} class="check-solicitud" value="${data.id}">
                                        <input type="checkbox" disabled ${checkedMaster} class="check-solicitud" value="${data.id}">
                                        <input type="checkbox" ${checkedAdmin} class="check-solicitud" wire:model="aprobaciones"  wire:change="verificarAprobaciones" value="${data.id}">
                                    `;
                                }
                        } else if(contralor) {
                            let checkedControlor = data.aprobacion_controlor == 1 ? 'checked' : '';
                            let checkedMaster = data.aprobacion_master == 1 ? 'checked' : '';
                            let checkedAdmin = data.aprobacion_admin == 1 ? 'checked' : '';

                                if(data.aprobacion_controlor == 1){
                                    return `
                                        <input type="checkbox" ${checkedControlor} disabled class="check-solicitud" value="${data.id}">
                                        <input type="checkbox" disabled ${checkedMaster} class="check-solicitud" value="${data.id}">
                                        <input type="checkbox" disabled ${checkedAdmin} class="check-solicitud" value="${data.id}">
                                    `;
                                }else{
                                    return `
                                        <input type="checkbox" ${checkedControlor} wire:model="aprobaciones" wire:change="verificarAprobaciones" class="check-solicitud" value="${data.id}">
                                        <input type="checkbox" disabled ${checkedMaster} class="check-solicitud" value="${data.id}">
                                        <input type="checkbox" disabled ${checkedAdmin} class="check-solicitud" value="${data.id}">
                                    `;
                                }
                        }
                    },
                    orderable: false,
                }
            ],
            order: [[3, 'desc']],
            language: {
                "decimal": "",
                "emptyTable": "No hay información",
                "info": "Mostrando _START_ a _END_ de _TOTAL_ Registros",
                "infoEmpty": "Mostrando 0 a 0 de 0 Registros",
                "infoFiltered": "(Filtrado de _MAX_ total Registros)",
                "infoPostFix": "",
                "thousands": ",",
                "lengthMenu": "Mostrar _MENU_ Registros",
                "loadingRecords": "Cargando...",
                "processing": "Procesando...",
                "search": "Buscar:",
                "zeroRecords": "Sin resultados encontrados",
                "paginate": {
                    "first": "Primero",
                    "last": "Último",
                    "next": "Siguiente",
                    "previous": "Anterior"
                }
            },
            buttons: [
                {
                    extend: 'excelHtml5', 
                    text: 'Exportar a Excel', 
                    title: 'Aprobaciones pendientes', 
                    // customize: function (doc) {
                    //     console.log(doc);
                    //     var sheet = doc.xl.worksheets['sheet1.xml'];
                    //     console.log(sheet);
                    //     // Modificando el contenido de las celdas (por ejemplo, cambiando valores)
                    //     $(sheet).find('row').each(function () {
                    //         $(this).find('c').each(function () {
                    //             var cellValue = $(this).text();
                    //             console.log($(this));
                    //             console.log(cellValue);
                                
                    //             // Cambiar el valor de la celda
                    //             if (cellValue.includes('<span class="dt-column-title" role="button">')) {
                    //                 var divU = document.createElement('div');
                    //                 divU.innerHTML = cellValue;
                    //                 var linkTextU = divU.textContent || '';
                    //                 console.log('entra', divU, divU.innerHTML, linkTextU);
                    //                 delete cellValue;
                    //                 cellValue = linkTextU;
                    //             }

                    //             if (cellValue.includes('<li class="list-inline-item"')) {
                    //                 var divC = document.createElement('div');
                    //                 divC.innerHTML = cellValue;
                    //                 var linkTextC = divC.textContent || '';
                    //                 console.log('entra', divC, divC.innerHTML, linkTextC);
                    //                 delete cellValue;
                    //                 cellValue = linkTextC;
                    //             }

                                
                    //         });
                    //     });

                    // },
                    exportOptions: {
                        stripHtml: true
                    }
                }
            ]
        });
        function initTooltips() {
            // Destruye tooltips existentes primero
            $('[data-bs-toggle="tooltip"]').each(function() {
                var tooltip = bootstrap.Tooltip.getInstance(this);
                if (tooltip) {
                    tooltip.dispose();
                }
            });
            
            // Inicializa nuevos tooltips
            var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
            tooltipTriggerList.map(function(element) {
                return new bootstrap.Tooltip(element, {
                    trigger: 'hover'
                });
            });
        }

        // Inicializar al cargar
        initTooltips();

        // Reinicializar después de cada redibujado de la tabla
        dataTableInstance.on('draw.dt', function() {
            initTooltips();
        });
        
    }
});

            Livewire.on('actualizar-tabla', function(data){
                if (dataTableInstance) {
                    dataTableInstance.clear().rows.add(data.data).draw();
                }
            });

            $('#export-excel').on('click', function () {
                console.log('entra export');
                dataTableInstance.button('.buttons-excel').trigger();
            });

            function checkDefault(id) {
                const $checkbox = $(`#aprobacion-${id}`);
                $checkbox.prop('checked', false).removeClass('check-doble');
            }


            function checkNormal(id) {
                const $checkbox = $(`#aprobacion-${id}`);
                if (!$checkbox.prop('checked')) {
                    $checkbox.prop('checked', true);
                }
                $checkbox.removeClass('check-doble');
            }

            function checkDoble(id) {
                const $checkbox = $(`#aprobacion-${id}`);
                if (!$checkbox.prop('checked')) {
                    $checkbox.prop('checked', true);
                }
                if (!$checkbox.hasClass('check-doble')) {
                    $checkbox.addClass('check-doble');
                }
            }


            Livewire.on('cambiar-check', function(data){
                console.log(data);

                aprobacion = data.aprobacion;
                aprobaciones = data.aprobaciones;
                aprobacionesDobles = data.aprobacionesDobles;
                
                if (aprobacion) {
                    const aprobacionMaster = aprobacion.aprobacion_master;

                    if (aprobacionMaster === 0) {
                        if (aprobaciones.includes(aprobacion.id)) {
                            // Caso: aprobacion_master == 0 y está en aprobaciones
                            checkNormal(aprobacion.id);

                        } else if (aprobacionesDobles.includes(aprobacion.id)) {
                            // Caso: aprobacion_master == 0 y está en aprobacionesDobles
                            checkDoble(aprobacion.id);
                        } else {
                            // Caso: estado inicial aprobacion_master == 0
                            checkDefault(aprobacion.id);
                        }
                    } else if (aprobacionMaster === 1) {
                        if (aprobaciones.includes(aprobacion.id)) {
                            // Caso: aprobacion_master == 1 y está en aprobaciones
                        } else if (aprobacionesDobles.includes(aprobacion.id)) {
                            // Caso: aprobacion_master == 1 y está en aprobacionesDobles
                            checkDoble(aprobacion.id);
                        } else {
                            // Caso: aprobacion_master == 1 y no está en ninguno
                            checkDefault(aprobacion.id);
                        }
                    } else {
                        // aprobacion_master no es ni 0 ni 1
                    }
                } else {
                    // No se encontró la aprobación
                }

            });

       

            
        </script>



<script>
        var primerMenu = 0;

    Livewire.on('reload', function(){
        console.log('entra');
        location.reload();
    });
</script>

<script>
        var primerMenu = 0;

    Livewire.on('mostrar-barra', function(){
        const barra = $('.vertical-menu');
        console.log(barra);
        if (primerMenu == 0) {
             barra.removeClass('hidden');
             barra.addClass('show');
            primerMenu++;

        }else{
            if (barra.hasClass('hidden')) {
                barra.removeClass('hidden');
                barra.addClass('show');
            } else {
                barra.addClass('hidden');
                barra.removeClass('show');
            }
        }
    });
</script>

        <script>
            const body = document.body;

            document.addEventListener('readystatechange', function () {
                document.addEventListener('set-tema', function (data) {
                    body.setAttribute('data-bs-theme', data.detail.tema);
                    });

            });


            document.addEventListener('cambiar-tema', function (data) {
                    console.log(data.detail);
                    body.setAttribute('data-bs-theme', data.detail.tema);
                });
            
            document.addEventListener('cambiar-tamaño', function (data) {
                if (body.getAttribute('data-sidebar-size') =='sm') {
                    body.setAttribute('data-sidebar-size', '');
                    localStorage.setItem('size', '');

                } else {
                body.setAttribute('data-sidebar-size', 'sm');
                // localStorage.setItem('size', 'sm');

                }

            });


    

        </script>

<script>
            function logout() {
                const form = document.createElement('form');
                form.method = 'POST';
                form.action = '{{ route('logout') }}';
                form.style.display = 'none';

                const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
                const csrfInput = document.createElement('input');
                csrfInput.type = 'hidden';
                csrfInput.name = '_token';
                csrfInput.value = csrfToken;

                form.appendChild(csrfInput);

                document.body.appendChild(form);

                form.submit();
            }
        </script>
    @endsection