@extends('adminlte::page')

@section('title', 'CONSULTAR SOLICITUDES')

@section('content_header')
    <h1 class="m-0 text-dark">CONSULTA SOLICITUDES</h1>
@stop

@section('content')
    <div class="card uper">
        <div class="card-header">
            <div class="row">
                <div class="col-md-6">
                    <a href="{{ route('solicitudes.create') }}" class="btn btn-warning">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-circle" viewBox="0 0 16 16">
                            <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
                            <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
                        </svg>
                        CREAR SOLICITUD
                    </a>
                </div>
            </div>
        </div>
        <div class="card-body">
            @include('alerts.errors')
            @include('alerts.success')
            <form action="{{ route('solicitudes.index') }}" method="get">
                <div class="row">
                    <!-- fecha_inicial -->
                    <div class="form-group col-xs-12 col-sm-12 col-md-4 col-lg-4">
                        <label for="fecha_inicial" class="col-form-label">Fecha inicial: </label>
                        <input class="form-control dateinput" placeholder="Fecha inicio" type="date" value="{{ $fechaInicial ?? '' }}" name="fecha_inicial">
                    </div>
                    <!-- fecha_final -->
                    <div class="form-group col-xs-12 col-sm-12 col-md-4 col-lg-4">
                        <label for="fecha_final" class="col-form-label">Fecha final: </label>
                        <input class="form-control dateinput" placeholder="Fecha final" type="date" value="{{ $fechaFinal ?? '' }}" name="fecha_final">
                    </div>
                </div>
                <div class="row">
                    <div class="form-group col-xs-12 col-sm-12 col-md-4 col-lg-4">
                        <label for="select_seccion" class="col-form-label">Sección: </label>
                        <select class="form-control form-control-alternative" name="id_seccion" id="select_seccion" style="width: 100%;">
                            @if ( $seccion ?? false )
                            <option value="{{ $seccion->id }}" selected>{{ $seccion->descripcion }}</option>
                            @endif
                        </select>
                    </div>
                    <div class="form-group col-xs-12 col-sm-12 col-md-4 col-lg-4">
                        <label for="select_area" class="col-form-label">Área: </label>
                        <select class="form-control form-control-alternative" name="id_area" id="select_area" style="width: 100%;">
                            @if ( $area ?? false )
                            <option value="{{ $area->id }}" selected>{{ $area->descripcion }}</option>
                            @endif
                        </select>
                    </div>
                    <div class="form-group col-xs-12 col-sm-12 col-md-4 col-lg-4">
                        <label for="select_anio" class="col-form-label">Año: </label>
                        <select class="form-control form-control-alternative" name="id_anio" id="select_anio" style="width: 100%;">
                            @if ( $anio ?? false )
                            <option value="{{ $anio->id }}" selected>{{ $anio->descripcion }}</option>
                            @endif
                        </select>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-12 col-md-12">
                    <button type="submit" class="btn btn-primary">Filtrar</button>
                </div>
            </form>
            <hr />
            <div class="table-responsive">
                <table class="table table-hover" id="tabla" style="width:100%">
                    <thead class="thead-dark">
                        <tr>
                            <th>Código</th>
                            <th>Fecha solicitud</th>
                            <th>Nombre</th>
                            <th>Sección</th>
                            <th>Area</th>
                            <th>Año</th>
                            <th>Solicitado por</th>
                            <th>Estado</th>
                            <th>Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                    @if ( count($data) <= 0 )
                        <tr>
                            <td colspan="9">No se han encontrado resultados...</td>
                        </tr>
                    @endif
                    @foreach ($data as $solicitud)
                        <tr>
                            <td>{{ $solicitud->id }}</td>
                            <td>{{ $solicitud->created_at ? $solicitud->created_at->format('d/m/Y H:i') : "Fecha desconocida" }}</td>
                            <td>{{ $solicitud->nombre_archivo }}</td>
                            <td>{{ optional(optional($solicitud->area)->seccion ?? null)->descripcion ?? null }}</td>
                            <td>{{ optional($solicitud->area)->descripcion ?? '' }}</td>
                            <td>{{ optional($solicitud->anio)->descripcion ?? '' }}</td>
                            <td>{{ $solicitud->id_usuario ? $solicitud->usuario->name : 'Desconocido' }}</td>
                            <td class="{{ $solicitud->obtenerEstiloBadge() }}">
                                {{ $solicitud->obtenerNombreEstado() }}
                            </td>
                            <td>
                                <a href="{{ route('solicitudes.show', $solicitud) }}" class="btn btn-primary">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye-fill" viewBox="0 0 16 16">
                                        <path d="M10.5 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0"/>
                                        <path d="M0 8s3-5.5 8-5.5S16 8 16 8s-3 5.5-8 5.5S0 8 0 8m8 3.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7"/>
                                    </svg>
                                    Ver solicitud
                                </a>
                                @can(App\Constants\PermisosConstants::DAR_BAJA_INFORMACION_PUBLICA)
                                @if ( $solicitud->estado == App\Models\Solicitud::ESTADO_EN_PROCESO || $solicitud->estado == App\Models\Solicitud::ESTADO_APROBADA)
                                <hr />
                                <form id="form_eliminar_{{ $solicitud->id }}" action="{{ route('solicitudes.destroy', $solicitud) }}" method="post">
                                    @csrf
                                    @method('delete')
                                    <button type="button" class="btn btn-danger" style="margin-left: 2px" onclick="preEliminarRegistro({{ $solicitud->id }});">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash3" viewBox="0 0 16 16">
                                            <path d="M6.5 1h3a.5.5 0 0 1 .5.5v1H6v-1a.5.5 0 0 1 .5-.5M11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3A1.5 1.5 0 0 0 5 1.5v1H1.5a.5.5 0 0 0 0 1h.538l.853 10.66A2 2 0 0 0 4.885 16h6.23a2 2 0 0 0 1.994-1.84l.853-10.66h.538a.5.5 0 0 0 0-1zm1.958 1-.846 10.58a1 1 0 0 1-.997.92h-6.23a1 1 0 0 1-.997-.92L3.042 3.5zm-7.487 1a.5.5 0 0 1 .528.47l.5 8.5a.5.5 0 0 1-.998.06L5 5.03a.5.5 0 0 1 .47-.53Zm5.058 0a.5.5 0 0 1 .47.53l-.5 8.5a.5.5 0 1 1-.998-.06l.5-8.5a.5.5 0 0 1 .528-.47M8 4.5a.5.5 0 0 1 .5.5v8.5a.5.5 0 0 1-1 0V5a.5.5 0 0 1 .5-.5"/>
                                        </svg>
                                        Eliminar
                                    </button>
                                </form>
                                @endif
                                @endcan
                                <hr />
                            </td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            </div>
            <div class="card-footer py-4">
                <nav class="d-flex justify-content-end" aria-label="...">
                    {{ $data->appends(request()->query())->links('pagination::bootstrap-4') }}
                </nav>
            </div>
        </div>
    </div>


