@extends('admin.app')

@section('content')

<div class="container-fluid px-3 mt-4">

<h2 class="mb-4">Budget Management</h2>

@if(session('success'))
    <div class="alert alert-success">
        {{ session('success') }}
    </div>
@endif

<!-- Add Budget -->
<div class="card mb-4">
    <div class="card-header">
        <h5 class="mb-0">Add Budget</h5>
    </div>

    <div class="card-body">
        <form action="{{ route('budgets.store') }}" method="POST">
            @csrf

            <div class="row">

                <div class="col-md-10">
                    <input type="text"
                           name="budget_range"
                           class="form-control"
                           placeholder="Enter Budget Range"
                           required>
                </div>

                <div class="col-md-2">
                    <button type="submit"
                            class="btn btn-primary w-100">
                        Add Budget
                    </button>
                </div>

            </div>
        </form>
    </div>
</div>

<!-- Budget List -->
<div class="card">

    <div class="card-header">
        <h5 class="mb-0">Budget List</h5>
    </div>

    <div class="card-body">

        <div class="table-responsive">

            <table class="table table-bordered table-striped w-100"
                   id="budgetTable">

                <thead>
                    <tr>
                        <th>#</th>
                        <th>Budget Range</th>
                        <th width="200">Action</th>
                    </tr>
                </thead>

                <tbody>

                    @forelse($budgets as $budget)

                    <tr>

                        <td>{{ $loop->iteration }}</td>

                        <td>{{ $budget->budget_range }}</td>

                        <td>

                            <button class="btn btn-warning btn-sm"
                                    data-bs-toggle="modal"
                                    data-bs-target="#editModal{{ $budget->id }}">
                                Edit
                            </button>

                            <form action="{{ route('budgets.destroy',$budget->id) }}"
                                  method="POST"
                                  class="d-inline"
                                  onsubmit="return confirm('Delete this budget?')">

                                @csrf
                                @method('DELETE')

                                <button type="submit"
                                        class="btn btn-danger btn-sm">
                                    Delete
                                </button>

                            </form>

                        </td>

                    </tr>

                    <!-- Edit Modal -->
                    <div class="modal fade"
                         id="editModal{{ $budget->id }}"
                         tabindex="-1">

                        <div class="modal-dialog">

                            <div class="modal-content">

                                <form action="{{ route('budgets.update',$budget->id) }}"
                                      method="POST">

                                    @csrf
                                    @method('PUT')

                                    <div class="modal-header">

                                        <h5 class="modal-title">
                                            Edit Budget
                                        </h5>

                                        <button type="button"
                                                class="btn-close"
                                                data-bs-dismiss="modal">
                                        </button>

                                    </div>

                                    <div class="modal-body">

                                        <input type="text"
                                               name="budget_range"
                                               value="{{ $budget->budget_range }}"
                                               class="form-control"
                                               required>

                                    </div>

                                    <div class="modal-footer">

                                        <button type="submit"
                                                class="btn btn-primary">
                                            Update Budget
                                        </button>

                                    </div>

                                </form>

                            </div>

                        </div>

                    </div>

                    @empty

                    <tr>
                        <td colspan="3" class="text-center">
                            No Budget Found
                        </td>
                    </tr>

                    @endforelse

                </tbody>

            </table>

        </div>

    </div>

</div>


</div>

@endsection

@push('styles')

<style>

#budgetTable{
    width:100% !important;
}

table.dataTable{
    width:100% !important;
}

.dataTables_wrapper{
    width:100%;
}

.card{
    border-radius:10px;
}

</style>

@endpush

@push('scripts')

<script>

$(document).ready(function () {

    $('#budgetTable').DataTable({
        pageLength: 10,
        ordering: true,
        searching: true,
        responsive: true,
        autoWidth: false
    });

});

</script>

@endpush