@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 dedi-livewire-table">
        <livewire:tables.depenses-table />
    </div>
</div>

@include('depenses.partials.add')
@include('depenses.partials.edit')

<script>
    const depenseUpdateUrlTemplate = "{{ route('finance.expenses.update', ['id' => '__ID__']) }}";

    function openDepenseEditModal(depense) {
        const form = document.getElementById('edit-depense-form');
        form.action = depenseUpdateUrlTemplate.replace('__ID__', depense.id);

        document.getElementById('edit-depense-category').value = depense.category_id ? String(depense.category_id) : '';
        document.getElementById('edit-depense-amount').value = depense.amount || '';
        document.getElementById('edit-depense-raison').value = depense.reason || '';

        const magasinSelect = document.getElementById('edit-depense-magasin');
        if (magasinSelect) {
            magasinSelect.value = depense.magasin_id ? String(depense.magasin_id) : '';
        }

        const modal = new bootstrap.Modal(document.getElementById('edit-depense-modal'));
        modal.show();
        if (typeof feather !== 'undefined') feather.replace();
    }
</script>
@endsection