@extends('layouts.app')

@section('styles')
<style>
    #loading-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.8);
        z-index: 9999;
        justify-content: center;
        align-items: center;
    }
    
    .loading-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        background: rgba(255, 255, 255, 0.1);
        padding: 40px 60px;
        border-radius: 15px;
        backdrop-filter: blur(10px);
    }
    
    .custom-spinner {
        width: 4rem;
        height: 4rem;
        border: 5px solid rgba(255, 255, 255, 0.3);
        border-top-color: #fff;
        border-radius: 50%;
        animation: spin 1s linear infinite;
        margin: 0 auto;
    }
    
    @keyframes spin {
        to { transform: rotate(360deg); }
    }
    
    #loading-text {
        color: white;
        font-size: 1.2rem;
        font-weight: 500;
        margin-top: 20px;
        animation: pulse 1.5s ease-in-out infinite;
        text-align: center;
    }
    
    @keyframes pulse {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.5; }
    }
</style>
@endsection

@section('content')
    {{-- Loading Overlay --}}
    <div id="loading-overlay">
        <div class="loading-content">
            <div class="custom-spinner"></div>
            <h4 id="loading-text">Generando documento...</h4>
        </div>
    </div>

    <div class="container">
        @if (Auth::user()->rol != 3)
            <div class="row justify-content-center">

                <div class="col-lg-6 col-md-12 col-sm-12">
                    <div class="card my-3">
                        <div class="card-header bg-light lead">
                            <p class="card-title lead">
                                <i class="fa fa-list"></i>
                                &nbsp; Órdenes Pendientes
                            </p>
                        </div>
                        <div class="card-body">
                            <div class="" id=""> {{-- aqui fue eliminado el ID = LPTable --}}
                                <table class="table table-bordered table-striped resp" style="max-height: 40rem; overflow-y:auto">
                                    <thead>
                                        <tr>
                                            <th><center>OT N°</center></th>
                                            <th><center>Nombre Cliente</center></th>
                                            {{-- <th><center>Cant. Vehiculos</center></th> --}}
                                            <th><center>Comuna</center></th>
                                            <th><center>Estado OT</center></th>
                                            <th><center>Acciones</center></th>

                                        </tr>
                                    </thead>
                                    <tbody  >
                                        @foreach ($pendientes as $pend)
                                            <tr>
                                                <td><span style=" position:relative; top:8px; text-transform: capitalize;" > {{$pend->id_ot}}</span></td>
                                                <td> <span style=" position:relative; top:8px; text-transform: capitalize;" > {{$pend->nombre}}</span></td>
                                                {{-- <td> <span style=" position:relative; top:8px; text-transform: capitalize;" >{{$pend->cant_vehi}}</span></td> --}}
                                                <td> <span style=" position:relative; top:8px; text-transform: capitalize;" > {{$pend->comuna_instalacion}}</span></td>
                                                <td class="text-primary"><span style=" position:relative; top:8px; text-transform: capitalize;" > {{$pend->estado_ot}}</span></td>
                                                <td style="padding-bottom:20px;" > <center>
                                                    <span style=" position:relative; top:8px; text-transform: capitalize;" >
                                                        <a href="{{route('realizarot',$pend->idotNZ)}}" title="Completar OT"><i class="fa fa-edit"></i></a>
                                                    </span></center>
                                                </td>
                                            </tr>
                                        @endforeach

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

                    <div class="card my-3">
                        <div class="card-header bg-light lead">
                            <p class="card-title lead">
                                <i class="fa fa-list"></i>
                                &nbsp; Instalaciones sin OT
                            </p>
                        </div>
                        <div class="card-body">
                            <div class="" id=""> {{-- aqui fue eliminado el ID = LPTable --}}
                                <table class="table table-bordered table-striped resp" style="max-height: 40rem; overflow-y:auto">
                                    <thead>
                                        <tr>
                                            <th><center>Instalación N°</center></th>
                                            <th><center>Fecha</center></th>
                                            <th><center>Nombre Cliente</center></th>
                                            <th><center>Lugar Instalación</center></th>
                                            <th><center>Acciones</center></th>
                                        </tr>
                                    </thead>
                                    <tbody  >
                                        @foreach ($diasSinOT as $dia)
                                            <tr>
                                                <td><span style=" position:relative; top:8px; text-transform: capitalize;" > {{ $dia->id_orden }}</span></td>
                                                <td><span style=" position:relative; top:8px;" > {{ \Carbon\Carbon::parse($dia->fecha)->format('d-m-Y') }}</span></td>
                                                <td> <span style=" position:relative; top:8px; text-transform: capitalize;" > {{ $dia->nombre }}</span></td>
                                                <td> <span style=" position:relative; top:8px; text-transform: capitalize;" > {{ $dia->lugar_instalacion_vehiculo }}</span></td>
                                                <td class="d-flex justify-content-evenly align-items-center" style="padding-bottom:20px;" >
                                                    <center>
                                                        <span style=" position:relative; top:8px; text-transform: capitalize;" >
                                                            <a href="#" onclick="descargarDocumento('{{ route('diaSinOT.pdf', [$dia->id_orden, $dia->fecha]) }}', 'InstalacionSinOT_{{ $dia->id_orden }}_{{ $dia->fecha }}.pdf', 'Generando PDF...'); return false;" title="Descargar PDF">
                                                                <i class="fa fa-file-pdf" style="color: #d63110;"></i>
                                                            </a>
                                                        </span>
                                                        <span style=" position:relative; top:8px; text-transform: capitalize;" >
                                                            <a href="#" onclick="descargarDocumento('{{ route('export', [$dia->id_orden, $dia->fecha]) }}', 'ExcelSinOT_{{ $dia->id_orden }}_{{ $dia->fecha }}.xlsx', 'Generando Excel...'); return false;" title="Descargar Excel">
                                                                <i class="fa fa-file-excel" style="color: #52a000;"></i>
                                                            </a>
                                                        </span>
                                                    </center>
                                                </td>
                                            </tr>
                                        @endforeach

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

                <div class="col-lg-6 col-md-12 col-sm-12">
                    <div class="card my-3">
                        <div class="card-header"><p class="card-title lead"><i class="fa fa-list"></i>&nbsp; Ordenes Completadas o en otros estados</p></div>
                        <div class="card-body">
                            <div class="table" id=""> {{-- aqui fue eliminado el ID = LPTable --}}
                                <table class="table table-bordered table-striped resp" style="max-height: 40rem; overflow-y:auto">
                                    <thead>
                                        <tr>
                                            <th><center>OT N°</center></th>
                                            <th><center>Nombre Cliente</center></th>
                                            {{-- <th><center>Cant. Vehiculos</center></th> --}}
                                            <th><center>Comuna</center></th>
                                            <th><center>Estado OT</center></th>
                                            <th><center>Acciones</center></th>

                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($nope as $Npend)
                                            <tr>
                                                <td><span style="position:relative; top:8px;" > {{$Npend->id_ot}}</span></td>
                                                <td><span style="position:relative; top:8px; text-transform: capitalize;" > {{$Npend->nombre}}</span></td>
                                                {{-- <td><span style="position:relative; top:8px;" >{{$Npend->cant_vehi}}</span></td> --}}
                                                <td><span style="position:relative; top:8px; text-transform: capitalize;" > {{$Npend->comuna_instalacion}}</span></td>
                                                @if ($Npend->estado_ot == "cancelada")
                                                    <td class="text-danger"><span style="position:relative; top:8px; text-transform: capitalize;"> {{$Npend->estado_ot}}</span> </td>
                                                @elseif($Npend->estado_ot == "terminada")
                                                    <td class="text-success"><span style="position:relative; top:8px; text-transform: capitalize;"> {{$Npend->estado_ot}}</span></td>
                                                @else
                                                    <td class="text-warning"><span style="position:relative; top:8px; text-transform: capitalize;"> {{$Npend->estado_ot}}</span></td>
                                                @endif
                                                <td style="padding-bottom:20px;"><center>
                                                    <span style="position:relative; top:8px;"  >
                                                        <a href="{{route('verot',$Npend->idotNZ)}}" title="Ver OT"><i class="fa fa-eye"></i></a>
                                                        {{-- <a href="{{route('mailot',$Npend->idotNZ)}}" title="enviar OT por Mail"><i class="fa fa-envelope"></i></a> --}}
                                                        <a href="#" onclick="descargarDocumento('{{route('pdfot',$Npend->idotNZ)}}', 'OT_{{$Npend->id_ot}}.pdf', 'Generando PDF...'); return false;" title="Descargar PDF OT"><i class="fa fa-file-pdf"></i></a>
                                                    </span></center>
                                                </td>

                                            </tr>
                                        @endforeach

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

            </div>
        @else
            <div class="row justify-content-center">

                <div class="col-md-7 col-sm-12">
                    <div class="card mt-5">
                        <div class="card-header bg-light lead"><p class="card-title lead"><i class="fa fa-list"></i>&nbsp; Ordenes Pendientes</p></div>
                        <div class="card-body">
                            <div class="" id=""> {{-- aqui fue eliminado el ID = LPTable --}}
                                <table class="table table-bordered table-striped resp">
                                    <thead>
                                        <tr>
                                            <th><center>OT N°</center></th>
                                            <th><center>Nombre Cliente</center></th>
                                            {{-- <th><center>Cant. Vehiculos</center></th> --}}
                                            <th><center>Comuna</center></th>
                                            <th><center>Estado OT</center></th>
                                            <th><center>Acciones</center></th>

                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($pendientes as $pend)
                                            <tr>
                                                <td><center>{{$pend->id_ot}}</center></td>
                                                <td><center>{{$pend->nombre}}</center></td>
                                                {{-- <td><center>{{$pend->cant_vehi}}</center></td> --}}
                                                <td><center>{{$pend->comuna_instalacion}}</center></td>
                                                <td class="text-primary"><center>{{$pend->estado_ot}}</center></td>
                                                <td>
                                                    <center>
                                                        <a href="{{route('realizarot',$pend->idotNZ)}}" title="Completar OT"><i class="fa fa-edit"></i></a>
                                                    </center>
                                                </td>
                                            </tr>
                                        @endforeach

                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endif
    </div>

