@extends('layouts.service-details-layout')

@section('more-styles')
    <link rel="stylesheet" href="{{ asset('css/pages/invoice-generator-wizard.css') }}">
@endsection

@section('content')
    <!-- Zero configuration table -->
    <div class="main-content-section" id="applicant-registration-wrapper">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div id="progressbar-wrapper">
                        @include('components.invoice_generation_progressbar')
                    </div>
                    <div class="card-header page-title-row">
                        <h2 class="page-title-secondary float-left">Payment Breakdown</h2>
                    </div>
                    <div class="card-content collapse show">
                        <div class="card-body">
                            {{--@php--}}
                            {{--$calculatedNoticeExists = $service->demand_notices()->where('is_fixed', false)->exists();--}}
                            {{--$actionRoute = ($calculatedNoticeExists) ? route('service.invoice.calculate_payment', ['service' => $service->id, 'applicant' => $applicant->id])--}}
                            {{--: route('service.invoice.application_demand_notices')--}}
                            {{--@endphp--}}
                            <form id="fees-breakdown-form" action="{{ route('service.invoice.calculate_payment', ['service' => $service->id, 'applicant' => $applicant->id]) }}" method="POST">
                                @csrf
                                <table class="table table-bordered" style="width:100%">
                                    <thead class="thead-dark">
                                    <tr>
                                        <th scope="col">S/N</th>
                                        <th scope="col">Item</th>
                                        <th scope="col">Revenue Details</th>
                                        <th scope="col">Amount</th>
                                        <th scope="col"></th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    @foreach($demandNotices as $n => $notice)
                                        <tr>
                                            <td>{{$n += 1}}</td>
                                            <td class="nk-tb-col">{{ $notice->display_name }}</td>
                                            <td class="nk-tb-col">{{ $notice->revenue_code ? "{$notice->revenue_code->name} ({$notice->revenue_code->revenue_code})" : '-'}}</td>
                                            <td class="nk-tb-col">
                                                @if($notice->amount)
                                                    {{ $notice->amount }}
                                                @else
                                                    <input type="text" class="form-control revenue-item-amount" name="revenue_items[{{ $notice->id }}][amount]"
                                                           placeholder="Enter amount" onkeypress="return BaseHelper.allowOnlyNum(event)" >
                                                @endif
                                            </td>
                                            <td style="vertical-align: middle;">
                                                <input type="checkbox" style="visibility:unset" placeholder="Enter Amount" class="revenue-item-checkbox" name="revenue_items[{{ $notice->id }}][checked]"/>
                                            </td>
                                        </tr>
                                    @endforeach
                                    </tbody>
                                </table>
                            </form>
                        </div>
                        <div class="card-footer text-center">
                            <button class="btn btn-success" onclick="$('#fees-breakdown-form').submit()">Calculate Payment <em class="icon ni ni-arrow-right"></em></button>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('more-scripts')
    <script>
        (function ($) {
            const feesBreakdownForm = "#fees-breakdown-form";
            $(feesBreakdownForm).submit(function (e) {
                e.preventDefault();
                if($(this).valid()){
                    this.submit();
                }
            });
            $(feesBreakdownForm).on('change', '.revenue-item-checkbox', function ({target}) {
                const _this = target;
                console.log('III', $(_this).prop('checked'));
                const amountField = $(_this).parents('tr').find('.revenue-item-amount');
                if($(_this).prop('checked')){
                    amountField.attr('required', true);
                } else {
                    amountField.removeAttr('required');
                }
            });
        })(jQuery);
    </script>
@endsection