@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 id="accordion">
                <div class="border-bottom card-header" style="background-color: white; cursor: pointer;"
                    data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                    <h4 class="mb-0 header-title">
                        Filter
                    </h4>
                </div>
                <div id="collapseOne" class="collapse show mt-3" aria-labelledby="headingOne" data-parent="#accordion">
                    <div class="card-body">
                        <div class="row">
                            <input type="hidden" id="status" name="status">
                            <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>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-12">
        <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>Customer</th>
                                <th>Land Mark</th>
                                <th>Phone No</th>
                                <th>Invoice Total</th>
                                <th>Last Status</th>
                                <th>Next Call Date</th>
                                <th>Call Attempt</th>
                                <th>Sale Date</th>
                                <th>updated</th>

                            </tr>
                        </thead>

                        <tbody>

                        </tbody>
                        <tfoot>
                            <tr>
                                <th colspan="6" style="text-align: center"></th>
                                <th style="font-weight: bold">Total</th>
                                <th colspan="4"></th>

                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div id="call-status" class="modal fade">
    </div>

@endsection
@section('scripts')
    <script>
        $(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]
                        }
                    },

                    {
                        extend: 'excel',
                        exportOptions: {
                            columns: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
                        }
                    },
                    {
                        extend: 'pdf',
                        exportOptions: {
                            columns: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
                        }
                    },
                    {
                        extend: 'print',
                        exportOptions: {
                            columns: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
                        }
                    },
                ],
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ url('/reports/call-list') }}",
                    data: function(d) {
                        d.status = $('#status').val();
                        d.range = $('#reportrange').val();
                    },
                },
                columnDefs: [{
                        "targets": [12],
                        "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;
 
                    var intVal = function(i) {
                        return typeof i === 'string' ?
                            i.replace(/[\$,]/g, '') * 1 :
                            typeof i === 'number' ?
                            i : 0;
                    };

                    let grand_total = api.column(7).data().reduce(function(a, b) {
                        return intVal(a) + intVal(b);
                    }, 0);
                    $(api.column(7).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: 'name',
                        name: 'name'
                    },

                    {
                        data: 'land_mark',
                        name: 'land_mark'
                    },
                    {
                        data: 'mobile_no',
                        name: 'mobile_no'
                    },
                    {
                        data: 'invoice_nettotal',
                        name: 'invoice_nettotal'
                    },
                    {
                        data: 'last_remark',
                        name: 'last_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'
                    },

                ]
            });

        });

        $(document).on('change', '#reportrange ,#status', 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') {
                $('#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 remark = $('#remark').val();
            var sale_note = $('#sale_note').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,
                    'remark': remark,
                    'call_status_reason': call_status_reason,
                    'next_call_date': next_call_date,
                    'call_status_sms': call_status_sms,
                    'sale_note': sale_note
                },
                success: function(response) {
                    if (response == 'ok') {
                        $('#call-status').modal('hide');
                        table.ajax.reload();
                    }
                }
            });
        });
    </script>

@endsection