@extends('layouts.app')

@section('content')

<div class="container">
    <div class="col-md-2 col-12">
        <a href="{{ route('expense-heads.index') }}">
            <button  type="submit" class="btn btn-dark text-white w-100">Add Expense Heads</button>
        </a>
    </div><br>

    <h3 class="mb-3">Expenses</h3>

<!-- Add Expense -->
<!-- Add / Edit Expense -->
<form method="POST" 
      action="{{ isset($editExpense) ? route('expenses.update', $editExpense->id) : route('expenses.store') }}" 
      class="row g-2 mb-4">

    @csrf
    @if(isset($editExpense))
        @method('PUT')
    @endif
    

    <div class="col-md-2 col-12">
        <select name="expense_head_id" class="form-select" required>
            <option value="">Select Head</option>
            @foreach($heads as $head)
                <option value="{{ $head->id }}" 
                    {{ isset($editExpense) && $editExpense->expense_head_id == $head->id ? 'selected' : '' }}>
                    {{ $head->name }}
                </option>
            @endforeach
        </select>
    </div>

    <div class="col-md-2 col-12">
        <input type="text" name="details" class="form-control" 
               placeholder="Details"
               value="{{ old('details', $editExpense->details ?? '') }}">
    </div>

    <div class="col-md-2 col-12">
        <input type="number" step="0.01" name="amount" class="form-control" 
               placeholder="Amount" required
               value="{{ old('amount', $editExpense->amount ?? '') }}">
    </div>

    <div class="col-md-2 col-12">
        <input type="date" name="date" class="form-control" 
               value="{{ old('date', $editExpense->date ?? date('Y-m-d')) }}" required>
    </div>

    <div class="col-md-2 col-12">
        <input type="text" name="paid_by" class="form-control" 
               placeholder="Paid By" required
               value="{{ old('paid_by', $editExpense->paid_by ?? '') }}">
    </div>

    <div class="col-md-2 col-12">
        <button type="submit" class="btn {{ isset($editExpense) ? 'btn-warning' : 'btn-success' }} w-100">
            {{ isset($editExpense) ? 'Update Expense' : 'Add Expense' }}
        </button>
    </div>
</form>


<form method="GET" action="{{ route('expenses.index') }}" class="row g-2 mb-4">

<!-- Expense Head Filter -->
    <div class="col-md-2">
        <select name="expense_head_id" class="form-select">
            <option value="">Filter by Head</option>
            @foreach($heads as $head)
                <option value="{{ $head->id }}" {{ request('expense_head_id') == $head->id ? 'selected' : '' }}>
                    {{ $head->name }}
                </option>
            @endforeach
        </select>
    </div>



<!-- Paid By Filter -->
    <div class="col-md-3">
        <input type="text" name="paid_by" value="{{ request('paid_by') }}" 
               class="form-control" placeholder="Filter by Paid By">
    </div>

    <!-- From Date -->
    <div class="col-md-2">
        <input type="date" name="from_date" value="{{ request('from_date') }}" class="form-control">
    </div>

    <!-- To Date -->
    <div class="col-md-2">
        <input type="date" name="to_date" value="{{ request('to_date') }}" class="form-control">
    </div>

    <div class="col-md-3 d-flex">
        <button type="submit" class="btn btn-primary me-2">Filter</button>
        <a href="{{ route('expenses.index') }}" class="btn btn-secondary">Reset</a>
    </div>
</form>


<div class="table-responsive">
    <table class="table table-bordered table-striped">
        <thead class="table-dark">
            <tr>
                <th>ID</th>
                <th>Head</th>
                <th>Details</th>
                <th>Amount</th>
                <th>By</th>
                <th>Date</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            @foreach($expenses as $expense)
            <tr>
                <td>{{ $expense->id }}</td>
                <td>{{ $expense->head->name }}</td>
                <td style="width:250px;">{{ $expense->details }}</td>
                <td>{{ number_format($expense->amount, 2) }}</td>
                <td>{{ $expense->paid_by }}</td>
                <td>{{ $expense->date }}</td>
                <td>
                    <!-- <a href="{{ route('expenses.edit', $expense->id) }}" class="btn btn-warning btn-sm">
                        <i class="bi bi-pencil"></i>
                    </a> -->
                    <form method="Get" action="{{ route('expenses.edit', $expense->id) }}">
                    <button class="btn btn-success btn-sm" >
                    <i class="bi bi-pencil"></i>
                    </button>
                    </form>

                    <form method="POST" action="{{ route('expenses.destroy', $expense->id) }}">
                        @csrf @method('DELETE')
                        <button class="btn btn-danger btn-sm" onclick="return confirm('Delete this expense?')">
                            <i class="bi bi-trash"></i>
                        </button>
                    </form>
                </td>
            </tr>
            @endforeach
        </tbody>

        <!-- Totals -->
        <tfoot class="table-secondary fw-bold">
            <tr>
                <td colspan="3">Total (Filtered)</td>
                <td>{{ number_format($filteredTotal, 2) }}</td>
                <td colspan="3"></td>
            </tr>
        </tfoot>

    </table>
</div>
{{ $expenses->appends(request()->query())->links() }}

</div>

@endsection




<style>
    .dashboard-card {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        border-radius: 10px;
        box-shadow: 0 14px 20px rgba(0, 0, 0, 0.5);
    }

    .dashboard-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
    }
</style>