{{--
    ====================================================================
    📊 REUSABLE AJAX DATATABLE COMPONENT
    ====================================================================

    USAGE EXAMPLE:

    @include('admin.partial.datatable', [
        'title' => 'Category Management',
        'subtitle' => 'Manage all categories', // optional
        'columns' => [
            ['label' => 'SL', 'field' => 'id', 'sortable' => true],
            ['label' => 'Name', 'field' => 'name', 'sortable' => true],
            ['label' => 'Status', 'field' => 'status'],
            ['label' => 'Action', 'field' => 'action'],
        ],
        'ajax_route' => route('category.index'),
        'store_route' => route('category.store'), // optional, defaults to ajax_route
        'update_route' => route('category.update', ':id'), // optional, defaults to ajax_route/:id
        'delete_route' => route('category.destroy', ':id'), // optional
        'filters' => [
            'search' => true,
            'status' => true,
            'parent_category' => $pluck_categories ?? null, // pass dropdown data
            'date_range' => true,
            'custom' => [ // optional custom filters
                ['name' => 'division', 'label' => 'Division', 'options' => $divisions],
            ]
        ],
        'modal_fields' => [ // Form fields for Add/Edit modal
            ['name' => 'name', 'label' => 'Name', 'type' => 'text', 'required' => true],
            ['name' => 'bn_name', 'label' => 'Bangla Name', 'type' => 'text', 'required' => true],
            ['name' => 'parent_id', 'label' => 'Parent Category', 'type' => 'select', 'options' => $pluck_categories],
            ['name' => 'status', 'label' => 'Status', 'type' => 'select', 'options' => [1 => 'Active', 0 => 'Inactive']],
            ['name' => 'image', 'label' => 'Image', 'type' => 'file', 'accept' => 'image/*'],
        ],
        'show_add_button' => true, // optional, default true
        'show_filters' => true, // optional, default true
        'per_page_options' => [10, 20, 50, 100], // optional
    ])
--}}

@php
    $title = $title ?? 'Data Management';
    $subtitle = $subtitle ?? '';
    $columns = $columns ?? [];
    $ajax_route = $ajax_route ?? '#';
    $store_route = $store_route ?? $ajax_route;
    $update_route = $update_route ?? $ajax_route . '/:id';
    $delete_route = $delete_route ?? $ajax_route . '/:id';
    $filters = $filters ?? [];
    $modal_fields = $modal_fields ?? [];
    $show_add_button = $show_add_button ?? true;
    $show_filters = $show_filters ?? true;
    $per_page_options = $per_page_options ?? [10, 20, 50, 100];
    $unique_id = 'dt_' . uniqid(); // Unique ID for multiple tables on same page
@endphp

