@extends('layouts.main', ['service' => $service])

@section('more-styles')
    <style>
        .edit-demand-notice,.delete-demand-notice {
            font-weight: bold;
            font-size: 18px;
        }
    </style>
@stop
@section('main-content')

    <div class="row">
        <div class="col-md-12">
            <div class="card mb-4">

                <form id="updateDemandNotices" @if($canSubmitDemandNoticeForm) action="{{ route('demand_notices.update', compact('service')) }}" @endif
                      method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="modal fade" tabindex="-1" id="changeRequestDetailsModal">
                        <div class="modal-dialog" style="min-width: 30%;" role="document">
                            <div class="modal-content">
                                <div class="modal-body">
                                    <div class="card">
                                        <p>A change request would be created for this action, please upload any
                                            supporting documents(if any) and specify the reason below</p>
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label class="form-label" for="default-06">Reason</label>
                                                <div class="form-control-wrap">
                                                    <textarea id="change-request-comment" class="form-control" disabled
                                                              name="change_request_reason" placeholder="Change request reason"
                                                              required></textarea>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label class="form-label" for="default-01">Supporting Document</label>
                                                <div class="form-control-wrap">
                                                    <input id="change-request-document" type="file" class="form-control"
                                                           disabled multiple name="supporting_document"
                                                           accept="{{ implode(", ", array_map(function($item){ return '.' . $item; }, \App\Helpers\AppConstants::ALLOWED_FILE_EXTENSIONS)) }}"/>
                                                </div>
                                            </div>
                                        </div>
                                        <input type="hidden" id="has-change-request" name="has_change_request"
                                               value="no">
                                        <div class="card-footer page-title-row text-center">
                                            <a class="btn btn-warning" id="change-request-submit-btn"
                                               href="javascript:void(0)">
                                                Submit Change Request
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="input_fields_container">

                    </div>
                </form>
                <div class="card card-bordered card-preview">
                    <div class="card-header page-title-row">
                        <a class="btn btn-primary float-right ml-1" id="add-new-demand-notice" href="javascript:void(0)">
                            <em class="icon ni ni-plus"></em>
                            Add New Demand Notice
                        </a>
                        @if(!$service->ministry->hasChangeRequestWorkflow())
                            <div>
                                <p class="text-danger change-request-workflow">Change request workflow is not setup for {{ $service->ministry->display_name }}</p>
                            </div>
                        @endif
                    </div>
                    <div class="card-inner align-items-center">
                        <table class="table" style="width:100%" id="demand-notices-table">
                            <caption></caption>
                            <thead class="thead-dark">
                            <tr>
                                <th scope="col">S/N</th>
                                <th scope="col">Name</th>
                                <th scope="col">Amount</th>
                                <th scope="col">Revenue Code</th>
                                <th scope="col">Edit</th>
                                <th scope="col">Delete</th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($demandNotices as $notice)
                                @php $rowID = $loop->iteration; @endphp
                                <tr id="table_row_{{ $rowID }}">
                                    <td>{{ $rowID }}</td>
                                    <td>{{ $notice->display_name }}</td>
                                    <td>{{ $notice->amount ?? ' dynamic '}} </td>
                                    <td>{{ $notice->revenue_code ? $notice->revenue_code->revenue_code : ' - ' }} </td>
                                    <td>
                                        <a class="icon ni ni-pen edit-demand-notice"
                                           data-entry-name="{{ $notice->display_name }}"
                                           data-row-id="table_row_{{ $rowID }}" data-id="{{ $rowID }}"
                                           href="javascript:void(0)"></a>
                                    </td>
                                    <td>
                                        <a class="icon ni ni-cross-circle text-danger delete-demand-notice"
                                           data-entry-name="{{ $notice->display_name }}"
                                           data-row-id="table_row_{{ $rowID }}" data-id="{{ $rowID }}"
                                           href="javascript:void(0)"></a>
                                    </td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div>

                </div>
                @if($canSubmitDemandNoticeForm)
                    <div class="card-footer page-title-row text-center">
                        <a class="btn btn-warning w-100"  onclick="$('#updateDemandNotices').submit()"
                        href="javascript:void(0)">
                            Update Demand Notices
                        </a>
                    </div>
                @endif
            </div><!-- .card-preview -->
        </div>
    </div>

    <!-- modal -->
    <div class="modal fade" tabindex="-1" id="addDemandNoticeModal">
        <div class="modal-dialog" style="min-width: 50%;" role="document">
            <div class="modal-content">
                <div class="modal-header text-center bg-custom-green text-white">
                    <h5 class="modal-title">Create Demand Notice</h5>
                    <a href="javascript:void(0)" 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="addDemandNoticeForm">
                        @csrf
                        <input type="hidden" id="isEditingADemandNotice" value="no">
                        <div class="form-group">
                            <label class="form-label" for="display_name">Name</label>
                            <input type="text" class="form-control" id="display_name" name="display_name" required>
                        </div>
                        <div class="row">
                            <div class="form-group col-lg-6">
                                <label class="form-label" for="agency_code_id">Agency</label>
                                <div class="form-control-wrap">
                                    <select class="form-select show-placeholder agency-selector" data-placeholder="Select Agency"
                                            id="agency_code_id" name="agency_code_id" required data-revenue-code-field="revenue_code">
                                        <option></option>
                                        @foreach($agencies as $agency)
                                            <option value="{{ $agency->id }}">
                                                {{ $agency->display_name }} ({{ $agency->agency_code }})
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="form-group col-lg-6">
                                <label class="form-label" for="revenue_code">Revenue Code</label>
                                <div class="form-control-wrap">
                                    <select class="form-select show-placeholder" data-placeholder="Select Revenue Code"
                                            id="revenue_code" disabled name="revenue_code" required>
                                        <option></option>
                                        @foreach($revenueCodes as $code)
                                            <option value="{{ $code->id }}">
                                                {{ $code->name }} ({{ $code->revenue_code }})
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <div class="form-group col-lg-6" id="fixed-amount-field">
                                <label class="form-label" for="fixed_amount">Amount</label>
                                <input type="text" class="form-control" placeholder="Enter amount" id="fixed_amount"
                                       name="amount" onkeypress="return BaseHelper.allowOnlyNum(event)">
                            </div>
                        </div>

                        <div class="form-group mt-2">
                            <button class="btn btn-primary" type="submit">Continue</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" tabindex="-1" id="demandNoticeUpdateModal">
        <div class="modal-dialog" style="min-width: 50%;" role="document">
            <div class="modal-content">
                <div class="modal-header text-center bg-custom-green text-white">
                    <h5 class="modal-title">Update Demand Notice</h5>
                    <a href="javascript:void(0)" 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="demandNoticeUpdateForm" action="javascript:void(0)">
                        @csrf
                        <input type="hidden" id="demand_notice_id" name="demand_notice_id">
                        <input type="hidden" id="notices_map_key" name="notices_map_key">
                        <input type="hidden" id="isEditingADemandNotice" value="yes">
                        <input type="hidden" id="table_row_id" name="table_row_id">
                        <div class="form-group">
                            <label class="form-label" for="display_name">Name</label>
                            <input type="text" class="form-control" id="edit_display_name" name="display_name" required>
                        </div>
                        <div class="row">
                            <div class="form-group col-lg-6">
                                <label class="form-label" for="agency_code_id">Agency</label>
                                <div class="form-control-wrap">
                                    <select class="form-select show-placeholder agency-selector" data-placeholder="Select Agency"
                                            id="edit_agency_code_id" name="agency_code_id" required data-revenue-code-field="edit_revenue_code">
                                        <option></option>
                                        @foreach($agencies as $agency)
                                            <option value="{{ $agency->id }}">
                                                {{ $agency->display_name }} ({{ $agency->agency_code }})
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="form-group col-lg-6">
                                <label class="form-label" for="edit_revenue_code">Revenue Code</label>
                                <div class="form-control-wrap">
                                    <select class="form-select show-placeholder" data-placeholder="Select Revenue Code"
                                            id="edit_revenue_code" disabled name="revenue_code" required>
                                        <option></option>
                                        @foreach($revenueCodes as $code)
                                            <option value="{{ $code->id }}">
                                                {{ $code->name }} ({{ $code->revenue_code }})
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <div class="form-group col-lg-6" id="fixed-amount-field">
                                <label class="form-label" for="fixed_amount">Amount</label>
                                <input type="text" class="form-control" placeholder="Enter amount"
                                       id="edit_fixed_amount" name="amount"
                                       onkeypress="return BaseHelper.allowOnlyNum(event)">
                            </div>
                        </div>

                        <div class="form-group mt-2">
                            <button class="btn btn-primary" type="submit">Continue</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('more-scripts')
    <script src="{{ asset('js/lodash-4.17.15.js') }}"></script>
    <script>
        const EXISITING_DEMAND_NOTICES_COUNT = {{ $demandNotices->count() }};
        const DEMAND_NOTICES_MAP = {
            @foreach($demandNotices as $notice)
            "{{$notice->display_name}}": {!! collect($notice->mapped_input) !!},
            @endforeach
        };
        const DELETED_DEMAND_NOTICES = {};

        const AGENCIES_MAP = {!! $agencies !!}
    </script>
    <script src="{{ asset('js/pages/manage-demand-notices.js') }}"></script>

@endsection