@extends('layouts.app')

@section('page-title')
    <div class="row bg-title">
        <!-- .page title -->
        <div class="col-lg-3 col-md-4 col-sm-4 col-xs-12 bg-title-left">
            <h4 class="page-title"><i class="fa fa-cubes"></i> Stock Vendor </h4>
        </div>
        <!-- /.page title -->
        <!-- .breadcrumb -->
        <div class="col-lg-9 col-sm-8 col-md-8 col-xs-12 text-right bg-title-right">

            <ol class="breadcrumb">
                <li><a href="{{ route('admin.dashboard') }}">@lang('app.menu.home')</a></li>
                <li class="active">{{ __($pageTitle) }}</li>
            </ol>
        </div>
        <!-- /.breadcrumb -->
    </div>
@endsection

@push('head-script')
<link rel="stylesheet" href="{{ asset('plugins/bower_components/bootstrap-select/bootstrap-select.min.css') }}">
<link rel="stylesheet" href="{{ asset('plugins/bower_components/custom-select/custom-select.css') }}">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.1.1/css/responsive.bootstrap.min.css">
    <link rel="stylesheet" href="//cdn.datatables.net/buttons/1.2.2/css/buttons.dataTables.min.css">
    <link rel="stylesheet" href="//cdn.datatables.net/buttons/1.2.2/css/buttons.dataTables.min.css">
@endpush

@section('content')

    <div class="row">
        <div class="col-xs-12">

            <section>
                <div class="sttabs tabs-style-line">

                    <div class="white-box">
                        <nav>
                            <ul class="showClientTabs">
                                <li ><a href="{{ route('admin.stockvendor.index') }}"><i class="fa fa-cube"></i> <span>Hoja de Pedidos</span></a>
                                </li>
                                <li class="clientProjects"><a href="{{ route('admin.stockvendor.depurate') }}"><i class="fa fa-clipboard"></i> <span>Hoja de Depuración</span></a>
                                </li>
                                <li class="clientInvoices"><a href="{{ route('admin.stockvendor.accounting') }}" style="box-shadow: inset 0 -2px #686868;"><i class="fa fa-calculator"></i> <span>Contabilidad</span></a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                     <div class="row p-r-20">
                        <div class="col-xs-2">
                            <h4 class="m-l-30"><b>Contabilidad</b></h4>
                        </div> 
                        <div class="col-xs-8"></div> 
                        <div class="col-xs-2 form-group m-t-20 d-block text-right p-r-40">
                            <span class="btn btn-info btn-file btn-sm m-r-10" >
                                <span class="fileinput-new"><a href="{{ route('admin.stockvendor.export') }}" style="text-decoration: none; color: white;"><i class="fa fa-download" aria-hidden="true"></i> Exportar</a></span>
                            </span>
                            <span class="btn btn-info btn-file btn-sm m-r-10" data-toggle="collapse" data-target="#filters">
                                <span class="fileinput-new"><i class="fa fa-search" aria-hidden="true"></i> Filtros</span>
                            </span>
                        </div>

                        <div id="filters" class="collapse col-xs-12 m-l-30 m-r-40">
                            <hr>
                            <div class="row m-l-30">
                                <div class="col-xs-1">
                                    <h4><b>Filtros</b></h4>
                                </div>
                            </div>
                            <br>
                            <div class="row m-l-30">
                                <div class="col-xs-2">
                                    <label>Numero de Pedido</label>
                                    <input type="text" name="order_number" id="order_number" class="form-control">
                                </div>
                                <div class="col-xs-2">
                                    <label>Estado</label>
                                    <select class="form-control" id="status" name="status">
                                        <option value="">--</option>
                                        @foreach($status as $key => $value)
                                            <option value="{{$value}}">{{$value}}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-xs-2">
                                    <label>Fecha de Pedido</label>
                                    <input type="date" name="order_date" id="order_date" class="form-control">
                                </div>
                                <div class="col-xs-2">
                                    <label>Fecha de Entrega</label>
                                    <input type="date" name="delivery_date" id="delivery_date" class="form-control">
                                </div> 
                            </div>
                            <div class="row m-l-30">
                                <div class="col-xs-10"></div>
                                <div class="col-xs-1 form-group m-t-20 text-right">
                                    <span class="btn btn-info btn-file btn-sm" id="apply-filters">
                                        <span class="fileinput-new"><i class="fa fa-check" aria-hidden="true"></i> Aplicar Filtros</span>
                                    </span>
                                </div>
                                <div class="col-xs-1 form-group m-t-20">
                                    <span class="btn btn-warning btn-file btn-sm" id="reset-filters">
                                        <span class="fileinput-new"><i class="fa fa-x" aria-hidden="true"></i> Limpiar</span>
                                    </span>
                                </div>
                            </div>
                            <hr>
                        </div>

                        <div class="col-xs-12 m-l-30 m-r-40">
                            <section id="section-line-1" class="show p-r-40">
                                <div class="table-responsive  p-r-40" style="overflow-x: scroll;">
                                    <div style="width: 350%;">
                                        {!! $dataTable->table(['class' => 'table table-bordered table-hover toggle-circle default footable-loaded footable']) !!}
                                    </div>
                                </div>
                            </section>
                        </div>
                        <div class="col-xs-12 m-t-20">
                            <div class="row p-r-20">
                                <div class="col-xs-9"></div>
                                <div class="col-xs-3 d-block text-right p-r-30">
                                    <a href="#" onclick="visamodalCall()" class="btn btn-outline btn-success btn-sm m-r-5"><i class="fa fa-check" aria-hidden="true"></i> Visar</a>
                                    <a href="#" onclick="confirmmodalCall()" class="btn btn-outline btn-success btn-sm m-r-5"><i class="fa fa-truck" aria-hidden="true"></i> Confirmar</a>
                                    <a href="#" onclick="accountmodalCall()" class="btn btn-outline btn-success btn-sm"><i class="fa fa-calculator" aria-hidden="true"></i> Contabilizar</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div><!-- /tabs -->
            </section>
        </div>
    </div>
    <!-- .row -->
    {{--Ajax Modal--}}
    <div class="modal fade bs-modal-lg in" id="actionsModal" role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-lg" id="modal-data-application">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                    <span class="caption-subject font-red-sunglo bold uppercase" id="modelHeading"></span>
                </div>
                <div class="modal-body">
                    Cargando...
                </div>
                <div class="modal-footer">
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    {{--Ajax Modal Ends--}}
@endsection

