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

@section('css')
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.css">
    <style>
        tr.group,
        tr.group:hover {
            background-color: #ddd !important;
        }

        #table_id td {
            font-size: 11px;
        }
    </style>
@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">APP</h6>
                    </div>
                </div>
                <div class="card-body px-0 pb-2">
                    <div class="container">
                        <div class="row">
                            <table id="table_id" class="display compact config-table">
                                <thead>
                                    <tr>
                                        <th>Nombre</th>
                                        <th>Fono</th>
                                        <th>Localidad</th>
                                        <th>Sector</th>
                                        <th>Direccion</th>
                                        <th>Estado</th>
                                        <th>Acciones</th>

                                    </tr>
                                </thead>
                                <tbody id="fila_bajas" name="fila_bajas">
                                    @foreach ($peticiones as $peticion)
                                        <tr>
                                            <td>{{ $peticion->servicio->cliente->nombre }}</td>
                                            <td>{{ $peticion->servicio->cliente->fono }}</td>
                                            <td>{{ $peticion->servicio->localidad->nombre}} </td>
                                            <td>{{ $peticion->servicio->sector }}</td>
                                            <td>{{ $peticion->servicio->direccion }}</td>
                                            <td class="text-xs">
                                                @switch($peticion->servicio->estado_actual)
                                                    @case('por confirmar')
                                                        <span class="badge badge-sm bg-gradient-secondary">
                                                            {{ $peticion->servicio->estado_actual }}</span>
                                                    @break

                                                    @case('Agendado')
                                                        <span class="badge badge-sm bg-gradient-success">
                                                            {{ $peticion->servicio->estado_actual }}</span>
                                                    @break

                                                    @case('Verificado')
                                                        <span class="badge badge-sm bg-gradient-primary">
                                                            {{ $peticion->servicio->estado_actual }}</span>
                                                    @break
                                                @endswitch
                                            </td>
                                            <td>
                                                @if ($peticion->servicio->estado_actual == 'por confirmar' || $peticion->servicio->estado_actual == 'Verificado')
                                                    <i style="color:#3860b2;cursor: pointer;" class="fa fa-hand-point-up"
                                                        onclick="solicitar({{$peticion->servicio->id}})"></i>
                                                @endif
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>

                        </div>
                    </div>

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


    <form method="POST" action="solicitar_peticion" name="frmSolicitar" id="frmSolicitar" hidden="hidden">
        @method('put')
        @csrf
        <input hidden id="servicio_id" name="servicio_id">
    </form>

@endsection

@section('js')
    <!-- datatable-->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.js"></script>
    <script>
        $(document).ready(function() {
            var groupColumn = 0;

            $('#table_id').DataTable({
                responsive: true,

                "aoColumnDefs": [{
                    'bSortable': false,
                    'aTargets': [-1]
                }],
                "oLanguage": {
                    "oPaginate": {
                        "sPrevious": "Anterior",
                        "sNext": "Siguiente",
                        "sInfo": "Mostrando _START_ a _END_ de un total de _TOTAL_"

                    },
                    "sZeroRecords": "Sin registros para mostrar",
                    "sInfo": "mostrando _START_ a _END_, de un total de _TOTAL_ registros",
                    "sInfoFiltered": " - filtrado de _MAX_ registros",
                    "sInfoEmpty": "Sin registros para mostrar",
                    "sSearch": "Buscar",
                    "sLengthMenu": "Mostrar _MENU_ registros",
                    "sLoadingRecords": "Por favor, espere un momento...9"

                },
                columnDefs: [{
                    visible: false,
                    targets: groupColumn
                }],
                order: [
                    [groupColumn, 'asc']
                ],
                displayLength: 25,
                drawCallback: function(settings) {
                    var api = this.api();
                    var rows = api.rows({
                        page: 'current'
                    }).nodes();
                    var last = null;

                    api
                        .column(groupColumn, {
                            page: 'current'
                        })
                        .data()
                        .each(function(group, i) {
                            if (last !== group) {
                                $(rows)
                                    .eq(i)
                                    .before('<tr class="group"><td colspan="6">' + group +
                                        '</td></tr>');

                                last = group;
                            }
                        });
                },
            });
            $('#table_id tbody').on('click', 'tr.group', function() {
                var currentOrder = table.order()[0];
                if (currentOrder[0] === groupColumn && currentOrder[1] === 'asc') {
                    table.order([groupColumn, 'desc']).draw();
                } else {
                    table.order([groupColumn, 'asc']).draw();
                }
            });

        })
    </script>


    <script>
        function solicitar(id) {
            if (confirm("Va a solicitar esta petición, ¿Desea continuar?") == true) {
                $('#servicio_id').val(id);
                $('#frmSolicitar').submit();
            }

        }
    </script>
@endsection