@extends('admin.template.master')

@section('stylesheets')
    {!! Html::style('assets/admin/bower_components/select2/dist/css/select2.min.css') !!}

    <style>
        /*Select2 style*/
        .select2-container--default .select2-selection--single, .select2-selection .select2-selection--single {
            border: 1px solid #d2d6de;
            border-radius: 0;
            padding: 6px 12px;
            height: 34px;
        }

        .select2-container .select2-selection--single .select2-selection__rendered {
            padding-right: 10px;
        }

        .select2-container .select2-selection--single .select2-selection__rendered {
            padding-left: 0;
            padding-right: 0;
            height: auto;
            margin-top: -4px;
        }

        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 28px;
            right: 3px;
        }

        /*Select2 style*/
        .status_link:hover {
            color: blue;
            text-decoration: underline;
        }

        .show_hide_link {
            text-decoration: underline;
        }

        .show_hide_link:hover {
            color: blue;
            text-decoration: underline;
        }

        .report-statistic-list {
            font-size: 12px;
            padding-left: 11px;
            /*margin: 0;*/
        }

        .report-statistic-list li {
            /*list-style: none;*/
        }

        .row.display-flex {
            display: flex;
            flex-wrap: wrap;
        }

        .row.display-flex > [class*='col-'] {
            display: flex;
            flex-direction: column;
        }

        .sp_radio_label{
            margin-left: 5px;
            margin-right: 20px;
        }

    </style>
@endsection

@section('title')
    <section class="content-header">
        <h1>
            Customer Order Report
        </h1>
        <ol class="breadcrumb">
            <li><a href="{!! url('admin/') !!}"><i class="fa fa-dashboard"></i> Home</a></li>
            <li class="active">Customer Order Report</li>
        </ol>
    </section>
@endsection

