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

<div class="page-header">
    <div class="add-item d-flex">
        <div class="page-title">
            <h4>Liste des dépenses</h4>
            <h6>Gérer toutes les dépenses</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-depense">
            <i data-feather="plus-circle" class="me-2"></i>Enregistrer dépense
        </a>
    </div>
</div>

<div class="card table-list-card">
    <div class="card-body">
        @if($depenses->count() > 0)
        <div class="table-responsive product-list">
            <table class="table datanew">
                <thead>
                    <tr>
                        <th>Magasin</th>
                        <th>Catégorie</th>
                        <th>Montant</th>
                        <th>Raison</th>
                        <th>Crée le</th>
                        <th>Par</th>
                        @if(Auth::user()->role->name !== 'Administrateur')
                        <th>Actions</th>
                        @endif
                    </tr>
                </thead>
                <tbody>
                    @foreach($depenses as $depense)
                    <tr>
                        <td>{{ $depense->magasin->name ?? null}}</td>
                        <td>{{ $depense->category->name ?? null }}</td>
                        <td>{{ $depense->amount ?? null}}</td>
                        <td>{{ $depense->reason ?? null}}</td>
                        <td>{{ $depense->created_at->translatedFormat('d M Y') }}</td>
                        <td>{{ $depense->user->nom . ' '. $depense->user->prenom ?? null }}</td>
                        @if(Auth::user()->role->name !== 'Administrateur')
                        <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-depense-{{ $depense->id }}">
                                    <i data-feather="edit" class="feather-edit"></i>
                                </a>

                            </div>
                        </td>
                        @endif
                    </tr>
                    @include('depenses.partials.edit', ['depense' => $depense])
                    @endforeach
                </tbody>
            </table>
        </div>
        @else
        <p class="text-center text-danger">Aucune dépense trouvée.</p>
        @endif
    </div>
</div>

@include('depenses.partials.add')

<script>
    function confirmDeletion(event, depenseId) {
        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-depense-${depenseId}`).submit();
            }
        });
    }

</script>
@endsection