@extends('layouts.app')
@section('content')

<div class="page-header">
    <div class="add-item d-flex">
        <div class="page-title">
            <h4>Liste des catégories</h4>
            <h6>Gérer toutes les catégories</h6>
        </div>
    </div>
    <ul class="table-top-head">
        <li>
            <a href="javascript:void(0);" onclick="location.reload();" data-bs-toggle="tooltip" title="Refresh">
                <i data-feather="rotate-ccw"></i>
            </a>
        </li>
    </ul>
    <div class="page-btn">
        <a href="#" class="btn btn-added" data-bs-toggle="modal" data-bs-target="#add-category">
            <i data-feather="plus-circle" class="me-2"></i>Créer une catégorie
        </a>
    </div>
</div>

<div class="card table-list-card">
    <div class="card-body dedi-livewire-table">
        <livewire:tables.categories-table />
    </div>
</div>

@include('inventory.categories.partials.add', ['parentOptions' => $parentOptions])
@include('inventory.categories.partials.edit', ['parentOptions' => $parentOptions])

<script>
    const categoryDescendants = @json($categoryDescendants);
    const categoryUpdateUrlTemplate = "{{ route('inventory.categories.update', ['id' => '__ID__']) }}";

    function openCategoryEditModal(id, name, parentId, status) {
        const form = document.getElementById('edit-category-form');
        form.action = categoryUpdateUrlTemplate.replace('__ID__', id);

        document.getElementById('edit-category-name').value = name;
        document.getElementById('edit-category-status').value = String(status);

        const parentSelect = document.getElementById('edit-category-parent');
        const excluded = categoryDescendants[id] || [id];
        Array.from(parentSelect.options).forEach(function (option) {
            if (!option.value) {
                option.disabled = false;
                return;
            }
            option.disabled = excluded.includes(parseInt(option.value, 10));
        });
        parentSelect.value = parentId ? String(parentId) : '';
        $(parentSelect).trigger('change');

        const modal = new bootstrap.Modal(document.getElementById('edit-category-modal'));
        modal.show();
        if (typeof feather !== 'undefined') feather.replace();
    }

    function confirmCategoryDeletion(event, categoryId) {
        event.preventDefault();
        Swal.fire({
            title: "Êtes-vous sûr ?",
            text: "Cette action est irréversible !",
            icon: "warning",
            showCancelButton: true,
            confirmButtonColor: "#d33",
            cancelButtonColor: "#3085d6",
            confirmButtonText: "Oui, supprimer !",
            cancelButtonText: "Annuler"
        }).then((result) => {
            if (result.isConfirmed) {
                document.getElementById(`delete-category-${categoryId}`).submit();
            }
        });
    }
</script>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        if (typeof jQuery !== 'undefined' && typeof jQuery.fn.select2 !== 'undefined') {
            if (jQuery('.select-search').length > 0) {
                jQuery('#add-category .select-search').select2({
                    dropdownParent: jQuery('#add-category'),
                    width: '100%'
                });
                jQuery('#edit-category-modal .select-search').select2({
                    dropdownParent: jQuery('#edit-category-modal'),
                    width: '100%'
                });
            }
        }
    });
</script>
@endsection