@extends('layouts.app')

@section('title', 'Edit POSM Norm Template')

@section('content')

<div class="fixed-action-bar d-flex align-items-center justify-content-between">
    <div class="fw-semibold fixed-nav-title">Edit POSM Norm Template</div>
    <div class="d-flex align-items-center ms-auto">
        <!-- Mandatory Action Set (Right) -->
        <!-- Add -->
        <a href="{{ route('posm.norms.create') }}" data-toggle="tooltip" title="Add" class="mx-1">
            <i class="fa-regular fa-plus fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center"></i>
        </a>

        <!-- Save -->
        <button type="submit" form="templateForm" class="btn p-0">
            <i class="fa-regular fa-save fixed-nav-btn fixed-nav-btn-active p-1 d-inline-flex align-items-center justify-content-center mx-1"
                data-toggle="tooltip" title="Save"></i>
        </button>

        <!-- Edit -->
        <i class="fa-regular fa-edit fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center mx-1"
            data-toggle="tooltip" title="Edit"></i>

        <!-- Delete -->
        @can('HoReCa POSM Norms delete')
        <a href="#" onclick="event.preventDefault(); if(confirm('Are you sure you want to delete this template?')) document.getElementById('delete-norm-form').submit();" data-toggle="tooltip" title="Delete">
            <i class="fa-regular fa-trash-can fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center mx-1"></i>
        </a>
        @else
        <i class="fa-regular fa-trash-can fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center mx-1" data-toggle="tooltip" title="Delete"></i>
        @endcan

        <!-- Close -->
        <a href="{{ route('posm.norms.index') }}" class="mx-1">
            <i class="fa-solid fa-xmark fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center ms-1"
                data-toggle="tooltip" title="Close"></i>
        </a>

        <!-- Column Visibility -->
        <i class="fa-solid fa-columns fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center mx-1"
            data-toggle="tooltip" title="Columns"></i>
    </div>
</div>

<form id="delete-norm-form" action="{{ route('posm.norms.destroy', $template->id) }}" method="POST" class="d-none">
    @csrf @method('DELETE')
</form>

