@extends('company-admin-dashboard')

@section('title', $data['title'])
@section('dashboard-content')
    <div class="page-content" style="padding: 25px calc(24px / 2) 60px calc(24px / 2); background-color: #f7f7f9;">
        <div class="container-fluid">
            <!-- Card Container for Counter Table -->
            <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;
                        <h5 class="mb-0"><b>Counter Management</b></h5>
                    </div>
                     @if (in_array('create', $data['counterPermissions']))
                    <div class="header-buttons d-flex align-items-center" style="gap: 10px;">
                        <button class="btn-custom" id="openCounterOffcanvas" onclick="OpenCounterOffcanvas()">
                            <i class="fas fa-plus font-size-16 align-middle me-2"></i> Add Counter
                        </button>
                    </div>
                    @endif
                </div>
                <div class="card-body"style="padding: 20px 0;">
                     @if (in_array('list', $data['counterPermissions']))
                    <div class="table-responsive table-nowrap custom-table">
                        <table id="countertable" class="table table-striped table-bordered dataTable no-footer dtr-inline"
                            style="width: 100%; ">
                            <thead>
                                <th style="width: 80px">Id</th>
                                <th>Counter Name</th>
                                {{-- <th>Counter Code</th> --}}
                                <th>Printer</th>
                                <th>Remark</th>
                                <th style="width: 120px;">Status</th>
                                <th>Action</th>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                    @endif
                </div>
            </div>

            <!-- Modal for Add/Edit Counter -->
            <div class="modal fade" tabindex="-1" id="offcanvasCounter" aria-labelledby="offcanvasScrollingLabel"
                data-bs-backdrop="static" data-bs-keyboard="false">
                <div class="modal-dialog modal-md">
                    <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="counterLabel" style="margin-left: 10px;margin-bottom: 0;"><b>Add Counter</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="counter-master" method="post" action="{{ route('counter.save') }}" class="needs-validation">
                        @csrf
                        <input type="hidden" name="counter_id" id="counter_id" value="0">

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

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

                        <div class="col-md-12">
                            <div class="float-label-group has-value">
                            <select name="printer" id="printer" class="form-select" required>
                            </select>
                            <label for="printer">Printer <font color="red"> *</font></label>
                            </div>
                        </div>

                        <div class="col-md-12">
                            <div class="float-label-group has-value">
                            <select name="counterstatus" id="counterstatus" class="form-select" required>
                                <option value="1">Active</option>
                                <option value="0">Inactive</option>
                            </select>
                            <label for="counterstatus">Status<font color="red"> *</font></label>
                            </div>
                        </div>

                        <div class="col-md-12">
                            <div class="float-label-group">
                            <textarea type="text" class="form-control" name="counter_remark" id="counter_remark" placeholder="Enter Remark"
                                rows="2">{{ old('counter_remark') }}</textarea>
                            <label for="counter_remark">Remark</label>

                                </div>
                        </div>

                        
                </div>
                            <div class="modal-footer">
                                <button type="reset" class="btn-custom-secondary" id="counterReset"
                                    onclick="resetCounterForm()">Reset</button>
                                <button type="submit" class="btn-custom" id="saveCounter">
                                    <span id="counter_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="counter_btnText">Save</span>
                                </button>
                            </div>
                    </form>
            </div>
        </div>
    </div>
    </div>
@endsection('dashboard-content')

