@extends('layouts.masterBtnPago')

@section('header')
    <meta name="logout" content="{{ route('web.logout') }}">
    {{--<link rel="stylesheet" href="{!! asset('css/PagosElectronicos/recolectas.css') !!}" type="text/css">--}}
    <style>
        .panel {
            border-color: #222222;
        }

        .panel-heading {
            color: #ffffff;
            background-color: #222;
            border-color: #222;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
        }

        .head-logo {
            margin-right: 30px;
        }

        .head-logo .bg-logo > a > img {
            width: 220px;
        }

        .head-logo .navbar-brand {
            background-color: white;
            height: 90px;
            padding-right: 46px;
        }

        .head-logo div.bg-logo {
            background: #fff;
            padding-top: 15px;
            padding-bottom: 15px;
            padding-right: 50px;
            padding-left: 25px;
        }

        .head-logo div.bg-logo:after, .head-logo div.bg-logo:before {
            content: "";
            width: 0;
            height: 0;
            top: 0;
            border-style: solid;
            border-width: 92px 31px 0 0;
            position: absolute;
            -webkit-transform: skew(-30deg, 0deg);
            transform: skew(-30deg, 0deg)
        }

        .head-logo div.bg-logo:before {
            background-color: #9e9e9e;
            border-color: transparent #9e9e9e transparent transparent;
            right: -30px;
            z-index: 1
        }

        .head-logo div.bg-logo:after {
            background-color: #e2e2e2;
            border-color: transparent #e2e2e2 transparent transparent;
            right: -3px
        }

        .detalle-pago {
            margin-right: 20px;
        }
    </style>