@stop

@section('js')
    <script type="text/javascript" defer>
        $(document).ready(function() {
            $('#select_seccion').select2({
                placeholder: "Buscar...",
                ajax: {
                    url: "{{ route('autocomplete.secciones') }}",
                    dataType: "json",
                    delay: 250,
                    data: function (params) {
                        return {
                            filtro: params.term,
                        };
                    },
                    processResults: function (data) {
                        return {
                            results:  $.map(data, function (item) {
                                return {
                                    text: item.value,
                                    id: item.id,
                                }
                            })
                        };
                    },
                    cache: true
                },
                allowClear: true,
            }).on("select2:select", function (e) {
                $("#select_area").empty();
            })
            .on("select2:unselect", function (e) {
                $("#select_area").empty();
            });

            $('#select_area').select2({
                placeholder: "Buscar...",
                ajax: {
                    url: "{{ route('autocomplete.areas') }}",
                    dataType: "json",
                    delay: 250,
                    data: function (params) {
                        return {
                            filtro: params.term,
                            id_seccion: document.getElementById("select_seccion").value,
                        };
                    },
                    processResults: function (data) {
                        return {
                            results:  $.map(data, function (item) {
                                return {
                                    text: item.value,
                                    id: item.id,
                                }
                            })
                        };
                    },
                    cache: true
                },
                allowClear: true,
            }).on("select2:select", function (e) {
                //
            })
            .on("select2:unselect", function (e) {
                //
            });

            $('#select_anio').select2({
                placeholder: "Buscar...",
                ajax: {
                    url: "{{ route('autocomplete.anios') }}",
                    dataType: "json",
                    delay: 250,
                    data: function (params) {
                        return {
                            filtro: params.term,
                        };
                    },
                    processResults: function (data) {
                        return {
                            results:  $.map(data, function (item) {
                                return {
                                    text: item.value,
                                    id: item.id,
                                }
                            })
                        };
                    },
                    cache: true
                },
                allowClear: true,
            }).on("select2:select", function (e) {
                //
            })
            .on("select2:unselect", function (e) {
                //
            });
        });// -------------------- fin document ready --------------------

        function preEliminarRegistro(id){
            event.preventDefault();
            swal({
                title: "¿Estás seguro de eliminar el registro?",
                text: "Una vez eliminado el registro, no se podrá recuperar sus datos.",
                icon: "warning",
                buttons: true,
                dangerMode: true
            })
                .then((permitirEliminar) => {
                    if (permitirEliminar) {
                        swal("El registro será eliminado.", {
                            icon: "success",
                        });
                        document.getElementById('form_eliminar_' + id).submit();
                    } else {
                        event.preventDefault();
                        swal("Operación cancelada.");
                    }
                });
        }
    </script>
@stop