@extends('company-admin-dashboard')

@section('title', $data['title'])
@section('dashboard-content')
    <style>
        #modal_qr_display img {
            max-width: 100%;
            height: auto;
            border: 2px solid #ddd;
            padding: 10px;
            border-radius: 8px;
        }

        [id^="qr_"]:hover {
            opacity: 0.8;
            transform: scale(1.05);
            transition: all 0.2s ease;
        }
    </style>
    <div class="page-content" style="padding: 25px calc(24px / 2) 60px calc(24px / 2); background-color: #f7f7f9;">
        <div class="container-fluid">
            <!-- Card Container for Table Management -->
            <div class="card">
                <div class="card-header bg-white d-flex justify-content-between align-items-center"
                    style="padding: 10px 7px 10px 27px !important;">
                    <div class="d-flex align-items-center">
                        <img class="favicon-logo" src="{{ getCompanyFavicon() }}"  alt="Company Logo"  width="40px">
                        &nbsp; &nbsp;
                        <h5 class="mb-0"><b>Table Management</b></h5>
                    </div>
                    @if (in_array('create', $data['tablePermissions']))
                        <div class="header-buttons d-flex align-items-center" style="gap: 10px;">
                            <button class="btn-custom" id="openTableOffcanvas" onclick="openTableOffcanvas()">
                                <i class="fas fa-plus font-size-16 align-middle me-2"></i> Add Table
                            </button>
                        </div>
                    @endif
                </div>
                <div class="card-body" style="padding: 20px 0;">
                    @if (in_array('list', $data['tablePermissions']))
                        <div class="table-responsive table-nowrap custom-table">
                            <table id="table" class="table table-striped table-bordered dataTable no-footer dtr-inline"
                                style="width: 100%; ">
                                <thead>
                                    <th style="width:80px;">Id</th>
                                    <th>Table Name</th>
                                    {{-- <th>Table Code</th> --}}
                                    <th>Table Tag</th>
                                    <th>Table Floor</th>
                                    @if (in_array('qr_code', $data['tablePermissions']))
                                        <th>QR Code</th>
                                    @endif
                                    <th>Remark</th>
                                    <th style="width: 190px;">Status</th>
                                    <th>Action</th>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    @endif
                </div>
            </div>

            <!-- Modal for Add/Edit Table -->
            <div class="modal fade" tabindex="-1" id="offcanvasTable" aria-labelledby="offcanvasScrollingLabel"
                data-bs-backdrop="static" data-bs-keyboard="false">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <span class="d-flex align-items-center" style="width: 100%;">
                                <div class="d-flex align-items-center">
                                     <img class="favicon-logo" src="{{ getCompanyFavicon() }}"  alt="Company Logo"  width="40px">
                                </div>
                                <h5 id="tableLabel" style="margin-left: 10px;margin-bottom: 0;"><b>Add Table</b></h5>
                            </span>
                            <button type="button" class="btn-close text-reset" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <form id="table-master" method="post" action="{{ route('table.save') }}"
                                class="needs-validation">
                                @csrf
                                <div class="row">
                                    <input type="hidden" name="table_id" id="table_id" value="0">

                                    <div class="col-md-6">
                                        <div class="float-label-group">
                                            <input type="text" class="form-control table_name" name="table_name"
                                                id="table_name" required value="{{ old('table_name') }}"
                                                placeholder="Enter Table Name" autofocus>
                                            <label for="table_name">Table Name<font color="red"> *</font></label>
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <div class="float-label-group has-value">
                                            <input type="text" class="form-control table_code" name="table_code"
                                                id="table_code" required value="{{ old('table_code') }}"
                                                placeholder="Table Code" readonly>
                                            <label for="table_code">Table Code<font color="red"> *</font></label>
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <div class="float-label-group has-value">
                                            <select name="tablestatus" id="tablestatus" class="form-select" required>
                                                <option value="1">Active</option>
                                                <option value="0">Inactive</option>
                                            </select>
                                            <label for="tablestatus">Status<font color="red"> *</font></label>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="float-label-group">
                                            <input type="text" class="form-control table_tag" name="table_tag"
                                                id="table_tag" value="{{ old('table_tag') }}" placeholder="Table Tag">
                                            <label for="table_tag">Tag</label>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="float-label-group">
                                            <input type="number" class="form-control table_floor" name="table_floor"
                                                id="table_floor" value="{{ old('table_floor') }}"
                                                placeholder="Table Floor">
                                            <label for="table_floor">Floor</label>

                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="float-label-group">
                                            <textarea type="text" class="form-control" name="table_remark" id="table_remark" placeholder="Enter Remark"
                                                rows="1">{{ old('table_remark') }}</textarea>
                                            <label for="table_remark">Remark</label>
                                        </div>
                                    </div>
                                </div>
                        </div>
                        <div class="modal-footer">
                            <button type="reset" class="btn-custom-secondary" id="tableReset"
                                onclick="resetTableForm()">Reset</button>
                            <button type="submit" class="btn-custom" id="saveTable">
                                <span id="table_loader" class="bx bx-loader bx-spin font-size-22 align-middle me-2"
                                    role="status" aria-hidden="true" style="display:none;"></span>
                                <span id="table_btnText">Save</span>
                            </button>
                        </div>
                        </form>
                    </div>
                </div>
            </div>

            <!-- QR Code Modal -->
            <div class="modal fade" id="qrCodeModal" tabindex="-1" aria-labelledby="qrCodeModalLabel"
                aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="qrCodeModalLabel">Table QR Code</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                        </div>
                        <div class="modal-body text-center">
                            <div id="modal_qr_display" class="mb-3"></div>
                            <p id="modal_table_name" class="fw-bold"></p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                            <button type="button" class="btn btn-primary" onclick="downloadModalQR()">
                                <i class="fas fa-download"></i> Download QR
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        @endsection('dashboard-content')

        @section('custom-scripts')
            <script src="{{ asset('assets/js/qrcode.min.js') }}"></script>
            <script>
                // Define route variables

                var tableAjaxUrl = '{{ route('table.ajax') }}';
                var editTableUrl = '{{ route('table.getdata') }}';
                var deleteTableUrl = '{{ route('table.delete') }}';
                var updateTableStatusUrl = '{{ route('update.status') }}';
                var saveTableUrl = '{{ route('table.save') }}';
                var baseUrl = '{{ url('/') }}';
                var csrfToken = $("[name=_token").val();

                // Function to open the offcanvas for adding a new table
                function openTableOffcanvas() {
                    $("#tableLabel").html('Add Table');
                    $('#table_id').val('');

                    if ($("#table-master").length) {
                        $("#table-master")[0].reset();
                    }

                    $('#offcanvasTable').modal('show');
                    $("#offcanvasTable .modal-body").scrollTop(0);
                    $('#table-master').removeClass('was-validated');
                    $("#table_btnText").html("Save");
                    $("#saveTable").prop('disabled', false);
                    $("#tableReset").prop('disabled', false);
                }

                // Function to reset the table form
                function resetTableForm() {
                    $('#table_id').val('');
                    $('#table_name').val('');
                    $('#table_code').val('');
                    $('#tablestatus').val('1');
                    $('#table_remark').val('');
                    $('#table_tag').val('');
                    $('#table_floor').val('');
                }

                // Function to generate QR code
                function generateQRCode(tableId) {
                    if (tableId) {
                        const qrData = `${baseUrl}/table/${tableId}`;
                        const qr = qrcode(0, 'M');
                        qr.addData(qrData);
                        qr.make();
                        const qrHtml = qr.createImgTag(3);
                        $('#qr_code_display').html(qrHtml);
                        $('#qr_code_section').show();
                    }
                }

                // Function to download QR code at edit time
                // function downloadQRCode() {
                //     const img = $('#qr_code_display img')[0];
                //     if (img) {
                //         const canvas = document.createElement('canvas');
                //         const ctx = canvas.getContext('2d');
                //         canvas.width = img.width;
                //         canvas.height = img.height;
                //         ctx.drawImage(img, 0, 0);
                //         const link = document.createElement('a');
                //         link.download = `table_${$('#table_id').val()}_qr.png`;
                //         link.href = canvas.toDataURL();
                //         link.click();
                //     }
                // }

                // Function to generate QR codes for table list
                function generateTableListQRCodes() {
                    $('div[id^="qr_"]').each(function() {
                        const tableId = this.id.replace('qr_', '');
                        const companyId = $(this).data('company-id');
                        const encoded = btoa(`${tableId}/${companyId}`);
                        const qrData = `${baseUrl}/make-order/${encoded}`;
                        const qr = qrcode(0, 'M');
                        qr.addData(qrData);
                        qr.make();
                        const qrHtml = qr.createImgTag(1);
                        $(this).html(qrHtml);
                    });
                }

                // Function to show QR code in modal
                function showQRModal(tableId, tableName, companyId) {
                    const encoded = btoa(`${tableId}/${companyId}`);
                    const qrData = `${baseUrl}/make-order/${encoded}`;
                    const qr = qrcode(0, 'M');
                    qr.addData(qrData);
                    qr.make();
                    const qrHtml = qr.createImgTag(5);
                    $('#modal_qr_display').html(qrHtml);
                    $('#modal_table_name').text(tableName);
                    $('#qrCodeModal').data('table-id', tableId);
                    $('#qrCodeModal').modal('show');
                }

                // Function to download QR code from modal
                function downloadModalQR() {
                    const img = $('#modal_qr_display img')[0];
                    const tableId = $('#qrCodeModal').data('table-id');
                    if (img) {
                        const canvas = document.createElement('canvas');
                        const ctx = canvas.getContext('2d');
                        canvas.width = img.naturalWidth || img.width;
                        canvas.height = img.naturalHeight || img.height;
                        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
                        const link = document.createElement('a');
                        link.download = `table_${tableId}_qr.png`;
                        link.href = canvas.toDataURL('image/png');
                        link.click();
                    }
                }
                // Function to download QR code from table list
                // function downloadTableQR(tableId) {
                //     const qrDiv = document.getElementById(`qr_${tableId}`);
                //     const img = qrDiv.querySelector('img');
                //     if (img) {
                //         const canvas = document.createElement('canvas');
                //         const ctx = canvas.getContext('2d');
                //         canvas.width = img.width;
                //         canvas.height = img.height;
                //         ctx.drawImage(img, 0, 0);
                //         const link = document.createElement('a');
                //         link.download = `table_${tableId}_qr.png`;
                //         link.href = canvas.toDataURL();
                //         link.click();
                //     }
                // }

                function edittable(id) {
                    $("#table_btnText").html("Save");
                    $("#saveTable").prop('disabled', false);
                    $("#tableReset").prop('disabled', false);

                    $('#offcanvasTable').modal('hide');
                    $('#tableLabel').html('Edit Table');
                    $('#table-master').removeClass('was-validated');

                    $.ajax({
                        type: 'get',
                        url: editTableUrl + '?id=' + id,
                        success: function(resultData) {
                            if (resultData['status'] == 1) {
                                $('#table_id').val(resultData['data']['id']);
                                $('#table_name').val(resultData['data']['name']);
                                $('#table_code').val(resultData['data']['code']);
                                $('#tablestatus').val(resultData['data']['status']).trigger('change');
                                $('#tablestatus').closest('.float-label-group').addClass('has-value');
                                $('#table_remark').val(resultData['data']['remark']);
                                $('#table_tag').val(resultData['data']['tag']);
                                $('#table_floor').val(resultData['data']['floor']);

                                // Generate QR code for existing table
                                // generateQRCode(resultData['data']['id']);

                                $('#offcanvasTable').modal('show');
                                $("#offcanvasTable .modal-body").scrollTop(0);
                            } else {
                                flasher['error'](resultData['msg'], {
                                    timeout: 2500
                                });
                            }
                        }
                    });
                }

                window.PRIMARY_COLOR = "{{ getPrimaryColor() }}";
                window.SECONDARY_COLOR = "{{ getSecondaryColor() }}";
                // Function to delete a table
                function deletetable(id) {
                    Swal.fire({
                        title: "Are You Sure To Delete This Table?",
                        text: "You won't be able to revert this!",
                        icon: "warning",
                        showCancelButton: true,
                        confirmButtonColor: window.PRIMARY_COLOR,
                        cancelButtonColor: window.SECONDARY_COLOR,
                        confirmButtonText: "Yes, delete it!"
                    }).then((result) => {
                        if (result.isConfirmed) {
                            $.ajax({
                                type: "get",
                                url: deleteTableUrl + "?id=" + id,
                                success: function(resultData) {
                                    if (resultData['status'] == 1) {
                                        flasher['success'](resultData['msg'], {
                                            timeout: 2500
                                        });
                                        table.ajax.reload();
                                    } else {
                                        flasher['error'](resultData['msg'], {
                                            timeout: 2500
                                        });
                                    }
                                }
                            });
                        }
                    });
                }

                // Function to update table status
                function updatetablestatus(id, checkboxElement) {
                    var isChecked = $(checkboxElement).is(':checked');

                    $.ajax({
                        url: updateTableStatusUrl,
                        type: 'post',
                        data: {
                            id: id,
                            status: isChecked ? 1 : 0,
                            _token: csrfToken,
                        },
                        success: function(response) {
                            if (response['status'] == 1) {
                                flasher['success'](response['msg'], {
                                    timeout: 2500
                                });
                            } else {
                                flasher['error'](response['msg'], {
                                    timeout: 2500
                                });
                            }
                        },
                        error: function(xhr, status, error) {
                            flasher['error']("Error updating status", {
                                timeout: 2500
                            });
                        }
                    });
                }

                // Generate table code based on table name
                function generateTableCode(name) {
                    var code = name.replace(/[_\W]+/g, "_");
                    code = code.toUpperCase();
                    $("#table_code").val(code);
                }

                var table = $('#table').DataTable({
                    pagingType: "full_numbers",
                    "aoColumnDefs": [{
                        "bSortable": false,
                        "aTargets": [5]
                    }],
                    "order": [
                        [0, 'desc']
                    ],
                    "processing": true,
                    "serverSide": true,
                    "ajax": {
                        "url": tableAjaxUrl,
                        "type": "GET",
                        "data": {
                            "_token": csrfToken
                        }
                    },
                    "aoColumns": [{
                            "mData": "id"
                        },
                        {
                            "mData": "name"
                        },
                        // {
                        //     "mData": "code"
                        // },
                        {
                            "mData": "tag"
                        },
                        {
                            "mData": "floor"
                        },
                        @if (in_array('qr_code', $data['tablePermissions']))
                            {
                                data: "qr_code",
                                orderable: false,
                                searchable: false
                            },
                        @endif {
                            "mData": "remark",
                            orderable: false
                        },
                        {
                            "mData": "status",
                            orderable: false,
                            searchable: false
                        },
                        {
                            "mData": "action",
                            orderable: false,
                            searchable: false
                        }
                    ],
                    language: {
                        search: "",
                        searchPlaceholder: "Search Table Name",
                        paginate: {
                            first: '<i class="bx bx-skip-previous"></i>',
                            previous: '<i class="bx bx-chevron-left"></i>',
                            next: '<i class="bx bx-chevron-right"></i>',
                            last: '<i class="bx bx-skip-next"></i>'
                        }
                    },
                    "drawCallback": function() {
                        setTimeout(generateTableListQRCodes, 100);
                    }
                });


                var a = document.querySelector("#table thead");
                var n = a.querySelector("tr").cloneNode(true);
                a.appendChild(n);


                let searchRowTh = a.querySelectorAll("tr:nth-child(2) th");
                searchRowTh.forEach(th => {
                    th.classList.remove("sorting", "sorting_asc", "sorting_desc");
                    th.removeAttribute("aria-sort");
                });

                searchRowTh.forEach((e, t) => {

                    let skipColumns = [0, 4, 6, 7];

                    if (skipColumns.includes(t)) {
                        e.innerHTML = "";
                        return;
                    }

                    let text = e.textContent.trim();
                    let input = document.createElement("input");
                    input.type = "text";
                    input.className = "form-control";
                    input.placeholder = "Search " + text;

                    e.innerHTML = "";
                    e.appendChild(input);

                    input.addEventListener("keyup", function() {
                        if (table.column(t).search() !== this.value) {
                            table.column(t).search(this.value).draw();
                        }
                    });

                    input.addEventListener("change", function() {
                        if (table.column(t).search() !== this.value) {
                            table.column(t).search(this.value).draw();
                        }
                    });
                });


                // Handle form submission with AJAX
                $('#table-master').on('submit', function(e) {
                    e.preventDefault();

                    // Show loading spinner
                    $('#table_loader').show();
                    $('#saveTable').prop('disabled', true);
                    $('#tableReset').prop('disabled', true);

                    // Create FormData object
                    var formData = new FormData(this);

                    $.ajax({
                        url: saveTableUrl,
                        type: 'POST',
                        data: formData,
                        processData: false,
                        contentType: false,
                        success: function(response) {
                            // Hide loading spinner
                            $('#table_loader').hide();
                            $('#saveTable').prop('disabled', false);
                            $('#tableReset').prop('disabled', false);

                            if (response.status == 1) {
                                // Show success message
                                flasher['success'](response.msg, {
                                    timeout: 2500
                                });

                                // Close the modal
                                $('#offcanvasTable').modal('hide');

                                // Reload the data table
                                table.ajax.reload();
                            } else {
                                // Show error message
                                flasher['error'](response.msg, {
                                    timeout: 2500
                                });
                            }
                        },
                        error: function(xhr) {
                            // Hide loading spinner
                            $('#table_loader').hide();
                            $('#saveTable').prop('disabled', false);
                            $('#tableReset').prop('disabled', false);

                            // Show error message
                            if (xhr.responseJSON && xhr.responseJSON.errors) {
                                // Handle validation errors
                                var errors = xhr.responseJSON.errors;
                                var errorMessage = '';

                                for (var key in errors) {
                                    errorMessage += errors[key][0] + '<br>';
                                }

                                flasher['error'](errorMessage, {
                                    timeout: 2500
                                });
                            } else {
                                flasher['error']('An error occurred while processing your request.', {
                                    timeout: 2500
                                });
                            }
                        }
                    });
                });

                // Event listener for table name input to generate code
                $('#table_name').on('keyup', function() {

                    generateTableCode(this.value);
                });
                $('#profile-pic').on('click', function(e) {
                    e.stopPropagation();
                    $('#dropdown-menu').toggle();
                });
                $('#tablestatus').select2({
                    placeholder: 'search Status',
                    dropdownParent: $("#offcanvasTable .modal-body")
                });
            </script>
        @endsection