@endsection
@section('content')



    <input type="hidden" id="codtablaw" value="{{ session('LoginUE.listcliente.codcliente') }}">
    <input type="hidden" id="codusuariow" value="{{ session('LoginUE.listcliente.codusuario') }}">
    <input type="hidden" id="master" value="{{ session('LoginUE.listcliente.master') == true ? '1' : '2' }}">

    <div class="container">
        <div class="row" style="margin-top: 20px">
            <div class="col-sm-8 col-xs-push-2 col-sm-push-2 col-lg-push-2">
                <div class="modal fade" id="messageModal" tabindex="-1" role="dialog" aria-labelledby="Login"
                     aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <header class="modal-header modal-header-errors">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                                <h5 class="modal-title modal-title-errors">Advertencia</h5>
                            </header>
                            <div class="modal-body">
                                <div id="errors"></div>
                            </div>
                            <footer class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            </footer>
                        </div>
                    </div>
                </div>
                @if ($errors->has())
                    <div class="alert alert-danger">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </div>
                @endif
                <div class="panel">
                    <!-- Default panel contents -->
                    <div class="panel-heading">
                        <h3 class="panel-title">Consultar Caso</h3>
                    </div>
                    <div class="panel-body">
                        <div class="row text-center">
                            <div class="col-sm-4">
                                <label for="nrocaso" class="text-primary"><b>Número de Caso</b></label>
                            </div>
                            <div class="col-sm-4">
                                <label for="codguia" class="text-primary"><b>N° Guía</b></label>
                            </div>
                            <div class="col-sm-4">
                                <label for="referencia" class="text-primary"><b>Referencia</b></label>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="row">
                                <div class="col-sm-4">
                                    <input type="text" class="form-control input-sm" id="nrocaso">
                                </div>
                                <div class="col-sm-4">
                                    <input type="text" class="form-control input-sm" id="codguia">
                                </div>
                                <div class="col-sm-4">
                                    <input type="text" class="form-control input-sm" id="referencia">
                                </div>
                            </div>
                        </div>

                        <div class="row text-center">
                            <div class="col-sm-6">
                                <label for="fechadesde" class="text-primary"><b>Fecha Desde</b></label>
                            </div>
                            <div class="col-sm-6">
                                <label for="fechahasta" class="text-primary"><b>Fecha Hasta</b></label>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class='input-group date' id='datetimepicker1'>
                                        <input type="text" class="form-control input-sm" id="fechadesde">
                                        <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class='input-group date' id='datetimepicker2'>
                                        <input type="text" class="form-control input-sm" id="fechahasta">
                                        <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group text-center">
                            <input type="button" class="btn btn-sm btn-primary" onclick="consultaReclamo()"
                                   value="Consultar">
                        </div>

                    </div>

                    <!-- Table -->
                    {{--@php(dd($historialcasos))--}}
                    @if(isset($historialcasos) && !empty($historialcasos))
                        <table class="table" {{--style="display: none;"--}} id="resultados">
                            <thead>
                            <tr>
                                <th class="text-center">#</th>
                                <th class="text-center">Guía</th>
                                <th class="text-center">Referencia</th>
                                <th class="text-center">Caso</th>
                                <th class="text-center">Tipo de Reclamo</th>
                                <th class="text-center">Fecha de Creación</th>
                                <th class="text-center">Fase Actual</th>
                                <th class="text-center">Fecha Cierre</th>
                            </tr>
                            </thead>
                            <tbody>
                            @php($i = 1)
                            @foreach($historialcasos as $historialcaso)
                                <tr>
                                    <td>{{ $i }}</td>
                                    <td>
                                        <a href="http://www.zoomenvios.com/zoomtrack/zoom-track-res-fac.php?identificacion={{ $historialcaso['codguia'] }}&rastreoenvio=guia" target="_blank">
                                            {{ $historialcaso['codguia'] }}
                                        </a>
                                    </td>
                                    <td>{{ $historialcaso['referencia'] }}</td>
                                    <td>
                                        <a href="{{ route('reclamos.detalle', ['codcaso' =>  $historialcaso['codcaso'] ]) }}" target="_blank">
                                            {{ $historialcaso['codcaso'] }}
                                        </a>
                                    </td>
                                    <td>{{ $historialcaso['tiporeclamoini'] }}</td>
                                    <td>{{ $historialcaso['fechareclamo'] }}</td>
                                    <td>{{ $historialcaso['faseact'] }}</td>
                                    <td>{{ $historialcaso['fecha_cierre'] ? $historialcaso['fecha_cierre'] :  'N/A'}}</td>
                                </tr>
                                @php($i++)
                            @endforeach
                            </tbody>
                        </table>
                    @endif
                    <div class="row">
                        <div class="col-sm-8 col-sm-push-2">
                            <div class="alert alert-danger alert-dismissable" id="errors-consulta"
                                 style="display: none">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <input type="hidden" id="url" data-url="{{ route('getConsumirAjax') }}">
    {{--    <input type="hidden" id="detalle-caso" data-url="{{ route('reclamos.detalle') }}">--}}
    <div class="text-center" style="margin-top: 20px">
        <a href="{{ route('web.index') }}" class="btn btn-primary text-center">
            <span class="glyphicon glyphicon-home"> Inicio</span>
        </a>
    </div>


@endsection

@section('script')
    <script type="text/javascript" src="{!! asset('/js/Reclamos/reclamos.js')  !!}"></script>
    <script type="text/javascript">

        var date = new Date();
        var currentMonth = date.getMonth();
        var currentDate = date.getDate();
        var currentYear = date.getFullYear();

        $(function () {
            $('#datetimepicker1').datetimepicker({
                minDate: new Date(currentYear, currentMonth-3, currentDate),
                maxDate: date,
                format: 'DD-MM-YYYY',
                useCurrent: false,
                dayViewHeaderFormat: 'MMMM YYYY'
            });
        });

        $(function () {
            $('#datetimepicker2').datetimepicker({
                maxDate: date,
                format: 'DD-MM-YYYY',
                useCurrent: false,
                dayViewHeaderFormat: 'MMMM YYYY'
            });
        });
    </script>
@endsection