@extends('layouts.guest-layouts.guest-payment', ['pageTitle' => $pageTitle ?? 'Validate Payment Code'])

@section('more-styles')
    <style>
        tbody td:first-child {
            min-width: 150px;
        }
    </style>
@stop
@section('side-box-content')
    <p class="alert alert-primary">A mail has been sent to your email address with the bill, please check for the payment code</p>
    <div class="content billing m-auto">
        <div class="search-bill">
            <p class="title">Billing Details</p>
            <hr>
            <table class="table table-borderless table-bordered-bottom">
                <caption></caption>
                <tbody>
                <tr>
                    <td>Payment Code</td>
                    <td class="text-right">#{{ $invoice->payment_code}}</td>
                </tr>
                <tr>
                    <td>Bill Description</td>
                    <td class="text-right">{{ $invoice->description}}</td>
                </tr>
                <tr>
                    <td>Billed To</td>
                    <td class="text-right">{{ $invoice->customer_name ?? $invoice->applicantFullName() }}</td>
                </tr>
                <tr>
                    <td>Ministry</td>
                    <td class="text-right">{{ $invoice->ministryName() }}</td>
                </tr>
                <tr>
                    <td>Service</td>
                    <td class="text-right">{{ $invoice->serviceName() }}</td>
                </tr>
                <tr>
                    <td>Bill Date</td>
                    <td class="text-right">{{ $invoice->created_at->format('jS F, Y') }}</td>
                </tr>
                <tr>
                    <td>Bill Number</td>
                    <td class="text-right">#{{ str_pad($paymentDetails->application_entry_id, 4, 0, STR_PAD_LEFT) }}</td>
                </tr>
                <tr>
                    <td>Billed Amount</td>
                    <td class="naira-prefix text-right">{{ number_format($invoice->invoice_amount, 2) }}</td>
                </tr>
                <tr>
                    <td>Payment Status</td>
                    <td class="@if($fullyPaid) text-success @else text-danger @endif text-right">{{ $paymentStatus }}</td>
                </tr>
                </tbody>
            </table>
        </div>
        <div class="remita">
            {{--<img src="{{ asset('images/remita.png') }}" alt="">--}}
        </div>
    </div>