@section('main-content')
    <section class="content">
        @if(Session::has('message'))
            <div class="row">
                <div class="col-xs-12">
                    <div class="alert alert-success alert-dismissible">
                        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                        {{Session('message')}}
                    </div>
                </div>
            </div>
        @endif

        <div class="row" id="main_div_inner">
            <div class="col-xs-12">
                <div class="box box-warning order-filter-wrapper">
                    <div class="box-header with-border">
                        <h6 class="box-title">Customer Order Filter</h6>

                        <div class="box-tools pull-right">
                            <button type="button" class="btn btn-box-tool" data-widget="collapse"><i id="status-box-plus-minus" class="fa fa-minus"></i></button>
                        </div>
                    </div>

                    <div class="box-body">
                        <div class="row">
                            <div class="form-group col-md-3">
                                {!! Form::label('from_date', 'From Order Date') !!}
                                {!! Form::date('from_date', \Carbon\Carbon::now(), ['class' => 'form-control date', 'id' => 'from_date']) !!}
                            </div>

                            <div class="form-group col-md-3">
                                {!! Form::label('to_date', 'To Order Date') !!}
                                {!! Form::date('to_date', \Carbon\Carbon::now(), ['class' => 'form-control date', 'id' => 'to_date']) !!}
                            </div>

                            <div class="form-group col-md-3">
                                {!! Form::label('&nbsp;') !!}
                                <div class="checkbox">
                                    <input type="checkbox" class="chk" id="search_by_date" >
                                </div>
                            </div>
                        </div>
                        {{-- <div class="row">
                            <div class="form-group col-md-3">
                                {!! Form::label('from_order', 'From Order') !!}
                                {!! Form::number('from_order', null, ['class' => 'form-control text', 'id' => 'from_order']) !!}
                            </div>

                            <div class="form-group col-md-3">
                                {!! Form::label('to_order', 'To Order') !!}
                                {!! Form::number('to_order', null, ['class' => 'form-control text', 'id' => 'to_order']) !!}
                            </div>

                            <div class="form-group col-md-3">
                                {!! Form::label('&nbsp;') !!}
                                <div class="checkbox">
                                    <input type="checkbox" class="chk" id="search_by_order">
                                </div>
                            </div>
                        </div> --}}

                        <div class="row">

                            <div class="form-group col-md-3">
                                {!! Form::label('Customer Phone Number') !!}
                                {!! Form::text('customer_contact', null, ['class' => 'form-control text', 'placeholder' => 'Enter Customer Phone Number', 'id' => 'customer_contact']) !!}
                            </div>

                            <div class="form-group col-md-3">
                                {!! Form::label('Customer type') !!}
                                {!! Form::select('customer_type', ['new'=>'New','old'=>'Old'], null, ['class' => 'form-control select-data', 'placeholder' => 'Customer type', 'id' => 'customer_type']) !!}
                            </div>

                            {{-- <div class="form-group col-md-3">
                                <input type="checkbox" class="chk" id="multiple_id">
                                {!! Form::label('Multiple') !!}
                            </div> --}}
                        </div>

                        <div class="row">
                            <div class="form-group col-md-6">
                                <label style="display: none">
                                    <input type="radio" class="fsp_rd" name="fsp_rd" id="fsp_all" value="" checked ><span class="sp_radio_label">All</span>
                                    {{-- <input type="radio" class="fsp_rd" name="fsp_rd" id="fsp_only" value="fsp_only"><span class="sp_radio_label">Only FSP</span>
                                    <input type="radio" class="fsp_rd" name="fsp_rd" id="fsp_no" value="fsp_no"><span class="sp_radio_label">No Fsp</span> --}}
                                </label>
                                <span id="sp_fsp_id" style="display: none;">
                                    {!! Form::select('fsp_id', $fsps, null, ['class' => 'form-control select-data', 'placeholder' => 'Select FSP (All FSP if Not Selected)', 'id' => 'fsp_id']) !!}
                                </span>
                            </div>
                        </div>

                        <div class="row">
                            <div class="form-group col-md-3">
                                {!! Form::label('from_reg_date', 'From Registration Date') !!}
                                {!! Form::date('from_reg_date', \Carbon\Carbon::now(), ['class' => 'form-control date', 'id' => 'from_reg_date']) !!}
                            </div>

                            <div class="form-group col-md-3">
                                {!! Form::label('to_reg_date', 'To Registration Date') !!}
                                {!! Form::date('to_reg_date', \Carbon\Carbon::now(), ['class' => 'form-control date', 'id' => 'to_reg_date']) !!}
                            </div>

                            <div class="form-group col-md-3">
                                {!! Form::label('&nbsp;') !!}
                                <div class="checkbox">
                                    <input type="checkbox" class="chk" id="search_by_reg_date">
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-12">
                                <a class="show_hide_link" style="cursor: pointer;" id="show_advanced_search">Advanced_search</a>
                                <a class="show_hide_link" style="cursor: pointer; display: none;"
                                   id="hide_advanced_search">Hide Advanced_search</a>
                                <input type="hidden" id="hd_advanced_search" value="off">
                            </div>
                        </div>

                        <div class="row div_advanced_search" style="display: none; margin-top: 10px;">
                            <div class="form-group col-md-6">
                                {!! Form::button('Clear',['class' => 'btn btn-danger btn-order-delivery-advanced-reset', 'id' => 'btn-order-delivery-advanced-reset']) !!}
                            </div>
                        </div>

                        <div class="row div_advanced_search" style="display: none;">
                            <div class="col-md-4 form-group">
                                {!! Form::label('entry_date_from', 'Entry Date (From)') !!}
                                {!! Form::date('entry_date_from', \Carbon\Carbon::now(), ['class' => 'form-control advanced_date', 'id' => 'entry_date_from']) !!}
                            </div>

                            <div class="col-md-4 form-group">
                                {!! Form::label('entry_date_to', '(To)') !!}
                                {!! Form::date('entry_date_to', \Carbon\Carbon::now(), ['class' => 'form-control advanced_date', 'id' => 'entry_date_to']) !!}
                            </div>

                            <div class="form-group col-md-4">
                                {!! Form::label('&nbsp;') !!}
                                <div class="checkbox">
                                    <input type="checkbox" class="advanced_chk" id="entry_date_chk">
                                </div>
                            </div>
                        </div>

                        <hr class="div_advanced_search" style="display: none; width: 100%">

                        <div class="row div_advanced_search" style="display: none;">
                            <div class="col-md-4 form-group">
                                {!! Form::label('1.Customer Area') !!}
                                <label class="check-box-on-label">
                                    <input type="checkbox" id="customer_area_all_chk" class="all_chk" style="margin-left: 5px;">
                                    All
                                </label>
                                {!! Form::select('customer_area', $customerArea, null, ['class' => 'form-control select-data advanced-select-data', 'placeholder' => 'Select customer area', 'id' => 'customer_area']) !!}
                            </div>

                            <div class="col-md-4 form-group">
                                {!! Form::label('2.Customer Zone') !!}
                                <label class="check-box-on-label">
                                    <input type="checkbox" id="customer_zone_all_chk" class="all_chk" style="margin-left: 5px;">
                                    All
                                </label>
                                {!! Form::select('customer_zone', $zones, null, ['class' => 'form-control select-data advanced-select-data', 'placeholder' => 'Select customer zone', 'id' => 'customer_zone']) !!}
                            </div>


                        </div>



                        <div class="row" style="margin-top: 30px;">
                            <div class="form-group col-md-6">
                                {!! Form::button('Search',['class' => 'btn btn-primary btn-order-delivery-search', 'id' => 'btn-order-delivery-search']) !!}
                                {!! Form::button('Clear',['class' => 'btn btn-danger btn-order-delivery-reset', 'id' => 'btn-order-delivery-reset']) !!}
                                {!! Form::button('Excel',['class' => 'btn btn-info btn-order-delivery-excel', 'id' => 'btn-order-delivery-excel']) !!}
                            </div>
                        </div>
                    </div>
                </div>

                <div class="box">
                    <div class="box-header with-border">
                        <h6 class="box-title">Customer Order List</h6>
                        <div class="box-tools pull-right">
                            <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                        </div>
                    </div>
                    <div class="box-body table-responsive" id="order-delivery-list"></div>
                </div>

                <div class="box">
                    <div class="box-header with-border">
                        <h6 class="box-title">Step Data Summary (<span id="sp_blank_data_total">0</span>)</h6>
                        <div class="box-tools pull-right">
                            <button type="button" class="btn btn-box-tool" data-widget="collapse"><i
                                        class="fa fa-minus"></i></button>
                        </div>
                    </div>
                    <div class="box-body" id="order-delivery-blank-summary"></div>
                </div>

                {{-- <div class="box">
                    <div class="box-header with-border">
                        <h6 class="box-title">Step Data Summary (<span id="sp_blank_data_total">0</span>)</h6>
                        <div class="box-tools pull-right">
                            <button type="button" class="btn btn-box-tool" data-widget="collapse"><i
                                        class="fa fa-minus"></i></button>
                        </div>
                    </div>
                    <div class="box-body" id="order-delivery-blank-summary"></div>
                </div> --}}


            </div>
        </div>
    </section>