@endsection

{{-- page scripts --}}
@section('scripts')

<script src="{{asset('js/datatable/datatable.js')}}"></script>

<script>
// Función para mostrar loading
function mostrarLoading(texto) {
    var loadingOverlay = document.getElementById('loading-overlay');
    var loadingText = document.getElementById('loading-text');
    
    if (loadingOverlay && loadingText) {
        loadingText.textContent = texto;
        loadingOverlay.style.display = 'flex';
    }
}

// Función para ocultar loading
function ocultarLoading() {
    var loadingOverlay = document.getElementById('loading-overlay');
    if (loadingOverlay) {
        loadingOverlay.style.display = 'none';
    }
}

// Función para descargar documentos con control del spinner
function descargarDocumento(url, nombreArchivo, textoLoading) {
    // Mostrar spinner
    mostrarLoading(textoLoading);
    
    // Realizar petición AJAX
    fetch(url, {
        method: 'GET',
        headers: {
            'X-Requested-With': 'XMLHttpRequest',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        }
    })
    .then(response => {
        if (!response.ok) {
            throw new Error('Error al generar el documento');
        }
        return response.blob();
    })
    .then(blob => {
        // Crear URL temporal del blob
        const url = window.URL.createObjectURL(blob);
        
        // Crear elemento temporal para la descarga
        const a = document.createElement('a');
        a.style.display = 'none';
        a.href = url;
        a.download = nombreArchivo;
        
        // Agregar al DOM, hacer clic y remover
        document.body.appendChild(a);
        a.click();
        
        // Limpiar
        window.URL.revokeObjectURL(url);
        document.body.removeChild(a);
        
        // Ocultar spinner después de iniciar la descarga
        ocultarLoading();
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Hubo un error al generar el documento. Por favor, intenta nuevamente.');
        ocultarLoading();
    });
}
</script>
@endsection