@extends('layouts.ministry-details-layout', [
    'pageTitle' => $pageTitle ?? "Ministry:: {$ministry->display_name}",
    'pageShortNote' => $pageShortNote ?? '',
    'subTitle' => 'Budgets',
])
@section('content')
    <button class="btn btn-primary" data-toggle="modal" data-target="#addBudgetModal">
        Add New Budget
    </button>
    <br><br>
    <table class="table table-bordered table-responsive" id="applications-datatable">
        <caption>This table shows the budget of this particular ministry</caption>
        <thead>
            <tr>
                <th scope="col">Year</th>
                <th scope="col" class="text-right">Budget Amount</th>
                <th scope="col" class="w-max-80px"></th>
            </tr>
        </thead>
        <tbody>
            @forelse($budgets as $budget)
                <tr data-url="{{ route('ministry.budget.update', ['ministry' => $ministry->id, 'budget' => $budget->id]) }}" data-budget-year="{{ $budget->year }}" data-budget-amount="{{ $budget->amount }}" data-budget-id="{{ $budget->id }}" onclick="displayEditBudgetModal(this)">
                    <td>
                        {{ $budget->year }}
                    </td>
                    <td class="naira-prefix">
                        {{ $budget ? number_format($budget->amount, 2) : (0.00) }}
                    </td>
                    <td class="text-center w-max-80px">
                        <button class="btn btn-primary ni ni-edit-alt-fill">&nbsp;Edit</button>
                    </td>
                </tr>
            @empty
                <tr>
                    <td>No budget is added yet.</td>
                </tr>
            @endforelse

        </tbody>
    </table>

    <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('ministry.budget.save', ['ministry' => $ministry->id]) }}">
                        @csrf
                        <div class="form-group">
                            <label for="budgetYear">Year</label>
                                                        <select class="form-select show-placeholder" name="year" id="budgetYear">
                                <option></option>
                                @foreach($yearsRange as $year)
                                    <option value="{{ $year }}" @if($budgets->where('year', $year)->isNotEmpty()) disabled @endif>{{ $year }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group">
                            <label>Budget Amount For The Year: </label>
                            <input type="number" 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="{{ route('ministry.budget.save', ['ministry' => $ministry->id]) }}">
                        @csrf
                        <div class="form-group">
                            <label for="editBudgetYearInput">Year</label>
                            <select class="form-select show-placeholder" id="editBudgetYearInput" name="year">
                                <option></option>
                                @foreach($yearsRange as $year)
                                    <option value="{{ $year }}">{{ $year }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="editBudgetAmountInput">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">Submit</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);
            BaseHelper.setSelect2WithPlaceholder('#editBudgetYearInput');
            $('#editBudgetModal').modal('show');
        }
    </script>
@endsection