@extends('layouts.admin')
@section('content')
<div class="row">
    <div class="col-12">
        <div class="card table-card rounded-0">
            <div class="card-header service-card-header" style="padding: 12px 15px">
                <div class="d-sm-flex align-items-center justify-content-between">
                    <h5 class="mb-3 mb-sm-0">Digital Inventory</h5>
                    <div class="d-flex gap-2">
                        <input type="search" class="form-control py-2" id="service-search" placeholder="Search"  />
                        <button type="button" class="btn btn-light-primary border-primary rounded py-2" data-bs-toggle="modal" data-bs-target="#addNewInventory"><i class="fas fa-plus"></i></button>
                    </div>
                </div>
            </div>
            <div class="card-body pb-0">
                <div class="table-responsive ">
                    <table id="data-table" class="display table px-5">
                        <thead>
                            <tr>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
            <div class="card-footer" style="padding: 12px 15px">
                <button type="button" class="btn btn-icon btn-light-primary ser-page-prev"><i class="fas fa-angle-left"></i></button>
                <button type="button" class="btn btn-icon btn-light-primary ser-page-next" style="margin-right: auto"><i class="fas fa-angle-right"></i></button>
            </div>
        </div>
    </div>
</div>
{{-- Canvas --}}
<div class="offcanvas offcanvas-end" tabindex="-1" id="inventory-details" aria-labelledby="servicedetailsLabel" style="width: 850px">
    <div class="offcanvas-header border-bottom">
        <h5 class="offcanvas-title" id="announcementLabel"></h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body p-0" id="offcanvas-body">
        <input type="hidden" id="inventoryId" name="inventoryId">
        <div class="d-block d-md-flex">
            <div class="customer-m-menu" id="menu">
                <button type="button" data-section="available" class="active btn rounded-0"><span id="availableCount">Available</span></button>
                <button type="button" data-section="soldout" class="btn rounded-0" id="soldOutCount"><span>Slod Out</span></button>
                <button type="button" data-section="addcode" class="btn rounded-0"><span>Add New Code</span></button>
                <button type="button" data-section="inventory" class="btn rounded-0"><span>Manage Inventory</span></button>
            </div>
            <div class="customer-m-menu-content" id="content" >
                <div id="available" class="section p-4">
                    <div class="card table-card rounded-0">
                        <div class="card-header" style="padding: 12px 15px">
                            <div class="d-sm-flex align-items-center">
                                <div class="d-flex gap-2">
                                    <input type="search" class="form-control py-2" id="available-code-search" placeholder="Search"  />
                                </div>
                            </div>
                        </div>
                        <div class="card-body pb-0">
                            <div class="table-responsive ">
                                <table id="availableCodeTable" class="display table px-5">
                                    <thead>
                                        <tr>
                                        </tr>
                                    </thead>
                                </table>
                            </div>
                        </div>
                        <div class="card-footer" style="padding: 12px 15px">
                            <button type="button" class="btn btn-icon btn-light-primary available-table-prev"><i class="fas fa-angle-left"></i></button>
                            <button type="button" class="btn btn-icon btn-light-primary available-table-next" style="margin-right: auto"><i class="fas fa-angle-right"></i></button>
                        </div>
                    </div>
                </div>
                <div id="soldout" class="section p-4">
                    <div class="card table-card rounded-0">
                        <div class="card-header" style="padding: 12px 15px">
                            <div class="d-sm-flex align-items-center">
                                <div class="d-flex gap-2">
                                    <input type="search" class="form-control py-2" id="soldout-code-search" placeholder="Search"  />
                                </div>
                            </div>
                        </div>
                        <div class="card-body pb-0">
                            <div class="table-responsive ">
                                <table id="soldOutCodeTable" class="display table px-5">
                                    <thead>
                                        <tr>
                                        </tr>
                                    </thead>
                                </table>
                            </div>
                        </div>
                        <div class="card-footer" style="padding: 12px 15px">
                            <button type="button" class="btn btn-icon btn-light-primary soldout-table-prev"><i class="fas fa-angle-left"></i></button>
                            <button type="button" class="btn btn-icon btn-light-primary soldout-table-next" style="margin-right: auto"><i class="fas fa-angle-right"></i></button>
                        </div>
                    </div>
                </div>
                <div id="addcode" class="section p-4">
                    <div class="card rounded-0">
                        <h5 class="card-header py-3">Add Single Code</h5>
                        <form id="addSingleCode">
                            <div class="card-body">
                                <input type="text" class="form-control" id="new-code" placeholder="Enter Code">
                            </div>
                            <div class="card-footer py-3">
                                <button type="submit" class="btn btn-primary rounded" id="addSingleCodeBtn">
                                    <i class="fas fa-plus"></i> Add Code
                                    <span class="spinner-border spinner-border-sm d-none" id="addSingleCodeLoader" role="status" aria-hidden="true"></span>
                                </button>
                            </div>
                        </form>
                    </div>
                    <div class="card rounded-0">
                        <h5 class="card-header py-3">Add Bulk Code</h5>
                        <form id="addBulkCode">
                            <div class="card-body">
                                <textarea class="form-control" id="new-bulk-code" placeholder="Enter Bulk Code" rows="15"></textarea>
                            </div>
                            <div class="card-footer py-3">
                                <button type="submit" class="btn btn-primary rounded" id="addBulkCodeBtn">
                                    <i class="fas fa-plus"></i> Add Bulk Code
                                    <span class="spinner-border spinner-border-sm d-none" id="addBulkCodeLoader" role="status" aria-hidden="true"></span>
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
                <div id="inventory" class="section">
                    <form id="updateInventory">
                        <div class="px-4 pt-2 pb-4 offcanva-content-section">
                            <div class="mb-3 col-sm-8">
                                <label for="update-inventory-name" class="col-form-label">Inventory Name</label>
                                <input type="text" class="form-control" id="update-inventory-name" placeholder="Inventory Name" required />
                            </div>
                            <div class="mb-3 col-sm-8">
                                <label for="update-inventory-role" class="col-form-label">New Orders When Sold Out All Code</label>
                                <select id="update-inventory-role" class="form-control">
                                    <option value="Waiting Action">Waiting Action</option>
                                    <option value="Rejected">Rejected</option>
                                </select>
                            </div>
                        </div>
                        <div class="border-top px-4 py-3 offcanva-update-section">
                            <div class="col-12">
                                <button type="submit" class="btn btn-primary rounded" id="updateInventoryBtn">
                                    <i class="fas fa-check-circle"></i> Update
                                    <span class="spinner-border spinner-border-sm d-none" id="updateInventoryLoader" role="status"></span>
                                </button>
                                <button type="button" class="btn btn-light-danger rounded ms-2" id="delInventoryBtn">
                                    <i class="fas fa-trash-alt"></i> Delete
                                    <span class="spinner-border spinner-border-sm d-none" id="delInventoryLoader" role="status"></span>
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{{-- Add New Inventory - Modal --}}
<div class="modal fade modal-animate" id="addNewInventory" tabindex="-1" aria-labelledby="addNewInventory" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form id="new-inventory-form">
                <div class="modal-header">
                    <h5 class="modal-title" id="addNewInventoryLabel">Add new inventory</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row mb-3">
                        <label for="new-inventory-name" class="col-sm-4 col-form-label">Inventory Name</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="new-inventory-name" placeholder="Inventory Name" required />
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-primary rounded" id="new-update-button" type="submit">
                        <i class="fas fa-check-circle"></i> Add
                    </button>
                    <button class="btn btn-primary rounded" id="new-loader-button" type="button" style="display:none" disabled>
                        <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                        Loading...
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
{{-- Update Code - Modal --}}
<div class="modal fade modal-animate" id="viewCode" tabindex="-1" aria-labelledby="viewCode" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form id="update-code-form">
                <div class="modal-header">
                    <h5 class="modal-title" id="viewCodeLabel">Update Code</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row mb-3">
                        <label for="update-code-data" class="col-sm-3 col-form-label">Enter Code</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="update-code-data" placeholder="Enter Code" required />
                        </div>
                    </div>
                    <div class="row mb-3">
                        <label for="mark-as" class="col-sm-3 col-form-label">Mark as</label>
                        <div class="col-sm-9">
                            <select name="" id="mark-as" class="form-control">
                                <option value="Available">Available</option>
                                <option value="Sold out">Sold out</option>
                            </select>
                        </div>
                    </div>
                    <input type="hidden" id="code-id" name="code-id">
                </div>
                <div class="modal-footer">
                    <button class="btn btn-primary" id="update-code-button" type="submit">
                        <i class="fas fa-check-circle"></i> Update
                    </button>
                    <button class="btn btn-primary" id="update-code-loader" type="button" disabled style="display: none">
                        <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                        Loading...
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
{{-- Delte Inventory Modal --}}
<div class="modal fade" id="confirmDeleteModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title">Confirm Deletion</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
            <p id="confirmDeleteText"></p>
            <p>Type <strong>YES</strong> to confirm:</p>
            <input type="text" id="deleteConfirmationInput" class="form-control" placeholder="Type YES to confirm" />
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary rounded" data-bs-dismiss="modal">Cancel</button>
            <button type="button" class="btn btn-danger rounded" id="confirmDeleteBtn">
                Delete
                <span class="spinner-border spinner-border-sm d-none" id="confirmDeleteLoader" role="status"></span>
            </button>
        </div>
        </div>
    </div>
