@extends('layouts.app')

@section('content')
@include('layouts.navbars.auth.topnav', ['title' => $title])

<div class="row mt-4 mx-4">
    <div class="col-12">
        <div class="card mb-4">
            <div class="d-flex align-items-center">
                <p class="mb-0 ms-2 mt-2 text-sm">{{$title}}</p>
                <a href="{{ route('expenselist-add') }}" class="btn btn-primary btn-sm ms-auto me-2 mt-2 text-sm">Add</a>
            </div>
            <div class="card-body px-0 pt-0 pb-2">
                <div class="table-responsive p-0">
                    <table class="table align-items-center mb-0" id="myTable">
                        <thead>
                            <tr>
                                <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 text-sm">
                                    #</th>
                                <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 text-sm">
                                    Expense Name</th>
                                <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 text-sm">
                                    Category</th>
                                <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 text-sm">
                                    Amount</th>
                                <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 text-sm">
                                    Expense Date</th>
                                <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 text-sm">
                                    Status</th>
                                <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 text-sm">
                                    Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($expenses as $expense)
                                <tr>
                                    <td class="text-center text-sm">{{ $loop->iteration }}</td>
                                    <td class="text-center text-sm">{{ $expense->expense_name }}</td>
                                    <td class="text-center text-sm">{{ $expense->category->name ?? 'N/A' }}</td>
                                    <td class="text-center text-sm">{{ number_format($expense->amount, 2) }}</td>
                                    <td class="text-center text-sm">{{ \Carbon\Carbon::parse($expense->expense_date)->format('d-m-Y') }}</td>
                                    <td class="text-center text-sm">
                                        <span class="badge text-xxs {{ $expense->status == 'Approved' ? 'bg-success' : ($expense->status == 'Rejected' ? 'bg-danger' : 'bg-warning') }}">
                                            {{ $expense->status }}
                                        </span>
                                    </td>
                                    <td class="text-center text-sm">
                                        <a href="{{ route('expense-edit', $expense->id) }}" class="text-success" title="Edit">
                                            <i class="fa fa-edit"></i>
                                        </a>
                                        <button type="button" class="text-danger" style="border:none;background:none;" data-bs-toggle="modal" data-bs-target="#deleteConfirmationModal" data-id="{{ $expense->id }}" title="Delete">
                                            <i class="fa fa-trash"></i>
                                        </button>
                                    </td>
                                </tr>
                            @empty
                               
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deleteConfirmationModal" tabindex="-1" aria-labelledby="deleteConfirmationModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deleteConfirmationModalLabel">Confirm Deletion</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body text-sm">
                Are you sure you want to delete this expense? This action cannot be undone.
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary text-sm" data-bs-dismiss="modal">Cancel</button>
                <form id="deleteExpenseForm" method="POST" action="" class="d-inline-block">
                    @csrf
                    <button type="submit" class="btn btn-danger text-sm">Delete</button>
                </form>
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
    const deleteModal = document.getElementById('deleteConfirmationModal');
    deleteModal.addEventListener('show.bs.modal', function (event) {
        const button = event.relatedTarget; 
        const expenseId = button.getAttribute('data-id');

        const form = document.getElementById('deleteExpenseForm');
        form.action = `/expense-delete/${expenseId}`;
    });
</script>
@endpush