@extends('layouts.default')

@section('content')

<link href="css/plugins/dataTables/datatables.min.css" rel="stylesheet">
<link href="{{ asset('css/plugins/select2/select2.min.css') }}" rel="stylesheet">
<style>
    .select2-dropdown {
        z-index: 9999 !important;
    }
    .select2-container {
        z-index: 9998 !important;
    }
    .select2-dropdown-colors {
        z-index: 10000 !important;
    }
    #ItemInfo .select2-dropdown,
    #EditItemInfo .select2-dropdown {
        z-index: 10000 !important;
    }
</style>

<div class="modal fade" id="ItemInfo" tabindex="-1" aria-labelledby="ItemInfoLabel" aria-hidden="true">
    <form id="item" method="POST" action="{{ route('items.store') }}">
        @csrf
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header d-flex justify-content-between align-items-center">
                    <h5 class="modal-title mb-0" id="ItemInfoLabel">Item Information</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <div class="modal-body">
                    <div id="brands-loader" class="text-center py-3" style="display: none;">
                        <i class="fa fa-spinner fa-spin fa-2x text-primary"></i>
                        <p class="mt-2 mb-0 text-muted">Loading brands...</p>
                    </div>
                    <div id="success-message" class="alert alert-success" style="display: none;">
                        <span></span>
                    </div>
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-label">Category <span class="text-danger">*</span></label>
                                <select class="form-select" id="item_cat_id" name="cat_id">
                                    <option value="">Select Category</option>
                                    @foreach($categories as $category)
                                        <option value="{{ $category->id }}">{{ $category->name }}</option>
                                    @endforeach
                                </select>
                                <div class="invalid-feedback" id="error-cat_id" style="display: none;"></div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-label">Brand <span class="text-danger">*</span></label>
                                <select class="form-select" id="item_brand_id" name="brand_id" disabled>
                                    <option value="">Select Category First</option>
                                </select>
                                <div class="invalid-feedback" id="error-brand_id" style="display: none;"></div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="form-label">Title <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="item_title" name="title" maxlength="250">
                        <div class="invalid-feedback" id="error-title" style="display: none;">Title is required</div>
                    </div>

                    

                    <div class="row mb-3">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="form-label">Colors</label>
                                <select class="form-control" id="item_colors" name="colors[]" multiple style="width: 100%;">
                                    @if(isset($colors) && $colors->count() > 0)
                                        @foreach($colors as $color)
                                            <option value="{{ $color->id }}">{{ $color->name }}</option>
                                        @endforeach
                                    @else
                                        <option value="">No colors available</option>
                                    @endif
                                </select>
                                <div class="invalid-feedback" id="error-colors" style="display: none;"></div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="form-label">Memory (RAM)</label>
                                <select class="form-control" id="item_memories" name="memories[]" multiple style="width: 100%;">
                                    @if(isset($memories) && $memories->count() > 0)
                                        @foreach($memories as $memory)
                                            <option value="{{ $memory->id }}">{{ $memory->name }} GB</option>
                                        @endforeach
                                    @else
                                        <option value="">No memories available</option>
                                    @endif
                                </select>
                                <div class="invalid-feedback" id="error-memories" style="display: none;"></div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="form-label">Storage (ROM)</label>
                                <select class="form-control" id="item_storages" name="storages[]" multiple style="width: 100%;">
                                    @if(isset($storages) && $storages->count() > 0)
                                        @foreach($storages as $storage)
                                            <option value="{{ $storage->id }}">{{ $storage->name }} {{ $storage->type }}</option>
                                        @endforeach
                                    @else
                                        <option value="">No storages available</option>
                                    @endif
                                </select>
                                <div class="invalid-feedback" id="error-storages" style="display: none;"></div>
                            </div>
                        </div>
                    </div>

                    <div class="form-group mb-3">
                        <label class="form-label">Description</label>
                        <textarea class="form-control" id="item_description" name="description" rows="3"></textarea>
                        <div class="invalid-feedback" id="error-description" style="display: none;"></div>
                    </div>

                    <div class="row mb-3">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label class="form-label">Status <span class="text-danger">*</span></label>
                                <select class="form-select" id="item_status" name="status">
                                    <option value="Active" selected>Active</option>
                                    <option value="Inactive">Inactive</option>
                                </select>
                                <div class="invalid-feedback" id="error-status" style="display: none;"></div>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary" id="saveItem">
                        <i class="fa fa-check"></i>&nbsp;Save Changes
                    </button>
                </div>
            </div>
        </div>
    </form>
