@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 Item 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>Tax Management</b></h5>
                    </div>
                    @if (in_array('create', $data['taxPermissions']))
                        <div class="header-buttons d-flex align-items-center" style="gap: 10px;">
                            <button class="btn-custom" id="openTaxOffcanvas" onclick="OpenTaxOffcanvas()">
                                <i class="fas fa-plus font-size-16 align-middle me-2"></i> Add Tax
                            </button>
                        </div>
                    @endif
                </div>
                <div class="card-body"style="padding: 20px 0;">
                    @if (in_array('list', $data['taxPermissions']))
                        <div class="table-responsive table-nowrap custom-table">
                            <table id="taxDetail" class="table table-striped table-bordered dataTable no-footer dtr-inline"
                                style="width: 100%; ">
                                <thead>
                                    <th>Id</th>
                                    <th>Tax Name</th>
                                    <th>Tax Value</th>
                                    <th>is Default</th>
                                    <th>Status</th>
                                    <th>Action</th>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    @endif
                </div>
            </div>

            <!-- Modal for Add/Edit Tax -->
            <div class="modal fade" tabindex="-1" id="offcanvasTax" 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="itemLabel" style="margin-left: 10px;margin-bottom: 0;"><b>Add Tax</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="tax-master" method="post" action="{{ route('tax.save') }}" class="needs-validation"
                                enctype="multipart/form-data">
                                @csrf
                                <input type="hidden" name="tax_id" id="tax_id" value="0">
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="float-label-group">
                                            <input type="text" class="form-control tax_title" name="tax_title"
                                                id="tax_title" required placeholder="Enter Tax Name" autofocus>
                                            <label for="tax_title">Tax Title<font color="red">*</font></label>

                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="float-label-group">
                                            <input type="number" class="form-control tax_value" name="tax_value"
                                                id="tax_value" required placeholder="tax Value">
                                            <label for="tax_value">Tax Value<font font="red"> *</font></label>

                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-12">
                                    <div class="float-label-group has-value">
                                        <select name="tax_status" id="tax_status" class="form-select" required>
                                            <option value="1">Active</option>
                                            <option value="0">Inactive</option>
                                        </select>
                                        <label for="tax_status">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="tax_remark" id="tax_remark" placeholder="Enter Item Remark"
                                            rows="1"></textarea>
                                        <label for="tax_remark">Remark</label>

                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-check form-switch d-flex align-items-center gap-2 p-0"
                                        style="justify-self: auto;">
                                        <input type="hidden" name="is_default" value="0">
                                        <label for="tax_value" class="form-check-label">Is Default : </label>
                                        <input class="form-check-input custom-switch-icon" type="checkbox"
                                            name="is_default" id="is_default"style="--s: 15px;margin: 0;font-size: 16px;"
                                            href="javascript: void(0);" role="switch" value="1">

                                    </div>
                                </div>


                        </div>
                        <div class="modal-footer">
                            <button type="reset" class="btn-custom-secondary" id="taxReset"
                                onclick="resetTaxForm()">Reset</button>
                            <button type="submit" class="btn-custom" id="saveTax">
                                <span id="tax_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="saveTaxBtn">Save</span>
                            </button>
                        </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    @endsection('dashboard-content')

    @section('custom-scripts')
        <script>
            var AjaxTaxDataDetail = '{{ route('tax.ajax') }}';
            var DeleteTax = '{{ route('tax.delete') }}';
            var UpdateTaxIsDefaultStatus = '{{ route('tax.default.status') }}';
            var getTaxEditDetails = '{{ route('tax.edit') }}';
            var csrfToken = $("[name=_token").val();

            function OpenTaxOffcanvas() {
                $("#itemLabel").html('Add Tax');
                $('#tax_id').val(0);

                if ($("#tax-master").length) {
                    $("#tax-master")[0].reset();
                }
                $('#offcanvasTax').modal('show');
                $("#offcanvasTax .modal-body").scrollTop(0);

                $("#itmimg_url").attr('src', "{{ asset('assets/images/logo/company-logo.png') }}");
                $('#tax-master').removeClass('was-validated');
                $("#saveTaxBtn").html("Save");
                $("#saveTax").prop('disabled', false);
                $("#taxReset").prop('disabled', false);
            }

            $(document).ready(function() {
                var options = {
                    beforeSubmit: showRequest, // pre-submit callback
                    success: showResponse // post-submit callback
                };

                $('#tax-master').ajaxForm(options);
            });

            function showRequest(formData, jqForm, options) {
                var queryString = $.param(formData);
                $("#saveTax").html("Saving...");
                $("#saveTax").prop("disabled", true);
                $("#taxReset").prop("disabled", true);

                return true;
            }

            function showResponse(responseText, statusText, xhr, $form) {

                $("#saveTax").html("Save <small>(Alt + S)</small>");
                $("#saveTax").prop("disabled", false);
                $("#taxReset").prop("disabled", false);

                if (responseText['status'] == 1) {
                    flasher['success'](responseText['msg']);
                    $('#offcanvasTax').modal('hide');
                    taxTable.ajax.reload();
                    resetTaxForm();

                } else if (responseText['status'] == 0) {
                    if (typeof responseText['data'] !== "undefined") {
                        var size = Object.keys(responseText['data']).length;
                        if (size > 0) {
                            for (var [key, value] of Object.entries(responseText['data'])) {
                                toastr["error"](value);
                            }
                        }
                    } else {
                        flasher['error'](responseText['msg']);
                    }
                }
            }

            $('#tax_status').select2({
                placeholder: 'search Status',
                dropdownParent: $("#offcanvasTax .modal-body")
            });

            function resetTaxForm() {
                $('#tax_id').val(0);
                $('#tax_title').val('');
                $('#tax_value').val('');
                $('#tax_status').val('1');
                $('#tax_remark').val('');
            }

            // Function to edit an item
            function editTax(id) {
                $("#saveTaxBtn").html("Save");
                $("#saveTax").prop('disabled', false);
                $("#taxReset").prop('disabled', false);

                $('#offcanvasTax').modal('hide');
                $('#itemLabel').html('Edit Item');
                $('#tax-master').removeClass('was-validated');

                $.ajax({
                    type: 'get',
                    url: getTaxEditDetails + '?id=' + id,
                    success: function(resultData) {
                        if (resultData['status'] == 1) {
                            $('#tax_id').val(resultData['data']['id']);
                            $('#tax_title').val(resultData['data']['title']);
                            $('#tax_value').val(resultData['data']['value']);
                            $("#tax_status").val(resultData['data']['status']).trigger('change');
                            $(".item_remark").val(resultData['data']['remark']);

                            if (resultData.data.is_default == 1) {
                                $('#is_default').prop("checked", true);
                            } else {
                                $('#is_default').prop("checked", false);
                            }

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

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

            function updateTaxstatus(id, checkboxElement) {
                var isChecked = $(checkboxElement).is(':checked');

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


            // Initialize DataTable
            var taxTable = $('#taxDetail').DataTable({
                // responsive: true,
                "aoColumnDefs": [{
                    "bSortable": false,
                    "aTargets": [0, 5]
                }],
                "order": [
                    [0, 'desc']
                ],
                "processing": true,
                "serverSide": true,
                pagingType: "full_numbers",
                "ajax": {
                    "url": AjaxTaxDataDetail,
                    "type": "GET",
                    "data": {
                        "_token": csrfToken,
                    }
                },
                "aoColumns": [{
                        "mData": "id"
                    },
                    {
                        "mData": "name"
                    },
                    {
                        "mData": "value"
                    },

                    {
                        "mData": "is_default",
                        orderable: false,
                        searchable: false
                    },
                    {
                        "mData": "status",
                        orderable: false,
                        searchable: false
                    },
                    {
                        "mData": "action",
                        orderable: false,
                        searchable: false
                    }
                ],
                language: {
                    search: "",
                    searchPlaceholder: "Search Tax 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>'
                    }
                }
            });
            var a = document.querySelector("#taxDetail 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, 5];

                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 (taxTable.column(t).search() !== this.value) {
                        taxTable.column(t).search(this.value).draw();
                    }
                });

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

            $('#profile-pic').on('click', function(e) {
                e.stopPropagation();
                $('#dropdown-menu').toggle();
            });
        </script>
    @endsection