@extends('layouts.app')

@section('envios')

    @include('layouts.modal')

    <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
        <h1 class="h2">Prueba</h1>
        <a href="#" class="d-sm-inline-block btn btn-sm btn-primary shadow-sm" data-toggle="modal" data-target="#crearExcel"><i class="fas fa-download fa-sm text-white-50"></i>&nbsp;&nbsp;&nbsp;Descargar Excel</a>
    </div>

    <div class="card">
        <h5 class="card-header bg-primary text-white" style="font-size: larger; font-weight: bold;">{{ __('Seleccione los criterios que necesite') }}</h5>
        <div class="card-body">
            <div class="form-row">
                <div class="col-sm-12 col-md-12 col-lg-4 mb-3">
                    <div class="input-group">
                        <div class="input-group-prepend"><span class="input-group-text"><i class="fas fa-boxes"></i></span></div>
                        <select class="custom-select @error('estadoPrueba') is-invalid @enderror" name="estadoPrueba">
                            <option selected disabled value="">Eliga el estado...</option>
                            <option value="Pendiente">{{ __('Pendiente') }}</option>
                            <option value="Reparto">{{ __('Reparto') }}</option>
                            <option value="Entregado">{{ __('Entregado') }}</option>
                        </select>
                        @error('filtrarEstadoEnvio') <span class="invalid-feedback"><strong>{{ $message }}</strong></span> @enderror
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-header"></div>
        <div class="card-body">
            <table class="table table-striped table-bordered display" id="enviosPrueba" cellspacing="0" width="100%">
                <thead class="thead-light">
                    <tr>
                        <th style="width: 5%"></th>
                        <th style="width: 5%">Creado</th>
                        <th style="width: 5%">Creado</th>
                        <th style="width: 10%">Origen</th>
                        <th style="width: 10%">Destino</th>
                        <th style="width: 5%">Estado</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>

    <script>
        $(document).ready(function()
        {
            $('#estadoPrueba').on('change', function()
            {
                var ordenPersonalRUT = $(this).children('option:selected').val();

                switch (ordenPersonalRUT)
                {
                    case '2':
                        table.order([0, 'desc']).draw();
                        break;
                    default:
                        table.order([0, 'asc']).draw();
                        break;
                }
            });

            var table = $('#enviosPrueba').DataTable(
            {
                // processing: true,
                // serverSide: true,
                responsive: true,
                order: [[ 1, 'desc' ]],
                language: { url: "{{ asset('plugins/datatables/spanish.json') }}" },
                ajax:
                {
                    url: "{{ url('resultado/datatable') }}",
                    dataSrc: 'data'
                    // dataType: 'json'
                },
                columns:
                [
                    { data: 'vacio', orderable: false },
                    { data: 'created_at', className: 'd-none' },
                    { data: 'f_created', orderable: false },
                    { data: 'comuna_origen', orderable: false },
                    { data: 'comuna_destino', orderable: false },
                    { data: 'estado', orderable: false }
                ]
            });
        });
    </script>

	@include('layouts.javascript')

@endsection