{{-- Extends layout --}}
@extends(getThemeBasePath())

@section('page_title')
{{$page_title}}
@endsection


{{-- Content --}}
@section('content')
<!--begin::Card-->
<div class="card shadow-sm">
    <!--begin::Card header-->
    <div class="card-header card-header-tabs-line nav-tabs-line-3x">
        <!--begin::Toolbar-->
        <div class="card-toolbar">
            <ul class="nav nav-tabs nav-line-tabs nav-stretch fs-6 border-0">
                <li class="nav-item mr-3">
                    <a class="nav-link active" data-bs-toggle="tab" href="#kt_user_edit_tab_1" aria-controls="kt_user_edit_tab_1">
                        <span class="nav-icon">
                            <i class="fa fa-user"></i>
                        </span>
                        <span class="nav-text font-size-lg">{{'Connect Apps'}}</span>
                    </a>
                </li>
                <li class="nav-item mr-3">
                    <a class="nav-link" data-bs-toggle="tab" href="#kt_user_edit_tab_2" aria-controls="kt_user_edit_tab_2">
                        <span class="nav-icon">
                            <i class="fa fa-user"></i>
                        </span>
                        <span class="nav-text font-size-lg">{{'Document Signature Settings'}}</span>
                    </a>
                </li>
                <li class="nav-item mr-3">
                    <a class="nav-link" data-bs-toggle="tab" href="#kt_user_edit_tab_3" aria-controls="kt_user_edit_tab_3">
                        <span class="nav-icon">
                            <i class="fa fa-user"></i>
                        </span>
                        <span class="nav-text font-size-lg">{{'XERO API Counts'}}</span>
                    </a>
                </li>
            </ul>
        </div>
        <!--end::Toolbar-->
    </div>
    <!--end::Card header-->
    <!--begin::Card body-->
    <div class="card-body">

        <div class="tab-content">
            <div class="tab-pane show active" id="kt_user_edit_tab_1" role="tabpanel">
                @include('settings.connect_apps')
            </div>
            <!--begin::Tab-->
            <div class="tab-pane show" id="kt_user_edit_tab_2" role="tabpanel">
                @include('settings.document_signature_settings_tab')
            </div>
            <div class="tab-pane show" id="kt_user_edit_tab_3" role="tabpanel">
                @include('settings.xero_api_counts_tab')
            </div>
            <!--end::Tab-->
        </div>
    </div>
    <!--begin::Card body-->
