@extends('backend.template.layouts.template-base')
@section('title', 'Product Management - Units & Variants')

@section('content')

    <div class="top-fixed">
        <div class="page-head-title mb-3">
            <div class="units-variants d-flex align-items-center justify-content-between">
                <h2 class="text-title fw-semibold mb-0">Units & Variants</h2>
                <div class="unit-variant-btn-wrap">
                    <a id="unitButton" class="button-green custom-top-btn" href="javascript:void(0);" data-bs-toggle="modal"
                        data-bs-target="#CreateUnitModal">
                        <img src="{{ asset('backend/template/svg-icon/plus.svg') }}" alt="icon">
                        <span>New Unit</span>
                    </a>
                    <a id="variantButton" class="button-green custom-top-btn d-none" href="javascript:void(0);"
                        data-bs-toggle="modal" data-bs-target="#CreateVariantModal">
                        <img src="{{ asset('backend/template/svg-icon/plus.svg') }}" alt="icon">
                        <span>New Variant</span>
                    </a>
                </div>
            </div>
        </div>

        <ul class="nav nav-tabs nav-tabs-custom" role="tablist">
            <li class="nav-item" role="presentation">
                <a class="nav-link active" data-bs-toggle="tab" href="#Units" role="tab">Units</a>
            </li>
            <li class="nav-item" role="presentation">
                <a class="nav-link" data-bs-toggle="tab" href="#Variants" role="tab">Variants</a>
            </li>
        </ul>
    </div>

    <div class="tab-content card-tab-border text-muted">

        {{-- ── Units Tab ──────────────────────────────────────────────────── --}}
        <div class="tab-pane show active" id="Units" role="tabpanel">
            <div class="p-3">
                <div class="table-responsive mt-3">
                    <table id="unitsTable" class="table table-nowrap align-middle w-100">
                        <thead class="all-table-head">
                            <tr class="text-capitalize">
                                <th class="p-3 table-head-content" style="width:40px;"><input type="checkbox"
                                        class="form-check-input" id="selectAllUnits"></th>
                                <th class="p-3 table-head-content">Unit Name</th>
                                <th class="p-3 table-head-content">Nickname</th>
                                <th class="p-3 table-head-content">Last Updated On</th>
                                <th class="p-3 table-head-content">Status</th>
                                <th class="p-3 table-head-content">Action</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>

        {{-- ── Variants Tab ────────────────────────────────────────────────── --}}
        <div class="tab-pane" id="Variants" role="tabpanel">
            <div class="p-3">
                <div class="table-responsive mt-3">
                    <table id="variantsTable" class="table table-nowrap align-middle w-100">
                        <thead class="all-table-head">
                            <tr class="text-capitalize">
                                <th class="p-3 table-head-content" style="width:40px;"><input type="checkbox"
                                        class="form-check-input" id="selectAllVariants"></th>
                                <th class="p-3 table-head-content">Variant Value</th>
                                <th class="p-3 table-head-content">Last Updated On</th>
                                <th class="p-3 table-head-content">Status</th>
                                <th class="p-3 table-head-content">Action</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    {{-- ── Create Unit Modal ─────────────────────────────────────────────── --}}
    <div class="modal fade" id="CreateUnitModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content border-0 rounded-16 overflow-hidden">
                <div class="modal-header bg-color-lightGreen border-0">
                    <h3 class="mb-0 modal-title color-green">New Unit</h3>
                    <button type="button" class="btn-close opacity-100 shadow-none" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body p-4">
                    <form id="createUnitForm">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label-modal">Unit Name <span class="color-red">*</span></label>
                                <input type="text" name="name" class="form-control" placeholder="Enter unit name">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label-modal">Nickname <span class="color-red">*</span></label>
                                <input type="text" name="nickname" class="form-control" placeholder="e.g. g, kg, ml">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label-modal d-block">Status</label>
                                <div class="d-flex align-items-center gap-4 mt-2">
                                    <div class="form-check d-flex align-items-center gap-2 mb-0">
                                        <input class="form-check-input" type="radio" name="status" value="active"
                                            checked>
                                        <label class="form-label-modal mb-0">Active</label>
                                    </div>
                                    <div class="form-check d-flex align-items-center gap-2 mb-0">
                                        <input class="form-check-input" type="radio" name="status" value="inactive">
                                        <label class="form-label-modal mb-0">Inactive</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer border-0 px-4 pb-4 pt-0 d-flex justify-content-end gap-2">
                    <button type="button" class="button-outline" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="button-green" id="saveUnitBtn">Create Unit</button>
                </div>
            </div>
        </div>
    </div>

    {{-- ── Edit Unit Modal ───────────────────────────────────────────────── --}}
    <div class="modal fade" id="EditUnitModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content border-0 rounded-16 overflow-hidden">
                <div class="modal-header bg-color-lightGreen border-0">
                    <h3 class="mb-0 modal-title color-green">Edit Unit</h3>
                    <button type="button" class="btn-close opacity-100 shadow-none" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body p-4">
                    <form id="editUnitForm">
                        <input type="hidden" id="editUnitId">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label-modal">Unit Name <span class="color-red">*</span></label>
                                <input type="text" id="editUnitName" name="name" class="form-control">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label-modal">Nickname <span class="color-red">*</span></label>
                                <input type="text" id="editUnitNickname" name="nickname" class="form-control">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label-modal d-block">Status</label>
                                <div class="d-flex align-items-center gap-4 mt-2">
                                    <div class="form-check d-flex align-items-center gap-2 mb-0">
                                        <input class="form-check-input" type="radio" name="edit_unit_status"
                                            id="editUnitActive" value="active">
                                        <label class="form-label-modal mb-0" for="editUnitActive">Active</label>
                                    </div>
                                    <div class="form-check d-flex align-items-center gap-2 mb-0">
                                        <input class="form-check-input" type="radio" name="edit_unit_status"
                                            id="editUnitInactive" value="inactive">
                                        <label class="form-label-modal mb-0" for="editUnitInactive">Inactive</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer border-0 px-4 pb-4 pt-0 d-flex justify-content-end gap-2">
                    <button type="button" class="button-outline" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="button-green" id="updateUnitBtn">Save Changes</button>
                </div>
            </div>
        </div>
    </div>

    {{-- ── Delete Unit Modal ─────────────────────────────────────────────── --}}
    <div class="modal fade" id="DeleteUnitModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content rounded-16 overflow-hidden">
                <div class="modal-header bg-color-lightRed">
                    <h3 class="text-color-error modal-title mb-0">Delete Unit?</h3>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="deleteUnitId">
                    <p class="mb-0 text-title">Are you sure you want to delete <span class="fw-semibold"
                            id="deleteUnitName"></span>?</p>
                    <p class="mb-0 secondary-text mt-1">This unit will be permanently removed. Products using this unit may
                        be affected.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="button-outline" data-bs-dismiss="modal">Cancel</button>
                    <button class="button-red" id="confirmDeleteUnitBtn">Delete Unit</button>
                </div>
            </div>
        </div>
    </div>

    {{-- ── Status Toggle Unit Modals ─────────────────────────────────────── --}}
    <div class="modal fade" id="ActivateUnitModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content rounded-16 overflow-hidden">
                <div class="modal-header bg-color-lightGreen">
                    <h3 class="color-green modal-title mb-0">Activate Unit</h3>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="toggleUnitId">
                    <p class="mb-0 text-title">Are you sure you want to Activate <span class="fw-semibold"
                            id="toggleUnitName"></span>?</p>
                    <p class="mb-0 secondary-text mt-1">This unit will be available for use in products.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="button-outline" data-bs-dismiss="modal">Cancel</button>
                    <button class="button-green" id="confirmToggleUnitBtn">Activate Unit</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="InactivateUnitModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content rounded-16 overflow-hidden">
                <div class="modal-header bg-color-lightOrange">
                    <h3 class="color-orange modal-title mb-0">Inactivate Unit</h3>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="toggleUnitIdInactive">
                    <p class="mb-0 text-title">Are you sure you want to Inactivate <span class="fw-semibold"
                            id="toggleUnitNameInactive"></span>?</p>
                    <p class="mb-0 secondary-text mt-1">This unit will no longer be available for selection in products.
                    </p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="button-outline" data-bs-dismiss="modal">Cancel</button>
                    <button class="button-orange" id="confirmToggleUnitInactiveBtn">Inactivate Unit</button>
                </div>
            </div>
        </div>
    </div>

    {{-- ── Create Variant Modal ──────────────────────────────────────────── --}}
    <div class="modal fade" id="CreateVariantModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content border-0 rounded-16 overflow-hidden">
                <div class="modal-header bg-color-lightGreen border-0">
                    <h3 class="mb-0 modal-title color-green">New Variant</h3>
                    <button type="button" class="btn-close opacity-100 shadow-none" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body p-4">
                    <form id="createVariantForm">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label-modal">Variant Value <span class="color-red">*</span></label>
                                <input type="text" name="value" class="form-control" placeholder="e.g. 250">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label-modal d-block">Status</label>
                                <div class="d-flex align-items-center gap-4 mt-3">
                                    <div class="form-check d-flex align-items-center gap-2 mb-0">
                                        <input class="form-check-input" type="radio" name="status" value="active"
                                            checked>
                                        <label class="form-label-modal mb-0">Active</label>
                                    </div>
                                    <div class="form-check d-flex align-items-center gap-2 mb-0">
                                        <input class="form-check-input" type="radio" name="status" value="inactive">
                                        <label class="form-label-modal mb-0">Inactive</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer border-0 px-4 pb-4 pt-0 d-flex justify-content-end gap-2">
                    <button type="button" class="button-outline" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="button-green" id="saveVariantBtn">Create Variant</button>
                </div>
            </div>
        </div>
    </div>

    {{-- ── Edit Variant Modal ────────────────────────────────────────────── --}}
    <div class="modal fade" id="EditVariantModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content border-0 rounded-16 overflow-hidden">
                <div class="modal-header bg-color-lightGreen border-0">
                    <h3 class="mb-0 modal-title color-green">Edit Variant</h3>
                    <button type="button" class="btn-close opacity-100 shadow-none" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body p-4">
                    <form id="editVariantForm">
                        <input type="hidden" id="editVariantId">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label-modal">Variant Value <span class="color-red">*</span></label>
                                <input type="text" id="editVariantValue" name="value" class="form-control">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label-modal d-block">Status</label>
                                <div class="d-flex align-items-center gap-4 mt-3">
                                    <div class="form-check d-flex align-items-center gap-2 mb-0">
                                        <input class="form-check-input" type="radio" name="edit_variant_status"
                                            id="editVariantActive" value="active">
                                        <label class="form-label-modal mb-0" for="editVariantActive">Active</label>
                                    </div>
                                    <div class="form-check d-flex align-items-center gap-2 mb-0">
                                        <input class="form-check-input" type="radio" name="edit_variant_status"
                                            id="editVariantInactive" value="inactive">
                                        <label class="form-label-modal mb-0" for="editVariantInactive">Inactive</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer border-0 px-4 pb-4 pt-0 d-flex justify-content-end gap-2">
                    <button type="button" class="button-outline" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="button-green" id="updateVariantBtn">Save Changes</button>
                </div>
            </div>
        </div>
    </div>

    {{-- ── Delete Variant Modal ──────────────────────────────────────────── --}}
    <div class="modal fade" id="DeleteVariantModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content rounded-16 overflow-hidden">
                <div class="modal-header bg-color-lightRed">
                    <h3 class="text-color-error modal-title mb-0">Delete Variant?</h3>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="deleteVariantId">
                    <p class="mb-0 text-title">Are you sure you want to delete <span class="fw-semibold"
                            id="deleteVariantValue"></span>?</p>
                    <p class="mb-0 secondary-text mt-1">This variant will be permanently removed. This action cannot be
                        undone.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="button-outline" data-bs-dismiss="modal">Cancel</button>
                    <button class="button-red" id="confirmDeleteVariantBtn">Delete Variant</button>
                </div>
            </div>
        </div>
    </div>

    {{-- ── Status Toggle Variant Modals ──────────────────────────────────── --}}
    <div class="modal fade" id="ActivateVariantModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content rounded-16 overflow-hidden">
                <div class="modal-header bg-color-lightGreen">
                    <h3 class="color-green modal-title mb-0">Activate Variant</h3>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="toggleVariantId">
                    <p class="mb-0 text-title">Are you sure you want to Activate <span class="fw-semibold"
                            id="toggleVariantName"></span>?</p>
                    <p class="mb-0 secondary-text mt-1">This variant will be available for customers to purchase.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="button-outline" data-bs-dismiss="modal">Cancel</button>
                    <button class="button-green" id="confirmToggleVariantBtn">Activate Variant</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="InactivateVariantModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content rounded-16 overflow-hidden">
                <div class="modal-header bg-color-lightOrange">
                    <h3 class="color-orange modal-title mb-0">Inactivate Variant</h3>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="toggleVariantIdInactive">
                    <p class="mb-0 text-title">Are you sure you want to Inactivate <span class="fw-semibold"
                            id="toggleVariantNameInactive"></span>?</p>
                    <p class="mb-0 secondary-text mt-1">This variant will no longer be available for customers.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="button-outline" data-bs-dismiss="modal">Cancel</button>
                    <button class="button-orange" id="confirmToggleVariantInactiveBtn">Inactivate Variant</button>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('scripts')
    <script>
        $(function() {
            // ── Tab toggle for header buttons ──────────────────────────────────────
            $('[data-bs-toggle="tab"]').on('shown.bs.tab', function(e) {
                const target = $(e.target).attr('href');
                if (target === '#Units') {
                    $('#unitButton').removeClass('d-none');
                    $('#variantButton').addClass('d-none');
                } else {
                    $('#unitButton').addClass('d-none');
                    $('#variantButton').removeClass('d-none');
                }
            });

            // ── Helper: show toastr ────────────────────────────────────────────────
            function showToast(type, msg) {
                if (type === 'success') toastr.success(msg);
                else if (type === 'error') toastr.error(msg);
            }

            // Clear validation state when modals close
            $('#CreateUnitModal').on('hidden.bs.modal', function() {
                $(this).find('.is-invalid').removeClass('is-invalid');
            });
            $('#EditUnitModal').on('hidden.bs.modal', function() {
                $(this).find('.is-invalid').removeClass('is-invalid');
            });
            $('#CreateVariantModal').on('hidden.bs.modal', function() {
                $(this).find('.is-invalid').removeClass('is-invalid');
            });
            $('#EditVariantModal').on('hidden.bs.modal', function() {
                $(this).find('.is-invalid').removeClass('is-invalid');
            });

            // ════════════════════════════════════════════════════════════════════════
            // UNITS DataTable
            // ════════════════════════════════════════════════════════════════════════
            var unitsTable = $('#unitsTable').DataTable({
                processing: true,
                serverSide: true,
                ajax: '{{ route('backend.template.units-variants.unit-data') }}',
                columns: [{
                        data: null,
                        defaultContent: '<input type="checkbox" class="form-check-input row-check">',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'name',
                        name: 'name'
                    },
                    {
                        data: 'nickname',
                        name: 'nickname'
                    },
                    {
                        data: 'updated_at_fmt',
                        name: 'updated_at',
                        searchable: false
                    },
                    {
                        data: 'status_badge',
                        name: 'status',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    },
                ],
                dom: '<"d-flex align-items-center justify-content-between mb-3"<"d-flex gap-3"f><"d-flex gap-2 align-items-center"l>>rt<"d-flex align-items-center justify-content-end mt-3"ip>',
                language: {
                    search: '',
                    searchPlaceholder: 'Search by unit or nickname',
                    lengthMenu: 'Show _MENU_ entries',
                    info: '_START_-_END_ of _TOTAL_ results',
                    paginate: {
                        previous: '<img src="{{ asset('backend/template/svg-icon/left-arrow.svg') }}">',
                        next: '<img src="{{ asset('backend/template/svg-icon/left-arrow.svg') }}" style="transform:rotate(180deg)">'
                    }
                },
            });

            // Select-all units
            $('#selectAllUnits').on('change', function() {
                $('#unitsTable tbody .row-check').prop('checked', $(this).is(':checked'));
                $(this).prop('indeterminate', false);
            });
            $(document).on('change', '#unitsTable .row-check', function() {
                var total = $('#unitsTable tbody .row-check').length;
                var checked = $('#unitsTable tbody .row-check:checked').length;
                $('#selectAllUnits').prop({
                    indeterminate: checked > 0 && checked < total,
                    checked: checked === total
                });
            });
            unitsTable.on('draw', function() {
                $('#selectAllUnits').prop({
                    indeterminate: false,
                    checked: false
                });
            });

            // ── Create Unit ────────────────────────────────────────────────────────
            $('#saveUnitBtn').on('click', function() {
                var form = $('#createUnitForm');
                var name = form.find('[name=name]').val().trim();
                var nickname = form.find('[name=nickname]').val().trim();
                form.find('[name=name]').toggleClass('is-invalid', !name);
                form.find('[name=nickname]').toggleClass('is-invalid', !nickname);
                if (!name || !nickname) {
                    showToast('error', 'Unit name and nickname are required.');
                    return;
                }
                var data = {
                    name: name,
                    nickname: nickname,
                    status: form.find('[name=status]:checked').val()
                };
                var $btn = $(this).prop('disabled', true);
                $.post('{{ route('backend.template.units-variants.units.store') }}', data)
                    .done(function(res) {
                        showToast('success', res.message);
                        $('#CreateUnitModal').modal('hide');
                        form[0].reset();
                        form.find('.is-invalid').removeClass('is-invalid');
                        unitsTable.ajax.reload();
                    })
                    .fail(function(xhr) {
                        var errs = xhr.responseJSON?.errors;
                        showToast('error', errs ? Object.values(errs).flat().join(' ') :
                            'Validation error. Please check your inputs.');
                    })
                    .always(function() {
                        $btn.prop('disabled', false);
                    });
            });

            // ── Open Edit Unit Modal ───────────────────────────────────────────────
            $(document).on('click', '.edit-unit-btn', function() {
                var btn = $(this);
                $('#editUnitId').val(btn.data('id'));
                $('#editUnitName').val(btn.data('name'));
                $('#editUnitNickname').val(btn.data('nickname'));
                $('[name=edit_unit_status][value=' + btn.data('status') + ']').prop('checked', true);
                $('#EditUnitModal').modal('show');
            });

            // ── Update Unit ────────────────────────────────────────────────────────
            $('#updateUnitBtn').on('click', function() {
                var name = $('#editUnitName').val().trim();
                var nickname = $('#editUnitNickname').val().trim();
                $('#editUnitName').toggleClass('is-invalid', !name);
                $('#editUnitNickname').toggleClass('is-invalid', !nickname);
                if (!name || !nickname) {
                    showToast('error', 'Unit name and nickname are required.');
                    return;
                }
                var id = $('#editUnitId').val();
                var data = {
                    _method: 'PUT',
                    name: name,
                    nickname: nickname,
                    status: $('[name=edit_unit_status]:checked').val()
                };
                var $btn = $(this).prop('disabled', true);
                $.post('{{ url('admin/units-variants/units') }}/' + id, data)
                    .done(function(res) {
                        showToast('success', res.message);
                        $('#EditUnitModal').modal('hide');
                        $('#editUnitName, #editUnitNickname').removeClass('is-invalid');
                        unitsTable.ajax.reload();
                    })
                    .fail(function(xhr) {
                        var errs = xhr.responseJSON?.errors;
                        showToast('error', errs ? Object.values(errs).flat().join(' ') :
                            'Update failed.');
                    })
                    .always(function() {
                        $btn.prop('disabled', false);
                    });
            });

            // ── Open Delete Unit Modal ─────────────────────────────────────────────
            $(document).on('click', '.delete-unit-btn', function() {
                var btn = $(this);
                $('#deleteUnitId').val(btn.data('id'));
                $('#deleteUnitName').text(btn.data('name'));
                $('#DeleteUnitModal').modal('show');
            });

            // ── Confirm Delete Unit ────────────────────────────────────────────────
            $('#confirmDeleteUnitBtn').on('click', function() {
                var id = $('#deleteUnitId').val();
                $.ajax({
                    url: '{{ url('admin/units-variants/units') }}/' + id,
                    type: 'DELETE',
                }).done(function(res) {
                    showToast('success', res.message);
                    $('#DeleteUnitModal').modal('hide');
                    unitsTable.ajax.reload();
                }).fail(function() {
                    showToast('error', 'Delete failed.');
                });
            });

            // ── Status Toggle (Unit) ───────────────────────────────────────────────
            $(document).on('click', '.status-toggle[data-type=unit]', function() {
                var el = $(this);
                var id = el.data('id');
                var status = el.data('status');
                var name = el.closest('tr').find('td:eq(1)').text();

                if (status === 'active') {
                    $('#toggleUnitIdInactive').val(id);
                    $('#toggleUnitNameInactive').text(name);
                    $('#InactivateUnitModal').modal('show');
                } else {
                    $('#toggleUnitId').val(id);
                    $('#toggleUnitName').text(name);
                    $('#ActivateUnitModal').modal('show');
                }
            });

            $('#confirmToggleUnitBtn').on('click', function() {
                doToggleUnit($('#toggleUnitId').val(), '#ActivateUnitModal');
            });
            $('#confirmToggleUnitInactiveBtn').on('click', function() {
                doToggleUnit($('#toggleUnitIdInactive').val(), '#InactivateUnitModal');
            });

            function doToggleUnit(id, modalId) {
                $.post('{{ url('admin/units-variants/units') }}/' + id + '/toggle-status')
                    .done(function(res) {
                        showToast('success', 'Unit status updated.');
                        $(modalId).modal('hide');
                        unitsTable.ajax.reload();
                    }).fail(function() {
                        showToast('error', 'Failed to update status.');
                    });
            }

            // ════════════════════════════════════════════════════════════════════════
            // VARIANTS DataTable
            // ════════════════════════════════════════════════════════════════════════
            var variantsTable = $('#variantsTable').DataTable({
                processing: true,
                serverSide: true,
                ajax: '{{ route('backend.template.units-variants.variant-data') }}',
                columns: [{
                        data: null,
                        defaultContent: '<input type="checkbox" class="form-check-input row-check">',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'value',
                        name: 'value'
                    },
                    {
                        data: 'updated_at_fmt',
                        name: 'updated_at',
                        searchable: false
                    },
                    {
                        data: 'status_badge',
                        name: 'status',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    },
                ],
                dom: '<"d-flex align-items-center justify-content-between mb-3"<"d-flex gap-3"f><"d-flex gap-2 align-items-center"l>>rt<"d-flex align-items-center justify-content-end mt-3"ip>',
                language: {
                    search: '',
                    searchPlaceholder: 'Search by variant value',
                    lengthMenu: 'Show _MENU_ entries',
                    info: '_START_-_END_ of _TOTAL_ results',
                    paginate: {
                        previous: '<img src="{{ asset('backend/template/svg-icon/left-arrow.svg') }}">',
                        next: '<img src="{{ asset('backend/template/svg-icon/left-arrow.svg') }}" style="transform:rotate(180deg)">'
                    }
                },
            });

            // Select-all variants
            $('#selectAllVariants').on('change', function() {
                $('#variantsTable tbody .row-check').prop('checked', $(this).is(':checked'));
                $(this).prop('indeterminate', false);
            });
            $(document).on('change', '#variantsTable .row-check', function() {
                var total = $('#variantsTable tbody .row-check').length;
                var checked = $('#variantsTable tbody .row-check:checked').length;
                $('#selectAllVariants').prop({
                    indeterminate: checked > 0 && checked < total,
                    checked: checked === total
                });
            });
            variantsTable.on('draw', function() {
                $('#selectAllVariants').prop({
                    indeterminate: false,
                    checked: false
                });
            });

            // ── Create Variant ─────────────────────────────────────────────────────
            $('#saveVariantBtn').on('click', function() {
                var form = $('#createVariantForm');
                var value = form.find('[name=value]').val().trim();
                form.find('[name=value]').toggleClass('is-invalid', !value);
                if (!value) {
                    showToast('error', 'Variant value is required.');
                    return;
                }
                var data = {
                    value: value,
                    status: form.find('[name=status]:checked').val()
                };
                var $btn = $(this).prop('disabled', true);
                $.post('{{ route('backend.template.units-variants.variants.store') }}', data)
                    .done(function(res) {
                        showToast('success', res.message);
                        $('#CreateVariantModal').modal('hide');
                        form[0].reset();
                        form.find('.is-invalid').removeClass('is-invalid');
                        variantsTable.ajax.reload();
                    })
                    .fail(function(xhr) {
                        var errs = xhr.responseJSON?.errors;
                        showToast('error', errs ? Object.values(errs).flat().join(' ') :
                            'Validation error. Please check your inputs.');
                    })
                    .always(function() {
                        $btn.prop('disabled', false);
                    });
            });

            // ── Open Edit Variant ──────────────────────────────────────────────────
            $(document).on('click', '.edit-variant-btn', function() {
                var btn = $(this);
                $('#editVariantId').val(btn.data('id'));
                $('#editVariantValue').val(btn.data('value'));
                $('[name=edit_variant_status][value=' + btn.data('status') + ']').prop('checked', true);
                $('#EditVariantModal').modal('show');
            });

            // ── Update Variant ─────────────────────────────────────────────────────
            $('#updateVariantBtn').on('click', function() {
                var value = $('#editVariantValue').val().trim();
                $('#editVariantValue').toggleClass('is-invalid', !value);
                if (!value) {
                    showToast('error', 'Variant value is required.');
                    return;
                }
                var id = $('#editVariantId').val();
                var data = {
                    _method: 'PUT',
                    value: value,
                    status: $('[name=edit_variant_status]:checked').val()
                };
                var $btn = $(this).prop('disabled', true);
                $.post('{{ url('admin/units-variants/variants') }}/' + id, data)
                    .done(function(res) {
                        showToast('success', res.message);
                        $('#EditVariantModal').modal('hide');
                        $('#editVariantValue').removeClass('is-invalid');
                        variantsTable.ajax.reload();
                    })
                    .fail(function(xhr) {
                        var errs = xhr.responseJSON?.errors;
                        showToast('error', errs ? Object.values(errs).flat().join(' ') :
                            'Update failed.');
                    })
                    .always(function() {
                        $btn.prop('disabled', false);
                    });
            });

            // ── Open Delete Variant ────────────────────────────────────────────────
            $(document).on('click', '.delete-variant-btn', function() {
                var btn = $(this);
                $('#deleteVariantId').val(btn.data('id'));
                $('#deleteVariantValue').text(btn.data('value'));
                $('#DeleteVariantModal').modal('show');
            });

            // ── Confirm Delete Variant ─────────────────────────────────────────────
            $('#confirmDeleteVariantBtn').on('click', function() {
                var id = $('#deleteVariantId').val();
                $.ajax({
                    url: '{{ url('admin/units-variants/variants') }}/' + id,
                    type: 'DELETE',
                }).done(function(res) {
                    showToast('success', res.message);
                    $('#DeleteVariantModal').modal('hide');
                    variantsTable.ajax.reload();
                }).fail(function() {
                    showToast('error', 'Delete failed.');
                });
            });

            // ── Status Toggle (Variant) ────────────────────────────────────────────
            $(document).on('click', '.status-toggle[data-type=variant]', function() {
                var el = $(this);
                var id = el.data('id');
                var status = el.data('status');
                var value = el.closest('tr').find('td:eq(1)').text();

                if (status === 'active') {
                    $('#toggleVariantIdInactive').val(id);
                    $('#toggleVariantNameInactive').text(value);
                    $('#InactivateVariantModal').modal('show');
                } else {
                    $('#toggleVariantId').val(id);
                    $('#toggleVariantName').text(value);
                    $('#ActivateVariantModal').modal('show');
                }
            });

            $('#confirmToggleVariantBtn').on('click', function() {
                doToggleVariant($('#toggleVariantId').val(), '#ActivateVariantModal');
            });
            $('#confirmToggleVariantInactiveBtn').on('click', function() {
                doToggleVariant($('#toggleVariantIdInactive').val(), '#InactivateVariantModal');
            });

            function doToggleVariant(id, modalId) {
                $.post('{{ url('admin/units-variants/variants') }}/' + id + '/toggle-status')
                    .done(function(res) {
                        showToast('success', 'Variant status updated.');
                        $(modalId).modal('hide');
                        variantsTable.ajax.reload();
                    }).fail(function() {
                        showToast('error', 'Failed to update status.');
                    });
            }
        });
    </script>
@endsection