@extends('frontend.template-frontend')
@section('content')
    <section class="sm:pt-24 pt-24">
        <div class="flex pt-6 justify-center">
            <div class="border-2 max-w-xl rounded-md shadow-md p-5 w-full">
                <div class="grid">
                    <h4>BAYAR DENGAN Kredit</h4>
                    <hr class="h-px my-4 bg-gray-200 border-0 dark:bg-gray-700">
                    <div class="flex justify-between mb-3">
                        <h4 class="text-xl">Jumlah Derma</h4>
                        <h4 class="text-lg">RM{{ number_format($valueCharity, 2) }}</h4>
                    </div>
                    @php
                        $campaignId = $data->id;
                    @endphp
                    <hr class="h-px my-4 bg-gray-200 border-0 dark:bg-gray-700">
                    <form action="/proccess-donate/{{ $campaignId }}" method="post">
                        @csrf
                        <input type="hidden" name="valueCharity" value="{{ $valueCharity }}">
                        <input type="hidden" name="campaign_id" value="{{ $campaignId }}">
                        <div id="otp" class="flex flex-row justify-center text-center px-2 mt-3">
                            <input
                                class="m-2 border-2 border-orange-300 bg-orange-200 sm:h-16 h-11 w-10  sm:w-16 text-center form-control rounded"
                                type="password" id="first" maxlength="1" name="pin1" />
                            <input
                                class="m-2 border-2 border-orange-300 bg-orange-200 sm:h-16 h-11 w-10  sm:w-16 text-center form-control rounded"
                                type="password" id="second" maxlength="1" name="pin2" />
                            <input
                                class="m-2 border-2 border-orange-300 bg-orange-200 sm:h-16 h-11 w-10  sm:w-16 text-center form-control rounded"
                                type="password" id="third" maxlength="1" name="pin3" />
                            <input
                                class="m-2 border-2 border-orange-300 bg-orange-200 sm:h-16 h-11 w-10  sm:w-16 text-center form-control rounded"
                                type="password" id="fourth" maxlength="1" name="pin4" />
                            <input
                                class="m-2 border-2 border-orange-300 bg-orange-200 sm:h-16 h-11 w-10  sm:w-16 text-center form-control rounded"
                                type="password" id="fifth" maxlength="1" name="pin5" />
                            <input
                                class="m-2 border-2 border-orange-300 bg-orange-200 sm:h-16 h-11 w-10  sm:w-16 text-center form-control rounded"
                                type="password" id="sixth" maxlength="1" name="pin6" />
                        </div>
                        <input type="hidden" name="amount" value="{{ $valueCharity }}" />
                        <input type="hidden" name="hiddenName" value="{{ $hiddenName }}">
                        <input type="hidden" name="prayerMessage" value="{{ $prayerMessage }}">
                        <div class="grid">
                            <button type="submit" class="bg-orange-400 py-4 mt-5 rounded-lg text-white">Hantar
                                Permohonan</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>

    <script>
        document.addEventListener("DOMContentLoaded", function(event) {
            function OTPInput() {
                const inputs = document.querySelectorAll('#otp > *[id]');
                for (let i = 0; i < inputs.length; i++) {
                    inputs[i].addEventListener('keydown', function(event) {
                        if (event.key === "Backspace") {
                            inputs[i].value = '';
                            if (i !== 0) inputs[i - 1].focus();
                        } else {
                            if (i === inputs.length - 1 && inputs[i].value !== '') {
                                return true;
                            } else if (event.keyCode > 47 && event.keyCode < 58) {
                                inputs[i].value = event.key;
                                if (i !== inputs.length - 1) inputs[i + 1].focus();
                                event.preventDefault();
                            } else if (event.keyCode > 64 && event.keyCode < 91) {
                                inputs[i].value = String.fromCharCode(event.keyCode);
                                if (i !== inputs.length - 1) inputs[i + 1].focus();
                                event.preventDefault();
                            }
                        }
                    });
                }
            }
            OTPInput();
        })
    </script>
@endsection