<form id="templateForm" action="{{ route('posm.norms.update', $template->id) }}" method="POST">
    @csrf
    @method('PUT')

    <div class="row mt-3 mb-5">
        <div class="col-12">
            <!-- Basic Info Card -->
            <div class="card rounded-border shadow-sm border-0 mb-4">
                <div class="card-body p-4">
                    <h5 class="form-section-title mb-4">Basic Information</h5>

                    <div class="row mb-4">
                        <div class="col-md-6">
                            <label class="form-label">Template Name <span class="text-danger">*</span></label>
                            <input type="text" name="name" class="form-control"
                                placeholder="e.g. Standard Restaurant Norms" value="{{ old('name', $template->name) }}"
                                required>
                            @error('name')
                            <div class="text-danger small mt-1">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Applicable Outlet Types <span class="text-danger">*</span></label>
                            <select name="outlet_types[]" class="form-select select2" multiple required>
                                @foreach(['hotel', 'restaurant', 'bar', 'cafe', 'other'] as $type)
                                <option value="{{ $type }}" {{ in_array($type, $template->outlet_types ?? []) ? 'selected' : '' }}>
                                    {{ ucfirst($type) }}
                                </option>
                                @endforeach
                            </select>
                            @error('outlet_types')
                            <div class="text-danger small mt-1">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-12">
                            <label class="form-label">Description (Optional)</label>
                            <textarea name="description" class="form-control" rows="3"
                                placeholder="Describe the purpose of this template...">{{ old('description', $template->description) }}</textarea>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Products Section -->
            <div class="card rounded-border shadow-sm border-0">
                <div class="card-body p-4">
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <h5 class="form-section-title mb-0">POSM Products & Norms</h5>
                        <div class="d-flex">
                            <button type="button" class="btn btn-outline-primary btn-sm px-3 me-2 mr-1" id="bulkImportBtn"
                                style="color: #50649c; border-color: #50649c;" data-toggle="modal"
                                data-target="#bulkImportModal">
                                <i class="fa-solid fa-file-import me-1"></i> Bulk Import
                            </button>
                            <button type="button" class="btn btn-primary btn-sm px-3" data-toggle="modal"
                                data-target="#addProductModal" style="background-color: #50649c; border-color: #50649c;">
                                <i class="fa-solid fa-plus me-1"></i> Add Product Line
                            </button>
                        </div>
                    </div>

                    <div class="table-responsive">
                        <table class="table align-middle" id="productsTable">
                            <thead class="bg-light">
                                <tr class="extra-small text-muted fw-bold">
                                    <th style="width: 25%;">PRODUCT</th>
                                    <th style="width: 10%;">CATEGORY</th>
                                    <th style="width: 10%;" class="text-center">QTY</th>
                                    <th style="width: 10%;" class="text-center">MIN</th>
                                    <th style="width: 10%;" class="text-center">MAX</th>
                                    <th style="width: 10%;" class="text-center">MUST HAVE</th>
                                    <th style="width: 15%;">DEVIATION OK</th>
                                    <th style="width: 10%;" class="text-end">ACTIONS</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($template->items as $index => $item)
                                <tr id="row_{{ $index }}">
                                    <td>
                                        <input type="hidden" name="items[{{ $index }}][product_id]"
                                            value="{{ $item->product_id }}">
                                        <div class="fw-bold">{{ $item->product->name ?? 'Deleted Product' }}</div>
                                        <div class="extra-small text-muted">{{ $item->product->code ?? 'N/A' }}</div>
                                    </td>
                                    <td>
                                        <span
                                            class="badge bg-light text-dark border">{{ $item->product->category ?? 'N/A' }}</span>
                                    </td>
                                    <td class="text-center">
                                         <input type="number" name="items[{{ $index }}][qty]" class="form-control form-control-sm text-center mx-auto qty-input"
                                             style="width: 70px;" value="{{ $item->qty > 0 ? $item->qty : round(($item->min_quantity + $item->max_quantity) / 2) }}" required min="0">
                                     </td>
                                    <td class="text-center">
                                        <input type="number" name="items[{{ $index }}][min_quantity]"
                                            class="form-control form-control-sm text-center mx-auto min-input"
                                            style="width: 70px;" value="{{ $item->min_quantity }}" readonly>
                                    </td>
                                    <td class="text-center">
                                        <input type="number" name="items[{{ $index }}][max_quantity]"
                                            class="form-control form-control-sm text-center mx-auto max-input"
                                            style="width: 70px;" value="{{ $item->max_quantity }}" readonly>
                                    </td>
                                    <td class="text-center">
                                        <div class="custom-control custom-checkbox d-inline-block">
                                            <input class="custom-control-input" type="checkbox" id="check_{{ $index }}"
                                                name="items[{{ $index }}][must_have]" value="1" {{ $item->must_have ? 'checked' : '' }}>
                                            <label class="custom-control-label" for="check_{{ $index }}"></label>
                                        </div>
                                    </td>
                                    <td>
                                        <select name="items[{{ $index }}][deviation_tolerance]"
                                            class="form-control form-control-sm">
                                            @foreach(['None', '±5%', '±10%', '±1 unit', '±2 units'] as $tolerance)
                                            <option value="{{ $tolerance }}" {{ $item->deviation_tolerance === $tolerance ? 'selected' : '' }}>{{ $tolerance }}</option>
                                            @endforeach
                                        </select>
                                    </td>
                                    <td class="text-end">
                                        <button type="button" class="btn btn-link text-danger p-0 delete-row"
                                            data-id="{{ $index }}">
                                            <i
                                                class="fa-solid fa-trash-can rounded-5 p-1 d-inline-flex align-items-center justify-content-center action-btn theme-red"></i>
                                        </button>
                                    </td>
                                </tr>
                                @empty
                                <tr id="emptyRow">
                                    <td colspan="8" class="text-center py-4 text-muted small">
                                        No products added yet. Click "Add Product Line" to start.
                                    </td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

