@extends('admin.layout.app')
@section('title', $slug === 'attributes' ? 'Car Attributes' : 'Car Features')
@section('content')

    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="content-area">
                    <main id="main" class="main-content">
                        <div class="tfcl-dashboard">

                            {{-- ── Header ── --}}
                            <div class="d-flex justify-content-between align-items-center mb-4">
                                <h1 class="admin-title mb-0" style="font-weight: 700; color: #1d2939;">
                                    {{ $slug === 'attributes' ? 'Car Attributes' : 'Car Features' }}
                                </h1>

                                <a id="openAddModal" class="btn-orange-classical py-2 px-4">
                                    <i class="fas fa-plus me-2"></i>
                                    Add {{ $slug === 'attributes' ? 'Attribute' : 'Feature' }}
                                </a>
                            </div>


                            <div class="spec-tab-pills" id="tabPills">
                                @if($slug === 'attributes')
                                    <button class="spec-tab-pill active" data-type="all">All</button>
                                    @foreach($types as $type)
                                        <button class="spec-tab-pill" data-type="{{ $type }}">
                                            {{ ucfirst(str_replace('_', ' ', $type)) }}
                                        </button>
                                    @endforeach
                                @else
                                    <button class="spec-tab-pill active" data-category="all">All</button>
                                    @foreach($categories as $cat)
                                        <button class="spec-tab-pill" data-category="{{ $cat }}">
                                            {{ ucfirst($cat) }}
                                        </button>
                                    @endforeach
                                @endif
                            </div>

                            {{-- ── Bulk Bar ── --}}
                            <div class="bulk-bar" id="bulkBar">
                                <span id="selectedCount">0</span> selected
                                <button class="btn btn-sm btn-success" id="bulkActivate">Activate</button>
                                <button class="btn btn-sm btn-warning" id="bulkDeactivate">Deactivate</button>
                            </div>

                            {{-- ── Table ── --}}
                            <div class="tfcl-dashboard-listing">
                                <div class="table-responsive" id="tableWrapper">
                                    <table class="table spec-table" id="specTable">
                                        <thead>
                                        <tr>
                                            <th width="40">
                                                <input type="checkbox" id="selectAll">
                                            </th>
                                            @if($slug === 'attributes')
                                                <th width="60">Image</th>
                                                <th>Name</th>
                                                <th>Type</th>
                                                <th width="100">Active</th>
                                                <th width="130">Landing Page</th>
                                                <th width="130">Filter</th>
                                            @else
                                                <th>Name</th>
                                                <th>Category</th>
                                                <th width="100">Active</th>
                                                <th width="130">Landing Page</th>
                                                <th width="130">Filter</th>
                                            @endif
                                            <th width="80">Actions</th>
                                        </tr>
                                        </thead>
                                        <tbody id="specTableBody">
                                        {{-- JS se load hoga --}}
                                        </tbody>
                                    </table>
                                </div>
                            </div>

                        </div>
                    </main>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="addModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content" style="border-radius:15px; border:none; overflow:hidden;">
                <div class="modal-header border-0 pt-4">
                    <h5 class="modal-title w-100 text-center fw-bold">Add
                        New {{ $slug === 'attributes' ? 'Attribute' : 'Feature' }}</h5>
                </div>
                <div class="modal-body" style="padding: 30px !important;">

                    @if($slug === 'attributes')
                        <div class="mb-3">
                            <label class="form-label small fw-bold">Select Type *</label>
                            <select class="form-select classical-input" id="addType">
                                <option value="">Choose...</option>
                                @foreach($types as $type)
                                    <option value="{{ $type }}">{{ ucfirst(str_replace('_', ' ', $type)) }}</option>
                                @endforeach
                            </select>
                            <span class="err text-danger small" id="err-add-type"></span>
                        </div>

                        <div class="mb-3 d-none" id="parentMakeGroup">
                            <label class="form-label small fw-bold">Parent Make *</label>
                            <select class="form-select classical-input" id="addParentId">
                                <option value="">Select Make</option>
                                @foreach($makes as $make)
                                    <option value="{{ $make->id }}">{{ $make->name }}</option>
                                @endforeach
                            </select>
                            <span class="err text-danger small" id="err-add-parent"></span>
                        </div>

                        <div class="mb-3 d-none" id="imageGroup">
                            <label class="form-label small fw-bold">Upload Image</label>
                            <input type="file" class="form-control classical-input" id="addImage" accept="image/*">
                            <span class="err text-danger small" id="err-add-image"></span>
                        </div>
                    @else
                        <div class="mb-3">
                            <label class="form-label small fw-bold">Category *</label>
                            <select class="form-select classical-input" id="addCategory">
                                <option value="">Select Category</option>
                                @foreach($categories as $cat)
                                    <option value="{{ $cat }}">{{ ucfirst($cat) }}</option>
                                @endforeach
                            </select>
                            <span class="err text-danger small" id="err-add-category"></span>
                        </div>
                    @endif

                    <div class="mb-3">
                        <label class="form-label small fw-bold">Names * <span class="text-muted fw-normal">(Type & press Comma or Enter)</span></label>
                        <div class="tags-input-wrapper classical-input d-flex flex-wrap align-items-center gap-2">
                            <div id="tagsList" class="d-flex flex-wrap gap-2"></div>
                            <input type="text" id="tagInput" placeholder="Enter Names..."
                                   style="border:none; outline:none; flex-grow:1; font-size:14px; min-width:100px;">
                        </div>
                        <textarea class="d-none" id="addNames"></textarea>
                        <span class="err text-danger small" id="err-add-names"></span>
                    </div>
                    <div class="d-flex justify-content-between align-items-center bg-light p-2 rounded-3">
                        <span class="small fw-bold px-2">Settings:</span>
                        <div class="d-flex gap-3">
                            {{--                            @if($slug === 'attributes')--}}
                            {{--                                <div class="form-check form-switch mb-0">--}}
                            {{--                                    <input class="form-check-input custom-switch" type="checkbox" id="addLandingPage"--}}
                            {{--                                           checked>--}}
                            {{--                                    <label class="small">Landing</label>--}}
                            {{--                                </div>--}}
                            {{--                            @endif--}}
                            <div class="form-check form-switch mb-0">
                                <input class="form-check-input custom-switch" type="checkbox" id="addActive" checked>
                                <label class="small">Active</label>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="modal-footer border-0 pb-4 justify-content-center">
                    <button type="button" class="btn-pf" data-bs-dismiss="modal"
                            style="background:#f2f4f7;color:#475467;border:none;padding:10px 30px; border-radius:8px;">
                        Cancel
                    </button>
                    <button type="button" class="btn-pf" id="submitAdd"
                            style="background:#ff6200;color:#fff;border:none;padding:10px 30px; border-radius:8px;">Save
                        Now
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="editModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content" style="border-radius:15px; border:none; overflow:hidden;">
                <div class="modal-header border-0 pt-4">
                    <h5 class="modal-title w-100 text-center fw-bold">Update Details</h5>
                </div>
                <div class="modal-body" style="padding: 30px !important;">
                    <input type="hidden" id="editId">

                    {{-- Image Preview --}}
                    <div class="mb-3 text-center" id="editImageContainer">
                        <img src="" id="editCurrentImage" class="d-none mb-2 shadow-sm"
                             style="width:80px;height:80px;object-fit:cover;border-radius:12px;border:2px solid #ff62001a;">
                    </div>

                    {{-- Name Field (Always) --}}
                    <div class="mb-3">
                        <label class="form-label small fw-bold">Name *</label>
                        <input type="text" class="form-control classical-input" id="editName">
                        <span class="err text-danger small" id="err-edit-name"></span>
                    </div>

                    @if($slug === 'attributes')
                        {{-- Parent Make (Sirf tab dikhega jab type 'model' hogi) --}}
                        <div class="mb-3 d-none" id="editParentGroup">
                            <label class="form-label small fw-bold">Parent Make *</label>
                            <select class="form-select classical-input" id="editParentId">
                                <option value="">Select Make</option>
                                @foreach($makes as $make)
                                    <option value="{{ $make->id }}">{{ $make->name }}</option>
                                @endforeach
                            </select>
                        </div>

                        {{-- Image Upload --}}
                        <div class="mb-3 d-none" id="editImageGroup">
                            <label class="form-label small fw-bold">Change Image</label>
                            <input type="file" class="form-control classical-input" id="editImage" accept="image/*">
                            <span class="err text-danger small" id="err-edit-image"></span>
                        </div>
                    @else
                        {{-- Feature Category --}}
                        <div class="mb-3">
                            <label class="form-label small fw-bold">Category *</label>
                            <select class="form-select classical-input" id="editCategory">
                                @foreach($categories as $cat)
                                    <option value="{{ $cat }}">{{ ucfirst($cat) }}</option>
                                @endforeach
                            </select>
                        </div>
                    @endif

                    <div class="d-flex justify-content-center gap-4 py-2 border-top mt-3">
                        {{--                        @if($slug === 'attributes')--}}
                        {{--                            <div class="form-check form-switch">--}}
                        {{--                                <input class="form-check-input custom-switch" type="checkbox" id="editLandingPage">--}}
                        {{--                                <label class="small fw-500">Landing Page</label>--}}
                        {{--                            </div>--}}
                        {{--                        @endif--}}
                        <div class="form-check form-switch">
                            <input class="form-check-input custom-switch" type="checkbox" id="editActive">
                            <label class="small fw-500">Active Status</label>
                        </div>
                    </div>
                </div>
                <div class="modal-footer border-0 pb-4 justify-content-center">
                    <button type="button" class="btn-pf" data-bs-dismiss="modal"
                            style="background:#f2f4f7;color:#475467;border:none;padding:10px 30px; border-radius:8px;">
                        Cancel
                    </button>
                    <button type="button" class="btn-pf" id="submitEdit"
                            style="background:#ff6200;color:#fff;border:none;padding:10px 30px; border-radius:8px;">
                        Update Now
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="deleteModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content" style="border-radius:15px; border:none; overflow:hidden;">
                <div class="modal-header border-0 pt-4">
                    <h5 class="modal-title w-100 text-center fw-bold">Confirm Delete</h5>
                </div>
                <div class="modal-body text-center pb-4">
                    <div class="mb-3">
                        <img src="{{ asset('assets/images/dashboard/trash.svg') }}" style="width:60px;opacity:.8;">
                    </div>
                    <p class="text-muted fs-15">Do you really want to delete this item?</p>
                </div>
                <div class="modal-footer border-0 pb-4 justify-content-center">
                    <button type="button" class="btn-pf" data-bs-dismiss="modal"
                            style="background:#f2f4f7;color:#475467;border:none;padding:10px 25px;">Cancel
                    </button>
                    <button type="button" class="btn-pf" id="confirmDelete"
                            style="background:red;color:#fff;border:none;padding:10px 25px;">Yes, Delete
                    </button>
                </div>
            </div>
        </div>
    </div>