@section('custom-scripts')
    <script>
        // Define route variables
        var selectCounterPrinter = '{{ route('counter.select-printer') }}';
        var CounterDataTable = '{{ route('counter.ajax') }}';
        var EditCounter = '{{ route('counter.getdata') }}';
        var DeleteCounter = '{{ route('counter.delete') }}';
        var ChangeCounterStatus = '{{ route('counter.status') }}';
        var saveCounterUrl = '{{ route('counter.save') }}';
        var csrfToken = $("[name=_token").val();

        // Initialize printer select2
        $('#printer').select2({
            ajax: {
                url: selectCounterPrinter,
                dataType: 'json',
                delay: 250,
                data: function(params) {
                    return {
                        q: params.term,
                        page: params.page,
                    };
                },
                processResults: function(data, params) {
                    params.page = params.page || 1;
                    return {
                        results: data.results,
                        pagination: {
                            more: (params.page * 30) < data.total_count
                        }
                    };
                },
                cache: true
            },
            placeholder: 'search for printer',
            dropdownParent: $("#offcanvasCounter .modal-body")
        });

         $('#counterstatus').select2({
            placeholder: 'search Status',
            dropdownParent: $("#offcanvasCounter .modal-body")
        });
        // Function to open the offcanvas for adding a new counter
        function OpenCounterOffcanvas() {
            $("#counterLabel").html('Add Counter');
            $('#counter_id').val('');

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

            $('#printer').val(null).trigger('change');
            $('#offcanvasCounter').modal('show');
            $("#offcanvasCounter .modal-body").scrollTop(0);
            $('#counter-master').removeClass('was-validated');
            $("#counter_btnText").html("Save");
            $("#saveCounter").prop('disabled', false);
            $("#counterReset").prop('disabled', false);
        }

        // Function to reset the counter form
        function resetCounterForm() {
            $('#counter_id').val('');
            $('#counter_name').val('');
            $('#counter_code').val('');
            $('#printer').val(null).trigger('change');
            $('#counterstatus').val('1');
            $('#counter_remark').val('');
        }

        // Function to edit a counter
        function editCounter(id) {
            $("#counter_btnText").html("Save");
            $("#saveCounter").prop('disabled', false);
            $("#counterReset").prop('disabled', false);

            $('#offcanvasCounter').modal('hide');
            $('#counterLabel').html('Edit Counter');
            $('#counter-master').removeClass('was-validated');

            $.ajax({
                type: 'get',
                url: EditCounter + '?id=' + id,
                success: function(resultData) {
                    if (resultData['status'] == 1) {
                        $('#counter_id').val(resultData['data']['id']);
                        $('#counter_name').val(resultData['data']['name']);
                        $('#counter_code').val(resultData['data']['code']);
                        $('#counterstatus').val(resultData['data']['status']).trigger('change');;
                        $('#counterstatus').closest('.float-label-group').addClass('has-value');
                        $('#counter_remark').val(resultData['data']['remark']);

                        // Set printer if available
                        if (resultData['data']['printer'] != null) {
                            var selectedPrinterId = resultData['data']['printer'];
                            var selectedPrinterText = resultData['data']['printername'];
                            var newOption = new Option(selectedPrinterText, selectedPrinterId, true, true);
                            $('#printer').append(newOption).trigger('change');
                        }

                        $('#offcanvasCounter').modal('show');
                        $("#offcanvasCounter .modal-body").scrollTop(0);
                    } else {
                        flasher['error'](resultData['msg'], {
                            timeout: 2500
                        });
                    }
                }
            });
        }
        window.PRIMARY_COLOR = "{{ getPrimaryColor() }}";
        window.SECONDARY_COLOR = "{{ getSecondaryColor() }}";
        // Function to delete a counter
        function deleteCounter(id) {
            Swal.fire({
                title: "Are you sure To Delete Counter?",
                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: DeleteCounter + "?id=" + id,
                        success: function(resultData) {
                            if (resultData['status'] == 1) {
                                flasher['success'](resultData['msg'], {
                                    timeout: 2500
                                });
                                counterTable.ajax.reload();
                            } else {
                                flasher['error'](resultData['msg'], {
                                    timeout: 2500
                                });
                            }
                        }
                    });
                }
            });
        }

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

            $.ajax({
                url: ChangeCounterStatus,
                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']("error updating status", {
                            timeout: 2500
                        });
                    }
                }
            });
        }

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

        // Initialize DataTable
        var counterTable = $('#countertable').DataTable({
            // responsive: true,
            "aoColumnDefs": [{
                "bSortable": false,
                "aTargets": [4]
            }],
            "order": [
                [0, 'desc']
            ],
            "processing": true,
            "serverSide": true,
             pagingType: "full_numbers",
            "ajax": {
                "url": CounterDataTable,
                "type": "GET",
                "data": {
                    "_token": csrfToken,
                }
            },
            "aoColumns": [{
                    "mData": "id"
                },
                {
                    "mData": "name"
                },
                // {
                //     "mData": "code"
                // },
                {
                    "mData": "printer",
                    orderable: false
                },
                {
                    "mData": "remark",
                    orderable: false
                },
                {
                    "mData": "status",
                    orderable: false,
                    searchable: false
                },
                {
                    "mData": "action",
                    orderable: false,
                    searchable: false
                }
            ],
            language: {
                searchPlaceholder: "Search Name, Printer, Active / Inactive, Remark",
                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>'
                }
            }
        });
         var a = document.querySelector("#countertable thead"),
            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, 3, 4];

            if (skipColumns.includes(t)) {
                e.innerHTML = ""; 
                return;
            }
            var text = e.textContent;
            var 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 (counterTable.column(t).search() !== this.value) {
                    counterTable.column(t).search(this.value).draw();
                }
            });

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

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

            // Show loading spinner
            $('#counter_loader').show();
            $('#saveCounter').prop('disabled', true);
            $('#counterReset').prop('disabled', true);

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

            $.ajax({
                url: saveCounterUrl,
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function(response) {
                    // Hide loading spinner
                    $('#counter_loader').hide();
                    $('#saveCounter').prop('disabled', false);
                    $('#counterReset').prop('disabled', false);

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

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

                        // Reload the data table
                        counterTable.ajax.reload();
                    } else {
                        // Show error message
                        flasher['error'](response.msg, {
                            timeout: 2500
                        });
                    }
                },
                error: function(xhr) {
                    // Hide loading spinner
                    $('#counter_loader').hide();
                    $('#saveCounter').prop('disabled', false);
                    $('#counterReset').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 counter name input to generate code
        $('#counter_name').on('keyup', function() {
            generateCounterCode(this.value);
        });
        $('#profile-pic').on('click', function(e) {
            e.stopPropagation();
            $('#dropdown-menu').toggle();
        });
    </script>
@endsection