</div>

{{-- update item modal --}}
<div class="modal fade" id="EditItemInfo" tabindex="-1" aria-labelledby="EditItemInfoLabel" aria-hidden="true">
    <form id="edit-item-form">
        @csrf
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header d-flex justify-content-between align-items-center">
                    <h5 class="modal-title mb-0" id="EditItemInfoLabel">Edit Item Information</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div id="edit-brands-loader" class="text-center py-3" style="display: none;">
                        <i class="fa fa-spinner fa-spin fa-2x text-primary"></i>
                        <p class="mt-2 mb-0 text-muted">Loading brands...</p>
                    </div>
                    <div id="edit-success-message" class="alert alert-success" style="display: none;">
                        <span></span>
                    </div>

                    <div class="row mb-3">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-label">Category <span class="text-danger">*</span></label>
                                <select class="form-select" id="edit_item_cat_id" name="cat_id">
                                    <option value="">Select Category</option>
                                    @foreach($categories as $category)
                                        <option value="{{ $category->id }}">{{ $category->name }}</option>
                                    @endforeach
                                </select>
                                <div class="invalid-feedback" id="edit-error-cat_id" style="display: none;"></div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-label">Brand <span class="text-danger">*</span></label>
                                <select class="form-select" id="edit_item_brand_id" name="brand_id" disabled>
                                    <option value="">Select Category First</option>
                                </select>
                                <div class="invalid-feedback" id="edit-error-brand_id" style="display: none;"></div>
                            </div>
                        </div>
                    </div>

                    <div class="form-group mb-3">
                        <label class="form-label">Title <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="edit_item_title" name="title" maxlength="250">
                        <div class="invalid-feedback" id="edit-error-title" style="display: none;">Title is required</div>
                    </div>

                    <div class="row mb-3">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="form-label">Colors</label>
                                <select class="form-control" id="edit_item_colors" name="colors[]" multiple style="width: 100%;">
                                    @if(isset($colors) && $colors->count() > 0)
                                        @foreach($colors as $color)
                                            <option value="{{ $color->id }}">{{ $color->name }}</option>
                                        @endforeach
                                    @else
                                        <option value="">No colors available</option>
                                    @endif
                                </select>
                                <div class="invalid-feedback" id="edit-error-colors" style="display: none;"></div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="form-label">Memory (RAM)</label>
                                <select class="form-control" id="edit_item_memories" name="memories[]" multiple style="width: 100%;">
                                    @if(isset($memories) && $memories->count() > 0)
                                        @foreach($memories as $memory)
                                            <option value="{{ $memory->id }}">{{ $memory->name }} GB</option>
                                        @endforeach
                                    @else
                                        <option value="">No memories available</option>
                                    @endif
                                </select>
                                <div class="invalid-feedback" id="edit-error-memories" style="display: none;"></div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="form-label">Storage (ROM)</label>
                                <select class="form-control" id="edit_item_storages" name="storages[]" multiple style="width: 100%;">
                                    @if(isset($storages) && $storages->count() > 0)
                                        @foreach($storages as $storage)
                                            <option value="{{ $storage->id }}">{{ $storage->name }} {{ $storage->type }}</option>
                                        @endforeach
                                    @else
                                        <option value="">No storages available</option>
                                    @endif
                                </select>
                                <div class="invalid-feedback" id="edit-error-storages" style="display: none;"></div>
                            </div>
                        </div>
                    </div>

                    <div class="form-group mb-3">
                        <label class="form-label">Description</label>
                        <textarea class="form-control" id="edit_item_description" name="description" rows="3"></textarea>
                        <div class="invalid-feedback" id="edit-error-description" style="display: none;"></div>
                    </div>

                    <div class="row mb-3">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label class="form-label">Status <span class="text-danger">*</span></label>
                                <select class="form-select" id="edit_item_status" name="status">
                                    <option value="Active">Active</option>
                                    <option value="Inactive">Inactive</option>
                                </select>
                                <div class="invalid-feedback" id="edit-error-status" style="display: none;"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary" id="updateItem">
                        <i class="fa fa-check"></i>&nbsp;Update Item
                    </button>
                </div>
            </div>
        </div>
    </form>