@endsection

@section('javascripts')
    {!! Html::script('assets/admin/bower_components/select2/dist/js/select2.full.min.js') !!}

    <script type="text/javascript">
        var from_date_initial = '';
        var to_date_initial = '';

        $(document).ready(function () {
            $(".select-data").select2();

            from_date_initial = $.trim($("#from_date").val());
            to_date_initial = $.trim($("#to_date").val());

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $("#btn-order-delivery-search").click(function () {
                getOrderDeliveryData('search_data', '');
            });

            $("#btn-order-delivery-excel").click(function () {
                getOrderDeliveryData('excel_data', '');
            });

            $(".fsp_rd").change(function(){
                var val = $(this).val();
                if(val=='' || val=='fsp_no'){
                    $('#fsp_id').val('').trigger('change');
                    $('#sp_fsp_id').hide();
                    $("#hidden_chk_all").prop('checked', true);
                    $(".hidden_chk").prop('checked', true);
                } else {
                    $('#sp_fsp_id').show();
                    $("#hidden_chk_all").prop('checked', false);
                    $(".hidden_chk").prop('checked', false);
                }
            });

            $("#hidden_chk_all").change(function(){
                $(".hidden_chk").prop("checked", $(this).is(":checked"));
            });

            // reset order delivery filter
            $("#btn-order-delivery-reset").click(function () {
                $(".text").val('');
                $(".date").val(from_date_initial);
                $(".chk").prop('checked', false);
                $("#fsp_all").prop("checked", true);
                $('#sp_fsp_id').hide();
                $('.select-data').val('').trigger('change');
                $("#hide_advanced_search").click();
                $("#btn-order-delivery-advanced-reset").click();
            });

            $("#btn-order-delivery-advanced-reset").click(function () {
                $(".advanced_text").val('');
                $(".advanced_date").val(from_date_initial);
                $(".advanced_chk").prop('checked', false);
                $(".all_chk").prop('checked', false);
                $("#hidden_chk_all").prop('checked', true);
                $(".hidden_chk").prop('checked', true);
                $('.advanced-select-data').val('').trigger('change');
            });

            $("#show_advanced_search").click(function () {
                $(".div_advanced_search").show();
                $("#show_advanced_search").hide();
                $("#hide_advanced_search").show();
                $("#hd_advanced_search").val('on');
            });

            $("#hide_advanced_search").click(function () {
                $(".div_advanced_search").hide();
                $("#hide_advanced_search").hide();
                $("#show_advanced_search").show();
                $("#hd_advanced_search").val('off');
            });
        });

        function getOrderDeliveryData(data_type, status_query) {

            // Generate Query Data
            var search_by_date = 'off';
            if ($("#search_by_date").is(":checked")) {
                search_by_date = 'on';
            }
            var from_date = $.trim($('#from_date').val());
            var to_date = $.trim($('#to_date').val());

            var search_by_reg_date = 'off';
            if ($("#search_by_reg_date").is(":checked")) {
                search_by_reg_date = 'on';
            }
            var from_reg_date = $.trim($('#from_reg_date').val());
            var to_reg_date = $.trim($('#to_reg_date').val());

            var search_by_order = 'off';
            if ($("#search_by_order").is(":checked")) {
                search_by_order = 'on';
            }
            var from_order = $.trim($('#from_order').val());
            var to_order = $.trim($('#to_order').val());

            var search_filter_step = $("#search_filter_step").val();

            if (search_by_order == 'on') {
                if (from_order == '' || to_order == '' || isNaN(from_order) || isNaN(to_order)) {
                    alert("From Order and To Order Fields are not valid");
                    return;
                }
            }

            var customer_contact = $.trim($("#customer_contact").val());

            var customer_type = $("#customer_type").val();

            var data = "search_by_date=" + search_by_date + "&from_date=" + from_date + "&to_date=" + to_date + "&search_by_reg_date=" + search_by_reg_date + "&from_reg_date=" + from_reg_date + "&to_reg_date=" + to_reg_date + "&customer_contact=" + customer_contact + "&customer_type=" + customer_type ;

            var advanced_params = '';
            var advanced_param_values = '';
            var advanced_search = $("#hd_advanced_search").val();

            if (advanced_search == "on") {
                if ($("#entry_date_chk").is(":checked")) {
                    data += '&entry_date_from=' + $.trim($("#entry_date_from").val()) + '&entry_date_to=' + $.trim($("#entry_date_to").val());

                    var all_chk_fields = '';
                    $(".all_chk").each(function(){
                        if($(this).is(":checked")){
                            all_chk_fields += $(this).attr("id") + ",";
                        }
                    });
                    if(all_chk_fields != '') {
                        data += "&all_chk_fields=" + all_chk_fields;
                    }
                }

                var customer_area = $("#customer_area").val();
                if (customer_area != '') {
                    advanced_params += 'param_separator' + 'customer_area';
                    advanced_param_values += 'value_separator' + customer_area;
                }

                var customer_zone = $("#customer_zone").val();
                if (customer_zone != '') {
                    advanced_params += 'param_separator' + 'customer_zone';
                    advanced_param_values += 'value_separator' + customer_zone;
                }
            }

            data += "&advanced_params=" + advanced_params + "&advanced_param_values=" + advanced_param_values;
            // End Generate

            if (data_type == 'excel_data') {
                // console.log(data);

                var url = '{{ route("customerOrderReportExcelData", ":data") }}';
                url = url.replace(':data', data);
                window.open(url);
            } else if (data_type == 'search_data') {
                // Collapse Statistics Bar
                $("#order-delivery-status").hide();
                $("#order-delivery-status-box").addClass("collapsed-box");
                $("#order-delivery-status-plus-minus").removeClass("fa-minus");
                $("#order-delivery-status-plus-minus").addClass("fa-plus");
                // add loader

                var total_amount = '0';
                var shipping_cost_amount = '0';
                $('.order-filter-wrapper').append('<div class="overlay main_div_inner_overlay"><i class="fa fa-refresh fa-spin"></i></div>');
                $.ajax({
                    type: "POST",
                    url: "{{ route('customerOrderReportAjaxData') }}",
                    data: data,
                    cache: false,
                    success: function (result) {
                        $('#order-delivery-list').html(result);
                        var arr = result.split("dataseparator");
                        $('#order-delivery-list').html($.trim(arr[0]));
                        var arr2 = $.trim(arr[1]).split('blank_data_count_separator');
                        $('#order-delivery-blank-summary').html($.trim(arr2[0]));
                        var blank_data_count = arr2[1];
                        $("#sp_blank_data_total").html(blank_data_count);
                        // $('#order-delivery-status').html($.trim(arr[2]));
                        total_amount = arr[3];
                        shipping_cost_amount = arr[4];
                    },
                    error: function (jqXHR, status, err) {
                        // alert(err);
                    },
                    complete: function () {
                        $(".main_div_inner_overlay").remove();
                        $('#order_delivery_list_table').DataTable({
                            "ordering": false,
                            "pageLength": 100,
                            "language": {
                                "info": "Showing _START_ to _END_ of _TOTAL_ entries - Total Order Amount - " + total_amount + ' , Total Shipping Cost - ' + shipping_cost_amount
                            }
                        });
                    }
                });
            }
        }

        function search_from_status(column_name, data_search) {
            getOrderDeliveryData('search_data', column_name + ',' + data_search);
        }


        function fetchData(orderDeliveryId, fromDate, toDate) {

            console.log(orderDeliveryId);
            // AJAX request
            $.ajax({
                url: '/admin/fetch-customer-order-details/' + orderDeliveryId,
                type: 'GET',
                data: {
                    fromDate: fromDate,
                    toDate: toDate
                },
                success: function(response) {
                    // Update modal content with fetched data
                    $('#myModal_'+ orderDeliveryId + ' .modal-body').html(response.data);
                    // Show the modal
                    $('#myModal_'+ orderDeliveryId).modal('show');
                },
                error: function(xhr, status, error) {
                    console.error(error);
                }
            });
        }
    </script>
@endsection