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

    
    <div class="content d-flex flex-column flex-column-fluid" id="kt_content">
        <!--begin::Post-->
        
		<div class="modal fade" id="kt_modal_qr_code" tabindex="-1" aria-hidden="true">
			<!--begin::Modal dialog-->
			<div class="modal-dialog modal-dialog-centered mw-800px">
				<!--begin::Modal content-->
				<div class="modal-content">
					<!--begin::Modal header-->
					<div class="modal-header pb-0 border-0 justify-content-end">
						<!--begin::Close-->
						<div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">
							<!--begin::Svg Icon | path: icons/duotune/arrows/arr061.svg-->
							<span class="svg-icon svg-icon-1">
							    <span class="fa fa-times"></span>
							</span>
							<!--end::Svg Icon-->
						</div>
						<!--end::Close-->
					</div>
					<!--begin::Modal header-->
                    <div id="telegram_qr_loader" style="display: none;">
                        <div class="d-flex justify-content-center">
                            <div class="spinner-border text-gray-800" role="status">
                                <span class="visually-hidden">Loading...</span>
                            </div>
                        </div>
                    </div>
					<!--begin::Modal body-->
					<div class="modal-body scroll-y mx-5 mx-xl-18 pt-0 pb-15 d-flex justify-content-center">
						<div class="text-center"  id="telegram_qr_modal" style="display: none;">
                            <div class="d-flex justify-content-center align-items-center mb-3">
                                <h1 class="mb-3 me-5" id="telegram_qr_modal_title">{{CommonConstants::TELEGRAM_BOT_SETTING['QR_DEFAULT_TITLE']}}</h1>
                                <span class="cursor-pointer mb-3 me-5" id="telegram_bot_link_copy_button" onclick="copyToClipboard($('#telegram_qr_modal').data('bot-url'), this)">
                                    <span class="fas fa-copy fa-lg"></span>
                                </span>
                            </div>
							<div class="text-muted fw-bold fs-5 mb-8"  id="telegram_qr_modal_desc">{{CommonConstants::TELEGRAM_BOT_SETTING['QR_SCAN_DESC']}}</div>
							<!--begin::Telegram-QR-->
							<img id="qr_image" src="" class="bgi-no-repeat bgi-size-cover rounded h-350px w-350px mb-5" />
							<!--end::Telegram-QR-->
						</div>
					</div>
					<!--end::Modal body-->
				</div>
				<!--end::Modal content-->
			</div>
			<!--end::Modal dialog-->
		</div>
        <div id="loader" style="display: none;" >
            <div class="page-loader flex-column d-flex justify-content-center align-items-center bg-dark bg-opacity-25">
                <span class="spinner-border text-primary" role="status"></span>
                <span class="text-gray-800 fs-6 fw-semibold mt-5">Loading...</span>
            </div>
        </div>
        <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 header-->
                    <!--end::Card header-->
                    <!--begin::Card body-->
                    <div class="card-body py-4">
                        <!--begin::Table-->
                        <div class="table-responsive">
                            <table class="table table-striped table-hover align-middle table-row-dashed fs-6 gy-5 cursor-pointer" id="kt_table_telegram_bot_settings">
                                <!--begin::Table head-->
                                <thead>
                                    <!--begin::Table row-->
                                    <tr class="text-center fw-bolder fs-7 text-uppercase gs-0">
                                        <th class="min-w-100px">Id</th>
                                        <th class="min-w-100px">Name</th>
                                        <th class="min-w-100px">User Name</th>
                                        <th class="min-w-100px">Module</th>
                                        <th class="min-w-100px">Status</th>
                                        <th class="min-w-100px">Action</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">

        //Copy Telegram Link
        function copyToClipboard(text, buttonElement) {
            // Use the Clipboard API to copy the text
            navigator.clipboard.writeText(text).then(function () {
                // Get the icon element inside the button
                const icon = buttonElement.querySelector('.fas');

                // Ensure the icon exists
                if (icon) {
                    // Change the icon to 'fa-check' after successful copy
                    icon.classList.remove('fa-copy');
                    icon.classList.add('fa-check', 'text-success');

                    // Set a 3-second timeout to revert the icon back to 'fa-copy'
                    setTimeout(() => {
                        // Reset the icon back to 'fa-copy' and remove the success class
                        icon.classList.remove('fa-check', 'text-success');
                        icon.classList.add('fa-copy');
                    }, 3000); // 3 seconds
                }
            }).catch(function (err) {
                console.error('Failed to copy text:', err);
            });
        }

        const table   = $('#kt_table_telegram_bot_settings');

        var dataColumns = [
            {
                data: 'id',
                name: 'id'
            },
            {
                data: 'name',
                name: 'name'
            },
            {
                data: 'userName',
                name: 'userName'
            },
            {
                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] === data);
                    moduleName      = moduleName.replaceAll('_', ' ');

                    return moduleName ?? '-';
                }
            },
            {
                data: 'status',
                name: 'status',
                render: function(data, type, full, meta) {                            
                    var statusValue = (full.status == "{{CommonConstants::TELEGRAM_BOT_SETTING['STATUS_ACTIVE']}}") ? 'Active' : "Deactive";
                    var className   = full.status == "{{CommonConstants::TELEGRAM_BOT_SETTING['STATUS_ACTIVE']}}" ? 'success' : 'danger';

                    return `<span class="badge badge-light-${className} text-uppercase">${statusValue}</span>`;
                },
            },
            {
                data: 'action',
                name: 'action',
                orderable: false,
                searchable: false
            },
        ];

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

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

        function makeDataTable(table, 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: true,
                "stateSaveParams": function (settings, data) {
                    data.search.search = '';
                },
                pageLength: 10,
                "lengthMenu": {!! json_encode(CommonConstants::DEFAULT_PAGE_PER_DATA) !!},
                language: {
                    searchPlaceholder: "Search Bot",
                    search: ""
                },
                buttons: [
                    {
                        text: 'Add Bot',
                        action: function (e, dt, node, config) {
                            window.location.href = "{{ route('telegram-bots.create') }}";
                        }
                    }
                ],
                ajax: {
                    url: "{{ route('telegram-bots.index') }}",
                    method: "GET",
                    data: {}
                },
                columns: dataColumns,
                rowCallback: function(row, data) {
                    $(row).addClass('text-center');
                },
                "stateLoadParams": function (settings, data) {
                    if (data.select) {
                        data.select.rows = [];
                    }
                },
                order: [
                    [0, "DESC"]
                ],
            }, );
        }

        function showQr(imagePath, moduleName, botUrl) {

            $('#telegram_qr_modal').data('bot-url', botUrl); // Append telegram bot url

            $('#telegram_qr_loader').show();

            $('#telegram_qr_modal_title').text(moduleName);
            $('#telegram_qr_modal_desc').text('{{CommonConstants::TELEGRAM_BOT_SETTING['QR_SCAN_DESC']}}');
            $('#telegram_qr_modal_title').hide();
            $('#telegram_bot_link_copy_button').hide();
            $('#telegram_qr_modal_desc').hide();
            $('#qr_image').hide();

            $('#qr_image')
                .attr('src', imagePath)
                .removeClass() // Remove any existing classes
                .addClass('bgi-no-repeat bgi-size-cover rounded h-350px w-350px') // Add the default class
                .on('error', function () {
                    $('#telegram_qr_modal_desc').text('{{CommonConstants::TELEGRAM_BOT_SETTING['QR_NOT_FOUND_DESC']}}');

                    // Set fallback image path on error
                    $(this).attr('src', '{{ asset(CommonConstants::TELEGRAM_BOT_SETTING['QR_NOT_FOUND_IMAGE_PATH']) }}');
                    // Change class for fallback
                    $(this).removeClass().addClass('bgi-no-repeat bgi-size-cover rounded fallback-class h-300px w-600px');
                });

            setTimeout(() => {
                $('#telegram_qr_loader').hide();
                $('#telegram_qr_modal_title').show();
                $('#telegram_bot_link_copy_button').show();
                $('#telegram_qr_modal_desc').show();
                $('#qr_image').show();

                $('#telegram_qr_modal').show();
            }, 500);
        }

        function generateBotQr(botUserName) {
            $("#loader").show();

            $.ajax({
                url: "{{route('generateAndSaveQRCode')}}",
                type: 'GET',
                data: {
                    userName: botUserName
                },
                success: function (response) {
                    location.reload();
                },
                error: function (xhr, status, error) {
                    location.reload();
                    console.error('Error fetching QR codes:', error);
                }
            });
        }

    </script>
@endsection