@extends('layouts.service-details-layout', [
    'subTitle' => 'Update Demand Notices'
])
@php
$notices = old('notices') ? array_map(function ($item) {
    return (object) ['display_name' => $item['fee_name'] ?? '', 'id' => $item['notice_id'] ?? null, 'amount' => $item['fixed_amount'] ?? null];
}, old('notices')) : $demandNotices;
@endphp
@section('content')

    <div class="col-md-12 p-2 light-box-shadow">
        <div id="demandNoticesFormWrapper" class="form container">
            <ol style="list-style-type: decimal" id="demandNoticesList">
            @foreach($notices as $n => $notice)
                <li class="notice-list-item" id="notice-list-item-{{$n}}">
                    <div class="row demand-notice-row" id="notice-fee-{{$n}}" data-current-index="{{$n}}">
                        <div class="form-group col-md-6">
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">Name</span>
                                </div>
                                <input type="text" class="form-control fee_name" id="fee_name" name="notices[{{$n}}][fee_name]" required
                                       value="{{ $notice->display_name }}">
                            </div>
                        </div>
                        <input id="fixed-fee-type" class="fixed_fee_type" required type="radio" hidden checked name="notices[{{$n}}][fee_type]"
                               value="fixed"/>
                        <input id="notice_id"  class="notice_id" type="text" hidden name="notices[{{$n}}][notice_id]" value="{{ $notice->id }}"/>
                        <div class="form-group col-md-5" id="fixed-amount-field">
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">Amount</span>
                                </div>
                                <input type="text" class="form-control fixed_amount" placeholder="Enter amount" id="fixed_amount"
                                        name="notices[{{$n}}][fixed_amount]" required
                                        value="{{ $notice->amount }}"
                                        onkeypress="return BaseHelper.allowOnlyNum(event)">
                            </div>
                        </div>
                        <div class="form-group col-md-1" id="fixed-amount-field">
                            <button class="btn btn-danger icon ni ni-delete-fill" type="button" onclick="return deleteNoticeRow('notice-list-item-{{$n}}');"></button>
                        </div>
                    </div>
                </li>
            @endforeach
            </ol>
        </div>
        <form action="{{ route('demand_notices.update', compact('service')) }}" id="demandNoticesForm" method="post" enctype="multipart/form-data">
            @csrf
            <input type="text" hidden name="change_request_reason" id="change_request_reason">
        </form>
        <div class="form-group text-right">
            <button class="btn btn-primary" type="button" id="addNewNoticeRow">Add Demand Notice</button>
        </div>
    </div>
    <div class="col-md-12">
        <button class="btn btn-primary" type="button" id="submitNoticesBtn">Submit</button>
    </div>
@endsection
@section('more-scripts')
    <script>
        const demandNoticeHandler = BaseHelper.updateDemandNoticePayload();
        function deleteNoticeRow(rowID){
            $(`#${rowID}`).remove();
            demandNoticeHandler.renameNotices();
        }
        $(document).ready(function () {
            const formSelector = '#demandNoticesForm';
            $('#addNewNoticeRow').click(function () {
                const currentIndex = demandNoticeHandler.getIterator();
                $('#demandNoticesList').append(`
                    <li class="notice-list-item" id="notice-list-item-${currentIndex}">
                        <div class="row demand-notice-row" id="notice-fee-${currentIndex}" data-current-index="${currentIndex}">
                            <div class="form-group col-md-6">
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">Name</span>
                                    </div>
                                    <input type="text" class="form-control fee_name" id="fee_name" required
                                           value="" placeholder="Enter fee name">

                                </div>
                            </div>
                            <input id="fixed-fee-type" class="fixed_fee_type" required type="radio" hidden checked name="notices[${currentIndex}][fee_type]"
                                   value="fixed"/>
                            <div class="form-group col-md-5" id="fixed-amount-field">
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">Amount</span>
                                    </div>
                                    <input type="text" class="form-control fixed_amount" placeholder="Enter amount" id="fixed_amount"
                                            name="notices[${currentIndex}][fixed_amount]" required
                                            value=""
                                            onkeypress="return BaseHelper.allowOnlyNum(event)">
                                </div>
                            </div>
                            <div class="form-group col-md-1" id="fixed-amount-field">
                                <button class="btn btn-danger icon ni ni-delete-fill" type="button" onclick="return deleteNoticeRow('notice-list-item-${currentIndex}');"></button>
                            </div>
                        </div>
                    </li>
                `);
                demandNoticeHandler.incrementIterator();
            });
            @if($service->demand_notices()->exists() && $service->ministry->change_request_workflow()->exists())
                $(formSelector).submit(function (e) {
                    e.preventDefault();
                    BaseHelper.changeRequestInitiationPrompt()
                    .then((confirmed) => {
                        if(confirmed.value){
                            $('#change_request_reason').val(confirmed.value);
                            $('#cr_supporting_documents').clone().appendTo($(formSelector));
                            e.target.submit();
                        }
                    });

                });
            @endif
        })
    </script>
@endsection