</div>
  
@endsection
@section('footer_script')
<script>
    $(document).ready(function() {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        // IF OFFCANVAS HIDE THEN CLEAR ALL DATA
        $('#inventory-details').on('hide.bs.offcanvas', function () {
            $('#menu button').removeClass('active');
            $('[data-section="available"]').addClass('active');
            availableLoaded = false;
            soldoutLoaded = false;
        });
        // Service List - Data Table
        table = $('#data-table').DataTable({
            processing: false,
            serverSide: false,
            lengthChange: false,
            info: false,
            footer: false,
            ajax: {
                url: '{{ route('fectch_inventory') }}',
                type: 'GET',
                beforeSend: function() {
                    $('.top-loader').show();
                },
                complete: function() {
                    $('.top-loader').hide();
                },
            },
            columns: [
                { data: 'name', title: 'INVENTORY NAME', className: 'text-left', orderable: true, searchable: true },
                {
                    data: 'available_code',
                    title: 'Available',
                    className: 'text-left',
                    orderable: true,
                    searchable: true,
                    render: function(data) {
                        return data + ' code available' ;
                    }
                },
                {
                    data: 'available_code',
                    title: 'Status',
                    className: 'text-end',
                    orderable: true,
                    searchable: true,
                    render: function(data) {
                        if (data > 0) {
                            return '<span class="badge bg-light-success fs-6">Active</span>';
                        } else {
                            return '<span class="badge bg-light-danger fs-6">Empty</span>';
                        }

                    }
                },
            ],
            order: [[0, 'asc']],
            pageLength: 100,
            language: {
                search: "",
                searchPlaceholder: "Search...",
                lengthMenu: "_MENU_",
                paginate: {
                    previous: "<",
                    next: ">"
                }
            },
            createdRow: function(row, data, dataIndex) {
                $('td', row).on('click', function(event) {
                    loadInventoryDetails(data.id);
                });
            },
            drawCallback: function(settings) {
                var api = this.api();
                var totalEntries = api.page.info().recordsTotal;
                $('.card-header h5').text('Digital Inventory - ' + totalEntries);
                $('#credit-count').text(totalEntries);
                $('.dataTables_wrapper .dataTables_paginate').hide();
                $('.dataTables_scrollBody').css('border-bottom', '0');
            }
        });
        // Add Custom Paginate for service data table
        $('.ser-page-prev').on('click', function() {
            table.page('previous').draw('page');
        });
        $('.ser-page-next').on('click', function() {
            table.page('next').draw('page');
        });
        // Seraching - Service datat table
        $('#service-search').on('input', function() {
            var searchValue = this.value;
            if (searchValue.length === 0) {
                table.search('').draw();
            } else {
                table.search(searchValue).draw();
            }
        });
        // Show offcanvas with service data
        function loadInventoryDetails(inventoryID) {
            $.ajax({
                url: '/admin/load/inventory/' + inventoryID,
                method: 'GET',
                beforeSend: function() {
                    $('.top-loader').show();
                },
                complete: function() {
                    $('.top-loader').hide();
                },
                success: function(response) {
                    if(response.success){
                        initMenu(inventoryID);
                        $('#inventory-details').offcanvas('show');
                        $('.offcanvas-title').text(response.inventory.name);
                        $('#inventoryId').val(response.inventory.id);
                        $('#update-inventory-name').val(response.inventory.name);
                        $('#update-inventory-role').val(response.inventory.order_after_soldout);
                        $('#codeFor').val(response.inventory.name);
                    }
                },
                error: function(xhr, status, error) {
                    notifier.show('ERROR', 'Error loading details: ' + error, 'danger', '/resource/high_priority-48.png', 10000);
                },
            });
        }
        // MENU FUNCTION INITIALIZE
        let availableLoaded = false;
        let soldoutLoaded = false;
        function initMenu(inventoryID) {
            $('.section').hide();
            $('#available').show();
            if (!availableLoaded && !soldoutLoaded) {
                fetchAvailableCode(inventoryID);
                fetchSoldOutCode(inventoryID);
                availableLoaded = true;
                soldoutLoaded = true;
            }
            $('#menu button').off('click').on('click', function () {
                const section = $(this).data('section');
                $('.section').hide();
                $('#menu button').removeClass('active');
                $(this).addClass('active');
                $('#' + section).show();
                if (section === 'available' && !availableLoaded) {
                    fetchAvailableCode(inventoryID);
                    availableLoaded = true;
                }
                if (section === 'soldout' && !soldoutLoaded) {
                    fetchSoldOutCode(inventoryID);
                    soldoutLoaded = true;
                }
            });
        }
        // Fetch Available code
        function fetchAvailableCode(inventoryID){
            if ($.fn.DataTable.isDataTable('#availableCodeTable')) {
                $('#availableCodeTable').DataTable().clear().destroy();
            }
            availableTable = $('#availableCodeTable').DataTable({
                processing: false,
                serverSide: true,
                lengthChange: false,
                info: false,
                footer: false,
                ajax: {
                    url: '/admin/fetch/available-inventory/' + inventoryID,
                    type: 'GET',
                    beforeSend: function() {
                        $('.top-loader').show();
                    },
                    complete: function() {
                        $('.top-loader').hide();
                    },
                },
                columns: [
                    { data: 'code', title: 'CODE', className: 'text-left', orderable: true, searchable: true },
                    {
                        data: 'created_at',
                        title: 'CREATED AT',
                        className: 'text-left',
                        orderable: true,
                        searchable: true,
                        render: function(data, type, row) {
                            if (!data) return '-';
                            const date = new Date(data);
                            const day = String(date.getDate()).padStart(2, '0');
                            const month = String(date.getMonth() + 1).padStart(2, '0');
                            const year = date.getFullYear();
                            const hours = String(date.getHours()).padStart(2, '0');
                            const minutes = String(date.getMinutes()).padStart(2, '0');
                            return `${day}-${month}-${year} ${hours}:${minutes}`;
                        }
                    },
                    { 
                        data: 'id',
                        title: 'ACTION',
                        className: 'text-end',
                        orderable: false,
                        searchable: false,
                        render: function(data, type, row, meta) {
                            return `
                            <div class="btn-group" role="group">
                                <button type="button" class="btn btn-sm btn-primary rounded-circle ms-1" data-id="${data}" id="editCode">
                                <i class="fas fa-pencil-alt"></i>
                                </button>
                                <button type="button" class="btn btn-sm btn-danger rounded-circle ms-1" data-id="${data}" data-code="${row.code}" id="delCode">
                                <i class="fas fa-trash-alt"></i>
                                </button>
                            </div>
                            `;
                        }
                    }
                ],
                order: [[1, 'desc']],
                pageLength: 12,
                language: {
                    search: "",
                    searchPlaceholder: "Search...",
                    lengthMenu: "_MENU_",
                    paginate: {
                        previous: "<",
                        next: ">"
                    }
                },
                drawCallback: function(settings) {
                    var api = this.api();
                    var totalEntries = api.page.info().recordsTotal;
                    $('#availableCount').text('Available - ' + totalEntries + ' Code');
                    $('.dataTables_wrapper .dataTables_paginate').hide();
                    $('.dataTables_scrollBody').css('border-bottom', '0');
                }
            });
            // Add Custom Paginate for service data table
            $('.available-table-prev').on('click', function() {
                availableTable.page('previous').draw('page');
            });
            $('.available-table-next').on('click', function() {
                availableTable.page('next').draw('page');
            });
            // Seraching - Service datat table
            $('#available-code-search').on('input', function() {
                var searchValue = this.value;
                if (searchValue.length === 0) {
                    availableTable.search('').draw();
                } else {
                    availableTable.search(searchValue).draw();
                }
            });
        }
        // Sold Out code
        function fetchSoldOutCode(inventoryID){
            if ($.fn.DataTable.isDataTable('#soldOutCodeTable')) {
                $('#soldOutCodeTable').DataTable().clear().destroy();
            }
            soldOutTable = $('#soldOutCodeTable').DataTable({
                processing: false,
                serverSide: true,
                lengthChange: false,
                info: false,
                footer: false,
                ajax: {
                    url: '/admin/fetch/soldout-inventory/' + inventoryID,
                    type: 'GET',
                    beforeSend: function() {
                        $('.top-loader').show();
                    },
                    complete: function() {
                        $('.top-loader').hide();
                    },
                },
                columns: [
                    { data: 'code', title: 'CODE', className: 'text-left', orderable: true, searchable: true },
                    {
                        data: 'soldout_at',
                        title: 'SOLD OUT AT',
                        className: 'text-left',
                        orderable: true,
                        searchable: true,
                        render: function(data, type, row) {
                            if (!data) return '-';
                            const date = new Date(data);
                            const day = String(date.getDate()).padStart(2, '0');
                            const month = String(date.getMonth() + 1).padStart(2, '0');
                            const year = date.getFullYear();
                            const hours = String(date.getHours()).padStart(2, '0');
                            const minutes = String(date.getMinutes()).padStart(2, '0');
                            return `${day}-${month}-${year} ${hours}:${minutes}`;
                        }
                    },
                    { 
                        data: 'id',
                        title: 'ACTION',
                        className: 'text-end',
                        orderable: false,
                        searchable: false,
                        render: function(data, type, row, meta) {
                            return `
                            <div class="btn-group" role="group">
                                <button type="button" class="btn btn-sm btn-primary rounded-circle ms-1" data-id="${data}" id="editCode">
                                <i class="fas fa-pencil-alt"></i>
                                </button>
                                <button type="button" class="btn btn-sm btn-danger rounded-circle ms-1" data-id="${data}" data-code="${row.code}" id="delCode">
                                <i class="fas fa-trash-alt"></i>
                                </button>
                            </div>
                            `;
                        }
                    }
                ],
                order: [[1, 'desc']],
                pageLength: 12,
                language: {
                    search: "",
                    searchPlaceholder: "Search...",
                    lengthMenu: "_MENU_",
                    paginate: {
                        previous: "<",
                        next: ">"
                    }
                },
                createdRow: function(row, data, dataIndex) {
                    $('td', row).on('click', function(event) {
                        // loadInventoryDetails(data.id);
                    });
                },
                drawCallback: function(settings) {
                    var api = this.api();
                    var totalEntries = api.page.info().recordsTotal;
                    $('#soldOutCount').text('Sold Out - ' + totalEntries + ' Code');
                    $('.dataTables_wrapper .dataTables_paginate').hide();
                    $('.dataTables_scrollBody').css('border-bottom', '0');
                }
            });
            // Add Custom Paginate for service data table
            $('.soldout-table-prev').on('click', function() {
                soldOutTable.page('previous').draw('page');
            });
            $('.soldout-table-next').on('click', function() {
                soldOutTable.page('next').draw('page');
            });
            // Seraching - Service datat table
            $('#soldout-code-search').on('input', function() {
                var searchValue = this.value;
                if (searchValue.length === 0) {
                    soldOutTable.search('').draw();
                } else {
                    soldOutTable.search(searchValue).draw();
                }
            });
        }
        // Refresh Main table
        function refreshMainTable() {
            if (table) {table.ajax.reload(null, false);}
        }
        // Refresh Available Code table
        function reloadAvailableTable() {
            if (availableTable) {availableTable.ajax.reload(null, false);}
        }
        // Refresh Soldout Code table
        function reloadSoldoutTable() {
            if (soldOutTable) {soldOutTable.ajax.reload(null, false);}
        }
        // UPDATE CODE
        $(document).on('click', '#editCode', function () {
            var codeId = $(this).data('id');
            $.ajax({
                url: '/admin/fetch/code-data/' + codeId,
                method: 'GET',
                beforeSend: function() {
                    $('.top-loader').show();
                },
                complete: function() {
                    $('.top-loader').hide();
                },
                success: function(response) {
                    if(response.success){
                        $('#viewCode').modal('show');
                        $('#update-code-data').val(response.codeData.code);
                        $('#mark-as').val(response.codeData.status);
                        $('#code-id').val(response.codeData.id);
                    }
                },
                error: function(xhr, status, error) {
                    notifier.show('ERROR', 'Error loading details: ' + error, 'danger', '/resource/high_priority-48.png', 10000);
                },
            });
        });
        $(document).ready(function() {
            $('#update-code-form').submit(function(e) {
                e.preventDefault();
                var formData = {
                    upId: $('#code-id').val(),
                    upCode: $('#update-code-data').val(),
                    upStatus: $('#mark-as').val(),
                    _token: '{{ csrf_token() }}'
                };
                $.ajax({
                    url: '{{ route('update_code') }}',
                    method: 'POST',
                    data: formData,
                    beforeSend: function() {
                        $('#update-code-button').hide();
                        $('#update-code-loader').show();
                        $('.top-loader').show();
                    },
                    complete: function() {
                        $('#update-code-button').show();
                        $('#update-code-loader').hide();
                        $('.top-loader').hide();
                    },
                    success: function(response) {
                        if (response.success) {
                            $('#viewCode').modal('hide');
                            $('#update-code-form')[0].reset();
                            notifier.show('SUCCESS', response.message, 'success', '/resource/ok-48.png', 10000);
                            var inventoryId = $('#inventoryId').val();
                            reloadAvailableTable();
                            reloadSoldoutTable();
                            refreshMainTable()
                        }
                        else{
                            notifier.show('ERROR', response.message, 'danger', '/resource/high_priority-48.png', 10000);
                        }
                    },
                    error: function(xhr, status, error) {
                        notifier.show('ERROR', error, 'danger', '/resource/high_priority-48.png', 10000);
                    }
                });
            });
        });
        // Delete Code
        $(document).on('click', '#delCode', function() {
            var codeId = $(this).data('id');
            var code = $(this).data('code');
            var userConfirmed = confirm('Are you sure to delete code?\n' + code);
            if(userConfirmed){
                $.ajax({
                    url: '/admin/code/del/' + codeId,
                    method: 'GET',
                    beforeSend: function() {
                        $('.top-loader').show();
                    },
                    complete: function() {
                        $('.top-loader').hide();
                    },
                    success: function(response) {
                        if(response.success){
                            notifier.show('SUCCESS', response.message, 'success', '/resource/ok-48.png', 10000);
                            reloadAvailableTable();
                            reloadSoldoutTable();
                            refreshMainTable()
                        }
                        else{
                            notifier.show('ERROR', response.message, 'danger', '/resource/high_priority-48.png', 10000);
                        }
                    },
                    error: function(xhr, status, error) {
                        alert('Error loading details: ' + error);
                    },
                });
            }
        });
        // ADD SINGLE CODE
        $(document).ready(function() {
            $('#addSingleCode').submit(function(e) {
                e.preventDefault();
                var formData = {
                    Code: $('#new-code').val(),
                    inventoryId: $('#inventoryId').val(),
                    _token: '{{ csrf_token() }}'
                };
                $.ajax({
                    url: '{{ route('add_code') }}',
                    method: 'POST',
                    data: formData,
                    beforeSend: function() {
                        $('.top-loader').show();
                        $('#addSingleCodeBtn').prop('disabled', true);
                        $('#addSingleCodeLoader').removeClass('d-none');
                    },
                    complete: function() {
                        $('.top-loader').hide();
                        $('#addSingleCodeBtn').prop('disabled', false);
                        $('#addSingleCodeLoader').addClass('d-none');
                    },
                    success: function(response) {
                        if (response.success) {
                            notifier.show('SUCCESS', response.message, 'success', '/resource/ok-48.png', 10000);
                            $('#addSingleCode')[0].reset();
                            reloadAvailableTable();
                            reloadSoldoutTable();
                            refreshMainTable()
                        }
                        else{
                            notifier.show('ERROR', response.message, 'danger', '/resource/high_priority-48.png', 10000);
                        }
                    },
                    error: function(xhr, status, error) {
                        notifier.show('ERROR', error, 'danger', '/resource/high_priority-48.png', 10000);
                    }
                });
            });
        });
        // ADD BULK CODE
        $(document).ready(function() {
            $('#addBulkCode').submit(function(e) {
                e.preventDefault();
                var formData = {
                    Code: $('#new-bulk-code').val().split('\n').map(line => line.trim()).filter(line => line !== ''),
                    inventoryId: $('#inventoryId').val(),
                    _token: '{{ csrf_token() }}'
                };
                $.ajax({
                    url: '{{ route('add_bulk_code') }}',
                    method: 'POST',
                    data: formData,
                    beforeSend: function() {
                        $('.top-loader').show();
                        $('#addBulkCodeBtn').prop('disabled', true);
                        $('#addBulkCodeLoader').removeClass('d-none');
                    },
                    complete: function() {
                        $('.top-loader').hide();
                        $('#addBulkCodeBtn').prop('disabled', false);
                        $('#addBulkCodeLoader').addClass('d-none');
                    },
                    success: function(response) {
                        if (response.success) {
                            notifier.show('SUCCESS', response.message, 'success', '/resource/ok-48.png', 10000);
                            $('#addBulkCode')[0].reset();
                            reloadAvailableTable();
                            reloadSoldoutTable();
                            refreshMainTable()
                        }
                        else{
                            notifier.show('ERROR', response.message, 'danger', '/resource/high_priority-48.png', 10000);
                        }
                    },
                    error: function(xhr, status, error) {
                        notifier.show('ERROR', error, 'danger', '/resource/high_priority-48.png', 10000);
                    }
                });
            });
        });
        // START - ADD NEW INVENTORY
        $(document).ready(function() {
            $('#new-inventory-form').submit(function(e) {
                e.preventDefault();
                var formData = {
                    inventoryName: $('#new-inventory-name').val(),
                    _token: '{{ csrf_token() }}'
                };
                $.ajax({
                    url: '{{ route('add_inventory') }}',
                    method: 'POST',
                    data: formData,
                    beforeSend: function() {
                        $('#new-update-button').hide();
                        $('#new-loader-button').show();
                        $('.top-loader').show();
                    },
                    complete: function() {
                        $('#new-update-button').show();
                        $('#new-loader-button').hide();
                        $('.top-loader').hide();
                    },
                    success: function(response) {
                        if (response.success) {
                            notifier.show('SUCCESS', response.message, 'success', '/resource/ok-48.png', 10000);
                            $('#addNewInventory').modal('hide');
                            $('#new-inventory-form')[0].reset();
                            refreshMainTable();
                        }
                        else{
                            notifier.show('ERROR', response.message, 'danger', '/resource/high_priority-48.png', 10000);
                        }
                    },
                    error: function(xhr, status, error) {
                        notifier.show('ERROR', error, 'danger', '/resource/high_priority-48.png', 10000);
                    }
                });
            });
        });
        // Update Inventry Name
        $(document).on('submit', '#updateInventory', function(e){
            e.preventDefault();
            var formData = {
                upId: $('#inventoryId').val(),
                upName: $('#update-inventory-name').val(),
                upRole: $('#update-inventory-role').val(),
                _token: '{{ csrf_token() }}'
            };
            $.ajax({
                url: '{{ route('update_inventory') }}',
                method: 'POST',
                data: formData,
                beforeSend: function() {
                    $('.top-loader').show();
                    $('#updateInventoryBtn').prop('disabled', true);
                    $('#updateInventoryLoader').removeClass('d-none');
                },
                complete: function() {
                    $('.top-loader').hide();
                    $('#updateInventoryBtn').prop('disabled', false);
                    $('#updateInventoryLoader').addClass('d-none');
                },
                success: function(response) {
                    if (response.success) {
                        notifier.show('SUCCESS', response.message, 'success', '/resource/ok-48.png', 10000);
                        refreshMainTable();
                    }
                    else{
                        notifier.show('ERROR', response.message, 'danger', '/resource/high_priority-48.png', 10000);
                    }
                },
                error: function(xhr, status, error) {
                    notifier.show('ERROR', error, 'danger', '/resource/high_priority-48.png', 10000);
                }
            });
        })
        // Delete Inventory
        let selectedInventoryId = null;
        $(document).on('click', '#delInventoryBtn', function() {
            selectedInventoryId = $('#inventoryId').val();
            const inventoryName = $('#update-inventory-name').val();
            $('#confirmDeleteText').html(
                'Are you sure to delete inventory: <strong>' + inventoryName + '</strong><br>Including all inventory data.'
            );
            $('#deleteConfirmationInput').val('');
            const modal = new bootstrap.Modal(document.getElementById('confirmDeleteModal'));
            modal.show();
        });
        $(document).on('click', '#confirmDeleteBtn', function () {
            const userInput = $('#deleteConfirmationInput').val();
            if (userInput === 'YES') {
                $.ajax({
                    url: '/admin/del/inventory/' + selectedInventoryId,
                    method: 'GET',
                    beforeSend: function() {
                        $('.top-loader').show();
                        $('#delInventoryBtn').attr('disabled', true);
                        $('#delInventoryLoader').removeClass('d-none');
                        $('#confirmDeleteBtn').attr('disabled', true);
                        $('#confirmDeleteLoader').removeClass('d-none');
                    },
                    complete: function() {
                        $('.top-loader').hide();
                        $('#delInventoryBtn').attr('disabled', false);
                        $('#delInventoryLoader').addClass('d-none');
                        $('#confirmDeleteModal').modal('hide');
                        $('#confirmDeleteBtn').attr('disabled', false);
                        $('#confirmDeleteLoader').addClass('d-none');
                    },
                    success: function(response) {
                        if(response.success){
                            $('#inventory-details').offcanvas('hide');
                            notifier.show('SUCCESS', response.message, 'success', '/resource/ok-48.png', 10000);
                            refreshMainTable();
                        }
                        else{
                            notifier.show('ERROR', response.message, 'danger', '/resource/high_priority-48.png', 10000);
                        }
                    },
                    error: function(xhr, status, error) {
                        notifier.show('ERROR', 'Error loading details: ' + error, 'danger', '/resource/high_priority-48.png', 10000);
                    }
                });
            } else {
                $('#deleteConfirmationInput').focus();
            }
        });



    })
</script>
@endsection