@extends('layouts.app')

@section('vendor-style')
    <link rel="stylesheet" type="text/css" href="{{ asset('vendors/flag-icon/css/flag-icon.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('vendors/data-tables/css/jquery.dataTables.min.css') }}">
    <link rel="stylesheet" type="text/css"
          href="{{ asset('vendors/data-tables/extensions/responsive/css/responsive.dataTables.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('vendors/data-tables/css/select.dataTables.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('vendors/sweetalert/sweetalert.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('vendors/flag-icon/css/flag-icon.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('vendors/quill/quill.snow.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('vendors/select2/select2.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('vendors/select2/select2-materialize.css') }}">
@endsection
@section('title', 'Solicitudes')
{{-- page style --}}
@section('page-style')
    <link rel="stylesheet" type="text/css" href="{{ asset('css/pages/data-tables.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/pages/app-sidebar.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/pages/app-todo.css') }}">
    <style>
        table.dataTable tbody th, table.dataTable tbody td {
            padding:4px 4px !important;
        }
    </style>

@endsection

@section('content')


    <div class="breadcrumbs pb-0 pt-4" id="breadcrumbs-wrapper">
        <!-- Search for small screen-->
        <div class="container">
            <div class="row">
                <div class="col s10 m6 l6">
                    <h5 class="breadcrumbs-title mt-0 mb-0"><span>Folio emitidos</span></h5>
                </div>
            </div>
        </div>
    </div>
    <div class="card-body">
        <div class="container">
            <div class="section">
                <div class="card">
                    <div class="card-content">
                        <div class="row">
                            <div class="col s12">
                                <label>Buscar:</label>
                                {!! Form::text('buscar', null, ['class' => 'form-control', 'id' => 'buscar', 'name' => 'buscar']) !!}
                            </div>
                        </div>
                        <div class="row">
                            <div class="col s12">
                                <table id="table_id" name="table_id" class="display" width="98%">
                                    <thead>
                                    <tr>
                                        <th style="text-align: center; width: 10%;">Folio</th>
                                        <th style="text-align: center; width: 10%;">Referencia</th>
                                        <th style="text-align: center; width: 37%;">Detalles</th>
                                        <th style="text-align: center; width: 20%;">Destinatarios</th>
                                        <th style="text-align: center; width: 15%;">Remitente</th>
                                        <th style="text-align: center; width: 13%;">Estatus</th>
                                    </tr>
                                    </thead>
                                    <tbody>

                                    </tbody>
                                    <tfoot>
                                    <tr>
                                        <th style="text-align: center; width: 10%;">Folio</th>
                                        <th style="text-align: center; width: 10%;">Referencia</th>
                                        <th style="text-align: center; width: 37%;">Detalles</th>
                                        <th style="text-align: center; width: 20%;">Destinatarios</th>
                                        <th style="text-align: center; width: 15%;">Remitente</th>
                                        <th style="text-align: center; width: 13%;">Estatus</th>
                                    </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>



@endsection

{{-- vendor scripts --}}
@section('vendor-script')
    <script src="{{ asset('vendors/data-tables/js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('vendors/data-tables/extensions/responsive/js/dataTables.responsive.min.js') }}"></script>
    <script src="{{ asset('vendors/data-tables/js/dataTables.select.min.js') }}"></script>
    <script src="{{ asset('vendors/sweetalert/sweetalert.min.js') }}"></script>
@endsection

{{-- page script --}}
@push('page-script')

    <script>
        $(document).ready(function() {
            $('.tooltipped').tooltip();
            $("#data-table-row-grouping").DataTable({
                language: datablees,
                "order": []
            });
        });
    </script>

@endpush


@push('scripts')

    <script type="text/javascript">
        var emptyRow = "<tr><td colspan='7' class='center'>NO HAY DATOS DISPONIBLES</tr></td>";
        $(document).ready(function() {
            $("#table_id tbody").append(emptyRow);
        });

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $(document).on('blur', '#buscar', function() {
            let fd = new FormData();
            fd.append("buscar", $("#buscar").val())
            $.ajax({
                async: true,
                url: "{{ url('getFolios') }}",
                type: 'POST',
                data: fd,
                contentType: false,
                processData: false,
                cache: false,
                beforeSend: function() {},
                success: function(response) {
                    document.getElementById("table_id").querySelector("tbody").innerHTML="";

                    let folios = response;
                    $.each(folios, function(j, item) {
                        var row = "<tr><td class='center'>" + item.folio + "</td>" +
                            "<td class='center'>" + item.referencia_documento + "</td>" +
                            "<td><b>Asunto: </b>" + item.titulo_doc + "<br><b>Indicaciones: </b>" + item.descripcion_doc + "<br><b>Envio: </b>" + item.created_at + "<br></td>"+
                            "<td>" + item.destinatario + "</td>" +
                            "<td>" + item.remitente + "</td>" +
                            "<td><b>Tipo: </b>" + item.ate + "<br><b>Estatus: </b> " + item.estado +"</td></tr>";
                        $("table tbody").append(row);
                    });
                },
                error: function(xhr, status, error) {}
            })
        });

        $(".getFolios").select2({
            open : false,
            focus:false,
            placeholder: "Buscar ...",
            ajax: {
                url: "{{ url('getFolios')}}",
                dataType: 'json',
                delay: 200,
                data: function (params) {
                    return {
                        search: params.term,
                    };
                },
                processResults: function (data) {
                    return {
                        results: data
                    };
                },
                cache: true
            },
            language: "es"
        });


        function eliminar(id){
            swal({
                title: "¿Estas seguro de eliminar el envío?",
                text: "",
                icon: 'success',
                dangerMode: true,
                buttons: {
                    cancel: 'CANCELAR',
                    accept: 'ACEPTAR'
                }
            }).then(function(willDelete) {
                if (willDelete) {
                    $.ajax({
                        url: "{{ url('eliminarEnvio') }}",
                        type: 'GET',
                        data: {
                            id,
                        },
                        success: function(response) {
                            swal({
                                title: "Eliminación satisfactoria",
                                icon: 'success',
                                dangerMode: true,
                                buttons: {
                                    accept: 'ACEPTAR'
                                }
                            }).then(function(willDelete) {
                                if (willDelete) {
                                    location.reload();
                                } else {
                                    location.reload();
                                }
                            });
                        },
                        error: function(xhr, status, error) {
                        }
                    })
                } else {
                }
            });
        }


    </script>
@endpush