@extends('layouts.master')

@section('page_title', 'Call Status Details')
@section('title', 'Call Status Details')
@section('main_item', 'Oder')
@section('sub_item', 'Call Status Details')

@section('content')
    <style>
        div.dt-buttons {
            position: relative;
            float: right;
        }
        div.dataTables_filter {
            margin-top: 7px
        }
    </style>
    <div class="col-md-12" style="padding-bottom: 20px;padding-right: 30px;">
        <div class="btn-group" role="group" aria-label="Basic example" style="float: right;">
            <button type="button" id="pending" class="btn btn-primary date_range">Pending</button>
            <button type="button" id="confirm" class="btn btn-primary date_range">Confirm</button>
            <button type="button" id="not_confirm" class="btn btn-primary date_range">Not Confirm</button>
            <button type="button" id="hold_oders" class="btn btn-primary date_range">Hold Orders</button>
            <button type="button" id="cancel" class="btn btn-primary date_range">Cancel Orders</button>
        </div>
    </div>
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <h4 class="header-title mt-0">Filter</h4>
                <div class="row">
                    <input type="hidden" id="status" name="status">
                    <div class="col-md-3" @if ($settings->business_location != '1') style="display: none" @endif>
                        <div class="form-group">
                            <label class="required" style="font-weight: bold" for="activate_code">business Location</label>
                            <select class="form-control select2" id="business_location_id" name="business_location_id">
                                <option value="">All</option>
                                @if (Auth::user()->role_id == '1')
                                    @foreach ($users_access_location as $business_location)
                                        @if ($business_location->is_active == '1')
                                            <option value="{{ $business_location->id }}">
                                                {{ $business_location->name }}
                                            </option>
                                        @else
                                        @endif
                                    @endforeach
                                @else
                                    @foreach ($users_access_location as $business_location)
                                        @if ($business_location->is_active == '1')
                                            <option value="{{ $business_location->business_location_id }}">
                                                {{ $business_location->name }}
                                            </option>
                                        @else
                                        @endif
                                    @endforeach
                                @endif
                            </select>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="reportrange" style="font-weight: bold"> Date </label>
                            <div class="input-group">
                                <input type="text" class="form-control" name="dates-d" id="reportrange" value=""
                                    readonly>
                                <div class="input-group-append">
                                    <span class="input-group-text"><i class="dripicons-calendar"></i></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3" @if ($settings->order_batch_enable != '1') style="display: none" @endif>
                        <div class="form-group">
                            <label class="required" style="font-weight: bold" for="activate_code">Campaign Name</label>
                            <select class="form-control select2" id="id" name="id">
                                <option value="">All</option>
                                @foreach ($order_batch_ids as $order_batch_id)
                                    <option value="{{ $order_batch_id->id }}">{{ $order_batch_id->batch_name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            <!--end card-body-->
        </div>
        <!--end card-->
    </div>
    <div class="col-md-12" style="width: 1180px;">
        <div class="card">
            <div class="card-body">
                <div class="table-responsive dash-social">
                    <table id="laravel_datatable" class="table table-hover" style="width: 100%">
                        <thead class="thead-dark">
                            <tr>
                                <th>Action</th>
                                <th>Call Status</th>
                                <th>Order ID</th>
                                <th>Waybill No</th>
                                <th>Resources</th>
                                <th>Oders Count</th>
                                <th>Business Location</th>
                                <th>Customer</th>
                                <th>Gender</th>
                                <th>Mobile No</th>
                                <th>Land Mark</th>
                                <th>Invoice Total</th>
                                <th>Product Name</th>
                                <th>Product Sku</th>
                                <th>Last Status</th>
                                <th>Remark</th>
                                <th>Next Call Date</th>
                                <th>Call Attempt</th>
                                <th>Sale Date</th>
                                <th>Updated</th>
                                <th>Campaign Batch ID</th>
                            </tr>
                            <!--end tr-->
                        </thead>
                        <tbody>
                        </tbody>
                        <tfoot>
                            <tr>
                                <th colspan="10" style="text-align: center"></th>
                                <th style="font-weight: bold">Total</th>
                                <th colspan="1"></th>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
            <!--end card-body-->
        </div>
        <!--end card-->
    </div>
    <input class="form-check-input" id="customer_profile_enable" type="text" name="customer_profile_enable"
    value="{{ $settings->customer_profile_enable }}" hidden>
    <input class="form-check-input" id="order_batch_enable" type="text" name="order_batch_enable"
    value="{{ $settings->order_batch_enable }}" hidden>
    <div id="call-status" class="modal fade"></div>
    <div id="status-gender" class="modal fade"></div>
    <div id="status-resources" class="modal fade"></div>
@endsection
@section('scripts')
    <script>
        // $(document).ready(function() {
        //     var dataTable = $('#laravel_datatable').DataTable({
        //         // DataTable configuration options
        //     });

        //     // Get the current page number before the action
        //     var currentPage = dataTable.page();

        //     // Perform your action here

        //     // After the action, redirect back to the original page
        //     dataTable.page(currentPage).draw('page');
        // })

        $(document).ready(function () {
            var enableDefault = null;
            var startDate = moment();
            var endDate = moment();

            if (enableDefault == '1') {
                startDate = moment().subtract(13, 'days');
            }
            $('#reportrange').daterangepicker({
                startDate: startDate,
                endDate: endDate,
                ranges: {
                    'Today': [moment(), moment()],
                    'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                    'Last 14 Days': [startDate, endDate],
                    'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                    'This Month': [moment().startOf('month'), moment().endOf('month')],
                    'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
                }
            });
        });
        $(document).on('change', '#call_status', function() {
            let call_status = $(this).val();
            if (call_status == 'confirm') {
                $('#call_status-reson').val('confirm');
            }
        });
        $(document).ready(function() {
            var dropstatus = localStorage.getItem("dropstatus");
            if (dropstatus == 'confirm') {
                $('#status').val('confirm');
            } else if (dropstatus == 'pending') {
                $('#status').val('pending');
            } else if (dropstatus == 'not_confirm') {
                $('#status').val('not_confirm');
            } else if (dropstatus == 'hold_oders') {
                $('#status').val('hold_oders');
            } else if (dropstatus == 'cancel') {
                $('#status').val('cancel');
            } else {
                $('#status').val('pending');
            }
            table = $('#laravel_datatable').DataTable({
                lengthMenu: [
                    [25, 50, 100, -1],
                    ['25 ', '50 ', '100', 'All']
                ],
                dom: 'Blfrtip',
                buttons: [
                    {
                        extend: 'copy',
                        exportOptions: {
                            columns: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 17, 18, 19, 20]
                        }
                    },
                    {
                        extend: 'excel',
                        exportOptions: {
                            columns: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 17, 18, 19, 20]
                        }
                    },
                    {
                        extend: 'pdf',
                        exportOptions: {
                            columns: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 17, 18, 19, 20]
                        }
                    },
                    {
                        extend: 'print',
                        exportOptions: {
                            columns: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 17, 18, 19, 20]
                        }
                    },
                ],
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ url('/reports/call-list') }}",
                    data: function(d) {
                        d.status = $('#status').val();
                        d.range = $('#reportrange').val();
                        d.business_location_id = $('#business_location_id').val();
                        d.id = $('#id').val();
                    },
                },
                columnDefs: [{
                        "targets": [ 08, 12, 16, 19],
                        "visible": false
                    },
                    {
                        "width": "4%",
                        "targets": 3
                    },
                    {
                        "width": "4%",
                        "targets": 10
                    }
                ],
                "order": [
                    [12, 'desc']
                ],
                "fnDrawCallback": function(oSettings) {
                    $.fn.tooltip && $('[data-toggle="tooltip"]').tooltip()
                },
                "footerCallback": function(row, data, start, end, display) {
                    var api = this.api(),
                        data;
                    // converting to interger to find total
                    var intVal = function(i) {
                        return typeof i === 'string' ?
                            i.replace(/[\$,]/g, '') * 1 :
                            typeof i === 'number' ?
                            i : 0;
                    };
                    let grand_total = api.column(11).data().reduce(function(a, b) {
                        return intVal(a) + intVal(b);
                    }, 0);
                    $(api.column(11).footer()).html(formatNumber(grand_total) + '.00')
                },
                columns: [{
                        data: 'action',
                        name: 'action'
                    },
                    {
                        data: 'call_status',
                        name: 'call_status'
                    },
                    {
                        data: 'ref_no',
                        name: 'ref_no'
                    },
                    {
                        data: 'waybill_id',
                        name: 'waybill_id'
                    },
                    {
                        data: 'resources',
                        name: 'resources'
                    },
                    {
                        data: 'oders_count',
                        name: 'oders_count'
                    },
                    {
                        data: 'location_id',
                        name: 'location_id'
                    },
                    {
                        data: 'name',
                        name: 'name'
                    },
                    {
                        data: 'gender',
                        name: 'gender'
                    },
                    {
                        data: 'mobile_no',
                        name: 'mobile_no'
                    },
                    {
                        data: 'land_mark',
                        name: 'land_mark'
                    },
                    {
                        data: 'invoice_nettotal',
                        name: 'invoice_nettotal'
                    },
                    {
                        data: 'product_name',
                        name: 'product_name'
                    },
                    {
                        data: 'product_sku',
                        name: 'product_sku'
                    },
                    {
                        data: 'last_remark',
                        name: 'last_remark'
                    },
                    {
                        data: 'remark',
                        name: 'remark'
                    },
                    {
                        data: 'next_call_date',
                        name: 'next_call_date'
                    },
                    {
                        data: 'call_attempt',
                        name: 'call_attempt'
                    },

                    {
                        data: 'sale_date',
                        name: 'sale_date'
                    },
                    {
                        data: 'u_date',
                        name: 'u_date'
                    },
                    {
                        data: 'campaign_id',
                        name: 'campaign_id'
                    },
                ]
            });
            table.on('init.dt', function() {
                var currentPage = table.page();
            });

            let customer_profile_enable = $('#customer_profile_enable').val();
            let order_batch_enable = $('#order_batch_enable').val();
            if(customer_profile_enable != '1'){
                table.column('oders_count:name').visible(false);
            }
            table.draw();

        });
        $(document).on('change', '#reportrange ,#status, #business_location_id, #id', function() {
            table.ajax.reload();
        })
        $(document).on('click', '.date_range ', function() {
            let report = $(this).attr('id');
            $('#status').val(report);
            localStorage.setItem("dropstatus", report);
            table.ajax.reload();
        })
        $(document).on('click', '#add', function() {
            $('#call-status').load($(this).data('href'), function() {
                $('#mdate').bootstrapMaterialDatePicker({
                    weekStart: 0,
                    time: false
                });
                $('#call-status').modal('show');
            })
        });
        $(document).on('change', '#call_status', function() {
            let val = $(this).val();

            if (val === 'hold_oders') {
                $('.response').attr('hidden', true);
                $('.call_date').attr('hidden', false);
            } else {
                $('.response').attr('hidden', false);
                $('.call_date').attr('hidden', true);
                $('.next_call_date').val('');
            }
            if (val === 'confirm' || val === 'cancel' || val === 'not_confirm') {
                $('#call_status_sms').prop('checked', true);
                $("#call_status_sms").prop("disabled", false);
            } else {
                $('#call_status_sms').prop('checked', false);
                $("#call_status_sms").prop("disabled", true);
            }
        })

        $(document).on('click', '#update_payment', function() {
            let call_status = $('#call_status').val();
            let call_status_reason = $('#call_status-reson').val();
            let next_call_date = $('.next_call_date').val();
            let id = $('#sale_id').val();
            let user_ids = $('#user_ids').val();
            let remark = $('#remark').val();
            var call_status_sms = "0";
            if ($('#call_status_sms').prop("checked") == true) {
                call_status_sms = "1";
            }
            let url = "{{ route('call-status.update-status') }}";
            $.ajax({
                method: 'POST',
                url: url,
                data: {
                    "_token": "{{ csrf_token() }}",
                    'call_status': call_status,
                    'id': id,
                    'user_ids': user_ids,
                    'remark': remark,
                    'call_status_reason': call_status_reason,
                    'next_call_date': next_call_date,
                    'call_status_sms': call_status_sms
                },
                success: function(response) {
                    if (response == 'ok') {
                        $('#call-status').modal('hide');
                        table.ajax.reload();
                    }
                }
            });
        });
        $(document).on('click', '#gender_change_status', function() {
            $('#status-gender').load($(this).data('href'), function() {
                $('#mdate').bootstrapMaterialDatePicker({
                    weekStart: 0,
                    time: false
                });
                $('#status-gender').modal('show');
            })
        });

        $(document).on('click', '#update_gender_status', function() {
            let gender = $('#gender').val();
            let id = $('#sale_id').val();
            let url = "{{ route('gender-status.update-status') }}";
            $.ajax({
                method: 'POST',
                url: url,
                data: {
                    "_token": "{{ csrf_token() }}",
                    'gender': gender,
                    'id': id,
                },
                success: function(response) {
                    $('#status-gender').modal('hide');
                    $.toast({
                        heading: 'Successfully update.!',
                        text: response.msg,
                        position: 'top-right',
                        bgColor: '#1ecab8',
                        icon: 'success',
                        showHideTransition: 'fade',
                        loaderBg: '#ecf0f1'
                    })
                    table.ajax.reload();
                }
            });
        });
        $(document).on('click', '#resources_change_status', function() {
            $('#status-resources').load($(this).data('href'), function() {
                $('#mdate').bootstrapMaterialDatePicker({
                    weekStart: 0,
                    time: false
                });
                $('#status-resources').modal('show');
            })
        });

        $(document).on('click', '#update_resources_status', function() {
            let resources = $('#resources').val();
            let id = $('#sale_id').val();
            let url = "{{ route('resources-status.update-status') }}";
            $.ajax({
                method: 'POST',
                url: url,
                data: {
                    "_token": "{{ csrf_token() }}",
                    'resources': resources,
                    'id': id,
                },
                success: function(response) {
                    $('#status-resources').modal('hide');
                    $.toast({
                        heading: 'Successfully update.!',
                        text: response.msg,
                        position: 'top-right',
                        bgColor: '#1ecab8',
                        icon: 'success',
                        showHideTransition: 'fade',
                        loaderBg: '#ecf0f1'
                    })
                    table.ajax.reload();
                }
            });
        });
    </script>
@endsection