<style>
    /* Excel-Style Datatable Design */
    .excel-datatable-container {
        background: #f5f5f5;
        padding: 0;
        font-family: 'Segoe UI', Tahoma, sans-serif;
    }

    .excel-datatable-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        padding: 25px;
        border-radius: 10px 10px 0 0;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        margin-bottom: 0;
    }

    .excel-datatable-title {
        color: white;
        font-size: 24px;
        font-weight: 600;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .excel-datatable-subtitle {
        color: rgba(255, 255, 255, 0.9);
        font-size: 14px;
        margin-top: 5px;
    }

    .excel-control-panel {
        background: white;
        padding: 20px;
        border-bottom: 3px solid #e0e0e0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 15px;
    }

    .excel-control-group {
        display: flex;
        align-items: center;
        gap: 10px;
    }




    .excel-filter-toggle {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 6px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .excel-filter-toggle:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
    }

    .excel-filter-section {
        background: #f8f9fa;
        padding: 20px;
        border-bottom: 2px solid #e0e0e0;
    }

    .excel-filter-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 15px;
    }

    .excel-filter-item label {
        display: block;
        font-weight: 600;
        color: #555;
        margin-bottom: 5px;
        font-size: 13px;
    }

    .excel-form-control {
        border: 2px solid #e0e0e0;
        border-radius: 6px;
        padding: 8px 12px;
        font-size: 14px;
        transition: all 0.3s ease;
        width: 100%;
    }

    .excel-form-control:focus {
        border-color: #667eea;
        outline: none;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    }

    .excel-table-wrapper {
        background: white;
        overflow-x: auto;
        border-radius: 0 0 10px 10px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        position: relative;
    }

    .excel-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 13px;
    }

    .excel-table thead {
        background: linear-gradient(to bottom, #f8f9fa 0%, #e9ecef 100%);
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .excel-table thead th {
        padding: 12px 10px;
        text-align: left;
        font-weight: 700;
        color: #2c3e50;
        border: 1px solid #d0d0d0;
        border-right: 2px solid #d0d0d0;
        white-space: nowrap;
        text-transform: uppercase;
        font-size: 12px;
        letter-spacing: 0.5px;
        background: linear-gradient(to bottom, #ffffff 0%, #f0f0f0 100%);
    }

    .excel-table thead th:first-child {
        border-left: 2px solid #d0d0d0;
    }

    .excel-table tbody tr {
        transition: all 0.2s ease;
    }

    .excel-table tbody tr:nth-child(even) {
        background: #fafafa;
    }

    .excel-table tbody tr:hover {
        background: #e3f2fd;
        transform: scale(1.01);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .excel-table tbody td {
        padding: 10px;
        border: 1px solid #e0e0e0;
        border-right: 2px solid #e0e0e0;
        vertical-align: middle;
        color: #333;
    }

    .excel-table tbody td:first-child {
        border-left: 2px solid #e0e0e0;
        font-weight: 600;
        background: #f9f9f9;
        text-align: center;
    }

    .excel-loader {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.95);
        display: none;
        align-items: center;
        justify-content: center;
        z-index: 100;
        border-radius: 10px;
    }

    .excel-loader.active {
        display: flex;
    }

    .excel-spinner {
        width: 60px;
        height: 60px;
        border: 5px solid #f3f3f3;
        border-top: 5px solid #667eea;
        border-radius: 50%;
        animation: spin 1s linear infinite;
    }

    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    .excel-btn-action {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border: none;
        padding: 6px 12px;
        border-radius: 6px;
        cursor: pointer;
        font-weight: 600;
        transition: all 0.3s ease;
        font-size: 12px;
    }

    .excel-btn-action:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
    }

    .excel-btn-reset {
        background: #ff6b6b;
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 6px;
        cursor: pointer;
        font-weight: 600;
        transition: all 0.3s ease;
    }

    .excel-btn-reset:hover {
        background: #ee5a5a;
        transform: rotate(180deg);
    }

    .excel-badge-status {
        padding: 4px 12px;
        border-radius: 20px;
        font-size: 11px;
        font-weight: 700;
        display: inline-block;
    }

    .excel-badge-active {
        background: #4caf50;
        color: white;
    }

    .excel-badge-inactive {
        background: #f44336;
        color: white;
    }

    .excel-modal .modal-content {
        border-radius: 10px;
        border: none;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    }

    .excel-modal .modal-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-radius: 10px 10px 0 0;
        padding: 20px;
    }

    .excel-modal .modal-title {
        font-weight: 600;
        font-size: 18px;
    }

    .excel-modal .modal-body {
        padding: 25px;
    }

    .excel-modal .form-group label {
        font-weight: 600;
        color: #333;
        margin-bottom: 8px;
    }

    .excel-modal .form-group label.required::after {
        content: ' *';
        color: #f44336;
    }

    .excel-no-data {
        text-align: center;
        padding: 40px;
        background: #ffe6e6;
        color: #d32f2f;
        font-weight: 600;
        font-size: 16px;
    }

    @media (max-width: 768px) {
        .excel-control-panel {
            flex-direction: column;
        }

        .excel-table {
            font-size: 11px;
        }

        .excel-table thead th,
        .excel-table tbody td {
            padding: 8px 6px;
        }
    }
</style>

<div class="excel-datatable-container" id="{{ $unique_id }}">
    <!-- Header -->
    <div class="excel-datatable-header">
        <div class="excel-datatable-title">
            <div>
                <div>📊 {{ $title }}</div>
                @if ($subtitle)
                    <div class="excel-datatable-subtitle">{{ $subtitle }}</div>
                @endif
            </div>
            @if ($show_add_button)
                <button class="btn btn-primary" onclick="openAddModal_{{ $unique_id }}()">
                    <i class="fa fa-plus"></i>
                    Add New
                </button>
            @endif
        </div>
    </div>

    <!-- Control Panel -->
    <div class="excel-control-panel">
        <div class="excel-control-group">
            <span style="font-weight: 600; color: #333; font-size: 14px;">Show:</span>
            <select id="perPage_{{ $unique_id }}" class="excel-form-control" style="width: 100px;">
                @foreach ($per_page_options as $option)
                    <option value="{{ $option }}">{{ $option }}</option>
                @endforeach
                <option value="all">All</option>
            </select>
        </div>

        @if (isset($filters['search']) && $filters['search'])
            <div class="excel-control-group" style="flex: 1; max-width: 400px;">
                <input type="text" id="search_{{ $unique_id }}" class="excel-form-control"
                    placeholder="🔍 Search...">
            </div>
        @endif
    </div>

    <!-- Filter Section -->
    @if ($show_filters && !empty($filters))
        <div class="collapse excel-filter-section" id="filterCollapse">
            <div class="excel-filter-grid">
                @if (isset($filters['status']) && $filters['status'])
                    <div class="excel-filter-item">
                        <label>Status</label>
                        <select id="status_filter_{{ $unique_id }}" class="excel-form-control">
                            <option value="">All Status</option>
                            <option value="1">Active</option>
                            <option value="0">Inactive</option>
                        </select>
                    </div>
                @endif

                @if (isset($filters['parent_category']))
                    <div class="excel-filter-item">
                        <label>Parent Category</label>
                        <select id="parent_filter_{{ $unique_id }}" class="excel-form-control">
                            <option value="">All Parents</option>
                            @foreach ($filters['parent_category'] ?? [] as $key => $value)
                                <option value="{{ $key }}">{{ $value }}</option>
                            @endforeach
                        </select>
                    </div>
                @endif

                @if (isset($filters['date_range']) && $filters['date_range'])
                    <div class="excel-filter-item">
                        <label>From Date</label>
                        <input type="date" id="from_date_{{ $unique_id }}" class="excel-form-control">
                    </div>
                    <div class="excel-filter-item">
                        <label>To Date</label>
                        <input type="date" id="to_date_{{ $unique_id }}" class="excel-form-control">
                    </div>
                @endif

                @if (isset($filters['custom']))
                    @foreach ($filters['custom'] as $custom)
                        <div class="excel-filter-item">
                            <label>{{ $custom['label'] }}</label>
                            <select id="{{ $custom['name'] }}_filter_{{ $unique_id }}" class="excel-form-control">
                                <option value="">All {{ $custom['label'] }}</option>
                                @foreach ($custom['options'] ?? [] as $key => $value)
                                    <option value="{{ $key }}">{{ $value }}</option>
                                @endforeach
                            </select>
                        </div>
                    @endforeach
                @endif

                <div class="excel-filter-item" style="display: flex; align-items: flex-end;">
                    <button id="resetFilters_{{ $unique_id }}" class="excel-btn-reset"
                        style="width: 50px; height: 42px;">
                        <i class="fa fa-sync"></i>
                    </button>
                </div>
            </div>
        </div>
    @endif

    <!-- Table Wrapper -->
    <div class="excel-table-wrapper">
        <div id="tableContent_{{ $unique_id }}">
            <table class="custom-table table-hover align-middle">
                <thead>
                    <tr>
                        @foreach ($columns as $col)
                            <th>{{ $col['label'] }}</th>
                        @endforeach
                    </tr>
                </thead>
                <tbody id="tableBody_{{ $unique_id }}">
                    <tr>
                        <td colspan="{{ count($columns) }}" class="text-center">
                            <i class="fa fa-spinner fa-spin"></i> Loading...
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

        <!-- Pagination -->
        <div id="pagination_{{ $unique_id }}" style="padding: 20px;"></div>

        <!-- Loader -->
        <div id="tableLoader_{{ $unique_id }}" class="excel-loader">
            <div class="excel-spinner"></div>
        </div>
    </div>
</div>

<!-- Add/Edit Modal -->
<div class="modal fade excel-modal" id="addEditModal_{{ $unique_id }}" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <form id="addEditForm_{{ $unique_id }}" method="POST" enctype="multipart/form-data">
            @csrf
            <input type="hidden" name="_method" id="formMethod_{{ $unique_id }}" value="POST">
            <input type="hidden" name="id" id="recordId_{{ $unique_id }}">

            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalTitle_{{ $unique_id }}">Add {{ $title }}</h5>
                    <button type="button" class="close" data-dismiss="modal" style="color: white;">
                        <span>&times;</span>
                    </button>
                </div>

                <div class="modal-body">
                    <div class="row">
                        @foreach ($modal_fields as $field)
                            <div class="col-md-{{ $field['col'] ?? 12 }} form-group">
                                <label for="{{ $field['name'] }}_{{ $unique_id }}"
                                    class="{{ $field['required'] ?? false ? 'required' : '' }}">
                                    {{ $field['label'] }}
                                </label>

                                @if ($field['type'] == 'text' || $field['type'] == 'email' || $field['type'] == 'number')
                                    <input type="{{ $field['type'] }}" id="{{ $field['name'] }}_{{ $unique_id }}"
                                        name="{{ $field['name'] }}" class="form-control excel-form-control"
                                        {{ $field['required'] ?? false ? 'required' : '' }}
                                        placeholder="{{ $field['placeholder'] ?? '' }}">
                                @elseif($field['type'] == 'textarea')
                                    <textarea id="{{ $field['name'] }}_{{ $unique_id }}" name="{{ $field['name'] }}"
                                        class="form-control excel-form-control" rows="{{ $field['rows'] ?? 3 }}"
                                        {{ $field['required'] ?? false ? 'required' : '' }} placeholder="{{ $field['placeholder'] ?? '' }}"></textarea>
                                @elseif($field['type'] == 'select')
                                    <select id="{{ $field['name'] }}_{{ $unique_id }}"
                                        name="{{ $field['name'] }}" class="form-control excel-form-control"
                                        {{ $field['required'] ?? false ? 'required' : '' }}>
                                        <option value="">-- Select {{ $field['label'] }} --</option>
                                        @foreach ($field['options'] ?? [] as $key => $value)
                                            <option value="{{ $key }}">{{ $value }}</option>
                                        @endforeach
                                    </select>
                                @elseif($field['type'] == 'file')
                                    <input type="file" id="{{ $field['name'] }}_{{ $unique_id }}"
                                        name="{{ $field['name'] }}" class="form-control excel-form-control"
                                        accept="{{ $field['accept'] ?? '*' }}"
                                        {{ $field['required'] ?? false ? 'required' : '' }}>
                                    @if (isset($field['preview']))
                                        <img id="{{ $field['name'] }}_preview_{{ $unique_id }}" src=""
                                            style="max-width: 200px; margin-top: 10px; display: none;">
                                    @endif
                                @elseif($field['type'] == 'date')
                                    <input type="date" id="{{ $field['name'] }}_{{ $unique_id }}"
                                        name="{{ $field['name'] }}" class="form-control excel-form-control"
                                        {{ $field['required'] ?? false ? 'required' : '' }}>
                                @elseif($field['type'] == 'checkbox')
                                    <div class="form-check">
                                        <input type="checkbox" id="{{ $field['name'] }}_{{ $unique_id }}"
                                            name="{{ $field['name'] }}" class="form-check-input" value="1">
                                        <label class="form-check-label"
                                            for="{{ $field['name'] }}_{{ $unique_id }}">
                                            {{ $field['checkbox_label'] ?? 'Yes' }}
                                        </label>
                                    </div>
                                @endif

                                <span class="text-danger"
                                    id="{{ $field['name'] }}_error_{{ $unique_id }}"></span>
                            </div>
                        @endforeach
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-success">
                        <i class="fa fa-save"></i> Save
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
    (function() {
        const uniqueId = '{{ $unique_id }}';
        const ajaxRoute = '{{ $ajax_route }}';
        const storeRoute = '{{ $store_route }}';
        const updateRoute = '{{ $update_route }}';
        const deleteRoute = '{{ $delete_route }}';

        function fetchData(page = 1) {
            let data = {
                page: page,
                perPage: $('#perPage_' + uniqueId).val(),
            };

            // Add all filter values
            @if (isset($filters['search']) && $filters['search'])
                data.search = $('#search_' + uniqueId).val();
            @endif

            @if (isset($filters['status']) && $filters['status'])
                data.status = $('#status_filter_' + uniqueId).val();
            @endif

            @if (isset($filters['parent_category']))
                data.parent_category_id = $('#parent_filter_' + uniqueId).val();
            @endif

            @if (isset($filters['date_range']) && $filters['date_range'])
                data.from_date = $('#from_date_' + uniqueId).val();
                data.to_date = $('#to_date_' + uniqueId).val();
            @endif

            @if (isset($filters['custom']))
                @foreach ($filters['custom'] as $custom)
                    data.{{ $custom['name'] }} = $('#{{ $custom['name'] }}_filter_' + uniqueId).val();
                @endforeach
            @endif

            $.ajax({
                url: ajaxRoute,
                method: 'GET',
                data: data,
                beforeSend: function() {
                    $('#tableLoader_' + uniqueId).addClass('active');
                },
                success: function(response) {
                    if (response.html) {
                        $('#tableBody_' + uniqueId).html(response.html);
                    } else if (response.data) {
                        $('#tableBody_' + uniqueId).html(response.data);
                    }

                    if (response.pagination) {
                        $('#pagination_' + uniqueId).html(response.pagination);
                    }

                    $('#tableLoader_' + uniqueId).removeClass('active');
                    attachPaginationLinks();
                },
                error: function() {
                    $('#tableLoader_' + uniqueId).removeClass('active');
                    $('#tableBody_' + uniqueId).html(
                        '<tr><td colspan="{{ count($columns) }}" class="excel-no-data">⚠️ Failed to load data</td></tr>'
                        );
                }
            });
        }
        // Edit এবং Delete button-এর জন্য event delegation
        $(document).on('click', '#tableBody_' + uniqueId + ' .edit-btn', function() {
            let id = $(this).data('id');
            window['editRecord_' + uniqueId](id);
        });

        $(document).on('click', '#tableBody_' + uniqueId + ' .delete-btn', function() {
            let id = $(this).data('id');
            window['deleteRecord_' + uniqueId](id);
        });

        function attachPaginationLinks() {
            $('#pagination_' + uniqueId + ' .pagination a').off('click').on('click', function(e) {
                e.preventDefault();
                let page = $(this).attr('href').split('page=')[1] || 1;
                fetchData(page);
            });
        }

        // Filter events
        $(document).on('change keyup',
            '#search_' + uniqueId + ', #perPage_' + uniqueId +
            ', #status_filter_' + uniqueId + ', #parent_filter_' + uniqueId +
            ', #from_date_' + uniqueId + ', #to_date_' + uniqueId +
            @if (isset($filters['custom']))
                @foreach ($filters['custom'] as $custom)
                    ', #{{ $custom['name'] }}_filter_' + uniqueId +
                @endforeach
            @endif
            '',
            function() {
                fetchData(1);
            }
        );

        // Reset filters
        $('#resetFilters_' + uniqueId).click(function() {
            $('#search_' + uniqueId).val('');
            $('#status_filter_' + uniqueId).val('');
            $('#parent_filter_' + uniqueId).val('');
            $('#from_date_' + uniqueId).val('');
            $('#to_date_' + uniqueId).val('');
            @if (isset($filters['custom']))
                @foreach ($filters['custom'] as $custom)
                    $('#{{ $custom['name'] }}_filter_' + uniqueId).val('');
                @endforeach
            @endif
            $('#perPage_' + uniqueId).val('10');
            fetchData(1);
        });

        // Open Add Modal
        window['openAddModal_' + uniqueId] = function() {
            $('#modalTitle_' + uniqueId).text('Add {{ $title }}');
            $('#addEditForm_' + uniqueId).attr('action', storeRoute);
            $('#formMethod_' + uniqueId).val('POST');
            $('#recordId_' + uniqueId).val('');

            // Clear all form fields
            @foreach ($modal_fields as $field)
                @if ($field['type'] == 'checkbox')
                    $('#{{ $field['name'] }}_' + uniqueId).prop('checked', false);
                @else
                    $('#{{ $field['name'] }}_' + uniqueId).val('');
                @endif
                $('#{{ $field['name'] }}_error_' + uniqueId).text('');
            @endforeach

            $('#addEditModal_' + uniqueId).modal('show');
        };

        // Edit Record
        window['editRecord_' + uniqueId] = function(id) {
            $.get(ajaxRoute + '/' + id + '/edit', function(response) {
                let record = response.data || response;

                $('#modalTitle_' + uniqueId).text('Edit {{ $title }}');
                $('#addEditForm_' + uniqueId).attr('action', updateRoute.replace(':id', id));
                $('#formMethod_' + uniqueId).val('PUT');
                $('#recordId_' + uniqueId).val(id);

                // Fill form fields
                @foreach ($modal_fields as $field)
                    @if ($field['type'] == 'checkbox')
                        $('#{{ $field['name'] }}_' + uniqueId).prop('checked', record
                            .{{ $field['name'] }} == 1);
                    @else
                        $('#{{ $field['name'] }}_' + uniqueId).val(record.{{ $field['name'] }} || '');
                    @endif
                    $('#{{ $field['name'] }}_error_' + uniqueId).text('');
                @endforeach

                $('#addEditModal_' + uniqueId).modal('show');
            });
        };

        // Delete Record
        window['deleteRecord_' + uniqueId] = function(id) {
            if (!confirm('Are you sure you want to delete this item?')) return;

            $.ajax({
                url: deleteRoute.replace(':id', id),
                method: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    _method: 'DELETE'
                },
                success: function(response) {
                    toastr.success(response.message || 'Deleted successfully!');
                    fetchData(1);
                },
                error: function() {
                    toastr.error('Failed to delete!');
                }
            });
        };

        // Submit Form
        $('#addEditForm_' + uniqueId).submit(function(e) {
            e.preventDefault();

            let url = $(this).attr('action');
            let formData = new FormData(this);

            if ($('#formMethod_' + uniqueId).val() === 'PUT') {
                formData.append('_method', 'PUT');
            }

            // Clear previous errors
            @foreach ($modal_fields as $field)
                $('#{{ $field['name'] }}_error_' + uniqueId).text('');
            @endforeach

            $.ajax({
                url: url,
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function(response) {
                    $('#addEditModal_' + uniqueId).modal('hide');
                    toastr.success(response.message || 'Saved successfully!');
                    fetchData(1);
                },
                error: function(xhr) {
                    if (xhr.status === 422) {
                        let errors = xhr.responseJSON.errors;
                        $.each(errors, function(key, val) {
                            $('#' + key + '_error_' + uniqueId).text(val[0]);
                        });
                    } else {
                        toastr.error('Something went wrong!');
                    }
                }
            });
        });

        // Initial load
        $(document).ready(function() {
            fetchData(1);
        });
    })();
</script>