@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') }}" style="box-shadow: inset 0 -2px #686868;"><i class="fa fa-clipboard"></i> <span>Hoja de Depuración</span></a>
                                </li>
                                <li class="clientInvoices"><a href="{{ route('admin.stockvendor.accounting') }}"><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>Hoja de Depuración</b></h4>
                        </div> 
                        <div class="col-xs-7"></div> 
                        {!! Form::open(['id'=>'importExceldepurate','class'=>'ajax-form','method'=>'POST']) !!}
                        <div class="col-xs-2 form-group m-t-20 text-right d-block">
                            <span class="btn btn-info btn-file btn-sm m-r-10" >
                                <span class="fileinput-new"><i class="fa fa-upload" aria-hidden="true"></i> Subir Fichero</span>
                                <input type="file" id="upload2" name="upload2" accept=".xlsx, .xls"> 
                            </span>

                            <span class="btn btn-info btn-file btn-sm" >
                                <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>
                        </div>
                        {!! Form::close() !!}
                        <div class="col-xs-1 form-group m-t-20 p-r-20">
                            <span class="btn btn-info btn-file btn-sm text-left" 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>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>
                </div><!-- /tabs -->
            </section>
        </div>
    </div>
    <!-- .row -->

@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>

        $("#upload2").on('change',function(){
            $.easyAjax({
                url: '{{route('admin.stockvendor.importdepurate')}}',
                container: '#importExceldepurate',
                type: "POST",
                redirect: true,
                file: (document.getElementById("upload2").files.length == 0) ? false : true
            })
            $(this).val('');

        });

        $('#apply-filters').click(function () {
            $('#stockvendor-depurate-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 orderNumber = $('#order_number').val();

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

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

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

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