@endsection
@push('scripts')
    <script>
        const CSRF = document.querySelector('meta[name="csrf-token"]').content;
        const SLUG = '{{ $slug }}';

        const BASE_URL = "{{ url('/') }}";

        const URLS = {
            @if($slug === 'attributes')
            byType: '{{ route('admin.specification.attributes.by-type') }}',
            store: '{{ route('admin.specification.attributes.store') }}',
            update: (id) => '{{ url('admin/specifications/attributes') }}/' + id + '/update',
            delete: (id) => '{{ url('admin/specifications/attributes') }}/' + id + '/delete',
            toggle: (id) => '{{ url('admin/specifications/attributes') }}/' + id + '/toggle',
            bulk: '{{ route('admin.specification.attributes.bulk') }}',
            @else
            byCategory: '{{ route('admin.specification.features.by-category') }}',
            store: '{{ route('admin.specification.features.store') }}',
            update: (id) => '{{ url('admin/specifications/features') }}/' + id + '/update',
            delete: (id) => '{{ url('admin/specifications/features') }}/' + id + '/delete',
            toggle: (id) => '{{ url('admin/specifications/features') }}/' + id + '/toggle',
            bulk: '{{ route('admin.specification.features.bulk') }}',
            @endif
        };

        // ── State ──────────────────────────────────────
        let currentFilter = 'all';
        let deleteId = null;
        let allData = [];

        // ── Init: Load all data ─────────────────────────
        loadData('all');

        // ── Pills click ─────────────────────────────────
        document.querySelectorAll('.spec-tab-pill').forEach(pill => {
            pill.addEventListener('click', function () {
                document.querySelectorAll('.spec-tab-pill').forEach(p => p.classList.remove('active'));
                this.classList.add('active');
                currentFilter = this.dataset.type || this.dataset.category;
                loadData(currentFilter);
            });
        });

        // ── Load Data (AJAX) ────────────────────────────
        function loadData(filter) {
            const url = SLUG === 'attributes' ? URLS.byType : URLS.byCategory;
            const param = SLUG === 'attributes' ? 'type' : 'category';
            const query = filter === 'all' ? '' : `?${param}=${filter}`;

            fetch(url + query, {
                headers: {'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest'}
            })
                .then(r => r.json())
                .then(data => {
                    allData = data;
                    renderTable(data);
                    updateBulkBar();
                });
        }

        // ── Render Table ────────────────────────────────
        function renderTable(data) {
            const tbody = document.getElementById('specTableBody');

            if (!data.length) {
                tbody.innerHTML = `<tr><td colspan="10" class="text-center py-4 text-muted">No records found</td></tr>`;
                return;
            }

            tbody.innerHTML = data.map(item => `
        <tr id="row-${item.id}">
            <td><input type="checkbox" class="row-check" value="${item.id}"></td>

            ${SLUG === 'attributes' ? `
            <td>
    ${item.image
                ? `<img src="${BASE_URL}/assets/images/${item.type === 'make' ? 'brands' : 'type'}/${item.image}"
                class="img-thumb" alt="">`
                : `<span class="text-muted" style="font-size:11px;">—</span>`
            }
</td>
            ` : ''}

            <td><strong>${item.name}</strong></td>

            <td>
                <span class="badge-type">
                    ${SLUG === 'attributes'
                ? item.type.replace(/_/g, ' ')
                : item.category}
                </span>
            </td>

            <td>
                <label class="toggle-switch">
                    <input type="checkbox" class="toggle-active"
                           data-id="${item.id}" data-field="is_active"
                           ${item.is_active ? 'checked' : ''}>
                    <span class="toggle-slider"></span>
                </label>
            </td>


            <td>
                <label class="toggle-switch">
                    <input type="checkbox" class="toggle-landing"
                           data-id="${item.id}" data-field="is_active_on_landing_page"
                           ${item.is_active_on_landing_page ? 'checked' : ''}>
                    <span class="toggle-slider"></span>
                </label>
            </td>

<td>
    <label class="toggle-switch">
        <input type="checkbox" class="toggle-filter"
               data-id="${item.id}" data-field="is_active_for_filter"
               ${item.is_active_for_filter ? 'checked' : ''}>
        <span class="toggle-slider"></span>
    </label>
</td>
            <td>
                <div class="d-flex gap-2">
                    <button class="btn btn-sm btn-outline-warning edit-btn"
                            data-item='${JSON.stringify(item)}'>
                        <svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                            <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
                            <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
                        </svg>
                    </button>
                    <button class="btn btn-sm btn-outline-danger delete-btn" data-id="${item.id}">
                        <svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                            <polyline points="3 6 5 6 21 6"/>
                            <path d="M19 6l-1 14H6L5 6M10 11v6M14 11v6M9 6V4h6v2"/>
                        </svg>
                    </button>
                </div>
            </td>
        </tr>
    `).join('');

            // Toggle active
            // document.querySelectorAll('.toggle-active, .toggle-landing').forEach(toggle => {
            //     toggle.addEventListener('change', function () {
            //         toggleItem(this.dataset.id, this.dataset.field, this);
            //     });
            // });
            document.querySelectorAll('.toggle-active, .toggle-landing, .toggle-filter').forEach(toggle => {
                toggle.addEventListener('change', function () {
                    toggleItem(this.dataset.id, this.dataset.field, this);
                });
            });
            // Edit buttons
            document.querySelectorAll('.edit-btn').forEach(btn => {
                btn.addEventListener('click', function () {
                    openEditModal(JSON.parse(this.dataset.item));
                });
            });

            // Delete buttons
            document.querySelectorAll('.delete-btn').forEach(btn => {
                btn.addEventListener('click', function () {
                    deleteId = this.dataset.id;
                    new bootstrap.Modal(document.getElementById('deleteModal')).show();
                });
            });

            // Row checkboxes
            document.querySelectorAll('.row-check').forEach(cb => {
                cb.addEventListener('change', updateBulkBar);
            });
        }

        // ── Toggle (AJAX) ───────────────────────────────
        function toggleItem(id, field, el) {
            const url = SLUG === 'attributes' ? URLS.toggle(id) : URLS.toggle(id);
            fetch(url, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': CSRF,
                    'Accept': 'application/json',
                },
                body: JSON.stringify({field})
            })
                .then(r => r.json())
                .then(json => {
                    if (!json.success) el.checked = !el.checked; // revert
                });
        }

        // ── Select All ──────────────────────────────────
        document.getElementById('selectAll').addEventListener('change', function () {
            document.querySelectorAll('.row-check').forEach(cb => cb.checked = this.checked);
            updateBulkBar();
        });

        function updateBulkBar() {
            const checked = document.querySelectorAll('.row-check:checked').length;
            const bar = document.getElementById('bulkBar');
            document.getElementById('selectedCount').textContent = checked;
            bar.classList.toggle('show', checked > 0);
        }

        // ── Bulk Action ─────────────────────────────────
        document.getElementById('bulkActivate').addEventListener('click', () => bulkAction('activate'));
        document.getElementById('bulkDeactivate').addEventListener('click', () => bulkAction('deactivate'));

        function bulkAction(action) {
            const ids = [...document.querySelectorAll('.row-check:checked')].map(cb => cb.value);
            fetch(SLUG === 'attributes' ? URLS.bulk : URLS.bulk, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': CSRF,
                    'Accept': 'application/json',
                },
                body: JSON.stringify({ids, action})
            })
                .then(r => r.json())
                .then(json => {
                    if (json.success) loadData(currentFilter);
                });
        }

        // ── Add Modal ───────────────────────────────────
        document.getElementById('openAddModal').addEventListener('click', () => {
            document.getElementById('addNames').value = '';
            document.getElementById('addActive').checked = true;
            if (SLUG === 'attributes') {
                document.getElementById('addType').value = '';
                // document.getElementById('addLandingPage').checked = true;
                document.getElementById('parentMakeGroup').classList.add('d-none');
                document.getElementById('imageGroup').classList.add('d-none');
            } else {
                document.getElementById('addCategory').value = '';
            }
            new bootstrap.Modal(document.getElementById('addModal')).show();
        });

        // Type change → show/hide parent make & image
        @if($slug === 'attributes')
        document.getElementById('addType').addEventListener('change', function () {
            const type = this.value;
            document.getElementById('parentMakeGroup').classList.toggle('d-none', type !== 'model');
            document.getElementById('imageGroup').classList.toggle('d-none', !['make', 'body_type'].includes(type));
        });
        @endif

        // ── Submit Add ──────────────────────────────────
        document.getElementById('submitAdd').addEventListener('click', function () {
            document.querySelectorAll('[id^="err-add"]').forEach(el => el.textContent = '');

            const formData = new FormData();
            formData.append('names', document.getElementById('addNames').value);
            formData.append('is_active', document.getElementById('addActive').checked ? 1 : 0);

            @if($slug === 'attributes')
            const type = document.getElementById('addType').value;
            if (!type) {
                document.getElementById('err-add-type').textContent = 'Type required';
                return;
            }
            formData.append('type', type);
            // formData.append('is_active_on_landing_page', document.getElementById('addLandingPage').checked ? 1 : 0);
            if (type === 'model') {
                formData.append('parent_id', document.getElementById('addParentId').value);
            }
            const imgFile = document.getElementById('addImage').files[0];
            if (imgFile) formData.append('image', imgFile);
            @else
            const cat = document.getElementById('addCategory').value;
            if (!cat) {
                document.getElementById('err-add-category').textContent = 'Category required';
                return;
            }
            formData.append('category', cat);
            @endif

            if (!document.getElementById('addNames').value.trim()) {
                document.getElementById('err-add-names').textContent = 'Name required';
                return;
            }

            fetch(URLS.store, {
                method: 'POST',
                headers: {'X-CSRF-TOKEN': CSRF, 'Accept': 'application/json'},
                body: formData
            })
                .then(r => r.json())
                .then(json => {
                    if (json.success) {
                        bootstrap.Modal.getInstance(document.getElementById('addModal')).hide();
                        loadData(currentFilter);
                        tags = [];
                        updateTags();
                        document.getElementById('tagInput').value = '';
                    } else if (json.errors) {
                        Object.keys(json.errors).forEach(k => {
                            const el = document.getElementById(`err-add-${k}`);
                            if (el) el.textContent = json.errors[k][0];
                        });
                    }
                });
        });

        // ── Open Edit Modal ──────────────────────────────────
        function openEditModal(item) {
            document.querySelectorAll('[id^="err-edit"]').forEach(el => el.textContent = '');
            document.getElementById('editId').value = item.id;
            document.getElementById('editName').value = item.name;
            document.getElementById('editActive').checked = !!item.is_active;

            @if($slug === 'attributes')
            // document.getElementById('editLandingPage').checked = !!item.is_active_on_landing_page;

            const imgEl = document.getElementById('editCurrentImage');
            const imgGroup = document.getElementById('editImageGroup');
            const parentGroup = document.getElementById('editParentGroup');

            // Logic for Parent Make (Model only)
            if (item.type === 'model') {
                parentGroup.classList.remove('d-none');
                document.getElementById('editParentId').value = item.parent_id || '';
            } else {
                parentGroup.classList.add('d-none');
            }

            // Logic for Image (Make and Body Type only)
            if (['make', 'body_type'].includes(item.type)) {
                imgGroup.classList.remove('d-none');
                const folder = item.type === 'make' ? 'brands' : 'type';
                if (item.image) {
                    imgEl.src = `${BASE_URL}/assets/images/${folder}/${item.image}`;
                    imgEl.classList.remove('d-none');
                } else {
                    imgEl.classList.add('d-none');
                }
            } else {
                imgGroup.classList.add('d-none');
                imgEl.classList.add('d-none');
            }
            @else
            // For Features
            document.getElementById('editCategory').value = item.category;
            @endif

            new bootstrap.Modal(document.getElementById('editModal')).show();
        }

        // ── Submit Edit ─────────────────────────────────
        document.getElementById('submitEdit').addEventListener('click', function () {
            document.querySelectorAll('[id^="err-edit"]').forEach(el => el.textContent = '');
            const id = document.getElementById('editId').value;
            const formData = new FormData();
            formData.append('_method', 'PUT');
            formData.append('name', document.getElementById('editName').value);
            formData.append('is_active', document.getElementById('editActive').checked ? 1 : 0);

            @if($slug === 'attributes')
            // formData.append('is_active_on_landing_page', document.getElementById('editLandingPage').checked ? 1 : 0);

            // Agar parent make dikh raha hai to uski value bhejo
            const parentId = document.getElementById('editParentId').value;
            if (!document.getElementById('editParentGroup').classList.contains('d-none')) {
                formData.append('parent_id', parentId);
            }

            const imgFile = document.getElementById('editImage').files[0];
            if (imgFile) formData.append('image', imgFile);
            @else
            formData.append('category', document.getElementById('editCategory').value);
            @endif

            fetch(URLS.update(id), {
                method: 'POST',
                headers: {'X-CSRF-TOKEN': CSRF, 'Accept': 'application/json'},
                body: formData
            })
                .then(r => r.json())
                .then(json => {
                    if (json.success) {
                        bootstrap.Modal.getInstance(document.getElementById('editModal')).hide();
                        loadData(currentFilter);
                    } else if (json.errors) {
                        Object.keys(json.errors).forEach(key => {
                            const errorElement = document.getElementById(`err-edit-${key}`);
                            if (errorElement) {
                                errorElement.textContent = json.errors[key][0];
                            }
                        });
                    }
                })
                .catch(err => {
                    console.error('Error:', err);
                });
        });
        // ── Delete ──────────────────────────────────────
        document.getElementById('confirmDelete').addEventListener('click', function () {
            if (!deleteId) return;
            fetch(SLUG === 'attributes' ? URLS.delete(deleteId) : URLS.delete(deleteId), {
                method: 'DELETE',
                headers: {'X-CSRF-TOKEN': CSRF, 'Accept': 'application/json'}
            })
                .then(r => r.json())
                .then(json => {
                    if (json.success) {
                        bootstrap.Modal.getInstance(document.getElementById('deleteModal')).hide();
                        document.getElementById(`row-${deleteId}`)?.remove();
                        deleteId = null;
                    }
                });
        });

        // Isse function ke bahar rakhen taake har jagah access ho sake
        let tags = [];

        function updateTags() {
            const tagsList = document.getElementById('tagsList');
            const hiddenTextarea = document.getElementById('addNames');

            tagsList.innerHTML = '';
            tags.forEach((tag, index) => {
                const div = document.createElement('div');
                div.className = 'tag-item';
                div.innerHTML = `${tag} <i onclick="removeTag(${index})">&times;</i>`;
                tagsList.appendChild(div);
            });
            // Backend ke liye comma separated string
            hiddenTextarea.value = tags.join(', ');
        }

        // Global scope mein rakhen taake 'onclick' kaam kare
        window.removeTag = (index) => {
            tags.splice(index, 1);
            updateTags();
        };

        document.addEventListener('DOMContentLoaded', function () {
            const tagInput = document.getElementById('tagInput');

            if (tagInput) {
                tagInput.addEventListener('keydown', function (e) {
                    if (e.key === ',' || e.key === 'Enter') {
                        e.preventDefault();
                        let val = this.value.trim().replace(/,/g, '');
                        if (val && !tags.includes(val)) {
                            tags.push(val);
                            updateTags();
                        }
                        this.value = '';
                    }

                    if (e.key === 'Backspace' && this.value === '' && tags.length > 0) {
                        tags.pop();
                        updateTags();
                    }
                });

                document.querySelector('.tags-input-wrapper').addEventListener('click', () => {
                    tagInput.focus();
                });
            }
        });
    </script>
@endpush