<!-- Add Product Modal -->
<div class="modal fade" id="addProductModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow-lg" style="border-radius: 12px;">
            <div class="modal-header border-0 pb-0 shadow-none">
                <h5 class="modal-title fw-bold" style="color: #50649c;">Add Product to Template</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body p-4">
                <div class="mb-4">
                    <label class="form-label">Select Product <span class="text-danger">*</span></label>
                    <select id="modal_product" class="form-control select2-modal">
                        <option value="">Search products...</option>
                        @foreach($products as $product)
                        <option value="{{ $product->id }}" data-name="{{ $product->name }}"
                            data-sku="{{ $product->code }}" data-category="{{ $product->category }}">
                            {{ $product->name }} ({{ $product->code }})
                        </option>
                        @endforeach
                    </select>
                </div>

                <div class="row mb-4">
                    <div class="col-md-4">
                        <label class="form-label">Quantity <span class="text-danger">*</span></label>
                        <input type="number" id="modal_qty" class="form-control" min="0" value="1" required>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Min Quantity</label>
                        <input type="number" id="modal_min" class="form-control" min="0" value="1" readonly>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Max Quantity</label>
                        <input type="number" id="modal_max" class="form-control" min="0" value="1" readonly>
                    </div>
                </div>

                <div class="mb-4 mt-4">
                    <div class="custom-control custom-switch d-flex align-items-center">
                        <input type="checkbox" class="custom-control-input" id="modal_must_have">
                        <label class="custom-control-label fw-bold" for="modal_must_have">Must Have Product</label>
                    </div>
                </div>

                <div class="mb-4">
                    <label class="form-label">Acceptable Deviation</label>
                    <select id="modal_deviation" class="form-control">
                        <option value="None">None</option>
                        <option value="±5%">±5%</option>
                        <option value="±10%" selected>±10%</option>
                        <option value="±1 unit">±1 unit</option>
                        <option value="±2 units">±2 units</option>
                    </select>
                </div>
            </div>
            <div class="modal-footer border-0 pt-0">
                <button type="button" class="btn btn-link text-muted text-decoration-none"
                    data-dismiss="modal">Cancel</button>
                <button type="button" id="addRowBtn" class="btn btn-primary px-4"
                    style="background-color: #50649c; border-color: #50649c; border-radius: 8px;">Add Product</button>
            </div>
        </div>
    </div>
</div>