</div>

<div class="card-section-header">
    <div class="d-flex justify-content-between align-items-start w-100">
        <div>
            <h2 class="card-section-title">Products/Items</h2>
            <p class="card-section-subtitle">Manage products and items inventory.</p>
        </div>
        <button class="btn btn-primary" type="button" id="addNewItem">
            <i class="fa fa-plus"></i><span class="btn-text">&nbsp;New Item</span>
        </button>
    </div>
</div>
<div class="wrapper wrapper-content">

    <!-- Desktop DataTable View -->
    <div class="row d-none d-lg-block">
        <div class="col-lg-12">
            <table class="table table-striped table-bordered table-hover" style="width: 100%;" id="items-table">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Title</th>
                        <th>Brand / Specs</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>

    <!-- Mobile Card View -->
    <div class="mobile-items-container d-lg-none">
        <div class="mb-3">
            <label class="form-label fw-bold">Search:</label>
            <input type="text" class="form-control" id="mobile-search-input" placeholder="Search items...">
        </div>
        <div id="mobile-items-cards" class="mobile-items-list">
            <!-- Cards will be populated here -->
        </div>
        <div id="mobile-items-pagination" class="mt-3 d-flex justify-content-center">
            <!-- Pagination will be populated here -->
        </div>
        <div id="mobile-items-loading" class="text-center py-4" style="display: none;">
            <i class="fa fa-spinner fa-spin fa-3x"></i>
        </div>
    </div>
