@extends('layouts.main', [
        'pageTitle' => $pageTitle ?? 'Departments :: Budgets ',
    ])
@section('main-content')
    <section class="main-content-section thin-section-border">
        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-header page-title-row">
                        <button type="button" class="btn btn-success float-right" data-toggle="modal" data-target="#addBudgetModal">Add Department Budget</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-content collapse show">
                        <div class="card-body card-dashboard">
                            <table class="table table-bordered initialise-datatable table-responsive">
                                <caption></caption>
                                <thead class="thead-dark">
                                <tr>

                                    <th scope="col">S/N</th>
                                    <th scope="col">Department</th>
                                    <th scope="col">Budget </th>
                                    <th scope="col">Period [ Year ]</th>
                                    <th>Action</th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach($budgets as $budget)
                                    <tr>
                                        <td>{{$loop->iteration}}</td>
                                        <td class="nk-tb-col">{{$budget->department->display_name}}</td>
                                        <td class="nk-tb-col naira-prefix">{{ number_format($budget->amount, 2) }}</td>
                                        <td>{{ $budget->year }}</td>
                                        <td>
                                            <button class="btn btn-secondary" data-budget-year="{{ $budget->year }}" data-url="{{ route('department.budget.update', ['department' => $budget->department->id, 'budget' => $budget->id]) }}" data-budget-amount="{{ $budget->amount }}" data-budget-id="{{ $budget->id }}" onclick="displayEditBudgetModal(this)">
                                                Edit
                                            </button>
                                        </td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <div class="modal fade" tabindex="-1" id="addBudgetModal">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="page-title nk-block-title fw-normal">Create Budget</h1>
                    <a href="#" class="close" data-dismiss="modal" aria-label="Close">
                        <em class="icon ni ni-cross"></em>
                    </a>
                </div>
                <div class="modal-body">
                    <form method="post" action="{{ route('departments.add-budget') }}">
                        @csrf
                        <div class="form-group">
                            <label>Department :</label>
                            <select class="form-control" name="department" required>
                                <option value="">-- Select Department --</option>
                                @foreach($departments as $department)
                                    <option value="{{ $department->id }}">{{ $department->display_name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group">
                            <label>Year</label>
                            <select class="form-control" name="year">
                                <option value="">-- Select Year --</option>
                                                                @for($i; $i < ($current_year); $i++)
                                    <option value="{{ $i + 1 }}">{{ $i + 1 }}</option>
                                @endfor
                            </select>
                        </div>
                        <div class="form-group">
                            <label>Budget Amount For The Year : </label>
                            <input type="number" required name="amount" class="form-control">
                        </div>

                        <div class="form-group">
                            <button class="btn btn-primary" type="submit">Submit</button>
                        </div>
                    </form>

                </div>

            </div>
        </div>
    </div>
    <div class="modal fade" tabindex="-1" id="editBudgetModal">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="page-title nk-block-title fw-normal">Edit Budget</h1>
                    <a href="#" class="close" data-dismiss="modal" aria-label="Close">
                        <em class="icon ni ni-cross"></em>
                    </a>
                </div>
                <div class="modal-body">
                    <form method="post" id="editBudgetModalForm" action="">
                        @csrf
                        <div class="form-group">
                            <label>Year</label>
                            <select class="form-control" id="editBudgetYearInput" name="year">
                                <option value="">-- Select Year --</option>
                                                                @for($i; $i < ($current_year); $i++)
                                    <option value="{{ $i + 1 }}">{{ $i + 1 }}</option>
                                @endfor
                            </select>
                        </div>
                        <div class="form-group">
                            <label>Budget Amount For The Year: </label>
                            <input id="editBudgetAmountInput" value="" type="number" name="amount" class="form-control">
                        </div>
                        <div class="form-group">
                            <button class="btn btn-primary" type="submit">Update</button>
                        </div>
                    </form>

                </div>

            </div>
        </div>
    </div>
@endsection
@section('more-scripts')
    <script>
        function displayEditBudgetModal(thisInstance)
        {
            var budgetEditURL = $(thisInstance).attr('data-url');
            var budgetAmount = $(thisInstance).attr('data-budget-amount');
            var budgetYear = $(thisInstance).attr('data-budget-year');

            $('#editBudgetAmountInput').val(budgetAmount);
            $('#editBudgetModalForm').attr('action', budgetEditURL);
            $('#editBudgetYearInput').val(budgetYear);

            $('#editBudgetModal').modal('show');
        }
    </script>
@endsection