@extends('layouts.app')

@section('title', 'Order Confirmation')
@section('breadcrumb', 'Order Confirmation')
@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-confirmation', 'kt-menu__item--active')
@section('content')
    <div class="kt-portlet">
        <div class="kt-portlet__body">
            @include('layouts.notification')

            {{-- 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 Confirmation
                                </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 telah di update dan sedang menunggu persetujuan/penolakan dari user, pada halaman ini anda dapat melakukan:</div>
                                    <div>
                                        <ul>
                                            <li>
                                                Melihat detail order yang telah dirubah.
                                            </li>
                                        </ul>
                                    </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>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-lg-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>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() {
            $('#searchBrand').select2();
            $('.outlet').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()

                        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,
            stateSave: true,
            "bFilter": false,
            "lengthChange": false,
            ajax: "{{ route('order.confirmation.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: '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.confirmation.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: '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>
    <script>
        $('body').on('click', '.btn-pending', function (event) {
            event.preventDefault();

            var me = $(this),
                url = me.attr('href'),
                title = me.attr('title'),
                csrf_token = $('meta[name="csrf-token"]').attr('content');

            swal.fire({
                title: 'Are you sure want to set this order to pending order?',
                text: 'You won\'t be able to revert this!',
                type: 'warning',
                input: 'password',
                inputAttributes: {
                    autocapitalize: 'off',
                    placeholder: "Masukan Master PIN",
                    maxlength: 6,
                    autocomplete: "new-password"
                },
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Set Pending!'
            }).then((result) => {
                if (result.value) {
                    $('#loading').show();
                    $.ajax({
                        url: url,
                        type: "POST",
                        data: {
                            '_token': csrf_token,
                            'pin': result.value
                        },
                        success: function (response) {
                            $('#loading').hide();
                            // console.log(response)
                            if (response.status == "fail") {
                                swal.fire({
                                    type: 'error',
                                    title: 'Oops...',
                                    text: response.messages
                                });
                            }
                            if (response.status == "success") {
                                $('#datatable').DataTable().ajax.reload();
                                swal.fire({
                                    type: 'success',
                                    title: 'Success!',
                                    text: 'Order berhasil di set!'
                                });
                            }
                        },
                        error: function (xhr) {
                            $('#loading').hide();
                            swal.fire({
                                type: 'error',
                                title: 'Oops...',
                                text: 'Terjadi kesalahan sistem!'
                            });
                        }
                    });
                }
            });
        });

        $('body').on('click', '.btn-delete', function (event) {
            event.preventDefault();

            var me = $(this),
                url = me.attr('href'),
                title = me.attr('title'),
                csrf_token = $('meta[name="csrf-token"]').attr('content');

            swal.fire({
                title: 'Are you sure want to delete this order?',
                text: 'You won\'t be able to revert this!',
                type: 'warning',
                input: 'password',
                inputAttributes: {
                    autocapitalize: 'off',
                    placeholder: "Masukan Master PIN",
                    maxlength: 6,
                    autocomplete: "new-password"
                },
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, delete it!'
            }).then((result) => {
                if (result.value) {
                    $('#loading').show();
                    $.ajax({
                        url: url,
                        type: "POST",
                        data: {
                            '_token': csrf_token,
                            'pin': result.value
                        },
                        success: function (response) {
                            $('#loading').hide();
                            // console.log(response)
                            if (response.status == "fail") {
                                swal.fire({
                                    type: 'error',
                                    title: 'Oops...',
                                    text: response.messages
                                });
                            }
                            if (response.status == "success") {
                                $('#datatable').DataTable().ajax.reload();
                                swal.fire({
                                    type: 'success',
                                    title: 'Success!',
                                    text: 'Order berhasil di hapus!'
                                });
                            }
                        },
                        error: function (xhr) {
                            $('#loading').hide();
                            swal.fire({
                                type: 'error',
                                title: 'Oops...',
                                text: 'Terjadi kesalahan sistem!'
                            });
                        }
                    });
                }
            });
        });
    </script>
@endsection