@include('admin.layout.header')

<div class="container-fluid">
    <div class="main_title">
        <h3>MR Details</h3>
    </div>
    <!--  Row 1 -->
    <div class="border_rs">
        <div class="row">

        </div>
        <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 class="col-lg-auto  col-md-auto col-sm-auto mt-auto">
                <button type="button" href="javascript:void(0);" id="exportButton" class="btn btn-success"><i
                        class="fa-solid fa-download me-2"></i>Export</button>
            </div>
        </div>

    </div>

    <div class="row">
        <div class="col-12">
            <div class="white_table">
                <table id="adminMrTable" class="table table-striped datatable" style="width:100%">
                    <thead>
                        <tr>
                            <th>Sr No</th>
                            <th>Employee Name</th>
                            <th>Employee Code</th>
                            <th>Email Id</th>
                            <th>Mobile No.</th>
                            <th>HQ</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('#adminMrTable')) {
            $('#adminMrTable').DataTable().clear().destroy();
        }
        if (!$.fn.dataTable.isDataTable('#adminMrTable')) {
            let table = $('#adminMrTable').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ route('admin.mr.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: 'emp_name',
                        name: 'users.emp_name'
                    },
                    {
                        data: 'emp_code',
                        name: 'users.emp_code'
                    },
                    {
                        data: 'mob_no',
                        name: 'users.mob_no',
                        render: function(data, type, row) {
                            return data ? data : '-';
                        }
                    },
                    {
                        data: 'email',
                        name: 'users.email',
                        render: function(data, type, row) {
                            return data ? data : '-';
                        }
                    },
                    {
                        data: 'hq',
                        name: 'users.hq',
                        render: function(data, type, row) {
                            return data ? data : '-';
                        }
                    },
                    {
                        data: 'date_and_time',
                        name: 'users.created_at'
                    }
                ],
                initComplete: function() {
                    $('#adminMrTable_filter input').attr('placeholder', 'Search');
                }

            });

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

            });

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

            $('#exportButton').click(function() {
                let dtFrom = $('#dtFrom').val();
                let dtTo = $('#dtTo').val();
                let url = "{{ route('adminMrExport') }}?dtFrom=" + dtFrom + "&dtTo=" + dtTo;
                window.location.href = url;
            });

            $(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>