@extends('layouts.app')

@push('css')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.css">
    {{-- @include('layouts.datatables_css') --}}
    <style>

        .btn-nuevo-activo{
            color: #fff;
            width: 250px;
            overflow: hidden;
            border: none;
            background: #0c5cd7;
            color: #fff;
            padding: 10px 0px;
            margin: 0px;
            text-align: center;
            font-family: "SKFSans-Light";
            content: '+';
            text-decoration: none !important;
            font-size: 12px !important;
            height: 35px;
            /* transition: width .5s; */
        }
        .btn-nuevo-activo:hover{
            color: #fff !important;
        }

        .btn-nuevo:hover::after {
            content: ' Crear una queja';
        }

        .dataTables_filter {
            display: none;
        }

        .buttons-csv {
            border: none;
            background: #0c5cd7;
            color: #fff;
            padding: 10px 10px;
            text-align: center;
            font-family: "SKFSans-Light";
            text-decoration: none !important;
            font-size: 10px !important;
            transition: width .5s;
            overflow: hidden;
        }

        #quejaRespuestas-table_paginate {
            text-align: center;
        }

        #quejaRespuestas-table_paginate .paginate_button{
            padding: 0px 5px;
            color: #6c6c6c;
            margin: 0px 10px;
            font-family: "SKFSans-Medium";
            font-family: 14px;
        }

        #quejaRespuestas-table_paginate .previous{
            background-color: #0b5cd7;
            color: #fff;
            padding: 5px 10px;
            border: none;
            cursor: hand
        }

        #quejaRespuestas-table_paginate .next{
            background-color: #0b5cd7;
            color: #fff;
            padding: 5px 10px;
            border: none;
            cursor: hand
        }

        #quejaRespuestas-table_paginate .current{
            color: #0b5cd7;
            margin: 0px 10px;
            font-family: "SKFSans-Medium";
            font-family: 14px;
        }

    </style>
@endpush

@section('content')
    <div class="container ml-0 mr-0 pl-0 pr-0 row" id="users_list">
        <div
            class="animate__animated animate__fadeInUp container tarjetas tarjeta-gris p-3 p-sm-2 p-md-3 p-lg-5 p-xl-5 col-12">
            <div class="row row-bottom">
                <div class="col-12 col-sm-12 col-md-8 col-lg-8 col-xl-8">
                    <h3 class="titulo-modulo texto-obscuro">Quejas @if(get_perfil()["perfil"] == "Distribuidor") <a
                            href="{{ route('quejaRespuestas.create') }}" class="btn-nuevo-activo">Crear una queja</a> @endif</h3>
                </div>
                <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
                    <nav class="breadcrumb"><a class="breadcrumb-item" href="{{ url('home') }}">Dashboard</a><span
                            class="breadcrumb-item active">Quejas</span></nav>
                </div>
                <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
                    <input type="text" class="search input_main input_buscador float-right" style="display: none"
                           placeholder="Buscar...">
                </div>
            </div>
            <div class="empty-space-10"></div>
            @include('flash::message')
            @include('queja_respuestas.table')
            <div class="empty-space-30"></div>
        </div>
    </div>
@endsection

@section('modales')
    <div class="modal fade" id="modalEliminar" tabindex="-1" role="dialog" aria-labelledby="modalEliminarLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalEliminarLabel">Eliminar queja</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <h3>¡Advertencia!</h3>
                    <p>Al aceptar la queja con folio: <strong id="nombre_modal"></strong> será eliminada, esta acción no
                        puede ser revertida.</p>
                </div>
                <div class="empty-space-50"></div>
                {!! Form::open(['route' => ['quejaRespuestas.destroy', 1], 'method' => 'delete','class' => 'row botonera-inferior','id' => 'form-eliminar']) !!}
                @csrf
                <div class="col-12 p-0 m-0 text-right botonera-formulario">
                    <a href="{{ url('users') }}" class="btn btn-secundario text-white" data-dismiss="modal">Cancelar
                        <span><-</span></a>
                    <button type="submit" id="guardar-cambios" class="btn btn-principal ">Aceptar <span>-></span>
                    </button>
                </div>
                {!! Form::close() !!}
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    {{-- <script src="https://cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script> --}}
    @include('layouts.datatables_js')

    <script>
        $(document).ready(function () {
            // Setup - add a text input to each footer cell
            $('#quejaRespuestas-table thead tr').clone(true).appendTo('#quejaRespuestas-table thead');
            $('#quejaRespuestas-table thead tr:eq(1) th').each(function (i) {
                var title = $(this).text();
                if (title != 'Acciones') {
                    $(this).html('<input type="text" style="width: 100px;" class="input_main" placeholder="' + title + '" />');
                }

                $('input', this).on('keyup change', function () {
                    if (table.column(i).search() !== this.value) {
                        table
                            .column(i)
                            .search(this.value)
                            .draw();
                    }
                });
            });

            var table = $('#quejaRespuestas-table').DataTable({
                orderCellsTop: true,
                fixedHeader: true,
                "scrollY":        "400px",
                "scrollCollapse": true,
                "paging":         true,
                "scrollX": true,
                "order": [[ 7, "desc" ]],
                // "searching": false,
                "bLengthChange": false,
                language: {
                    url: 'js/datatables/Spanish_Mexico.json'
                },
                @if(Auth::user()->perfil_quejas == "Administrador" || Auth::user()->perfil_quejas == "DER" || Auth::user()->perfil_quejas == "SER" || Auth::user()->perfil_quejas == "TER" || Auth::user()->perfil_quejas == "Atención recibida" || Auth::user()->perfil_quejas == "Servicio" || Auth::user()->perfil_quejas == "Otro")
                dom: 'Bfrtip',
                buttons: [
                    {extend: 'csv', text: 'Descargar CSV'}
                ],
                @endif
            });


        });

        $(".btn-acciones").click(function () {
            $(".menu-acciones-lista").hide();
            $(this).next().slideDown("fast");
        });
        $(".btn-cerrar-acciones").click(function () {
            $(this).parent().slideUp("fast");
        });

        $(".btn-eliminar").click(function () {
            $("#modalEliminar").modal();
            var nombre = $(this).data('name');
            var url = $(this).data('url');
            $("#nombre_modal").text(nombre);
            $("#form-eliminar").attr('action', url);
        })

        @foreach (session('flash_notification', collect())->toArray() as $message)
        @if($message["level"] == "success")
        toastr.success('{{ $message["message"] }}', {timeOut: 1000000})
        @else
        toastr.error('{{ $message["message"] }}', {timeOut: 10000})
        @endif
        {{ session()->forget('flash_notification') }}
        @endforeach
    </script>
@endpush