@extends('layouts.admin')
@section('usuarios', 'active bg-gradient-primary')


@section('css')
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.css">

@endsection
@section('contenido')

    <div class="row">
        <div class="col-12">
            <div class="card my-4">
                <div class="card-header p-0 position-relative mt-n4 mx-3 z-index-2">
                    <div class="bg-gradient-primary shadow-primary border-radius-lg pt-4 pb-3">
                        <h6 class="text-white text-capitalize ps-3">
                            <i class="fa fa-users"></i>
                            Mi Agenda
                        </h6>
                    </div>
                </div>
                <div class="card-body px-0 pb-2">
                    <div class="container">
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="input-group input-group-outline my-3 focus is-focused col-md-6">
                                    <label class="form-label">Fecha</label>
                                    <input type="date" class="form-control" value="2026-07-02" name="fecha"
                                        id="fecha">
                                </div>
                                <div class="input-group input-group-outline my-3 focus is-focused col-md-6">
                                    <button class="btn btn-success btn-lg btn-block col-12"
                                        onclick="actualizarRetiros($('#fecha').val())">
                                        <i class="fa-solid fa-arrows-rotate"></i>
                                        Actualizar
                                    </button>
                                </div>
                            </div>

                            @if (Session::has('mensaje'))
                                <p class="alert alert-success" align="center">
                                    <strong>{{ Session::get('mensaje') }}</strong>
                                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </p>
                            @endif

                            <div id="div_retiros" name="id_retiros" class="col-sm-10 col-sm-10 offset-sm-1">
                                @foreach ($agendamiento as $agendado)
                                    @php($color = 'secondary')
                                    @if ($agendado->servicio->estado_actual == 'Recuperado')
                                        @php($color = 'success')
                                    @endif
                                    @if ($agendado->servicio->estado_actual == 'Irrecuperable')
                                        @php($color = 'danger')
                                    @endif

                                    <div class="alert alert-{{ $color }} text-white text-xs row">
                                        <div class="col-9">
                                            <i class="fa fa-location-dot"></i> {{ $agendado->servicio->direccion }} -
                                            {{ $agendado->servicio->sector }}<br>
                                            <i class="fa fa-clock"></i> {{ $agendado->fecha }}<br>
                                            <i class="fa fa-user"></i>
                                            {{ $agendado->servicio->cliente->nombre }}<br><br>
                                            <i class="fa-regular fa-note-sticky"></i>
                                            {{ $agendado->servicio->observaciones }}<br><br>

                                            <i class="fa-solid fa-desktop"></i>
                                            @if (Str::contains($agendado->servicio->servicio, 'TV'))
                                                @if ($agendado->servicio->sin_baja_emitida !== null && Str::contains($agendado->servicio->sin_baja_emitida, 'D00'))
                                                    {{ $agendado->servicio->peticion->decodificadores }}
                                                @else
                                                    {{ $agendado->servicio->peticion->decodificadores }}
                                                    {{ $agendado->servicio->peticion->modems }}
                                                    {{ $agendado->servicio->peticion->otros }}
                                                @endif
                                            @else
                                                {{ $agendado->servicio->peticion->decodificadores }}
                                                {{ $agendado->servicio->peticion->modems }}
                                                {{ $agendado->servicio->peticion->otros }}
                                            @endif
                                        </div>
                                        <div class="col-3 text-center">
                                            <div class="col-12 text-right" style="text-align:right">
                                                <span
                                                    class="badge badge-sm bg-gradient-{{ $color }}">{{ $agendado->servicio->estado_actual }}</span><br><br>
                                            </div>
                                            @if($agendado->servicio->estado_actual=="Agendado"||$agendado->servicio->estado_actual=="Pendiente")
                                            <button style="display: disabled" class="btn btn-sm btn-light"
                                                onclick="abrirModalRetiro({{ $agendado->id }})">RETIRAR
                                            </button>
                                            @else
                                            <button style="display: disabled" class="btn btn-sm btn-light"
                                                onclick="abrirModalDetalle({{ $agendado->id }})">Detalle
                                            </button>
                                            @endif
                                        </div>
                                    </div>
                                @endforeach

                            </div>
                        </div>

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


        <!--Modal Retirar-->
        <div class="modal fade" id="modalRetiro" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
            aria-hidden="true">
            <div class="modal-dialog" role="document" style="max-width: none">
                <div class="modal-content col-sm-12">
                    <form id="frmActualizar" action="app" method="POST">

                        <div class="modal-header col-sm-12">
                            <h5 class="modal-title" id="exampleModalLabel">
                                Retiro
                                <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </h5>
                        </div>
                        <div class=" modal-body col-sm-12">
                            @csrf
                            @method('put')

                            <input id="id_agendamiento" name="id_agendamiento" hidden="hidden">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th>Tipo</th>
                                        <th>Modelo</th>
                                        <th>Q</th>
                                        <th><i class="fa-solid fa-circle-plus" style="color:green" id="agregar_select"
                                                name="agregar_select"></i></th>
                                    </tr>
                                </thead>
                                <tbody id="contenedor_select" name="contenedor_select">
                                    <tr id="tr_1" name="tr_1">
                                        <td>
                                            <select onchange="actualizarSelectModelo(this)" id="tipo_equipos_1"
                                                name="tipo_equipos_1" class="form-select form-select-sm">
                                                @foreach ($tipo_equipos as $tipo_equipo)
                                                    <option value="{{ $tipo_equipo->id }}">{{ $tipo_equipo->nombre }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        <td>
                                            <select id="modelos_1" name="modelos_1" class="form-select form-select-sm">
                                                @foreach ($tipo_equipos->first()->modelos as $modelo)
                                                    <option value="{{ $modelo->id }}">{{ $modelo->nombre }}</option>
                                                @endforeach
                                            </select>
                                        </td>
                                        <td>
                                            <select id="cantidad_1" name="cantidad_1" class="form-select form-select-sm">
                                                @for ($i = 1; $i < 30; $i++)
                                                    <option>{{ $i }}</option>
                                                @endfor
                                            </select>
                                        </td>
                                        <td style="align:center">
                                            <i onclick="eliminarFila('tr_1')"
                                                style="color:red; cursor: pointer;"class="fa-solid fa-circle-xmark"></i>

                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                            <div class="input-group input-group-outline focus is-focused">
                                <label class="form-label">Observaciones</label>
                                <textarea id="observaciones" name="observaciones" type="text" class="form-control "></textarea>

                            </div>
                        </div>
                        <div class="modal-footer ">
                            <select id="estado" name="estado" class="form-select form-select-sm">
                                <option value="1">Pendiente</option>
                                <option value="2">Irrecuperable</option>
                                <option value="3">Recuperado</option>

                            </select>
                            <button type="button" class="btn btn-secondary btn-lg btn-block col-12"
                                data-bs-dismiss="modal">Cerrar</button>
                            <button type="submit" form="frmActualizar"
                                class="btn btn-success btn-lg btn-block col-12">Aceptar</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>



        <!--Modal Recuperado--->
        <div class="modal fade" id="modalDetalle" tabindex="-1" role="dialog" aria-labelledby="modalDetalle"
            aria-hidden="true">
            <div class="modal-dialog" role="document" style="max-width: none">
                <div class="modal-content col-sm-12">
                    <form id="frmActualizar" action="app" method="POST">

                        <div class="modal-header col-sm-12">
                            <h5 class="modal-title" id="modalDetalle">
                                Retiro
                                <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </h5>
                        </div>
                        <div class=" modal-body col-sm-12">
                            @csrf
                            @method('put')

                            <input id="id_agendamiento" name="id_agendamiento" hidden="hidden">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th>Tipo</th>
                                        <th>Modelo</th>
                                        <th>Q</th>
                                    </tr>
                                </thead>
                                <tbody id="tr_2" name="tr_2" id="contenedor_select" name="contenedor_select">

                                </tbody>
                            </table>
                            <div class="input-group input-group-outline focus is-focused">
                                <label class="form-label">Observaciones</label>
                                <textarea disabled id="observaciones_detalle" name="observaciones_detalle" type="text" class="form-control "></textarea>

                            </div>
                        </div>
                        <div class="modal-footer ">

                            <button type="button" class="btn btn-secondary btn-lg btn-block col-12"
                                data-bs-dismiss="modal">Cerrar</button>

                        </div>
                    </form>
                </div>
            </div>
        </div>
    @endsection

    @section('js')

        <script>
            $(document).ready(function() {
                var correlativo = 2; // Inicializar correlativo

                $('#agregar_select').on('click', function() {
                    // Generar nombres únicos para los nuevos selects
                    var nombreSelect1 = 'tipo_equipo_' + correlativo;
                    var nombreSelect2 = 'modelos_' + correlativo;
                    var nombreSelect3 = 'cantidad_' + correlativo;
                    var tr = 'tr_' + correlativo;

                    // Crear los nuevos elementos select
                    var nuevoSelect1 = $('<select>').attr('name', nombreSelect1);
                    var nuevoSelect2 = $('<select>').attr('name', nombreSelect2);
                    var nuevoSelect3 = $('<select>').attr('name', nombreSelect3);

                    var html =
                        `
                        <tr id="` + tr + `" name="` + tr + `" >
                            <td>
                                <select onchange="actualizarSelectModelo(this)" id="` + nombreSelect1 + `"
                                    name="` + nombreSelect1 + `" class="form-select form-select-sm">
                                    @foreach ($tipo_equipos as $tipo_equipo)
                                        <option value="{{ $tipo_equipo->id }}">{{ $tipo_equipo->nombre }}
                                        </option>
                                    @endforeach
                            </td>
                            <td>
                                </select>
                                <select id="` + nombreSelect2 + `" name="` + nombreSelect2 + `" class="form-select form-select-sm">
                                    @foreach ($tipo_equipos->first()->modelos as $modelo)
                                        <option value="{{ $modelo->id }}">{{ $modelo->nombre }}</option>
                                    @endforeach
                                </select>
                            </td>
                            <td>
                                <select id="` + nombreSelect3 + `" name="` + nombreSelect3 + `" class="form-select form-select-sm">
                                    @for ($i = 1; $i < 30; $i++)
                                    <option>{{ $i }}</option>
                                    @endfor
                                </select>
                            </td>
                            <td>
                                <i onclick="eliminarFila('` + tr + `')" style="color:red; cursor: pointer;"class="fa-solid fa-circle-xmark"></i>
                            </td>
                        </tr>
                        `;

                    // Agregar los nuevos selects al contenedor
                    $('#contenedor_select').append(html);

                    correlativo++; // Incrementar el correlativo para la próxima vez
                });
            });

            function abrirModalRetiro(id) {
                $('#id_agendamiento').val(id);
                $("#modalRetiro").modal('show');
            }

            function abrirModalDetalle(id) {
                $("#modalDetalle").modal('show');
                $("#tr_2").empty();
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });
                return $.ajax({
                    type: "get",
                    dataType: "json",

                    url: "../obtener_detalle_finalizado_" + id,
                    success: function(resultado) {
                        console.log(resultado);
                        $("#observaciones_detalle").html(resultado.agendamiento['observaciones']);

                        resultado.agendamiento.servicio.equipos.forEach(equipo =>{
                            $("#tr_2").append(`
                            <tr>
                                <td>${equipo.modelo.tipo_equipo.nombre}</td>
                                <td>${equipo.modelo.nombre}</td>
                                <td>${equipo['cantidad']}</td>
                                </tr>

                            `);
                        }
                    )
                    }}
                );
                $('#id_agendamiento').val(id);
            }


            function actualizarSelectModelo(elemento) {
                var nombre = elemento.id;
                var numero = nombre.split('_')[2];
                var indiceSeleccionado = elemento.selectedIndex;
                var opcionSeleccionada = elemento.options[indiceSeleccionado];
                var valorSeleccionado = opcionSeleccionada.value;
                var select = "modelos_" + numero;
                console.log(select);
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });
                return $.ajax({
                    type: "get",
                    dataType: "json",

                    url: "../obtener_modelos_" + valorSeleccionado,
                    success: function(resultado) {
                        $("#" + select).empty();
                        $("#" + select).append(
                            `<option value="0">seleccione..</option>`
                        )
                        resultado.forEach(modelo => {
                            console.log(modelo);
                            $("#" + select).append(
                                `<option value="` + modelo.id + `">` + modelo.nombre + `</option>`
                            )
                        });
                        $("#" + select).prop('selectedIndex', 0);
                    },
                    error: function() {}
                });
            }

            function actualizarRetiros(fecha) {
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });
                return $.ajax({
                    type: "get",
                    dataType: "json",

                    url: "../app_" + fecha,
                    success: function(resultado) {

                        $("#div_retiros").empty();

                        console.log(resultado);
                        resultado.agendamiento.forEach(agendamiento => {
                            color_estado = "secondary";
                            btn_accion=`<button class="btn btn-sm btn-light" onclick="abrirModalRetiro(${agendamiento['id']})">RETIRAR</button>`;

                            if (agendamiento.servicio.estado_actual == "Irrecuperable") {
                                color_estado = "danger";
                                btn_accion=`<button class="btn btn-sm btn-light" onclick="abrirModalDetalle(${agendamiento['id']})">DETALLE</button>`;
                            }
                            if (agendamiento.servicio.estado_actual == "Recuperado") {
                                color_estado = "success";
                                btn_accion=`<button class="btn btn-sm btn-light" onclick="abrirModalDetalle(${agendamiento['id']})">DETALLE</button>`;
                            }
                            let contenidoPeticion = "";
                            if (agendamiento.servicio['servicio'].includes('TV') && agendamiento.servicio[
                                    'sin_baja_emitida'] !== null && agendamiento.servicio[
                                    'sin_baja_emitida'].includes(
                                    'D00')) {
                                contenidoPeticion = agendamiento.servicio.peticion['decodificadores'];
                            } else {
                                contenidoPeticion = (agendamiento.servicio.peticion['decodificadores'] !==
                                        null ?
                                        agendamiento.servicio.peticion['decodificadores'] + "<br>" : "") +
                                    (agendamiento.servicio.peticion['modems'] !== null ? agendamiento
                                        .servicio.peticion[
                                            'modems'] + "<br>" : "") +
                                    (agendamiento.servicio.peticion['otros'] !== null ? agendamiento
                                        .servicio.peticion[
                                            'otros'] : "");
                            }
                            console.log(agendamiento.servicio);
                            $("#div_retiros").append(`
                            <div id="div_retiros" name="id_retiros" class="col-sm-10 col-sm-10 offset-sm-1">
                                <div class="alert alert-${color_estado} text-white text-xs row">
                                    <div class="col-9">
                                        <i class="fa fa-location-dot" aria-hidden="true"></i>${agendamiento.servicio['direccion']} - ${agendamiento.servicio['sector']}<br>
                                        <i class="fa fa-clock" aria-hidden="true"></i> ${agendamiento['fecha']}<br>
                                        <i class="fa fa-user" aria-hidden="true"></i>${agendamiento.servicio.cliente['nombre']}<br><br>
                                        <i class="fa-regular fa-note-sticky" aria-hidden="true"></i>
                                        ${agendamiento.servicio['observaciones']}<br><br>
                                        <i class="fa-solid fa-desktop" aria-hidden="true"></i>
                                        ${contenidoPeticion}
                                    </div>
                                    <div class="col-3 text-center">
                                        <div class="col-12 text-right" style="text-align:right">
                                            <span class="badge badge-sm bg-gradient-${color_estado}">${agendamiento.servicio.estado_actual}</span><br><br>
                                        </div>
                                        ${btn_accion}
                                    </div>
                                </div>
                            </div>
                            `)
                        });
                    },
                    error: function() {

                    }

                });
            }

            function eliminarFila(trId) {
                // Buscar el tr con el ID proporcionado
                var tr = document.getElementById(trId);
                // Verificar si se encontró el tr
                if (tr) {
                    // Eliminar el tr
                    tr.parentNode.removeChild(tr);
                }
            }
        </script>



    @endsection