@extends('layouts.admin')

@section('title', $supermarket->name . ' - Aisle Management')

@section('content')
<div class="container-fluid">
    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-0 text-gray-800">Aisle Management</h1>
            <p class="text-muted mb-0">{{ $supermarket->name }}</p>
        </div>
        <div class="d-flex gap-2">
            <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#addAisleModal">
                <i class="bi bi-plus-lg"></i> Add Aisle
            </button>
            <a href="{{ route('admin.supermarkets.show', $supermarket) }}" class="btn btn-outline-secondary">
                <i class="bi bi-arrow-left"></i> Back to Dashboard
            </a>
        </div>
    </div>
    
    <nav aria-label="breadcrumb" class="mb-4">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
            <li class="breadcrumb-item"><a href="{{ route('admin.supermarkets.index') }}">Supermarkets</a></li>
            <li class="breadcrumb-item"><a href="{{ route('admin.supermarkets.show', $supermarket) }}">{{ $supermarket->name }}</a></li>
            <li class="breadcrumb-item active" aria-current="page">Aisles</li>
        </ol>
    </nav>

    <!-- Success/Error Messages -->
    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            <i class="bi bi-check-circle me-2"></i>{{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    @if(session('error'))
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <i class="bi bi-exclamation-triangle me-2"></i>{{ session('error') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    @if($errors->any())
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <i class="bi bi-exclamation-triangle me-2"></i>
            <strong>Please fix the following errors:</strong>
            <ul class="mb-0 mt-2">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    <!-- Statistics Cards -->
    <div class="row mb-4">
        <div class="col-xl-3 col-md-6 mb-3">
            <div class="card border-left-primary shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">Total Aisles</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $aisles->count() }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="bi bi-grid-3x3-gap fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-3">
            <div class="card border-left-success shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-success text-uppercase mb-1">Active Aisles</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $aisles->where('is_active', true)->count() }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="bi bi-check-circle fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-3">
            <div class="card border-left-info shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-info text-uppercase mb-1">Products in Aisles</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $aisles->sum('products_count') }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="bi bi-box fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-3">
            <div class="card border-left-warning shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">Avg Products/Aisle</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $aisles->count() > 0 ? round($aisles->sum('products_count') / $aisles->count()) : 0 }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="bi bi-bar-chart fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Aisles Table -->
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">Store Aisles</h6>
        </div>
        <div class="card-body">
            @if($aisles->count() > 0)
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>Image</th>
                                <th>Aisle #</th>
                                <th>Name & Description</th>
                                <th>Category</th>
                                <th>Products</th>
                                <th>Status</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($aisles as $aisle)
                                <tr>
                                    <td>
                                        @if($aisle->aisle_image)
                                            <img src="{{ asset('storage/' . $aisle->aisle_image) }}" 
                                                 alt="{{ $aisle->aisle_name }}" 
                                                 class="img-thumbnail" 
                                                 style="width: 60px; height: 60px; object-fit: cover;">
                                        @else
                                            <div class="bg-light rounded d-flex align-items-center justify-content-center" 
                                                 style="width: 60px; height: 60px;">
                                                <i class="bi bi-image text-muted"></i>
                                            </div>
                                        @endif
                                    </td>
                                    <td>
                                        <span class="badge bg-primary fs-6">{{ $aisle->aisle_number }}</span>
                                    </td>
                                    <td>
                                        <div class="fw-bold">{{ $aisle->aisle_name }}</div>
                                        <small class="text-muted">
                                            {{ Str::limit($aisle->description ?? 'No description', 40) }}
                                        </small>
                                        @if($aisle->location || $aisle->side)
                                            <br><small class="badge bg-light text-dark">
                                                {{ ucfirst($aisle->location) }}{{ $aisle->side ? ' - ' . ucfirst($aisle->side) : '' }}
                                            </small>
                                        @endif
                                    </td>
                                    <td>
                                        @if($aisle->primary_category)
                                            @php
                                                $mainCategoryInfo = $mainCategories->find($aisle->primary_category);
                                                $subCategoryInfo = $aisle->sub_category_id ? $subCategories->find($aisle->sub_category_id) : null;
                                            @endphp
                                            <div class="d-flex align-items-center gap-2">
                                                @if($mainCategoryInfo && $mainCategoryInfo->image)
                                                    <img src="{{ $mainCategoryInfo->image }}" 
                                                         alt="{{ $mainCategoryInfo->name }}" 
                                                         class="rounded" 
                                                         style="width: 30px; height: 30px; object-fit: cover;">
                                                @endif
                                                <div>
                                                    @if($mainCategoryInfo)
                                                        <div class="badge bg-primary mb-1">{{ $mainCategoryInfo->name }}</div>
                                                    @else
                                                        <div class="badge bg-warning mb-1">Main ID: {{ $aisle->primary_category }}</div>
                                                    @endif
                                                    @if($subCategoryInfo)
                                                        <div class="badge bg-secondary">{{ $subCategoryInfo->name }}</div>
                                                    @endif
                                                </div>
                                            </div>
                                        @else
                                            <span class="text-muted">No category</span>
                                        @endif
                                    </td>
                                    <td>
                                        <span class="badge bg-info">{{ $aisle->products_count ?? 0 }} Products</span>
                                    </td>
                                    <td>
                                        @if($aisle->is_active)
                                            <span class="badge bg-success">Active</span>
                                        @else
                                            <span class="badge bg-secondary">Inactive</span>
                                        @endif
                                    </td>
                                    <td>
                                        <div class="btn-group" role="group">
                                            <button type="button" class="btn btn-sm btn-outline-primary" 
                                                    data-bs-toggle="modal" 
                                                    data-bs-target="#editAisleModal"
                                                    data-aisle="{{ json_encode($aisle->toArray()) }}"
                                                    title="Edit">
                                                <i class="bi bi-pencil"></i>
                                            </button>
                                            <a href="{{ route('admin.supermarkets.inventory', $supermarket) }}?aisle_id={{ $aisle->id }}" 
                                               class="btn btn-sm btn-outline-info" title="View Products">
                                                <i class="bi bi-box-seam"></i>
                                            </a>
                                            <form action="{{ route('admin.supermarkets.aisles.destroy', [$supermarket, $aisle]) }}" method="POST" class="d-inline">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn btn-sm btn-outline-danger" 
                                                        onclick="return confirm('Are you sure you want to delete this aisle?')"
                                                        title="Delete">
                                                    <i class="bi bi-trash"></i>
                                            </button>
                                            </form>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @else
                <div class="text-center py-4">
                    <i class="bi bi-grid-3x3-gap display-1 text-muted"></i>
                    <h5 class="mt-3">No Aisles Found</h5>
                    <p class="text-muted">This supermarket doesn't have any aisles configured yet.</p>
                </div>
            @endif
        </div>
    </div>
