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

            <!-- Modal for Add/Edit Item -->
            <div class="modal fade" tabindex="-1" id="offcanvasItem" 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="itemLabel" style="margin-left: 10px;margin-bottom: 0;"><b>Add Item</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="item-master" method="post" action="{{ route('storr1') }}" class="needs-validation"
                                enctype="multipart/form-data">
                                @csrf
                                <input type="hidden" name="item_id" id="item_id" value="0">
                                <input type="hidden" id="old_path" name="old_path" value="" />

                                <div class="form-group text-center mb-4">
                                    {{-- <label for="image" class="mb-1">Image</label> --}}
                                    <div id="imagePreview" class="d-flex align-items-start gap-4">
                                        {{-- <svg onclick="$('#image').click()" class="svg-icon profile-edit-Icon"
                                    style="--colorFill:white; right: 33%;" viewBox="0 0 1024 1024" version="1.1"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M834.3 705.7c0 82.2-66.8 149-149 149H325.9c-82.2 0-149-66.8-149-149V346.4c0-82.2 66.8-149 149-149h129.8v-42.7H325.9c-105.7 0-191.7 86-191.7 191.7v359.3c0 105.7 86 191.7 191.7 191.7h359.3c105.7 0 191.7-86 191.7-191.7V575.9h-42.7v129.8z">
                                    </path>
                                    <path
                                        d="M889.7 163.4c-22.9-22.9-53-34.4-83.1-34.4s-60.1 11.5-83.1 34.4L312 574.9c-16.9 16.9-27.9 38.8-31.2 62.5l-19 132.8c-1.6 11.4 7.3 21.3 18.4 21.3 0.9 0 1.8-0.1 2.7-0.2l132.8-19c23.7-3.4 45.6-14.3 62.5-31.2l411.5-411.5c45.9-45.9 45.9-120.3 0-166.2zM362 585.3L710.3 237 816 342.8 467.8 691.1 362 585.3zM409.7 730l-101.1 14.4L323 643.3c1.4-9.5 4.8-18.7 9.9-26.7L436.3 720c-8 5.2-17.1 8.7-26.6 10z m449.8-430.7l-13.3 13.3-105.7-105.8 13.3-13.3c14.1-14.1 32.9-21.9 52.9-21.9s38.8 7.8 52.9 21.9c29.1 29.2 29.1 76.7-0.1 105.8z">
                                    </path>
                                </svg> --}}
                                        <img src="{{ getCompanyFavicon() }}" id="itmimg_url"
                                            alt="Item Image" class="imagepreview img" style="border-radius: 10px;">
                                        <input type="file" class="form-control d-none" name="image" id="image"
                                            onchange="preview(this, '#imagePreview')">
                                        <div class="align-self-center">
                                            <a onclick="$('#image').click()" class="btn-custom"> Upload New Photo</a>
                                            <div class="fs-6 mt-3 text-muted">Allowed JPG, JPEG, WEBP or PNG.</div>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="float-label-group">
                                            <input type="text" class="form-control item_name" name="item_name"
                                                id="item_name" required value="{{ old('item_name') }}"
                                                placeholder="Enter Item Name" autofocus>
                                            <label for="item_name">Item 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 item_code" name="item_code"
                                                id="item_code" required value="{{ old('item_code') }}"
                                                placeholder="Item Code" readonly>
                                            <label for="item_code">Item Code<font color="red"> *</font></label>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="float-label-group" id="item_category_group">
                                            <select class="form-select item_category" name="item_category"
                                                id="item_category" required>
                                            </select>
                                            <label for="item_category">Category<font color="red"> *</font></label>
                                            <div class="invalid-feedback">
                                                Please select Category.
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="float-label-group" id="item_counter_group">
                                            <select class="form-select item_counter" name="item_counter"
                                                id="item_counter" required>
                                            </select>
                                            <label for="item_counter">Counter<font color="red"> *</font></label>
                                            <div class="invalid-feedback">
                                                Please select Counter.
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="float-label-group has-value">
                                            <select name="itemstatus" id="itemstatus" class="form-select" required>
                                                <option value="1">Active</option>
                                                <option value="0">Inactive</option>
                                            </select>
                                            <label for="itemstatus">Status<font color="red"> *</font></label>
                                        </div>
                                    </div>

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

                                        </div>
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <label for="priceDetails" class="form-control price-label">Price Details</label>
                                </div>

                                <div class="mb-3">
                                    <div class="float-label-group">
                                        <input type="number" id="itemsalerate" name="salerate" required
                                            class="form-control" placeholder="00.00" step="any">
                                        <label for="salerate">Sale Rate<font color="red"> *</font></label>

                                    </div>
                                </div>

                                <div class="row" style="display: none">
                                    <div class="col-md-4">
                                        <label for="igstper" class="mb-1">IGST Per (%)</label>
                                        <input type="number" id="igstper" name="igstper" class="form-control"
                                            min="0" placeholder="00.00">
                                    </div>
                                    <div class="col-md-4">
                                        <label for="sgstper" class="mb-1">SGST Per (%)</label>
                                        <input type="number" id="sgstper" name="sgstper" class="form-control"
                                            min="0" readonly placeholder="00.00">
                                    </div>
                                    <div class="col-md-4">
                                        <label for="cgstper" class="mb-1">CGST Per (%)</label>
                                        <input type="number" id="cgstper" name="cgstper" class="form-control"
                                            min="0" readonly placeholder="00.00">
                                    </div>
                                </div>

                                <div class="row" style="display: none">
                                    <div class="col-md-4">
                                        <label for="igstrate" class="mb-1">IGST Rate (₹)</label>
                                        <input type="text" id="igstrate" name="igstrate" class="form-control"
                                            min="0" readonly placeholder="00.00">
                                    </div>
                                    <div class="col-md-4">
                                        <label for="sgstrate" class="mb-1">SGST Rate (₹)</label>
                                        <input type="text" id="sgstrate" name="sgstrate" class="form-control"
                                            min="0" readonly placeholder="00.00">
                                    </div>
                                    <div class="col-md-4">
                                        <label for="cgstrate" class="mb-1">CGST Rate (₹)</label>
                                        <input type="text" id="cgstrate" name="cgstrate" class="form-control"
                                            min="0" readonly placeholder="00.00">
                                    </div>
                                </div>

                                <div class="mb-3 d-none">
                                    <label for="totalrate" class="mb-1">Total Rate</label>
                                    <input type="text" id="totalrate" name="totalrate" class="form-control" readonly
                                        placeholder="00.00">
                                </div>


                        </div>
                        <div class="modal-footer">
                            <button type="reset" class="btn-custom-secondary" id="itemReset"
                                onclick="resetItemForm()">Reset</button>
                            <button type="submit" class="btn-custom" id="saveItem">
                                <span id="item_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="item_btnText">Save</span>
                            </button>
                        </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    @endsection('dashboard-content')

    @section('custom-scripts')
        <script>
            // Define route variables
            var categoryselect2 = '{{ route('categories.list') }}';
            var counterselect2 = '{{ route('counters.list') }}';
            var ItemDataTable = '{{ route('item.ajax') }}';
            var Deleteitem = '{{ route('item.delete') }}';
            var itemstutasupdate = '{{ route('item.status') }}';
            var Edititem = '{{ route('edititem') }}';
            var saveItemUrl = '{{ route('storr1') }}';
            var csrfToken = $("[name=_token").val();
              window.companyLogoUrl = "{{ getCompanyLogo() }}";

            function updateFloatLabel(selectId, groupId) {
                const $group = $('#' + groupId);
                const $select = $('#' + selectId);
                if ($select.val() && $select.val() !== '') {
                    $group.addClass('has-value');
                } else {
                    $group.removeClass('has-value');
                }
            }


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

            // Initialize category select2
            $('#item_category').select2({
                ajax: {
                    url: categoryselect2,
                    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 category',
                dropdownParent: $("#offcanvasItem .modal-body")
            }).on('select2:select select2:clear change', function() {
                updateFloatLabel('item_category', 'item_category_group');
            }).on('select2:open', function() {
                $('#item_category_group').addClass('has-value');
            });

            // Initialize counter select2
            $('#item_counter').select2({
                ajax: {
                    url: counterselect2,
                    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 counter',
                dropdownParent: $("#offcanvasItem .modal-body")
            }).on('select2:select select2:clear change', function() {
                updateFloatLabel('item_counter', 'item_counter_group');
            }).on('select2:open', function() {
                $('#item_counter_group').addClass('has-value');
            });

            // Function to open the offcanvas for adding a new item
            function OpenItemOffcanvas() {
                $("#itemLabel").html('Add Item');
                $('#item_id').val('');

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

                $('#item_category').val(null).trigger('change');
                $('#item_counter').val(null).trigger('change');
                $('#offcanvasItem').modal('show');
                $("#offcanvasItem .modal-body").scrollTop(0);

                 $('#itmimg_url').attr('src', window.companyLogoUrl);
                $('#item-master').removeClass('was-validated');
                $("#item_btnText").html("Save");
                $("#saveItem").prop('disabled', false);
                $("#itemReset").prop('disabled', false);
            }

            // Function to reset the item form
            function resetItemForm() {
                $('#item_id').val('');
                $('#item_name').val('');
                $('#item_code').val('');
                $('#item_category').val(null).trigger('change');
                $('#item_counter').val(null).trigger('change');
                $('#itemstatus').val('1');
                $('#item_remark').val('');
                $('#itemsalerate').val('');
                $('#igstper').val('');
                $('#sgstper').val('');
                $('#cgstper').val('');
                $('#igstrate').val('');
                $('#sgstrate').val('');
                $('#cgstrate').val('');
                $('#totalrate').val('');
                 $('#itmimg_url').attr('src', window.companyLogoUrl);

            }

            // Function to edit an item
            function edititem(id) {
                $("#item_btnText").html("Save");
                $("#saveItem").prop('disabled', false);
                $("#itemReset").prop('disabled', false);

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

                $.ajax({
                    type: 'get',
                    url: Edititem + '?id=' + id,
                    success: function(resultData) {
                        if (resultData['status'] == 1) {
                            $('#item_id').val(resultData['data']['id']);
                            $('.item_name').val(resultData['data']['name']);
                            $('.item_code').val(resultData['data']['code']);

                            // Set category
                            var selectedcategoryID = resultData['data']['category'];
                            var selectedcategoryText = resultData['data']['categoriesname'];
                            var newcategory = new Option(selectedcategoryText, selectedcategoryID, true, true);
                            $('#item_category').append(newcategory).trigger('change');

                            // Set counter
                            var selectedcounterID = resultData['data']['counter'];
                            var selectedcounterText = resultData['data']['countername'];
                            var newcounter = new Option(selectedcounterText, selectedcounterID, true, true);
                            $('#item_counter').append(newcounter).trigger('change');

                            $("#itemstatus").val(resultData['data']['status']).trigger('change');
                            $("#item_remark").val(resultData['data']['remark']);
                            $("#itemsalerate").val(resultData['data']['salerate']);
                            $("#totalrate").val(resultData['data']['totalrate']);

                            if (resultData['data']['image']) {
                                var imagePath = "{{ asset('/images/item_images/') }}/" + resultData['data'][
                                    'image'
                                ];
                                $(".imagepreview").attr('src', imagePath);
                                $('#old_path').val(resultData['data']['image']);
                            } else {
                                $('#itmimg_url').attr('src', window.companyLogoUrl);

                            }

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

            window.PRIMARY_COLOR = "{{ getPrimaryColor() }}";
            window.SECONDARY_COLOR = "{{ getSecondaryColor() }}";
            // Function to delete an item
            function deleteitem(id) {
                Swal.fire({
                    title: "Are You Sure To Delete This Item?",
                    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: Deleteitem + "?id=" + id,
                            success: function(resultData) {
                                if (resultData['status'] == 1) {
                                    flasher['success'](resultData['msg'], {
                                        timeout: 2500
                                    });
                                    itemTable.ajax.reload();
                                } else {
                                    flasher['error'](resultData['msg'], {
                                        timeout: 2500
                                    });
                                }
                            }
                        });
                    }
                });
            }

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

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

            // Function to preview image
            function preview(input, previewSelector) {
                const reader = new FileReader();
                reader.onload = function() {
                    const output = document.querySelector(previewSelector + ' img');
                    if (output) {
                        output.src = reader.result;
                    }
                };
                if (input.files && input.files[0]) {
                    reader.readAsDataURL(input.files[0]);
                } else {
                    console.error('No file selected.');
                }
            }

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

            // Calculate rates based on sale rate
            function calculateRates() {
                const saleRate = parseFloat($("#itemsalerate").val()) || 0;
                // const gstPer = 18;
                // const igstPer = gstPer;
                // const sgstPer = gstPer / 2;
                // const cgstPer = gstPer / 2;

                // const igstRate = saleRate * (igstPer / 100);
                // const sgstRate = saleRate * (sgstPer / 100);
                // const cgstRate = saleRate * (cgstPer / 100);

                // const totalWithSGSTCGST = saleRate + sgstRate + cgstRate;

                $("#totalrate").val(saleRate.toFixed(2));
            }

            // Initialize DataTable
            var itemTable = $('#itemdetail').DataTable({
                // responsive: true,
                "aoColumnDefs": [{
                    "bSortable": false,
                    "aTargets": [1, 7]
                }],
                "order": [
                    [0, 'desc']
                ],
                "processing": true,
                "serverSide": true,
                pagingType: "full_numbers",
                "ajax": {
                    "url": ItemDataTable,
                    "type": "GET",
                    "data": {
                        "_token": csrfToken,
                    }
                },
                "aoColumns": [{
                        "mData": "id"
                    },
                    {
                        "mData": "image",
                        orderable: false,
                        searchable: false
                    },
                    {
                        "mData": "name"
                    },
                    // {
                    //     "mData": "code"
                    // },
                    {
                        "mData": "category"
                    },
                    {
                        "mData": "counter"
                    },
                    {
                        "mData": "totalrate"
                    },
                    {
                        "mData": "status",
                        orderable: false,
                        searchable: false
                    },
                    {
                        "mData": "action",
                        orderable: false,
                        searchable: false
                    }
                ],
                language: {
                    search: "",
                    searchPlaceholder: "Search Item Name,Category,Counter",
                    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("#itemdetail 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, 1, 6, 7];

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

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

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

                // Show loading spinner
                $('#item_loader').show();
                $('#saveItem').prop('disabled', true);
                $('#itemReset').prop('disabled', true);

                // Create FormData object to handle file uploads
                var formData = new FormData(this);

                $.ajax({
                    url: saveItemUrl,
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(response) {
                        // Hide loading spinner
                        $('#item_loader').hide();
                        $('#saveItem').prop('disabled', false);
                        $('#itemReset').prop('disabled', false);

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

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

                            // Reload the data table
                            itemTable.ajax.reload();
                        } else {
                            // Show error message
                            flasher['error'](response.msg, {
                                timeout: 2500
                            });
                        }
                    },
                    error: function(xhr) {
                        // Hide loading spinner
                        $('#item_loader').hide();
                        $('#saveItem').prop('disabled', false);
                        $('#itemReset').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 item name input to generate code
            $('#item_name').on('keyup', function() {
                generateCode(this.value);
            });

            // Event listener for sale rate input to calculate total
            $('#itemsalerate').on('keyup', function() {
                calculateRates();
            });
            $('#profile-pic').on('click', function(e) {
                e.stopPropagation();
                $('#dropdown-menu').toggle();
            });
        </script>
    @endsection