@include('admin.layout.header')

<div class="container-fluid">

    <div class="main_title">
        <h3>SMS Log Details</h3>
    </div>
    <!--  Row 1 -->
    <div class="row justify-content-end mb-4">
        <div class="col-lg-auto  col-md-auto col-sm-auto">
            <div class="d-flex align-items-center">
                <div id="reportrange" class="daterange">
                    <i class="fa fa-calendar"></i>&nbsp;
                    <span></span> <i class="fa fa-caret-down">
                    </i>
                    <input type="hidden" name="dtFrom" id="dtFrom">
                    <input type="hidden" name="dtTo" id="dtTo">
                </div>
                <a href="javascript:void(0);" id="applyButton" class="btn btn-primary ms-2"><i
                        class="fa fa-search"></i></a>
                <a href="javascript:void(0);" id="clearButton" class="btn btn-danger ms-2"><i
                        class="fa fa-times"></i></a>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="white_table">
                <table id="adminSMSCreditTable" class="table table-striped datatable" style="width:100%">
                    <thead>
                        <tr>
                            <th>Sr No</th>
                            <th>Mobile Number</th>
                            <th>Sent To</th>
                            <th>Used Credit</th>
                            <th>SMS Template</th>
                            <th>Date And Time</th>
                        </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

@include('admin.layout.footer')


<script>
    $(document).ready(function() {

        $('#reportrange span').html('');
        $("#dtFrom").val('');
        $("#dtTo").val('');

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

        if ($.fn.DataTable.isDataTable('#adminSMSCreditTable')) {
            $('#adminSMSCreditTable').DataTable().clear().destroy();
        }
        if (!$.fn.dataTable.isDataTable('#adminSMSCreditTable')) {
            let table = $('#adminSMSCreditTable').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ route('admin.smscredit.paginate') }}",
                    data: function(d) {
                        d.dtFrom = $("#dtFrom").val();
                        d.dtTo = $("#dtTo").val();
                    }
                },
                columns: [{
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        orderable: false,
                        searchable: false
                        // data: 'id', name: 'patients.id'
                    },
                    {
                        data: 'mobile_no',
                        name: 'sms_logs.mobile_no'
                    },
                    {
                        data: 'patient_name',
                        name: 'patients.patient_name'
                    },
                    {
                        data: 'sms_credit',
                        name: 'sms_credit',
                        render: function(data, type, row) {
                            return data ? '<div class="dose credit_bd">' + data + '</div>' :
                            '-';
                        }
                    },
                    {
                        data: 'message',
                        name: 'sms_logs.message'
                    },
                    {
                        data: 'date_and_time',
                        name: 'sms_logs.created_at'
                    }
                ],
                initComplete: function() {
                    $('#adminSMSCreditTable_filter input').attr('placeholder', 'Search');
                }

            });

            $("#applyButton").click(function() {
                table.ajax.reload();

            });

            $("#clearButton").click(function() {
                $('#reportrange span').html('');
                $("#dtFrom").val('');
                $("#dtTo").val('');
                table.ajax.reload();
            });

            $(function() {
                $('#reportrange span').html('');
                $("#reportrange").daterangepicker({
                    autoUpdateInput: false,
                    ranges: {
                        Today: [moment().startOf('day'), moment().endOf('day')],
                        Yesterday: [moment().subtract(1, "days").startOf('day'), moment()
                            .subtract(1, "days").endOf('day')
                        ],
                        "Last 7 Days": [moment().subtract(6, "days").startOf('day'), moment()
                            .endOf('day')
                        ],
                        "Last 30 Days": [moment().subtract(29, "days").startOf('day'), moment()
                            .endOf('day')
                        ],
                        "This Month": [moment().startOf("month"), moment().endOf("month")],
                        "Last Month": [moment().subtract(1, "month").startOf("month"), moment()
                            .subtract(1, "month").endOf("month")
                        ],
                        "This Year": [moment().startOf('year'), moment().endOf('year')],
                    },
                });

                $("#reportrange").on("apply.daterangepicker", function(ev, picker) {
                    $(this).find("span").html(
                        picker.startDate.format("MMMM D, YYYY") + " - " + picker.endDate
                        .format("MMMM D, YYYY")
                    );

                    $("#dtFrom").val(picker.startDate.format("YYYY-MM-DD") + " 00:00:00");
                    $("#dtTo").val(picker.endDate.format("YYYY-MM-DD") + " 23:59:59");

                    // table.ajax.reload();
                });

            });

        }
    });
</script>