@extends('layout.master',['activePage' => 'web_services', 'menuParent' => 'Consultas', 'titlePage' => __('Consulta de web services')])


@push('plugin-styles')
{!! Html::style('assets/css/loader.css') !!}
{!! Html::style('assets/css/apps/tickets.css') !!}
{!! Html::style('plugins/table/datatable/datatables.css') !!}
{!! Html::style('plugins/flatpickr/flatpickr.css') !!}
{!! Html::style('plugins/flatpickr/custom-flatpickr.css') !!}
@endpush


@section('content')

<div class="sub-header-container">
    <header class="header navbar navbar-expand-sm">
        <ul class="navbar-nav flex-row">
            <li>
                <div class="page-header">
                    <nav class="breadcrumb-one" aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="javascript:void(0);"> {{__('Consultas')}}</a></li>
                            <li class="breadcrumb-item active" aria-current="page"><span> {{__('CONSULTA DE WEB SERVICES')}}</span></li>
                        </ol>
                    </nav>
                </div>
            </li>
        </ul>
    </header>
</div>
<div class="container-fluid pt-2">
    <div class="w-100">

        <div class="form-group row ">
            <div class="col-md-2">
                <label>ID movimiento:</label>
                <input id="movimiento" name="movimiento" class="form-control" type="number" onkeydown="javascript:if (event.key === 'Enter') getWS() ">
            </div>
            <div class="col-md-2">
                <label for="filtro_sucursal">Sucursal:</label>
                <select class="form-control" id="sucursal" name="sucursal">
                    <option value="0" selected>- Todas -</option>
                    @forelse($sucursales as $sucursal)
                    <option value="{{ $sucursal->sucursal }}">{{ $sucursal->descripcion }}</option>
                    @empty
                    <option value="" disabled>No hay sucursales disponibles</option>
                    @endforelse
                </select>
            </div>
            <div class="col-lg-2">
                <label for="numero_tarjeta">Tarjeta cliente: <span class="text-danger">*</span></label>
                <input type="text" class="form-control creditCard" id="numero_tarjeta" name="numero_tarjeta" onkeydown="javascript:if (event.key === 'Enter') getWS() ">
            </div>

            <div class="col-lg-2">
                <label for="fecha_movimiento">Fecha movimiento:</label>
                <input id="fecha_movimiento" name="fecha_movimiento" class="form-control flatpickr flatpickr-input " type="text" onkeydown="javascript:if (event.key === 'Enter') getWS() ">
            </div>
            <div class="col-lg-2">
                <label for="fecha_ws">Fecha Web Services:</label>
                <input id="fecha_ws" name="fecha_ws" class="form-control flatpickr flatpickr-input " type="text" onkeydown="javascript:if (event.key === 'Enter') getWS() ">
            </div>
            <div class="col-2">
                <button type="button" id="btn-consultar" class="btn btn-primary mt-4" onclick="getWS()">Consultar</button>
            </div>
        </div>
        <div class="row date-table-container layout-top-spacing">
            <div class="table-responsive">
                <table class="table table-hover" id="list-web-services">
                    <thead>
                        <tr>
                            <th>{{__('ID movto')}}</th>
                            <th>{{__('Usuario')}}</th>
                            <th>{{__('Sucursal')}}</th>
                            <th>{{__('Tarjeta')}}</th>
                            <th>{{__('Importe.')}}</th>
                            <th>{{__('Plazo')}}</th>
                            <th>{{__('Fecha/Hora WS')}}</th>
                            <th>{{__('Tipo movto')}}</th>
                            <th>{{__('Promoción')}}</th>
                            <th>{{__('Fecha Movto')}}</th>
                            <th>{{__('Folio reversa')}}</th>
                            <th>{{__('Respuesta')}}</th>

                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</div>


@endsection

@push('plugin-scripts')
{!! Html::script('plugins/table/datatable/datatables.js') !!}
{!! Html::script('plugins/table/datatable/button-ext/dataTables.buttons.min.js') !!}
{!! Html::script('plugins/table/datatable/button-ext/jszip.min.js') !!}
{!! Html::script('assets/js/loader.js') !!}
{!! Html::script('plugins/jquery-ui/jquery-ui.min.js') !!}
{!! Html::script('assets/js/basicui/inputmask.js') !!}
{!! Html::script('plugins/flatpickr/flatpickr.js') !!}
{!! Html::script('plugins/flatpickr/custom-flatpickr.js') !!}
@endpush

@push('custom-scripts')
<script>
    $(document).ready(function() {

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

        $('.creditCard').inputmask({
            mask: '(9{4} 9{4} 9{4}|9{4} 9{4} 9{4} 9{4})'
        }).change(function() {
            let value = $(this).val().substr(0, 2);
            $(this).inputmask({
                mask: '(9{4} 9{4} 9{4}|9{4} 9{4} 9{4} 9{4})'
            });
        });
        $('#list-web-services').dataTable();
        $(".flatpickr").flatpickr();
        $(".basic-select2").select2();


        // getWS()
    });

    function getWS() {
        $('#list-web-services').dataTable().fnDestroy();
        var table = $('#list-web-services').DataTable({
            lengthMenu: [10, 15, 20, 50, 100, 200, 500],
            language: {
                url: "{{asset('assets/material/datatable_sp.json')}}"
            },
            ajax: {
                url: "{{url('consultas/web-services/consultar')}}",
                type: "POST",
                data: {
                    sucursal: $('#sucursal').val(),
                    numero_tarjeta: $('#numero_tarjeta').val(),
                    fecha_movimiento: $('#fecha_movimiento').val(),
                    fecha_ws: $('#fecha_ws').val(),
                    movimiento: $('#movimiento').val(),
                }
            },
            columns: [{
                    data: "IdMovto"
                },
                {
                    data: "Usuario"
                },
                {
                    data: "sucursal",
                    render: function(data) {
                        return data == null ? '' : data.descripcion
                    }
                },
                {
                    data: {
                        data: "Tarjeta",
                        data: "NombreTarjeta",
                    },
                    render: function(data, type, full, meta) {
                        return 'Nombre: ' + data.NombreTarjeta + '<br>' +
                            'Número: ' + data.Tarjeta + '<br>';
                    }
                },
                {
                    data: "Importe"
                },
                {
                    data: "Plazo"
                },
                {
                    data: "FechaHora"
                },
                {
                    data: "tipomovimiento",
                    render: function(data) {
                        return data == null ? '' : data.descripcion
                    }
                },
                {
                    data: "promocion",
                    render: function(data) {
                        return data == null ? '' : data.descripcion
                    }
                },
                {
                    data: "FechaMovto"
                },
                {
                    data: "FolioReversa",
                    render: function(data) {
                        return data == null ? '' : data

                    }
                },
                {
                    data: {
                        data: "EstatusRespuesta",
                        data: "FechaHoraRespuesta",
                        data: "FolioAutorizacion",
                    },
                    render: function(data, type, full, meta) {
                        return 'Estatus: ' + data.EstatusRespuesta + '<br>' +
                            'Fecha: ' + data.FechaHoraRespuesta + '<br>' +
                            'Folio: ' + data.FolioAutorizacion + '<br>';
                    }
                },
            ],
            order: [
                [0, "desc"]
            ],
        });
    }
</script>
@endpush