@extends('layouts.app')

@section('title', 'Order Paid')
@section('breadcrumb', 'Order Paid')
@section('sub-breadcrumb')
    <a class="kt-subheader__breadcrumbs-link">
        List
    </a>
@endsection
@section('order-p', 'kt-menu__item--open kt-menu__item--here')
@section('order-paidof', 'kt-menu__item--active')
@section('content')
    <div class="kt-portlet">
        <div class="kt-portlet__body">

            {{-- begin: hint --}}
            <div class="mb-4">
                <div class="col-md-12">
                    <div class="accordion accordion-toggle-arrow" id="accordion-info">
                        <div class="card" style="border-bottom: 1px solid #ebedf2">
                            <div class="card-header" id="headingOne4">
                                <div class="card-title" data-toggle="collapse" data-target="#collapse-info" aria-expanded="true" aria-controls="collapse-info">
                                    <i class="flaticon-info"></i> Order Paid
                                </div>
                            </div>
                            <div id="collapse-info" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion-info" style="">
                                <div class="card-body">
                                    <div>Merupakan halaman untuk order yang sudah Dibayar oleh outlet yang dituju, order pada halaman ini merupakan order dengan status <b><i>LUNAS - BARANG BELUM DITERIMA</i></b></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {{-- end: hint --}}

           {{-- begin: Search form --}}
                <div class="row m--margin-bottom-20">
                    <div class="col-lg-4 m--margin-bottom-10-tablet-and-mobile">
                        <label for="">Brand :</label>
                        <div class="input-group">
                            <select name="searchBrand" id="searchBrand" class="js-example-basic-single"  style="width:100%!important;">
                                <option value="">--Search Brand--</option>
                                @foreach ($brand['result'] as $item)
                                    <option value="{{$item['id']}}">{{$item['name']}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-lg-4 m--margin-bottom-10-tablet-and-mobile">
                        <label>Outlet:</label>
                        <select class="outlet form-control" id="outlet">
                            <option value="">-- Choose Outlet --</option>
                            @foreach ($getOutlet['result'] as $item)
                                <option value="{{$item['id']}}">{{$item['name']}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-lg-4 m--margin-bottom-10-tablet-and-mobile">
                        <label>Order Date:</label>
                        <div class="input-group">
                            <div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-calendar"></i></span></div>
                            <input type="date" id="date" class="form-control m-input" data-col-index="0">
                        </div>
                    </div>
                    <div class="col-lg-4 m--margin-bottom-10-tablet-and-mobile mt-2">
                        <label>Sales Order Number:</label>
                        <div class="input-group">
                            <div class="input-group-prepend"><span class="input-group-text"><i class="flaticon-edit-1"></i></span></div>
                            <input type="text" id="so" class="form-control m-input" data-col-index="0" placeholder="E.g: SO.2019.11.00046">
                        </div>
                    </div>
                    <div class="col-lg-4 m--margin-bottom-10-tablet-and-mobile mt-2">
                        <label>Delivery Order Number:</label>
                        <div class="input-group">
                            <div class="input-group-prepend"><span class="input-group-text"><i class="flaticon2-delivery-truck"></i></span></div>
                            <input type="text" id="do" class="form-control m-input" data-col-index="0" placeholder="E.g: DO.2019.11.00099">
                        </div>
                    </div>
                    <div class="col-lg-4 m--margin-bottom-10-tablet-and-mobile mt-2">
                        <label>Sales Invoice Number:</label>
                        <div class="input-group">
                            <div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-file-invoice-dollar"></i></span></div>
                            <input type="text" id="si" class="form-control m-input" data-col-index="0" placeholder="E.g: SI.2019.11.00023">
                        </div>
                    </div>
                    <div class="col-lg-4 m--margin-bottom-10-tablet-and-mobile mt-2">
                        <label>Item Transfer Number:</label>
                        <div class="input-group">
                            <div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-sync-alt"></i></span></div>
                            <input type="text" id="it" class="form-control m-input" data-col-index="0" placeholder="E.g: IT.2019.11.00987">
                        </div>
                    </div>
                </div>
                <div class="row mt-2 pull-right">
                    <div class="col-md-12">
                        <div class="pull-right">
                            <button class="btn btn-primary filter"><i class="fa fa-search"></i> Search</button>
                            &nbsp;&nbsp;
                            <input class="btn btn-secondary reset" type="reset">
                        </div>
                    </div>
                </div>
           {{-- end: Search form --}}

           {{-- begin: datatable --}}
            <table id="datatable" class="table table-hover" style="width:100%">
                <thead>
                    <tr>
                        <th>Order Date</th>
                        <th>Outlet</th>
                        <th>SO / IT Number</th>
                        <th>Delivery Order Number</th>
                        <th>Sales Invoice Number</th>
                        <th>Total Item</th>
                        <th>Order Time</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>

                </tbody>
            </table>
            <div class="kt-separator kt-separator--dashed"></div>
           {{-- begin: datatable --}}

        </div>
    </div>
@endsection

@section('custom-script')

    <script>
        $(document).ready(function() {
            $('.outlet').select2();
            $('#searchBrand').select2();
        });
        $(document).on('change', '#searchBrand', function(){
            var val = $(this).val();
                if (val) {
                    $('#loading').show().delay(2000).fadeOut();
                } else {
                    $('#loading').hide();
                }
                var url = '{{ route("order.getOutlet", ":val") }}';
                url = url.replace(':val', val);

                $.ajax({

                    url:url,
                    type: 'get',
                    cache: false,
                    success: (return_data) => {
                        $(this).parent().parent().parent().find('.outlet').html('')

                        $(this).parent().parent().parent().find('.outlet').select2({
                            placeholder: " Choose Outlet"
                        });

                        var optionOutlet = '<option value="">--Choose Outlet--</option>'
                            $(this).parent().parent().parent().find('.outlet').append(optionOutlet);

                        jQuery.each(return_data.result, (i, val) => {
                            var option = '<option value="'+val.id+'">'+val.name+'</option>'
                            $(this).parent().parent().parent().find('.outlet').append(option);

                        });


                    }
                });
        })
    </script>
    <script>
        $.fn.dataTable.ext.errMode = 'none';
        $('#datatable').DataTable({
            responsive: true,
            processing: true,
            serverSide: true,
            "bFilter": false,
            "lengthChange": false,
            ajax: "{{ route('order.paidof.table') }}",
            columns: [
                {data: 'order_date', name: 'order_date'},
                {data: 'brand_outlet.name', name: 'brand_outlet.name'},
                {data: 'si_ti', name: 'si_ti'},
                {data: 'delivery_order_id_accurate', name: 'delivery_order_id_accurate'},
                {data: 'sales_invoice_id_accurate', name: 'sales_invoice_id_accurate'},
                {data: 'item_total', name: 'item_total'},
                {data: 'time_diff', name: 'time_diff'},
                {data: 'action', name: 'action', searchable: false, orderable: false}
            ]
        }).on('processing.dt', function (e, settings, processing) {
                if (processing) {
                    $('#datatable').hide();
                    $('#loading').show();
                } else {
                    $('#datatable').show();
                    $('#loading').hide();
                }
        });

        $(document).on('click', '.reset', function(){
            reset();
            filter();
        })

        function reset() {
            $('#date').val('');
            $('#so').val('');
            $('#do').val('');
            $('#si').val('');
            $('#it').val('');
            $('#outlet').val('').trigger('change');
            $('#searchBrand').val('').trigger('change');
        }

        $(document).on('click', '.filter', function() {
            var id_brand       = $('#searchBrand').val();
            var outlet      = $('#outlet').val();
            var date        = $('#date').val();
            var so          = $('#so').val();
            var don          = $('#do').val();
            var si          = $('#si').val();
            var it          = $('#it').val();
            filter(id_brand, outlet, date, so, don, si, it);
        });

        function filter(id_brand='', outlet='', date='', so='', don='', si='', it='') {
            // var id_brand    = $('#searchBrand').val();
            // var outlet      = $('#outlet').val();
            // var date        = $('#date').val();
            // var so          = $('#so').val();
            // var don         = $('#do').val();
            // var si          = $('#si').val();
            // var it          = $('#it').val();
            $.fn.dataTable.ext.errMode = 'none';

            var table = $('#datatable').DataTable({
                responsive: true,
                processing: false,
                serverSide: true,
                stateSave : true,
                destroy: true,
                "bFilter": false,
                "lengthChange": false,
                ajax: {
                    url: "{{ route('order.paidof.table') }}",
                    type: 'get',
                    data: function(d) {
                        d.id_brand = id_brand;
                        d.outlet = outlet;
                        d.date   = date;
                        d.so     = so;
                        d.do     = don;
                        d.si     = si;
                        d.it     = it;
                    }
                },
                columns: [
                    {data: 'order_date', name: 'order_date'},
                    {data: 'brand_outlet.name', name: 'brand_outlet.name'},
                    {data: 'si_ti', name: 'si_ti'},
                    {data: 'delivery_order_id_accurate', name: 'delivery_order_id_accurate'},
                    {data: 'sales_invoice_id_accurate', name: 'sales_invoice_id_accurate'},
                    {data: 'item_total', name: 'item_total'},
                    {data: 'time_diff', name: 'time_diff'},
                    {data: 'action', name: 'action', searchable: false, orderable: false}
                ]
            }).on('processing.dt', function (e, settings, processing) {
                    if (processing) {
                        $('#datatable').hide();
                        $('#loading').show();
                    } else {
                        $('#datatable').show();
                        $('#loading').hide();
                    }
            });
        }
    </script>
@endsection