@extends('layouts.app')

@section('content')
<div class="page-header">
    <div class="add-item d-flex">
        <div class="page-title">
            <h4>Liste des unités de produit</h4>
            <h6>Gérer toutes les unités de produit</h6>
        </div>
    </div>
    <ul class="table-top-head">
        <li>
            <a href="javascript:void(0);" onclick="location.reload();" data-bs-toggle="tooltip" title="Rafraîchir">
                <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-unit">
            <i data-feather="plus-circle" class="me-2"></i>Créer une unité
        </a>
    </div>
</div>

<div class="card table-list-card">
    <div class="card-body">
        @if($units->count() > 0)
            <div class="table-responsive product-list">
                <table class="table datanew">
                    <thead>
                        <tr>
                            <th>Nom</th>
                            <th>Nom abrégé</th>
                            <th>Créé le</th>
                            <th>Statut</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($units as $unit)
                            <tr>
                                <td>{{ $unit->name }}</td>
                                <td>{{ $unit->short_name }}</td>
                                <td>{{ $unit->created_at->translatedFormat('d M Y') }}</td>
                                <td>
                                    @if($unit->status == '1')
                                        <span class="badge bg-success">Active</span>
                                    @else
                                        <span class="badge bg-danger">Inactive</span>
                                    @endif
                                </td>
                                <td class="action-table-data">
                                    <div class="edit-delete-action">
                                        <a class="me-2 edit-icon p-2" href="#" data-bs-toggle="modal" data-bs-target="#edit-unit-{{ $unit->id }}">
                                            <i data-feather="edit" class="feather-edit"></i>
                                        </a>
                                        <a class="p-2" href="#" onclick="toggleStatus(event, {{ $unit->id }})">
                                            <i data-feather="{{ $unit->status == '1' ? 'trash-2' : 'rotate-ccw' }}" class="feather-trash-2"></i>
                                        </a>
                                        <form id="toggle-unit-{{ $unit->id }}" action="{{ route('inventory.units.destroy', $unit->id) }}" method="POST" class="d-none">
                                            @csrf
                                            @method('DELETE')
                                        </form>
                                    </div>
                                </td>
                            </tr>

                            {{-- Modal d’édition --}}
                            @include('inventory.units.partials.edit', ['unit' => $unit])
                        @endforeach
                    </tbody>
                </table>
            </div>
        @else
            @include('partials.empty-state', [
                'icon' => 'box',
                'title' => 'Aucune unité trouvée',
                'description' => 'Créez des unités (pièce, lot, pack…) pour les associer à vos produits.',
                'actionModal' => '#add-unit',
                'actionLabel' => 'Créer une unité',
            ])
        @endif
    </div>
</div>

{{-- Modal d’ajout --}}
@include('inventory.units.partials.add')

<script>
function toggleStatus(event, unitId) {
    event.preventDefault();
    Swal.fire({
        title: "Changer le statut ?",
        text: "Cette action activera ou désactivera l’unité.",
        icon: "warning",
        showCancelButton: true,
        confirmButtonColor: "#3085d6",
        cancelButtonColor: "#d33",
        confirmButtonText: "Oui, continuer",
        cancelButtonText: "Annuler"
    }).then((result) => {
        if (result.isConfirmed) {
            document.getElementById(`toggle-unit-${unitId}`).submit();
        }
    });
}
</script>
@endsection