</div>
@push('scripts')
<script src="{{ asset('js/plugins/select2/select2.full.min.js') }}"></script>
<script>
    $("#addNewItem").click(function(e){
        e.preventDefault();
        ModalHelper.open('ItemInfo');
    });
    
        // Function to load brands by category
        function loadBrandsByCategory(categoryId, brandSelectId, selectedBrandId = null) {
            if (!categoryId) {
                $(brandSelectId).html('<option value="">Select Category First</option>').prop('disabled', true);
                return;
            }

            // Determine which loader to show based on the brand select ID
            let loaderId = brandSelectId === '#item_brand_id' ? '#brands-loader' : '#edit-brands-loader';
            
            // Show loader
            $(loaderId).fadeIn();

            $.ajax({
                url: "{{ route('items.brands-by-category', ':id') }}".replace(':id', categoryId),
                type: 'GET',
                success: function(brands) {
                    let options = '<option value="">Select Brand</option>';
                    brands.forEach(function(brand) {
                        let selected = (selectedBrandId && brand.id == selectedBrandId) ? 'selected' : '';
                        options += `<option value="${brand.id}" ${selected}>${brand.name}</option>`;
                    });
                    $(brandSelectId).html(options).prop('disabled', false);
                },
                error: function() {
                    $(brandSelectId).html('<option value="">Error loading brands</option>').prop('disabled', true);
                },
                complete: function() {
                    // Hide loader when request completes (success or error)
                    $(loaderId).fadeOut();
                }
            });
        }

        // Handle category change in add modal
        $(document).on('change', '#item_cat_id', function() {
            let categoryId = $(this).val();
            loadBrandsByCategory(categoryId, '#item_brand_id');
        });

        // Handle category change in edit modal
        $(document).on('change', '#edit_item_cat_id', function() {
            let categoryId = $(this).val();
            loadBrandsByCategory(categoryId, '#edit_item_brand_id');
        });

        // Function to initialize Select2 for colors, memories, and storages
        function initSelect2Fields(modalSelector) {
            const prefix = modalSelector === '#ItemInfo' ? '#item_' : '#edit_item_';
            const fields = [
                { id: prefix + 'colors', placeholder: 'Select Colors' },
                { id: prefix + 'memories', placeholder: 'Select RAM' },
                { id: prefix + 'storages', placeholder: 'Select Storage' }
            ];

            fields.forEach(field => {
                if ($(field.id).length) {
                    if ($(field.id).hasClass('select2-hidden-accessible')) {
                        $(field.id).select2('destroy');
                    }
                    
                    $(field.id).select2({
                        placeholder: field.placeholder,
                        allowClear: true,
                        width: '100%',
                        dropdownParent: $(modalSelector)
                    });
                }
            });
        }

        // Function to handle Enter key to move to next field (like Tab)
        function setupEnterToTab() {
            // Handle Enter key in both modals
            $(document).on('keydown', '#ItemInfo input[type="text"], #ItemInfo textarea, #EditItemInfo input[type="text"], #EditItemInfo textarea', function(e) {
                // Only handle Enter key, not Shift+Enter (which should create new line in textarea)
                if ((e.key === 'Enter' || e.keyCode === 13) && !e.shiftKey) {
                    e.preventDefault();
                    
                    // Get all focusable elements in the current modal (excluding hidden, disabled, and buttons)
                    let modal = $(this).closest('.modal');
                    let focusableElements = modal.find('input:not([type="hidden"]):not([type="button"]):not([type="submit"]):not([disabled]), textarea:not([disabled]), select:not([disabled])');
                    
                    // Find current element index
                    let currentIndex = focusableElements.index(this);
                    
                    // Find next focusable element
                    let nextIndex = currentIndex + 1;
                    
                    // Move to next element if available
                    if (nextIndex < focusableElements.length) {
                        let nextElement = focusableElements.eq(nextIndex);
                        
                        // Focus next element
                        if (nextElement.length) {
                            // For regular inputs/selects, just focus
                            if (nextElement.is('input') || (!nextElement.hasClass('select2-hidden-accessible'))) {
                                nextElement.focus();
                                // Select text if it's an input field
                                if (nextElement.is('input[type="text"]')) {
                                    nextElement.select();
                                }
                            } else if (nextElement.is('select') && nextElement.hasClass('select2-hidden-accessible')) {
                                // For Select2, focus the container
                                nextElement.next('.select2-container').find('.select2-selection').focus();
                            } else {
                                nextElement.focus();
                            }
                        }
                    }
                }
            });
        }

        $(document).ready(function() {
        // Setup Enter to Tab functionality
        setupEnterToTab();
        
        // Initialize Select2 when modals are shown
        $('#ItemInfo').on('shown.bs.modal', function () {
            initSelect2Fields('#ItemInfo');
        });

        $('#EditItemInfo').on('shown.bs.modal', function () {
            initSelect2Fields('#EditItemInfo');
        });

        $('#ItemInfo').on('show.bs.modal', function () {
            $('#item')[0].reset();
            $('#item_status').val('Active');
            $('#item_brand_id').html('<option value="">Select Category First</option>').prop('disabled', true);
            
            // Reset multi-selects
            $('#item_colors, #item_memories, #item_storages').val(null).trigger('change');
            
            $('.invalid-feedback').hide();
            $('.form-control, .form-select').removeClass('is-invalid');
        });

        const saveButton = $('#saveItem');

        function resetButtonState(button, text, disabled = false) {
            button.html(text).prop('disabled', disabled);
        }

        saveButton.on('click', function(e) {
            e.preventDefault();

            let itemData = {
                cat_id: $('#item_cat_id').val(),
                brand_id: $('#item_brand_id').val(),
                title: $('#item_title').val(),
                description: $('#item_description').val(),
                colors: $('#item_colors').val(),
                memories: $('#item_memories').val(),
                storages: $('#item_storages').val(),
                status: $('#item_status').val()
            };

            resetButtonState(saveButton,'<i class="fa fa-spinner fa-spin"></i> Processing...', true);
            $('.invalid-feedback').hide();
            $('.form-control, .form-select').removeClass('is-invalid');

            $.ajax({
                url: "{{ route('items.store') }}",
                type: "POST",
                data: itemData,
                success: function(response) {
                    if (response.success) {
                        $('#item')[0].reset();
                        $('#item_status').val('Active');
                        $('#item_brand_id').html('<option value="">Select Category First</option>').prop('disabled', true);

                        $('#success-message span').text('Item added successfully!');
                        $('#success-message').fadeIn();

                        window.itemsTable.ajax.reload(null, false);
                        
                        if (window.innerWidth < 992 && typeof window.itemsMobileManager !== 'undefined') {
                            window.itemsMobileManager.refresh();
                        }

                        setTimeout(function() {
                            $('#success-message').fadeOut();
                        }, 3000);
                    }

                    resetButtonState(saveButton,'<i class="fa fa-check"></i> Save Changes');
                },
                complete: function() {
                    if (saveButton && saveButton.length) {
                        resetButtonState(saveButton,'<i class="fa fa-check"></i> Save Changes');
                    } else {
                        $('#saveItem').html('<i class="fa fa-check"></i>&nbsp;Save Changes').prop('disabled', false);
                    }
                },
                error: function(errorResponse) {
                    resetButtonState(saveButton,'<i class="fa fa-check"></i> Save Changes');

                    if (errorResponse.status === 422) {
                        let errors = errorResponse.responseJSON.errors;
                        Object.keys(errors).forEach(function(key) {
                            let fieldId = 'item_' + key;
                            $('#' + fieldId).addClass('is-invalid');
                            $('#error-' + key).text(errors[key][0]).show();
                        });
                    } else {
                        Swal.fire({
                            title: 'Error!',
                            text: 'An error occurred. Please try again.',
                            icon: 'error',
                            confirmButtonText: 'OK'
                        });
                    }
                }
            });
        });

        $(document).on('click', '.edit-button', function() {
            let itemId = $(this).data('id');

            $.ajax({
                url: "{{ route('items.show', ':id') }}".replace(':id', itemId),
                type: 'GET',
                success: function(data) {
                    // Set category first
                    $('#edit_item_cat_id').val(data.cat_id || '');
                    
                    // Load brands for the selected category, then set the brand
                    if (data.cat_id) {
                        loadBrandsByCategory(data.cat_id, '#edit_item_brand_id', data.brand_id);
                    } else {
                        $('#edit_item_brand_id').html('<option value="">Select Category First</option>').prop('disabled', true);
                    }
                    
                    // Set other fields
                    $('#edit_item_title').val(data.title || '');
                    $('#edit_item_status').val(data.status || 'Active');
                    $('#edit_item_description').val(data.description || '');
                    
                    // Set multi-selects
                    $('#edit_item_colors').val(data.colors || []).trigger('change');
                    $('#edit_item_memories').val(data.memories || []).trigger('change');
                    $('#edit_item_storages').val(data.storages || []).trigger('change');

                    $('#edit-item-form').data('item-id', itemId);
                    ModalHelper.open('EditItemInfo');
                },
                error: function(xhr) {
                    Swal.fire({
                        title: 'Error!',
                        text: xhr.status === 404 ? 'Item not found.' : 'Could not fetch item details.',
                        icon: 'error',
                        confirmButtonText: 'OK'
                    });
                }
            });
        });   
        
        $(document).on('click', '#updateItem', function () {
            let itemId = $('#edit-item-form').data('item-id');
            let itemData = {
                cat_id: $('#edit_item_cat_id').val(),
                brand_id: $('#edit_item_brand_id').val(),
                title: $('#edit_item_title').val(),
                description: $('#edit_item_description').val(),
                colors: $('#edit_item_colors').val(),
                memories: $('#edit_item_memories').val(),
                storages: $('#edit_item_storages').val(),
                status: $('#edit_item_status').val()
            };

            let updateButton = $('#updateItem');
            resetButtonState(updateButton, '<i class="fa fa-spinner fa-spin"></i> Processing...', true);

            $('.form-control, .form-select').removeClass('is-invalid');
            $('.invalid-feedback').hide();

            $.ajax({
                url: "{{ route('items.update', ':id') }}".replace(':id', itemId),
                type: 'PUT',
                data: itemData,
                success: function (response) {
                    if (response.success) {
                        $('#EditItemInfo').modal('hide');

                        window.itemsTable.ajax.reload(null, false);
                        
                        if (window.innerWidth < 992 && typeof window.itemsMobileManager !== 'undefined') {
                            window.itemsMobileManager.refresh();
                        }

                        Swal.fire('Success', 'Item updated successfully!', 'success');
                    }

                    resetButtonState(updateButton, '<i class="fa fa-check"></i> Update Item');
                },
                error: function (errorResponse) {
                    resetButtonState(updateButton, '<i class="fa fa-check"></i> Update Item');

                    if (errorResponse.status === 422) {
                        let errors = errorResponse.responseJSON.errors;
                        Object.keys(errors).forEach(function(key) {
                            $('#edit_item_' + key).addClass('is-invalid');
                            $('#edit-error-' + key).text(errors[key][0]).show();
                        });
                    } else {
                        Swal.fire('Error', 'Could not update item.', 'error');
                    }
                },
            });
        });     

        window.itemsTable = $('#items-table').DataTable({
            processing: true,
            serverSide: true,
            info: false,
            lengthChange: false,
            ajax: '{{ route('items.data') }}',
            columns: [
                { data: 'id', name: 'id' },
                { data: 'title', name: 'title' },
                {
                    data: null,
                    render: function (data, type, row) {
                        let brandName = row.brand ? row.brand.name : '-';
                        let colorNames = row.colors && row.colors.length > 0 
                            ? row.colors.map(c => c.name).join(', ') 
                            : null;
                        let memoryNames = row.memories && row.memories.length > 0 
                            ? row.memories.map(m => m.name + ' GB').join(', ') 
                            : null;
                        let storageNames = row.storages && row.storages.length > 0 
                            ? row.storages.map(s => s.name + ' ' + s.type).join(', ') 
                            : null;

                        let specs = [
                            colorNames ? 'Colors: ' + colorNames : null,
                            memoryNames ? 'Memory: ' + memoryNames : null,
                            storageNames ? 'Storage: ' + storageNames : null
                        ].filter(Boolean).join('<br>');

                        return `
                            <strong>${brandName}</strong><br>
                            ${specs}
                        `;
                    },
                    orderable: false,
                    searchable: false
                },
                {
                    data: null,
                    render: function (data, type, row) {
                        return `
                            <button class="btn btn-info btn-circle edit-button" type="button" data-id="${row.id}"><i class="fa fa-edit"></i></button>
                            <button class="btn btn-danger btn-circle delete-button" type="button" data-id="${row.id}"><i class="fa fa-times"></i></button>
                        `;
                    },
                    width: '150px', orderable: false, searchable: false
                }
            ],
            order: [[1, 'asc']],
            language: {
                processing: '<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i><span class="visually-hidden">Loading...</span>'
            }
        });

        window.itemsMobileManager = MobileCrudManager.init({
            moduleName: 'items',
            dataUrl: '{{ route('items.data') }}',
            deleteUrl: '{{ url('items') }}',
            cardRenderer: function(item) {
                let brandName = item.brand ? item.brand.name : '-';
                let colorNames = item.colors && item.colors.length > 0 
                    ? item.colors.map(c => c.name).join(', ') 
                    : null;
                let memoryNames = item.memories && item.memories.length > 0 
                    ? item.memories.map(m => m.name + ' GB').join(', ') 
                    : null;
                let storageNames = item.storages && item.storages.length > 0 
                    ? item.storages.map(s => s.name + ' ' + s.type).join(', ') 
                    : null;

                let specs = [
                    colorNames ? 'Colors: ' + colorNames : null,
                    memoryNames ? 'Memory: ' + memoryNames : null,
                    storageNames ? 'Storage: ' + storageNames : null
                ].filter(Boolean).join('<br>');

                return `
                    <div class="card mb-3 mobile-brand-card">
                        <div class="card-body">
                            <div class="mobile-brand-name">${item.title}</div>
                            <div class="mobile-brand-field mb-2">
                                <div class="mobile-brand-value"><strong>${brandName}</strong></div>
                                <span class="mobile-brand-label">Brand</span>
                            </div>
                            <div class="mobile-brand-field mb-2">
                                <div class="mobile-brand-value">${specs || '-'}</div>
                                <span class="mobile-brand-label">Specs</span>
                            </div>
                            <div class="mobile-brand-actions">
                                <button class="btn btn-info btn-circle edit-button" type="button" data-id="${item.id}">
                                    <i class="fa fa-edit"></i>
                                </button>
                                <button class="btn btn-danger btn-circle delete-button" type="button" data-id="${item.id}">
                                    <i class="fa fa-times"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                `;
            },
            dataTable: window.itemsTable
        });

        DeleteHelper.init({
            deleteUrl: '{{ url('items') }}',
            dataTable: window.itemsTable,
            mobileManager: window.itemsMobileManager
        });
    });   
</script>
@endpush
@endsection