@extends('layouts.user.main')
@section('content')

    
    <div class="content d-flex flex-column flex-column-fluid" id="kt_content">
        <!--begin::Post-->
        <div class="post d-flex flex-column-fluid" id="kt_post">
            <!--begin::Container-->
            <div id="kt_content_container" class="container-xxl">
                <!--begin::Card-->
                <div class="card card-flush">
                    <!--begin::Card body-->
                    <div class="card-body py-4">
                        <!--begin::Table-->
                        <div class="table-responsive">
                            <table class="table align-middle table-row-dashed fs-6 gy-5 table-hover table-striped" id="kt_table_billing_file_logs">
                                <!--begin::Table head-->
                                <thead>
                                    <!--begin::Table row-->
                                    <tr class="text-center fw-bolder fs-7 text-uppercase gs-0">
                                        <th class="min-w-100px d-none">Id</th>
                                        <th class="min-w-100px">Date</th>
                                        <th class="min-w-100px">Module</th>
                                        <th class="min-w-100px">Manager</th>
                                        <th class="min-w-100px">Client</th>
                                        <th class="min-w-100px">First Name</th>
                                        <th class="min-w-100px">User Name</th>
                                        <th class="min-w-100px">Status</th>
                                        <th class="min-w-100px">Reason</th>
                                        <th class="min-w-100px">Start Time</th>
                                        <th class="min-w-100px">Sent Time</th>
                                    </tr>
                                    <!--end::Table row-->
                                </thead>
                                <!--end::Table head-->
                                <!--begin::Table body-->
                                <tbody class="fw-bold">
                                </tbody>
                                <!--end::Table body-->
                            </table>
                        </div>
                        <!--end::Table-->
                    </div>
                </div>
                <!--end::Card-->
            </div>
            <!--end::Container-->
        </div>
        <!--end::Post-->
    </div>
    <script type="text/javascript">
        const token     = "{{ csrf_token() }}";
        const table     = $('#kt_table_billing_file_logs');
        var columns     = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
        var fileName    = "Billing_File_Logs";
        var title       = fileName + '_' +Date.now();

        var dataColumns = [
            {
                data: 'id',
                name: 'id',
                visible: false
            },
            {
                data: 'date',
                name: 'date'
            },
            {
                data: 'moduleId',
                name: 'moduleId',
                render: function(data, type, full, meta) {  
                    var moduleTypes = @json(CommonConstants::TELEGRAM_BOT_SETTING['MODULE_TYPES']);
                    var moduleName  = Object.keys(moduleTypes).find(key => moduleTypes[key] === full.moduleId);
                    moduleName      = moduleName.replaceAll('_', ' ');
                    return moduleName;
                }
            },
            {
                data: 'managerLogin',
                name: 'managers.loginId',
            },
            {
                data: 'clientLogin',
                name: 'accounts.loginId'
            },
            {
                data: 'first_name',
                name: 'telegram_settings.first_name'
            },
            {
                data: 'user_name',
                name: 'telegram_settings.user_name'
            },
            {
                data: 'status',
                name: 'status',
                render: function(data, type, full, meta) {
                    var statusPendingValue  = "{{CommonConstants::BILLING_FILE_LOGS['STATUS_PENDING']}}";
                    var statusPendingText   = "{{CommonConstants::BILLING_FILE_LOGS['STATUS_PENDING_TEXT']}}";
                    var statusSentValue     = "{{CommonConstants::BILLING_FILE_LOGS['STATUS_SENT']}}";
                    var statusSentText      = "{{CommonConstants::BILLING_FILE_LOGS['STATUS_SENT_TEXT']}}";
                    var statusFailedValue   = "{{CommonConstants::BILLING_FILE_LOGS['STATUS_FAIL']}}";
                    var statusFailedText    = "{{CommonConstants::BILLING_FILE_LOGS['STATUS_FAIL_TEXT']}}";
                    var statusDeletedValue  = "{{CommonConstants::BILLING_FILE_LOGS['STATUS_DELETED']}}";
                    var statusDeletedText   = "{{CommonConstants::BILLING_FILE_LOGS['STATUS_DELETED_TEXT']}}";

                    var className   = (full.status == statusFailedValue ? 'danger' : (full.status == statusPendingValue ? 'warning' : (full.status == statusSentValue ? 'success' : 'info')));
                    var label       = (full.status == statusFailedValue ? statusFailedText : (full.status == statusPendingValue ? statusPendingText : (full.status == statusSentValue ? statusSentText : statusDeletedText)));
                    return '<div class="badge badge-light-' + className + '">' + label + '</div>';
                }
            },
            {
                data: 'reason',
                name: 'reason',
                render: function(data, type, full, meta) {
                    return data ?? '-';
                }
            },
            {
                data: 'created_at',
                name: 'created_at',
                render: function(data, type, full, meta) {
                    return moment(full.created_at).format("{{ CommonConstants::TIME_FORMATE }}");
                }
            },
            {
                data: 'updated_at',
                name: 'updated_at',
                render: function(data, type, full, meta) {
                    var statusFailedValue   = "{{CommonConstants::BILLING_FILE_LOGS['STATUS_FAIL']}}";
                    var lastUpdatedTime     = full.updated_at && full.status != statusFailedValue ? moment(full.updated_at).format("{{ CommonConstants::TIME_FORMATE }}") : '-';
                    return lastUpdatedTime;
                }
            }
        ];

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

        $(document).ready(function() {
            makeDataTable(table, title, columns, dataColumns);
        });

        function makeDataTable(table, title, columnArray, dataColumns) {

            var reloadAjex = $(table).dataTable({
                // export buttons
                dom: "<'card-header align-items-center py-5 gap-2 gap-md-5'<'card-title'<'d-flex position-relative my-1'f>><'card-toolbar flex-row-fluid justify-content-end gap-6'<'custom-button-container'>B>>" +
                        "<'row'<'col-sm-12'tr>>" +
                        "<'row'<'col-sm-12 col-md-5 gap-2 d-flex align-items-center justify-content-center justify-content-md-start'l<i>><'col-sm-12 col-md-7 d-flex align-items-center justify-content-center justify-content-md-end'p>>",
                processing: true,
                stateSave: false,
                serverSide: true,
                "stateSaveParams": function (settings, data) {
                    data.search.search = '';
                },
                pageLength: 10,
                "lengthMenu": {!! json_encode(CommonConstants::DEFAULT_PAGE_PER_DATA) !!},
                language: {
                    searchPlaceholder: "Search Log",
                    search: ""
                },
                buttons: [{
                    extend: "collection",
                    className: "exportButton",
                    text: "<i class='fa fa-download'></i>",
                        buttons: [
                        {
                            extend: "excelHtml5",
                            text: "Export",
                            className: "btn btn-default btn-sm gap-5",
                            title: title,
                            exportOptions: {
                                columns: columnArray
                            }
                        },{
                            extend: "excelHtml5",
                            text: "Export All",
                            className: "btn btn-default btn-sm gap-5",
                            title: title,
                            "action": exportAllAction,
                            exportOptions: {
                                columns: columnArray
                            }
                        }
                    ]
                }],
                ajax: {
                    url: "{{ route('billingFileLogs') }}",
                    method: "GET",
                    data: function (d) {
                        d.start_date    = "{{ $start_date }}",
                        d.end_date      = "{{ $end_date }}",
                        d.status        = $('#status_filter').val();
                        d.moduleId      = $('#module_filter').val();
                        d.managerId     = $("#managers").val();
                        d.userId        = $("#users").val();
                    }
                },
                columns: dataColumns,
                rowCallback: function(row, data) {
                    $(row).addClass('text-center');
                },
                "stateLoadParams": function (settings, data) {
                    if (data.select) {
                        data.select.rows = [];
                    }
                },
                order: [
                    [0, "desc"]
                ],
            }, );
        }

        $(document).ready(function() {
            const moduleTypes = @json($moduleTypes);

            $('.card-toolbar').prepend(`
                <div class="d-flex align-items-center gap-2 gap-lg-3">
                    <div class="m-0">
                        <form action="{{ route('billingFileLogs') }}" method="post" id="dateRangeForm">
                        @csrf
                        <input class="form-control form-control-solid datepicker" placeholder="Pick date range" value="" id="dateRangePicker"/>
                        <input type="hidden" name="start_date" id="start_date" value="{{ $start_date }}"/>
                        <input type="hidden" name="end_date" id="end_date" value="{{ $end_date }}"/>
                        </form>
                    </div>
                    <!--begin::Filter menu-->
                    <div class="m-0">
                        <button class="btn btn-sm btn-flex btn-light btn-active-primary fw-bolder" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">
                        <span class="svg-icon svg-icon-5 svg-icon-gray-500 me-1">
                            <i class="fas fa-filter"></i>
                        </span>Filter</button>
                        <div class="menu menu-sub menu-sub-dropdown w-250px w-md-300px" data-kt-menu="true" id="kt_menu_6220ee064de67">
                            <div class="px-7 py-5">
                                <div class="fs-5 text-dark fw-bolder">Filter</div>
                            </div>
                            <div class="separator border-gray-200"></div>
                            <div class="px-7 py-5">
                                <div class="mb-10">
                                    <label class="form-label fw-bold">Module:</label>
                                    <div>
                                        <select class="form-select form-select-solid" data-kt-select2="true" data-placeholder="Select Module" data-dropdown-parent="#kt_menu_6220ee064de67" data-allow-clear="true" id="module_filter">
                                            <option></option>
                                        </select>
                                    </div>
                                </div>
                                <div class="mb-10">
                                    <label class="form-label fw-bold">Status:</label>
                                    <div>
                                        <select class="form-select form-select-solid" data-kt-select2="true" data-placeholder="Select Status" data-dropdown-parent="#kt_menu_6220ee064de67" data-allow-clear="true" id="status_filter">
                                            <option></option>
                                            <option value="{{ CommonConstants::BILLING_FILE_LOGS['STATUS_PENDING'] }}">{{ CommonConstants::BILLING_FILE_LOGS['STATUS_PENDING_TEXT'] }}</option>
                                            <option value="{{ CommonConstants::BILLING_FILE_LOGS['STATUS_SENT'] }}">{{ CommonConstants::BILLING_FILE_LOGS['STATUS_SENT_TEXT'] }}</option>
                                            <option value="{{ CommonConstants::BILLING_FILE_LOGS['STATUS_FAIL'] }}">{{ CommonConstants::BILLING_FILE_LOGS['STATUS_FAIL_TEXT'] }}</option>
                                            <option value="{{ CommonConstants::BILLING_FILE_LOGS['STATUS_DELETED'] }}">{{ CommonConstants::BILLING_FILE_LOGS['STATUS_DELETED_TEXT'] }}</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="d-flex justify-content-end">
                                    <button type="reset" class="btn btn-sm btn-light btn-active-light-primary me-2" data-kt-menu-dismiss="true" id="reset_filter">Reset</button>
                                    <button type="submit" class="btn btn-sm btn-primary" data-kt-menu-dismiss="true" id="apply_filter">Apply</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--end::Filter menu-->
                </div>
            `);

            const $moduleFilter = $('#module_filter');
                
            $.each(moduleTypes, function (moduleName, id) {
                const optionText = moduleName.split('_').join(' ');
                $moduleFilter.append(`<option value="${id}">${optionText}</option>`);
            });

            KTMenu.createInstances(); // Initialize dropdown
            $('#status_filter').select2(); // Initialize Select2 dropdown
            $('#module_filter').select2(); // Initialize Select2 dropdown

            $("#updateUsers").click(function(){
                var updateButton = $(this);

                $('#updateUsersLoader').addClass('loader');
                updateButton.prop('disabled', true);

                $.ajax({
                    url: "{{ route('billingFileLogs') }}",
                    method: "POST",
                    data: {
                        _token: token
                    },
                    success: function(response){
                        $('#updateUsersLoader').removeClass('loader');
                        updateButton.prop('disabled', false);
                        location.reload();
                    },
                    error: function(xhr, status, error) {
                        $('#updateUsersLoader').removeClass('loader');
                        updateButton.prop('disabled', false);
                        console.error(xhr.responseText);
                    }
                });
            });

            $('#apply_filter').on('click', function () {
                $('#kt_table_billing_file_logs').DataTable().ajax.reload();
            });

            $('#reset_filter').on('click', function () {
                $('#status_filter').val('').trigger('change');
                $('#module_filter').val('').trigger('change');
                $('#kt_table_billing_file_logs').DataTable().ajax.reload();
            });
        });

        $(document).ready(function() {
            var managers    = @json($managers);
            var managerId   = $("#managers").val();

            $('.card-title').append(`<div class="w-100 d-flex ms-2"><select class="js-example-basic-multiple
                form-select form-select-solid multi-select-option" data-placeholder="Manager" id="managers" data-allow-clear="true">
                <option value=""></option>'
                 ${managers.map(element => {
                    var selected = (managerId == element.id) ? 'selected' : ''; 
                    return '<option value="'+element.id+'" '+selected+'>'+element.loginId+' : ' +element.name+'</option>';
                }).join('')}
            </select>
            </div>`);

            // Event listener for manager dropdown change
            var reloadTimeout;
            $('#managers').on('change', function() {
                clearTimeout(reloadTimeout); // Clear any previously set timeout

                reloadTimeout = setTimeout(function() {
                    var table = $('#kt_table_billing_file_logs').DataTable();
                    table.ajax.reload();
                }, 1000); // 1000ms = 1 second
            });
        });

        $(document).ready(function () {
            let datepickerInput     = $("#dateRangePicker");
            let startDateInput      = $("#start_date");
            let endDateInput        = $("#end_date");

            let today               = moment();
            let monday              = moment().startOf('week').add(1, 'days');
            let startDateValue      = startDateInput.val();
            let endDateValue        = endDateInput.val();

            datepickerInput.daterangepicker({
                autoUpdateInput: true,
                locale: {
                    format: "DD-MM-YYYY",
                    cancelLabel: 'Clear'
                },
                startDate: startDateValue ? moment(startDateValue, 'DD-MM-YYYY') : monday,
                endDate: endDateValue ? moment(endDateValue, 'DD-MM-YYYY') : today,
                maxDate: today,
                opens: 'left',
            }, function (start, end, label) {
                datepickerInput.val(start.format('DD-MM-YYYY') + ' - ' + end.format('DD-MM-YYYY'));
                startDateInput.val(start.format('DD-MM-YYYY'));
                endDateInput.val(end.format('DD-MM-YYYY'));

                $('#dateRangeForm').submit();
            }).on('cancel.daterangepicker', function (ev, picker) {
                datepickerInput.val(monday.format('DD-MM-YYYY') + ' - ' + today.format('DD-MM-YYYY'));
                startDateInput.val(monday.format('DD-MM-YYYY'));
                endDateInput.val(today.format('DD-MM-YYYY'));

                $('#dateRangeForm').submit();
            });

            if (startDateValue && endDateValue) {
                datepickerInput.val(
                    moment(startDateValue, 'DD-MM-YYYY').format('DD-MM-YYYY') + ' - ' +
                    moment(endDateValue, 'DD-MM-YYYY').format('DD-MM-YYYY')
                );
            }
        });
    </script>
@endsection