<!-- Bulk Import Modal -->
<div class="modal fade" id="bulkImportModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow-lg" style="border-radius: 12px;">
            <div class="modal-header border-0 pb-0 shadow-none">
                <h5 class="modal-title fw-bold" style="color: #50649c;">Bulk Import Products & Norms</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body p-4">
                <div class="text-center mb-4 p-3 rounded"
                    style="background-color: #f8f9fa; border: 1px dashed #ced4da;">
                    <p class="small text-muted mb-2">Download the template to see the required format</p>
                    <a href="{{ asset('files/norm_products_import_template.xlsx') }}" download class="btn btn-sm btn-outline-secondary">
                        <i class="fa-solid fa-download me-1"></i> Download Template Excel
                    </a>
                </div>

                <div class="mb-3">
                    <label class="form-label">Select Excel File <span class="text-danger">*</span></label>
                    <div class="input-group">
                        <input type="file" id="import_file" class="form-control" accept=".xlsx, .xls">
                    </div>
                    <div class="extra-small text-muted mt-2">
                        <i class="fa-solid fa-circle-info me-1 text-info"></i> Only .xlsx and .xls files are supported.
                    </div>
                </div>
            </div>
            <div class="modal-footer border-0 pt-0">
                <button type="button" class="btn btn-link text-muted text-decoration-none"
                    data-dismiss="modal">Cancel</button>
                <button type="button" id="processImportBtn" class="btn btn-primary px-4"
                    style="background-color: #50649c; border-color: #50649c; border-radius: 8px;">Upload &
                    Import</button>
            </div>
        </div>
    </div>

    @endsection

    @push('js')
    <script>
        $(document).ready(function() {
            if ($.fn.select2) {
                $('.select2').select2({
                    // theme: 'bootstrap-5',
                    placeholder: "Select outlet types",
                    allowClear: true,
                    width: '100%'
                });

                $('.select2-modal').select2({
                    // theme: 'bootstrap-5',
                    dropdownParent: $('#addProductModal'),
                    width: '100%'
                });
            }



            let rowIdx = '{{ count($template->items) }}';

            function updateModalMinMax() {
                const qty = parseInt($('#modal_qty').val()) || 0;
                const deviation = $('#modal_deviation').val();
                let min = qty;
                let max = qty;
                if (deviation === '±5%') {
                    let diff = 5;
                    min = qty - diff;
                    max = qty + diff;
                } else if (deviation === '±10%') {
                    let diff = 10;
                    min = qty - diff;
                    max = qty + diff;
                } else if (deviation === '±1 unit') {
                    min = qty - 1;
                    max = qty + 1;
                } else if (deviation === '±2 units') {
                    min = qty - 2;
                    max = qty + 2;
                }
                if (min < 0) min = 0;
                $('#modal_min').val(min);
                $('#modal_max').val(max);
            }

            $('#modal_qty, #modal_deviation').on('input change', updateModalMinMax);
            // Initialize modal values
            updateModalMinMax();

            function updateRowMinMax(row) {
                const qtyInput = row.find('.qty-input');
                const minInput = row.find('.min-input');
                const maxInput = row.find('.max-input');
                const deviationSelect = row.find('select[name$="[deviation_tolerance]"]');
                
                const qty = parseInt(qtyInput.val()) || 0;
                const deviation = deviationSelect.val();
                
                let min = qty;
                let max = qty;
                
                if (deviation === '±5%') {
                    let diff = 5;
                    min = qty - diff;
                    max = qty + diff;
                } else if (deviation === '±10%') {
                    let diff = 10;
                    min = qty - diff;
                    max = qty + diff;
                } else if (deviation === '±1 unit') {
                    min = qty - 1;
                    max = qty + 1;
                } else if (deviation === '±2 units') {
                    min = qty - 2;
                    max = qty + 2;
                }
                
                if (min < 0) min = 0;
                
                minInput.val(min);
                maxInput.val(max);
            }

            $(document).on('keypress', '.qty-input, #modal_qty', function(e) {
                if (e.which === 45) { // '-' key
                    e.preventDefault();
                }
            });

            $(document).on('input change', '.qty-input, #modal_qty', function() {
                const val = parseInt($(this).val());
                if (val < 0) {
                    $(this).val(0);
                }
            });

            $(document).on('input', '.qty-input', function() {
                updateRowMinMax($(this).closest('tr'));
            });

            $(document).on('change', 'select[name$="[deviation_tolerance]"]', function() {
                updateRowMinMax($(this).closest('tr'));
            });
            
            // let rowIdx = {
            //     {
            //         count($template - > items)
            //     }
            // };

            $('#addRowBtn').on('click', function() {
                const productSelect = $('#modal_product');
                const productId = productSelect.val();

                if (!productId) {
                    Swal.fire('Error', 'Please select a product.', 'error');
                    return;
                }

                const productData = productSelect.find(':selected').data();
                const qty = $('#modal_qty').val();
                const min = $('#modal_min').val();
                const max = $('#modal_max').val();

                if (!qty || parseInt(qty) < 0) {
                    Swal.fire('Error', 'Please enter a valid quantity.', 'error');
                    return;
                }

                if (parseInt(max) < parseInt(min)) {
                    Swal.fire('Error', 'Max quantity cannot be less than min quantity.', 'error');
                    return;
                }

                const mustHave = $('#modal_must_have').is(':checked');
                const deviation = $('#modal_deviation').val();

                // Check if product already exists in the table
                let exists = false;
                $('input[name^="items"][name$="[product_id]"]').each(function() {
                    if ($(this).val() == productId) {
                        exists = true;
                        return false;
                    }
                });

                if (exists) {
                    Swal.fire('Error', 'This product is already added to the template.', 'error');
                    return;
                }

                $('#emptyRow').remove();

                const newRow = `
                                                                    <tr id="row_${rowIdx}">
                                                                        <td>
                                                                            <input type="hidden" name="items[${rowIdx}][product_id]" value="${productId}">
                                                                            <div class="fw-bold">${productData.name}</div>
                                                                            <div class="extra-small text-muted">${productData.sku}</div>
                                                                        </td>
                                                                        <td>
                                                                            <span class="badge bg-light text-dark border">${productData.category}</span>
                                                                        </td>
                                                                         <td class="text-center">
                                                                             <input type="number" name="items[${rowIdx}][qty]" class="form-control form-control-sm text-center mx-auto qty-input" style="width: 70px;" value="${qty}" required min="0">
                                                                         </td>
                                                                        <td class="text-center">
                                                                            <input type="number" name="items[${rowIdx}][min_quantity]" class="form-control form-control-sm text-center mx-auto min-input" style="width: 70px;" value="${min}" readonly>
                                                                        </td>
                                                                        <td class="text-center">
                                                                            <input type="number" name="items[${rowIdx}][max_quantity]" class="form-control form-control-sm text-center mx-auto max-input" style="width: 70px;" value="${max}" readonly>
                                                                        </td>
                                                                        <td class="text-center">
                                                                            <div class="custom-control custom-checkbox d-inline-block">
                                                                                <input class="custom-control-input" type="checkbox" id="check_${rowIdx}" name="items[${rowIdx}][must_have]" value="1" ${mustHave ? 'checked' : ''}>
                                                                                <label class="custom-control-label" for="check_${rowIdx}"></label>
                                                                            </div>
                                                                        </td>
                                                                        <td>
                                                                            <select name="items[${rowIdx}][deviation_tolerance]" class="form-control form-control-sm">
                                                                                <option value="None" ${deviation === 'None' ? 'selected' : ''}>None</option>
                                                                                <option value="±5%" ${deviation === '±5%' ? 'selected' : ''}>±5%</option>
                                                                                <option value="±10%" ${deviation === '±10%' ? 'selected' : ''}>±10%</option>
                                                                                <option value="±1 unit" ${deviation === '±1 unit' ? 'selected' : ''}>±1 unit</option>
                                                                                <option value="±2 units" ${deviation === '±2 units' ? 'selected' : ''}>±2 units</option>
                                                                            </select>
                                                                        </td>
                                                                        <td class="text-end">
                                                                            <button type="button" class="btn btn-link text-danger p-0 delete-row" data-id="${rowIdx}">
                                                                                <i class="fa-solid fa-trash-can rounded-5 p-1 d-inline-flex align-items-center justify-content-center action-btn theme-red"></i>
                                                                            </button>
                                                                        </td>
                                                                    </tr>
                                                                `;

                $('#productsTable tbody').append(newRow);
                rowIdx++;

                // Reset modal
                $('#modal_product').val('').trigger('change');
                $('#modal_qty').val(1);
                $('#modal_min').val(1);
                $('#modal_max').val(1);
                $('#modal_must_have').prop('checked', false);
                $('#modal_deviation').val('±10%');
                updateModalMinMax();

                $('#addProductModal').modal('hide');
            });

            $(document).on('click', '.delete-row', function() {
                const id = $(this).data('id');
                $(`#row_${id}`).remove();

                if ($('#productsTable tbody tr').length === 0) {
                    $('#productsTable tbody').append(`
                                                                        <tr id="emptyRow">
                                                                            <td colspan="7" class="text-center py-4 text-muted small">
                                                                                No products added yet. Click "Add Product Line" to start.
                                                                            </td>
                                                                        </tr>
                                                                    `);
                }
            });

            $('#processImportBtn').on('click', function() {
                const fileInput = $('#import_file')[0];
                if (fileInput.files.length === 0) {
                    Swal.fire('Error', 'Please select an Excel file.', 'error');
                    return;
                }

                const formData = new FormData();
                formData.append('import_file', fileInput.files[0]);
                formData.append('template_id', '{{ $template->id }}');
                formData.append('_token', '{{ csrf_token() }}');

                const btn = $(this);
                btn.prop('disabled', true).html('<i class="fa-solid fa-spinner fa-spin me-1"></i> Processing...');
                $('#importErrors').remove();

                $.ajax({
                    url: '{{ route("posm.norms.import.validate") }}',
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(response) {
                        if (response.success) {
                            $('#emptyRow').remove();
                            response.products.forEach(product => {
                                const pId = product.product_id;

                                let exists = false;
                                $('input[name^="items"][name$="[product_id]"]').each(function() {
                                    if ($(this).val() == pId) {
                                        exists = true;
                                        return false;
                                    }
                                });

                                if (!exists) {
                                    const qty = product.qty;
                                    const newRow = `
                                        <tr id="row_${rowIdx}">
                                            <td>
                                                <input type="hidden" name="items[${rowIdx}][product_id]" value="${pId}">
                                                <div class="fw-bold">${product.name}</div>
                                                <div class="extra-small text-muted">${product.sku}</div>
                                            </td>
                                            <td>
                                                <span class="badge bg-light text-dark border">${product.category}</span>
                                            </td>
                                             <td class="text-center">
                                                 <input type="number" name="items[${rowIdx}][qty]" class="form-control form-control-sm text-center mx-auto qty-input" style="width: 70px;" value="${qty}" required min="0">
                                             </td>
                                            <td class="text-center">
                                                <input type="number" name="items[${rowIdx}][min_quantity]" class="form-control form-control-sm text-center mx-auto min-input" style="width: 70px;" value="${product.min_quantity}" readonly>
                                            </td>
                                            <td class="text-center">
                                                <input type="number" name="items[${rowIdx}][max_quantity]" class="form-control form-control-sm text-center mx-auto max-input" style="width: 70px;" value="${product.max_quantity}" readonly>
                                            </td>
                                            <td class="text-center">
                                                <div class="custom-control custom-checkbox d-inline-block">
                                                    <input class="custom-control-input" type="checkbox" id="check_edit_${rowIdx}" name="items[${rowIdx}][must_have]" value="1" ${product.must_have ? 'checked' : ''}>
                                                    <label class="custom-control-label" for="check_edit_${rowIdx}"></label>
                                                </div>
                                            </td>
                                            <td>
                                                <select name="items[${rowIdx}][deviation_tolerance]" class="form-control form-control-sm">
                                                    <option value="None" ${product.deviation_tolerance === 'None' ? 'selected' : ''}>None</option>
                                                    <option value="±5%" ${product.deviation_tolerance === '±5%' ? 'selected' : ''}>±5%</option>
                                                    <option value="±10%" ${product.deviation_tolerance === '±10%' ? 'selected' : ''}>±10%</option>
                                                    <option value="±1 unit" ${product.deviation_tolerance === '±1 unit' ? 'selected' : ''}>±1 unit</option>
                                                    <option value="±2 units" ${product.deviation_tolerance === '±2 units' ? 'selected' : ''}>±2 units</option>
                                                </select>
                                            </td>
                                            <td class="text-end">
                                                <button type="button" class="btn btn-link text-danger p-0 delete-row" data-id="${rowIdx}">
                                                    <i class="fa-solid fa-trash-can rounded-5 p-1 d-inline-flex align-items-center justify-content-center action-btn theme-red"></i>
                                                </button>
                                            </td>
                                        </tr>
                                    `;
                                    $('#productsTable tbody').append(newRow);
                                    rowIdx++;
                                }
                            });

                            $('#bulkImportModal').modal('hide');
                            $('#import_file').val('');
                            Swal.fire({
                                icon: 'success',
                                title: 'Import Successful',
                                text: 'Valid products have been added to the template.',
                                timer: 2000,
                                showConfirmButton: false
                            });
                        }
                        btn.prop('disabled', false).text('Upload & Import');
                    },
                    error: function(xhr) {
                        btn.prop('disabled', false).text('Upload & Import');
                        let errorHtml = '<div id="importErrors" class="alert alert-danger small p-3 mb-3"><ul class="mb-0 ps-3">';
                        if (xhr.responseJSON && xhr.responseJSON.errors) {
                            xhr.responseJSON.errors.forEach(err => {
                                errorHtml += `<li>${err}</li>`;
                            });
                        } else if (xhr.responseJSON && xhr.responseJSON.message) {
                            errorHtml += `<li>${xhr.responseJSON.message}</li>`;
                        } else {
                            errorHtml += '<li>An unexpected error occurred.</li>';
                        }
                        errorHtml += '</ul></div>';

                        $('#bulkImportModal .modal-body').prepend(errorHtml);
                    }
                });
            });
        });
    </script>
    @endpush