</div>
<!--end::Card-->
    <!-- Modal -->
    <div class="modal fade" id="xeroApiModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Endpoint Details</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="card border-0 bg-light mb-4">
                        <div class="card-body p-3">
                            <div class="row g-3 align-items-end">
                                <div class="col-md-4">
                                    <label for="modal_filter_from_date" class="form-label fw-bold mb-1">From Date</label>
                                    <input type="text" class="form-control form-control-lg form-control-solid datepicker" id="modal_filter_from_date" autocomplete="off" readonly placeholder="Select Date">
                                </div>
                                <div class="col-md-4">
                                    <label for="modal_filter_to_date" class="form-label fw-bold mb-1">To Date</label>
                                    <input type="text" class="form-control form-control-lg form-control-solid datepicker" id="modal_filter_to_date" autocomplete="off" readonly placeholder="Select Date">
                                </div>
                                <div class="col-md-4">
                                    <label for="modal_filter_endpoint" class="form-label fw-bold mb-1">Endpoint Name</label>
                                    <select class="form-control form-control-lg form-control-solid form-select" id="modal_filter_endpoint">
                                        <option value="">All Endpoints</option>
                                        @foreach ($endpoint_list ?? [] as $eName)
                                            <option value="{{ $eName }}">{{ $eName }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-6 d-flex gap-2 my-3">
                                    <button type="button" class="btn btn-primary w-100" id="btn_filter_xero_api_details"><i class="fa fa-filter me-1"></i> Filter</button>
                                    <button type="button" class="btn btn-primary w-100" id="btn_reset_filters"><i class="fa fa-undo me-1"></i> Reset</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="error_message" class="alert alert-primary my-5" style="color: green;">By default, a date range filter of today – 6 days is automatically applied when the popup opens. To view overall counts, either click the Reset button to clear all filters or adjust the date range as needed.</div>

                    <div class="table-responsive">
                        <table class="table table-bordered table-hover align-middle mb-0 xero-api-details-table" id="xero_api_counts_details_table">
                            <thead>
                                <tr class="bg-light">
                                    <th class="ps-4 py-3 text-uppercase fw-bold">Date</th>
                                    <th class="py-3 text-uppercase fw-bold">API Endpoint Name</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td colspan="2" class="text-center py-4 text-muted">Click the Total count above to load details.</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
@endsection

{{-- Scripts Section --}}
@section('scripts')
<script src="{{ asset('js/ckeditor_4/ckeditor.js') }}"></script>
<script type="text/javascript">
    $(document).ready(function() {
        // tagging support
        $('.kt_select2_11').select2({
            placeholder: "Add a tag",
            tags: true
        });
        CKEDITOR.replace('kt-ckeditor-5', {
            fullPage: true,
            allowedContent: true
        });
        $('#manage_form').validate();


        $('.xero_default_calendar').on('change', function() {
            var id = $(this).val();
            deleteAlert['text'] = 'You want to set this as the default calendar?';
            deleteAlert['confirmButtonText'] = 'Yes, set it!';
            Swal.fire(deleteAlert).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: "{{ route('settings.xero.save_defaultcalendar') }}",
                        type: 'POST',
                        data: {
                            _token: "{{ csrf_token() }}",
                            id: id
                        },
                        success: function(response) {
                            if (response.status) {
                                Swal.fire(
                                    'Success!',
                                    response.message,
                                    'success'
                                );
                            } else {
                                Swal.fire(
                                    'Error!',
                                    response.message,
                                    'error'
                                );
                            }
                        }
                    });
                }
            });
        });

        $('#signature_services').on('change', function() {
            defaultSignatureService();
        });

        function defaultSignatureService(){
            var selected_service = $('#signature_services').val();
            var previous_service = $('#signature_services').data('previous');

            deleteAlert['text'] = 'You want to set this as the default signature service?';
            deleteAlert['confirmButtonText'] = 'Yes, set it!';
            Swal.fire(deleteAlert).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: "{{ route('settings.signature_services.save_default_signatureservice') }}",
                        type: 'POST',
                        data: {
                            _token: "{{ csrf_token() }}",
                            selected_service: selected_service
                        },
                        success: function(response) {
                            if (response.status) {
                                Swal.fire('Success!', response.message, 'success');
                                $('#signature_tab').html(response.html);
                                $('#signature_services').attr('data-previous', selected_service);
                            } else {
                                Swal.fire('Error!', response.message, 'error');
                                $('#signature_services').val(previous_service);
                            }
                        },
                        error: function() {
                            Swal.fire('Error!', 'An unexpected error occurred.', 'error');
                            $('#signature_services').val(previous_service);
                        }
                    });
                } else {
                    $('#signature_services').val(previous_service);
                }
            });
        }

    });
    
    function saveClickToSignWebhookUrl(){
        var webhook_url = $('#clicktosign_webhook_url').val();

        deleteAlert['text'] = 'Are you sure want to update the Webhook Url?';
        deleteAlert['confirmButtonText'] = 'Yes, update it!';
        Swal.fire(deleteAlert).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: "{{ route('settings.signature_services.save_clicktosign_webhook_url') }}",
                    type: 'POST',
                    data: {
                        _token: "{{ csrf_token() }}",
                        webhook_url: webhook_url
                    },
                    success: function(response) {
                        if (response.status) {
                            Swal.fire('Success!', response.message, 'success');
                        } else {
                            Swal.fire('Error!', response.message, 'error');
                        }
                    },
                    error: function() {
                        Swal.fire('Error!', 'An unexpected error occurred.', 'error');
                    }
                });
            }
        }); 
    }
</script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#dataTableBuilder').append('<tfoot><tr>' +'<th class="font-weight-bold">Total</th>' + '<th class="font-weight-bold"><a href="javascript:;" class="svg-icon text-black fw-bold" title="View Details" onclick="showXeroDetail(this)" data-endpoint_name=""><span id="total-count-footer"></span></a></th>' + '</tr></tfoot>');
    });

    var table;
    $(document).on('init.dt', '#dataTableBuilder', function() {
        table = $('#dataTableBuilder').DataTable();
    });
</script>
<script type="text/javascript">
    $(document).ready(function() {
        $('.nav-tabs a[data-bs-toggle="tab"]').on('shown.bs.tab', function(e) {
            var target = $(e.target).attr("href") // activated tab
            if (target == "#kt_user_edit_tab_3") {
                window.LaravelDataTables["dataTableBuilder"].ajax.reload();
            }
        });
    });
</script>