@stop
@section('content')
    <div class="content billing ml-3">

        <div class="search-bill" id="cardPaymentForm">
            <p class="title">Enter Your @if(!$paymentCode) Payment Code and @endif Details Below to Begin</p>
            <hr>
            <form action="{{ route('guest_payment.proceed_to_pay') }}" method="POST" id="paymentForm">
                @csrf
                <input type="hidden" name="transaction_ref" value="{{ $transactionRef }}">
                <div class="form-group">
                    <label class="form-label" for="payment_code">Payment Code</label>
                    <input class="form-control" type="text" required readonly
                           value="{{ old('payment_code', $paymentCode) }}" name="payment_code"
                           placeholder="Enter Payment Code Here">
                    @error('payment_code')
                    <span class="text-danger" role="alert">
                        <small>{{ $message }}</small>
                    </span>
                    @enderror
                </div>
                <div class="row">
                    <div class="form-group col-md-6">
                        <label class="form-label" for="first_name">First Name</label>
                        <input class="form-control" type="text" required value="{{ old('first_name', $firstName) }}"
                               id="first_name" name="first_name" placeholder="First Name">
                        @error('first_name')
                        <span class="text-danger" role="alert">
                            <small>{{ $message }}</small>
                        </span>
                        @enderror
                    </div>
                    <div class="form-group col-md-6">
                        <label class="form-label" for="last_name">Last Name</label>
                        <input class="form-control" type="text"  value="{{ old('last_name', $lastName) }}"
                               id="last_name" name="last_name" placeholder="Last Name">
                        @error('last_name')
                        <span class="text-danger" role="alert">
                            <small>{{ $message }}</small>
                        </span>
                        @enderror
                    </div>
                </div>
                <div class="form-group">
                    <label class="form-label" for="email_address">Contact Email</label>
                    <input class="form-control" type="email" required value="{{ old('email_address', $email) }}"
                           id="email_address" name="email_address" placeholder="Email address">
                    @error('email_address')
                    <span class="text-danger" role="alert">
                            <small>{{ $message }}</small>
                        </span>
                    @enderror
                </div>
                <div class="row">
                    <div class="form-group col-md-4">
                        <label class="form-label" for="applicant-country">Country</label>
                        <div class="form-control-wrap">
                            <select data-search="on" class="form-select form-control" name="country"
                                    id="applicant-country">
                                @foreach($countries as $c)
                                    <option @if($c->code === old('country', 'NG')) selected
                                            @endif data-phone-prefix="{{ $c->phone_prefix }}"
                                            value="{{ $c->code }}"
                                            style="width: fit-content">{{ $c->name }} ::
                                        +{{ $c->phone_prefix }}</option>
                                @endforeach

                            </select>
                        </div>
                    </div>
                    <div class="form-group col-md-8">
                        <label class="form-label" for="phone_number">Contact Phone Number</label>
                        <input class="form-control" type="text" onkeypress="BaseHelper.allowOnlyPhoneCharacters()" required
                               value="{{ old('phone_number', $phone) }}" id="phone_number" name="phone_number"
                               placeholder="Phone Number">
                        @error('phone_number')
                        <span class="text-danger" role="alert">
                                <small>{{ $message }}</small>
                            </span>
                        @enderror
                    </div>
                </div>
                @if(!$fullyPaid)
                    @if($allowEditAmount && $revenueItems->count() > 1)
                        <table class="table table-bordered" style="width:100%">
                            <caption></caption>
                            <thead class="thead-dark">
                            <tr>
                                <th scope="col">S/N</th>
                                <th scope="col">Revenue Details</th>
                                <th scope="col">Amount</th>
                                <th scope="col"></th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($revenueItems as $revenueItem)
                                @php
                                    $itemAmountRemaining = $revenueItem->invoice_amount - $revenueItem->amount_paid;
                                    $iteration = $loop->iteration;
                                @endphp
                                <tr>
                                    <td class="nk-tb-col">{{$loop->iteration}}</td>
                                    <td class="nk-tb-col">{{ $revenueItem->revenue_code->name }} ({{ $revenueItem->revenue_code->revenue_code }})</td>
                                    <td class="nk-tb-col">
                                        <input type="number" class="form-control revenue-item-amount" id="revenue_amount_{{ $revenueItem->id }}" name="revenue_items[{{ $iteration }}][amount]"
                                               max="{{ $itemAmountRemaining }}"
                                               value="{{ $revenueItem->old_amount ?? $itemAmountRemaining }}"></td>
                                    <td style="vertical-align: middle;">
                                        <input type="hidden" name="revenue_items[{{ $iteration }}][id]" value="{{ $revenueItem->id }}">
                                        <input type="checkbox" {{ old('revenue_items') ? $revenueItem->checked : 'checked' }} style="visibility:unset" data-revenue-item-id="{{ $revenueItem->id }}" class="revenue-item-checkbox" name="revenue_items[{{ $iteration }}][checked]"/>
                                    </td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                        <div class="form-group">
                            <label class="form-label" for="amount">Amount to Pay</label>
                            <input class="form-control naira-prefix" type="text" readonly
                                   data-max-amount="{{ $invoice->amount_remaining }}" data-min-amount="{{ $minimumAmount }}"
                                   onkeypress="return BaseHelper.allowOnlyNum(event)" min="{{ $minimumAmount }}"
                                   title="Amount must be between ₦{{ $minimumAmount }} and ₦{{ $invoice->amount_remaining }}"
                                   id="amount" name="amount" value="{{ old('amount' , $invoice->amount_remaining) }}">
                        </div>
                    @else
                        <div class="form-group">
                            <label class="form-label" for="amount">Amount to Pay</label>
                            <input class="form-control naira-prefix" type="text" @if(!$allowEditAmount) readonly @endif
                                    onkeypress="return BaseHelper.allowOnlyNum(event)" min="{{ $minimumAmount }}"
                                    id="amount" name="amount" value="{{ old('amount' , $invoice->amount_remaining) }}">
                        </div>
                    @endif
                    <div class="form-group">
                        <label class="form-label" for="payment_method">Payment Channel</label>
                        @if($preventEdutamsService)
                            <p class="alert alert-warning">Web payments have been temporarily disabled for this service, please visit your school to pay with POS.</p>
                        @endif
                        @if($invoiceMinistryID != $eduScienceMinistryId)
                        <div class="form-check">
                            <input class="form-check-input" @if($preventEdutamsService) disabled @endif type="radio" name="payment_method"  required id="paymentMethod" value="bank_transfer"
                                   @if(old('payment_method') == 'bank_transfer') checked @endif >
                            <label class="form-check-label" for="paymentMethod">
                                Bank Transfer
                            </label>
                        </div>
                        @endif
                        <div class="form-check">
                            <input class="form-check-input" type="radio" @if($preventEdutamsService) disabled @endif name="payment_method"  required id="paymentMethod2" value="card_payment"
                                   @if(old('payment_method') == 'card_payment') checked @endif >
                            <label class="form-check-label" for="paymentMethod2">
                                Card
                            </label>
                        </div>
                        @error('payment_method')
                        <span class="text-danger" role="alert">
                            <small>{{ $message }}</small>
                        </span>
                        @enderror
                    </div>
                    <button class="btn btn-success col-md-12 p-2" @if($preventEdutamsService) disabled @endif type="submit">Make Payment</button>
                @endif
            </form>
            <div class="remita">
                <img src="{{ asset('images/payment-providers-logos.png') }}" alt="">
            </div>
        </div>

    </div>
@stop

@section('more-scripts')
    <script>
        (function ($) {
            @if(!$fullyPaid && $allowEditAmount && $revenueItems->count() > 1)
            $(document).on('change', '.revenue-item-checkbox',function (e) {
                calculateTotalAmount()
            });
            $(document).on('input', '.revenue-item-amount',function (e) {
                calculateTotalAmount()
            });
            @endif
            $('.revenue-item-checkbox').trigger('change');
            $('#paymentForm').submit(function (e) {
                const amountField = document.querySelector('#amount');
                e.preventDefault();
                const minAmount = $(amountField).data('min-amount');
                const maxAmount = $(amountField).data('max-amount');
                const amount = $(amountField).val();
                if(amount < minAmount || amount > maxAmount){
                    $(amountField).prop('readonly', false);
                    amountField.setCustomValidity(
                        `Amount must be between ₦${minAmount} and ₦${maxAmount}`
                    );
                    amountField.reportValidity();
                    console.log({amount, minAmount, maxAmount});
                } else {
                    this.submit();
                }
                // $(amountField).prop('readonly', true);
            })
        })(jQuery);
        function calculateTotalAmount() {
            const amountFieldID = "#amount";
            let totalAmount = 0;
            $('.revenue-item-checkbox').each((n, el) => {
                const isChecked = $(el).prop('checked');
                const revID = $(el).data('revenue-item-id');

                if(isChecked) {
                    const itemAmount = $('#revenue_amount_' + revID).val();
                    console.log({itemAmount, revID});
                    totalAmount += Number(itemAmount);
                }
            });
            $(amountFieldID).val(totalAmount);
            console.log({totalAmount});
        }
    </script>
@endsection