@push('footer-script')
<script src="{{ asset('plugins/bower_components/custom-select/custom-select.min.js') }}"></script>
<script src="{{ asset('plugins/bower_components/bootstrap-select/bootstrap-select.min.js') }}"></script>
    <script src="{{ asset('plugins/bower_components/datatables/jquery.dataTables.min.js') }}"></script>
    <script src="https://cdn.datatables.net/1.10.13/js/dataTables.bootstrap.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.1.1/js/dataTables.responsive.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.1.1/js/responsive.bootstrap.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.0.3/js/dataTables.buttons.min.js"></script>
    <script src="{{ asset('js/datatables/buttons.server-side.js') }}"></script>

    {!! $dataTable->scripts() !!}

    <script>

        function confirmmodalCall() {
          var url = '{{ route('admin.stockvendor.confirm')}}';
            $('#modelHeading').html('...');
            $.ajaxModal('#actionsModal', url);
        }
        function visamodalCall() {
          var url = '{{ route('admin.stockvendor.visa')}}';
            $('#modelHeading').html('...');
            $.ajaxModal('#actionsModal', url);
        }
        function accountmodalCall() {
          var url = '{{ route('admin.stockvendor.account')}}';
            $('#modelHeading').html('...');
            $.ajaxModal('#actionsModal', url);
        }

        $('#apply-filters').click(function () {
            $('#stockvendor-accounting-table').on('preXhr.dt', function (e, settings, data) {

                var orderDate = $('#order_date').val();

                if (orderDate == '') {
                    orderDate = null;
                }

                var deliveryDate = $('#delivery_date').val();

                if (deliveryDate == '') {
                    deliveryDate = null;
                }

                var status = $('#status').val();
                var orderNumber = $('#order_number').val();

                data['orderDate'] = orderDate;
                data['deliveryDate'] = deliveryDate;
                data['orderNumber'] = orderNumber;
                data['status'] = status;

            });
            $.easyBlockUI('#stockvendor-accounting-table');
            window.LaravelDataTables["stockvendor-accounting-table"].draw();
            $.easyUnblockUI('#stockvendor-accounting-table');
        });

        $('#reset-filters').click(function () {
            $.easyBlockUI('#stockvendor-accounting-table');
            $('#order_date').val('');
            $('#delivery_date').val('');
            $('#order_number').val('');
            $('#status').val('');

            window.LaravelDataTables["stockvendor-accounting-table"].draw();
            $.easyUnblockUI('#stockvendor-accounting-table');
        })
    </script>
@endpush