{!! $html->scripts() !!}
<script type="text/javascript">

    var xeroDetailTable = null;
    var selectedEndpoint = '';

    // -----------------------------------------------
    // showXeroDetail: show modal
    // -----------------------------------------------
    function showXeroDetail(el) {
        selectedEndpoint = $(el).data('endpoint_name') || '';

        $('#modal_filter_endpoint').val(selectedEndpoint);

        setDefaultModalDates();
        initDatePicker();

        var modalEl = document.getElementById('xeroApiModal');
        var modal   = bootstrap.Modal.getOrCreateInstance(modalEl);
        modal.show();
    }

    // -----------------------------------------------
    // Default date range: today - 6 days
    // -----------------------------------------------
    function setDefaultModalDates() {
        var today      = new Date();
        var sixDaysAgo = new Date();
        sixDaysAgo.setDate(today.getDate() - 6);

        var fmt = function(d) {
            var dd   = ('0' + d.getDate()).slice(-2);
            var mm   = ('0' + (d.getMonth() + 1)).slice(-2);
            var yyyy = d.getFullYear();
            return dd + '-' + mm + '-' + yyyy;
        };

        $('#modal_filter_from_date').val(fmt(sixDaysAgo));
        $('#modal_filter_to_date').val(fmt(today));
    }

    // -----------------------------------------------
    // DataTable init or reload
    // -----------------------------------------------
    function initXeroDetailTable() {
        if ($.fn.DataTable.isDataTable('#xero_api_counts_details_table')) {
            xeroDetailTable.ajax.reload();
            return;
        }

        xeroDetailTable = $('#xero_api_counts_details_table').DataTable({
            processing : true,
            serverSide : false,
            ajax: {
                url  : "{{ route('settings.xero.api_counts_details') }}",
                type : 'POST',
                data : function(d) {
                    d._token    = "{{ csrf_token() }}";
                    d.from_date = $('#modal_filter_from_date').val();
                    d.to_date   = $('#modal_filter_to_date').val();
                    d.endpoint_name  = $('#modal_filter_endpoint').val();
                }
            },
            columns: [
                {
                    data  : 'created_at_formatted',
                    title : 'Date',
                },
                {
                    data  : 'endpoint_name',
                    title : 'API Endpoint Name'
                }
            ],
            order     : [[0, 'desc']],
            pageLength: 10,
            language  : {
                emptyTable: 'No records found for the selected filters.'
            }
        });
    }

    // -----------------------------------------------
    // Modal events
    // -----------------------------------------------
    document.getElementById('xeroApiModal').addEventListener('shown.bs.modal', function() {
        initXeroDetailTable();
    });

    document.getElementById('xeroApiModal').addEventListener('hidden.bs.modal', function() {
        if (xeroDetailTable && $.fn.DataTable.isDataTable('#xero_api_counts_details_table')) {
            xeroDetailTable.destroy();
            xeroDetailTable = null;
        }
        $('#modal_filter_from_date').val('');
        $('#modal_filter_to_date').val('');
        $('#modal_filter_endpoint').val('');
        selectedEndpoint = '';
    });

    // -----------------------------------------------
    // Filter button
    // -----------------------------------------------
    $('#btn_filter_xero_api_details').on('click', function() {
        if (xeroDetailTable) {
            xeroDetailTable.ajax.reload();
        } else {
            initXeroDetailTable();
        }
    });

    // -----------------------------------------------
    // Reset button
    // -----------------------------------------------
    $('#btn_reset_filters').on('click', function() {
        $('#modal_filter_from_date').val('');
        $('#modal_filter_to_date').val('');
        $('#modal_filter_endpoint').val('');
        if (xeroDetailTable) {
            xeroDetailTable.ajax.reload();
        }
    });
</script>

<script type="text/javascript">
$(document).on('click', '.btn-save-cron-schedule', function () {
    var $btn = $(this);
    var cmd  = $btn.data('cmd');

    // Find the parent row that contains this button
    var $row = $btn.closest('.form-group.row');

    var cronStatus  = $row.find('select[name="cron_status[' + cmd + ']"]').val();
    var cronDay     = $row.find('select[name="cron_send_day[' + cmd + ']"]').val();
    var cronTime    = $row.find('select[name="cron_send_time[' + cmd + ']"]').val();

    $btn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin me-1"></i> Saving…');

    $.ajax({
        url:  '{{ route("settings.xero.save_cron_schedule") }}',
        type: 'POST',
        data: {
            _token:         '{{ csrf_token() }}',
            cmd:            cmd,
            cron_status:    cronStatus,
            cron_send_day:  cronDay,
            cron_send_time: cronTime,
        },
        success: function (res) {
            $btn.prop('disabled', false).html('<i class="fa fa-check me-1"></i> Saved!');
            setTimeout(function () {
                $btn.html('<i class="fa fa-save me-1"></i> Save');
            }, 2500);
        },
        error: function (xhr) {
            $btn.prop('disabled', false).html('<i class="fa fa-save me-1"></i> Save');
            var msg = (xhr.responseJSON && xhr.responseJSON.message) ? xhr.responseJSON.message : 'Save failed. Please try again.';
            alert(msg);
        }
    });
});
</script>
@endsection