@extends('layouts.app')

@section('content')
<div class="container">

    <div class="col-md-2 col-12">
        <a href="{{ route('expenses.index') }}">
            <button  type="submit" class="btn btn-dark text-white w-100">Back to Expenses</button>
        </a>
    </div><br>
    
    <h3 class="mb-3">Expense Heads</h3>
    
    <form method="POST" action="{{ route('expense-heads.store') }}" class="row g-2 mb-4">
        @csrf
        <div class="col-md-8 col-12">
            <input type="text" name="name" class="form-control" placeholder="Enter Expense Head" required>
        </div>
        <div class="col-md-4 col-12">
            <button type="submit" class="btn btn-primary w-100">Add Head</button>
        </div>
    </form>

    <table class="table table-bordered table-striped table-responsive">
        <thead class="table-dark">
            <tr>
                <th>ID</th>
                <th>Head</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            @foreach($heads as $head)
            <tr>
                <td>{{ $head->id }}</td>
                <td>{{ $head->name }}</td>
                <td>
                    <form method="POST" action="{{ route('expense-heads.destroy', $head->id) }}">
                        @csrf @method('DELETE')
                        <button class="btn btn-danger btn-sm" onclick="return confirm('Delete this head?')">
                            <i class="bi bi-trash"></i>
                        </button>
                    </form>
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>
    {{ $heads->links() }}
</div>
@endsection