</div>

<!-- Add Aisle Modal -->
<div class="modal fade" id="addAisleModal" tabindex="-1" aria-labelledby="addAisleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addAisleModalLabel">Add New Aisle</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="{{ route('admin.supermarkets.aisles.store', $supermarket) }}" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="aisle_number" class="form-label">Aisle Number <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="aisle_number" name="aisle_number" required placeholder="e.g., A1, B2, 01">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="aisle_name" class="form-label">Aisle Name <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="aisle_name" name="aisle_name" required placeholder="e.g., Fresh Produce, Dairy">
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="location" class="form-label">Store Location</label>
                            <select class="form-select" id="location" name="location">
                                <option value="">Select Location</option>
                                <option value="front">Front of Store</option>
                                <option value="middle">Middle of Store</option>
                                <option value="back">Back of Store</option>
                            </select>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="side" class="form-label">Store Side</label>
                            <select class="form-select" id="side" name="side">
                                <option value="">Select Side</option>
                                <option value="left">Left Side</option>
                                <option value="center">Center</option>
                                <option value="right">Right Side</option>
                            </select>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="description" class="form-label">Description</label>
                        <textarea class="form-control" id="description" name="description" rows="3" placeholder="Brief description of products in this aisle"></textarea>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="primary_category" class="form-label">Primary Category</label>
                            <select class="form-select" id="primary_category" name="primary_category" onchange="updateSubCategories()">
                                <option value="">Select Primary Category</option>
                                @foreach($mainCategories as $category)
                                    <option value="{{ $category->id }}" data-image="{{ $category->image }}">
                                        {{ $category->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="sub_category_id" class="form-label">Sub Category</label>
                            <select class="form-select" id="sub_category_id" name="sub_category_id">
                                <option value="">Select Sub Category</option>
                                @foreach($subCategories as $subCategory)
                                    <option value="{{ $subCategory->id }}" 
                                            data-main-category="{{ $subCategory->main_category_id }}" 
                                            data-image="{{ $subCategory->image }}" 
                                            style="display: none;">
                                        {{ $subCategory->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="sort_order" class="form-label">Sort Order</label>
                            <input type="number" class="form-control" id="sort_order" name="sort_order" min="1" placeholder="Display order">
                        </div>
                        <div class="col-md-6 mb-3">
                            <!-- Category Image Preview -->
                            <label class="form-label">Category Preview</label>
                            <div id="categoryImagePreview" class="border rounded p-2" style="height: 60px; display: flex; align-items: center;">
                                <span class="text-muted">Select a category to see preview</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="aisle_image" class="form-label">Aisle Image</label>
                        <input type="file" class="form-control" id="aisle_image" name="aisle_image" accept="image/*">
                        <div class="form-text">Optional: Upload an image of the aisle. Max size: 2MB. Supported: JPG, PNG, GIF</div>
                        <div id="aisleImagePreview" class="mt-2" style="display: none;">
                            <img id="previewAisleImg" src="" alt="Preview" class="img-thumbnail" style="max-width: 200px;">
                        </div>
                    </div>
                    
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="is_active" name="is_active" value="1" checked>
                        <label class="form-check-label" for="is_active">
                            ✅ Active Aisle
                        </label>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-success">Create Aisle</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Edit Aisle Modal -->
<div class="modal fade" id="editAisleModal" tabindex="-1" aria-labelledby="editAisleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editAisleModalLabel">Edit Aisle</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="editAisleForm" method="POST" enctype="multipart/form-data">
                @csrf
                @method('PUT')
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="edit_aisle_number" class="form-label">Aisle Number <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="edit_aisle_number" name="aisle_number" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="edit_aisle_name" class="form-label">Aisle Name <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="edit_aisle_name" name="aisle_name" required>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="edit_location" class="form-label">Store Location</label>
                            <select class="form-select" id="edit_location" name="location">
                                <option value="">Select Location</option>
                                <option value="front">Front of Store</option>
                                <option value="middle">Middle of Store</option>
                                <option value="back">Back of Store</option>
                            </select>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="edit_side" class="form-label">Store Side</label>
                            <select class="form-select" id="edit_side" name="side">
                                <option value="">Select Side</option>
                                <option value="left">Left Side</option>
                                <option value="center">Center</option>
                                <option value="right">Right Side</option>
                            </select>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="edit_description" class="form-label">Description</label>
                        <textarea class="form-control" id="edit_description" name="description" rows="3"></textarea>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="edit_primary_category" class="form-label">Primary Category</label>
                            <select class="form-select" id="edit_primary_category" name="primary_category" onchange="updateEditSubCategories()">
                                <option value="">Select Primary Category</option>
                                @foreach($mainCategories as $category)
                                    <option value="{{ $category->id }}" data-image="{{ $category->image }}">
                                        {{ $category->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="edit_sub_category_id" class="form-label">Sub Category</label>
                            <select class="form-select" id="edit_sub_category_id" name="sub_category_id">
                                <option value="">Select Sub Category</option>
                                @foreach($subCategories as $subCategory)
                                    <option value="{{ $subCategory->id }}" 
                                            data-main-category="{{ $subCategory->main_category_id }}" 
                                            data-image="{{ $subCategory->image }}" 
                                            style="display: none;">
                                        {{ $subCategory->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="edit_sort_order" class="form-label">Sort Order</label>
                            <input type="number" class="form-control" id="edit_sort_order" name="sort_order" min="1">
                        </div>
                        <div class="col-md-6 mb-3">
                            <!-- Edit Category Image Preview -->
                            <label class="form-label">Category Preview</label>
                            <div id="editCategoryImagePreview" class="border rounded p-2" style="height: 60px; display: flex; align-items: center;">
                                <span class="text-muted">Select a category to see preview</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="edit_aisle_image" class="form-label">Aisle Image</label>
                        <input type="file" class="form-control" id="edit_aisle_image" name="aisle_image" accept="image/*">
                        <div class="form-text">Optional: Upload an image of the aisle. Max size: 2MB. Leave empty to keep current image.</div>
                        <div id="editAisleImagePreview" class="mt-2" style="display: none;">
                            <img id="previewEditAisleImg" src="" alt="Preview" class="img-thumbnail" style="max-width: 200px;">
                        </div>
                        <div id="currentAisleImage" class="mt-2" style="display: none;">
                            <label class="form-label small text-muted">Current Image:</label>
                            <img id="currentAisleImg" src="" alt="Current" class="img-thumbnail" style="max-width: 150px;">
                        </div>
                    </div>
                    
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="edit_is_active" name="is_active" value="1">
                        <label class="form-check-label" for="edit_is_active">
                            ✅ Active Aisle
                        </label>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Update Aisle</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Image preview for new aisle
    document.getElementById('aisle_image').addEventListener('change', function(e) {
        const file = e.target.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                document.getElementById('previewAisleImg').src = e.target.result;
                document.getElementById('aisleImagePreview').style.display = 'block';
            };
            reader.readAsDataURL(file);
        } else {
            document.getElementById('aisleImagePreview').style.display = 'none';
        }
    });

    // Image preview for edit aisle
    document.getElementById('edit_aisle_image').addEventListener('change', function(e) {
        const file = e.target.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                document.getElementById('previewEditAisleImg').src = e.target.result;
                document.getElementById('editAisleImagePreview').style.display = 'block';
            };
            reader.readAsDataURL(file);
        } else {
            document.getElementById('editAisleImagePreview').style.display = 'none';
        }
    });

    // Edit aisle functionality
    document.querySelectorAll('[data-bs-target="#editAisleModal"]').forEach(button => {
        button.addEventListener('click', function() {
            const aisleData = JSON.parse(this.getAttribute('data-aisle'));
            const form = document.getElementById('editAisleForm');
            
            // Set form action URL
            form.action = `{{ route('admin.supermarkets.aisles.update', [$supermarket, 'AISLE_ID']) }}`.replace('AISLE_ID', aisleData.id);
            
            // Populate form fields
            document.getElementById('edit_aisle_number').value = aisleData.aisle_number || '';
            document.getElementById('edit_aisle_name').value = aisleData.aisle_name || '';
            document.getElementById('edit_location').value = aisleData.location || '';
            document.getElementById('edit_side').value = aisleData.side || '';
            document.getElementById('edit_description').value = aisleData.description || '';
            document.getElementById('edit_primary_category').value = aisleData.primary_category || '';
            document.getElementById('edit_sub_category_id').value = aisleData.sub_category_id || '';
            document.getElementById('edit_sort_order').value = aisleData.sort_order || '';
            document.getElementById('edit_is_active').checked = aisleData.is_active;
            
            // Update sub-categories and image preview for edit
            updateEditSubCategories();
            
            // Handle current image
            const currentImageDiv = document.getElementById('currentAisleImage');
            const currentImg = document.getElementById('currentAisleImg');
            
            if (aisleData.aisle_image) {
                currentImg.src = `/storage/${aisleData.aisle_image}`;
                currentImageDiv.style.display = 'block';
            } else {
                currentImageDiv.style.display = 'none';
            }
            
            // Reset preview
            document.getElementById('editAisleImagePreview').style.display = 'none';
        });
    });
    
    // Functions for handling sub-categories and image previews
    window.updateSubCategories = function() {
        const mainCategorySelect = document.getElementById('primary_category');
        const subCategorySelect = document.getElementById('sub_category_id');
        const imagePreview = document.getElementById('categoryImagePreview');
        
        const selectedMainId = mainCategorySelect.value;
        
        // Reset sub-category dropdown
        subCategorySelect.value = '';
        const subOptions = subCategorySelect.querySelectorAll('option[data-main-category]');
        subOptions.forEach(option => {
            if (option.dataset.mainCategory === selectedMainId) {
                option.style.display = 'block';
            } else {
                option.style.display = 'none';
            }
        });
        
        // Update image preview
        const selectedOption = mainCategorySelect.options[mainCategorySelect.selectedIndex];
        if (selectedOption && selectedOption.dataset.image) {
            imagePreview.innerHTML = `<img src="${selectedOption.dataset.image}" alt="Category" class="img-thumbnail" style="max-height: 50px;">`;
        } else {
            imagePreview.innerHTML = '<span class="text-muted">Select a category to see preview</span>';
        }
    };
    
    window.updateEditSubCategories = function() {
        const mainCategorySelect = document.getElementById('edit_primary_category');
        const subCategorySelect = document.getElementById('edit_sub_category_id');
        const imagePreview = document.getElementById('editCategoryImagePreview');
        
        const selectedMainId = mainCategorySelect.value;
        
        // Reset and show relevant sub-categories
        const subOptions = subCategorySelect.querySelectorAll('option[data-main-category]');
        subOptions.forEach(option => {
            if (option.dataset.mainCategory === selectedMainId) {
                option.style.display = 'block';
            } else {
                option.style.display = 'none';
            }
        });
        
        // Update image preview
        const selectedOption = mainCategorySelect.options[mainCategorySelect.selectedIndex];
        if (selectedOption && selectedOption.dataset.image) {
            imagePreview.innerHTML = `<img src="${selectedOption.dataset.image}" alt="Category" class="img-thumbnail" style="max-height: 50px;">`;
        } else {
            imagePreview.innerHTML = '<span class="text-muted">Select a category to see preview</span>';
        }
    };
    
    // Update sub-category image preview
    document.getElementById('sub_category_id').addEventListener('change', function() {
        const imagePreview = document.getElementById('categoryImagePreview');
        const selectedOption = this.options[this.selectedIndex];
        
        if (selectedOption && selectedOption.dataset.image) {
            imagePreview.innerHTML = `<img src="${selectedOption.dataset.image}" alt="Sub Category" class="img-thumbnail" style="max-height: 50px;">`;
        }
    });
    
    document.getElementById('edit_sub_category_id').addEventListener('change', function() {
        const imagePreview = document.getElementById('editCategoryImagePreview');
        const selectedOption = this.options[this.selectedIndex];
        
        if (selectedOption && selectedOption.dataset.image) {
            imagePreview.innerHTML = `<img src="${selectedOption.dataset.image}" alt="Sub Category" class="img-thumbnail" style="max-height: 50px;">`;
        }
    });
});
</script>

@endsection