@extends('layouts/eims_pre_admission_layout')
@section('title', '| ' . $pageTitle)
@section('content')

    {{Form::open(['method'=>"post", 'id'=>"pre_admission_payment_form", 'enctype'=>"multipart/form-data"])}}
    {!! Form::hidden('companyId', $company->encoded_id ?? null, ['id'=> 'companyId']) !!}

    <div class="col-md-12" style="background: #f8f9fa;">
        <a type="button" class="btn-close" title="Logout" href="{{ url('eims/pre-admission/applicant-profile/') }}">X</a>
        {{-- <button type="button" id="logoutButton" class="btn-close" title="Logout">
            <i class="glyphicon glyphicon-log-out"> <b>Logout</b></i>
        </button> --}}
        <h4 class="register-heading">{{ $pageTitle }}</h4>

        <div class="row register-form">
            @if($preAdmissionData->eims_pre_admission_fees_collection == null)
            <div class="col-md-9 col-md-offset-2">

                <div class="form-group" id="admissionNoHolder">
                    {!! Form::label('admission_no', 'Admission No: ', ['class' => 'control-label'], false) !!}
                    <div>
                        {!! Form::text('admission_no', $preAdmissionData ? $preAdmissionData->admission_no : null, ['class' => 'form-control', 'id' => 'admission_no','placeholder' => 'Enter Admission No', 'readonly']) !!}
                        <p id='admission_noe' style="min-height:3px;"></p>
                    </div>
                </div>

                <div class="form-group">
                    {!! Form::label('dob', 'Date of birth: <sup class="text-danger">*</sup>', ['class' => 'control-label'], false) !!}
                    <div>
                        {!! Form::text('dob', $preAdmissionData ? date('d-m-Y',strtotime($preAdmissionData->dob)) : null, ['class' => 'form-control', 'id' => 'dob', 'placeholder' => 'dd-mm-yyyy', 'readonly']) !!}
                        <p id='dobe' style="min-height:3px;"></p>
                    </div>
                </div>

                @if($company->companyType === 'UNV'  )
                    {{-- national_id --}}
                    <div class="form-group ">
                        {!! Form::label('national_id', 'National ID: <sup class="text-danger">*</sup>', ['class' => 'control-label'], false) !!}
                        <div>
                            {!! Form::text('national_id', $preAdmissionData ? $preAdmissionData->national_id : null, ['class' => 'form-control', 'id' => 'national_id', 'placeholder' => 'Enter your national ID', 'readonly']) !!}
                            <p id='national_ide' style="min-height:3px;"></p>
                        </div>
                    </div>
                @elseif($company->companyType === 'SCL' || $company->companyType === 'CLG')
                    {{-- birth_certificate_id --}}
                    <div class="form-group ">
                        {!! Form::label('birth_certificate_id', 'Birth Certificate ID: <sup class="text-danger">*</sup>', ['class' => ' control-label'], false) !!}
                        <div>
                            {!! Form::text('birth_certificate_id',  $preAdmissionData ? $preAdmissionData->birth_certificate_id : null, ['class' => 'form-control', 'id' => 'birth_certificate_id', 'placeholder' => 'Enter your birth certificate ID', 'readonly']) !!}
                            <p id='birth_certificate_ide' style="min-height:3px;"></p>
                        </div>
                    </div>
                @endif

                {{-- phone_number --}}
                <div class="form-group ">
                    {!! Form::label('phone_number',  'Phone Number: <sup class="text-danger">*</sup> (Same phone number used in admission) ', ['class' => 'control-label'], false) !!}
                    <div>
                        {!! Form::text('phone_number',  $preAdmissionData ? $preAdmissionData->phone_number : null, ['class' => 'form-control', 'id' => 'phone_number', 'type' => 'text', 'placeholder' => 'Enter phone number', 'readonly']) !!}
                        <p id='phone_numbere' style="min-height:3px;"></p>
                    </div>
                </div>

                <div id="payment_method_information">
                    <div class="form-group">
                        {!! Form::label('payment_method', 'Payment Method: <sup class="text-danger">*</sup>', ['class' => 'control-label'],false) !!}
                        <div class="radio" id="payment_methods_holder">
                            @foreach($paymentMethods as $keyPaymentMethod => $paymentMethod)
                            <label for="payment_method{{ $paymentMethod->id }}">
                                    <input type="radio" name="payment_method_id" class="payment-method"
                                    id="payment_method{{ $paymentMethod->id }}"
                                    value="{{ $paymentMethod->id }}"
                                    data-name="{{ $paymentMethod->name }}"
                                    data-code="{{ $paymentMethod->code }}"
                                    data-configuration='{{ json_encode($paymentMethod->configuration) }}'
                                    >
                                    {{ $paymentMethod->name }}
                            </label>
                            @endforeach
                        </div>
                        <p id='payment_methode' style="max-height:3px;"></p>
                    </div>

                    {{Form::hidden('pre_admission_fees_id', $preAdmissionFee->id, ['id' => 'pre_admission_fees_id'])}}

                    {{-- payment amount --}}
                    <div class="form-group">
                        {!! Form::label('pre_admission_fees_amount', 'Payment Amount: <sup class="text-danger">*</sup>', ['class' => 'control-label'],false) !!}
                        <div>
                            {!! Form::number('pre_admission_fees_amount', $preAdmissionFee->amount, [
                                'class' => 'form-control',
                                'id' => 'pre_admission_fees_amount',
                                'readonly' => true]) !!}
                            <p id='pre_admission_fees_amounte' style="max-height:3px;"></p>
                        </div>
                    </div>
                </div>

                <div id="payment_information_holder"></div>

                <div class="form-group">
                    <button type="button" id="payButton" class="btn btn-primary" title="Pay">
                        <i class="glyphicon glyphicon-ok"> <b>Pay</b></i>
                    </button>
                </div>
            </div>
            @elseif($preAdmissionData->eims_pre_admission_fees_collection != null && $preAdmissionData->eims_pre_admission_fees_collection->status == '2')
            <div class="col-md-9 col-md-offset-2">

                <div class="form-group" id="admissionNoHolder">
                    {!! Form::label('admission_no', 'Admission No: ', ['class' => 'control-label'], false) !!}
                    <div>
                        {!! Form::text('admission_no', $preAdmissionData ? $preAdmissionData->admission_no : null, ['class' => 'form-control', 'id' => 'admission_no','placeholder' => 'Enter Admission No', 'readonly']) !!}
                        <p id='admission_noe' style="min-height:3px;"></p>
                    </div>
                </div>

                <div class="form-group">
                    {!! Form::label('dob', 'Date of birth: <sup class="text-danger">*</sup>', ['class' => 'control-label'], false) !!}
                    <div>
                        {!! Form::text('dob', $preAdmissionData ? date('d-m-Y',strtotime($preAdmissionData->dob)) : null, ['class' => 'form-control', 'id' => 'dob', 'placeholder' => 'dd-mm-yyyy', 'readonly']) !!}
                        <p id='dobe' style="min-height:3px;"></p>
                    </div>
                </div>

                @if($company->companyType === 'UNV'  )
                    {{-- national_id --}}
                    <div class="form-group ">
                        {!! Form::label('national_id', 'National ID: <sup class="text-danger">*</sup>', ['class' => 'control-label'], false) !!}
                        <div>
                            {!! Form::text('national_id', $preAdmissionData ? $preAdmissionData->national_id : null, ['class' => 'form-control', 'id' => 'national_id', 'placeholder' => 'Enter your national ID', 'readonly']) !!}
                            <p id='national_ide' style="min-height:3px;"></p>
                        </div>
                    </div>
                @elseif($company->companyType === 'SCL' || $company->companyType === 'CLG')
                    {{-- birth_certificate_id --}}
                    <div class="form-group ">
                        {!! Form::label('birth_certificate_id', 'Birth Certificate ID: <sup class="text-danger">*</sup>', ['class' => ' control-label'], false) !!}
                        <div>
                            {!! Form::text('birth_certificate_id',  $preAdmissionData ? $preAdmissionData->birth_certificate_id : null, ['class' => 'form-control', 'id' => 'birth_certificate_id', 'placeholder' => 'Enter your birth certificate ID', 'readonly']) !!}
                            <p id='birth_certificate_ide' style="min-height:3px;"></p>
                        </div>
                    </div>
                @endif

                {{-- phone_number --}}
                <div class="form-group ">
                    {!! Form::label('phone_number',  'Phone Number: <sup class="text-danger">*</sup> (Same phone number used in admission) ', ['class' => 'control-label'], false) !!}
                    <div>
                        {!! Form::text('phone_number',  $preAdmissionData ? $preAdmissionData->phone_number : null, ['class' => 'form-control', 'id' => 'phone_number', 'type' => 'text', 'placeholder' => 'Enter phone number', 'readonly']) !!}
                        <p id='phone_numbere' style="min-height:3px;"></p>
                    </div>
                </div>

                <div id="payment_method_information">
                    <div class="form-group">
                        {!! Form::label('payment_method', 'Payment Method: <sup class="text-danger">*</sup>', ['class' => 'control-label'],false) !!}
                        <div class="radio" id="payment_methods_holder">
                            @foreach($paymentMethods as $keyPaymentMethod => $paymentMethod)
                            <label for="payment_method{{ $paymentMethod->id }}">
                                    <input type="radio" name="payment_method_id" class="payment-method"
                                    id="payment_method{{ $paymentMethod->id }}"
                                    value="{{ $paymentMethod->id }}"
                                    data-name="{{ $paymentMethod->name }}"
                                    data-code="{{ $paymentMethod->code }}"
                                    data-configuration='{{ json_encode($paymentMethod->configuration) }}'
                                    >
                                    {{ $paymentMethod->name }}
                            </label>
                            @endforeach
                        </div>
                        <p id='payment_methode' style="max-height:3px;"></p>
                    </div>

                    {{Form::hidden('pre_admission_fees_id', $preAdmissionFee->id, ['id' => 'pre_admission_fees_id'])}}

                    {{-- payment amount --}}
                    <div class="form-group">
                        {!! Form::label('pre_admission_fees_amount', 'Payment Amount: <sup class="text-danger">*</sup>', ['class' => 'control-label'],false) !!}
                        <div>
                            {!! Form::number('pre_admission_fees_amount', $preAdmissionFee->amount, [
                                'class' => 'form-control',
                                'id' => 'pre_admission_fees_amount',
                                'readonly' => true]) !!}
                            <p id='pre_admission_fees_amounte' style="max-height:3px;"></p>
                        </div>
                    </div>
                </div>

                <div id="payment_information_holder"></div>

                <div class="form-group">
                    <button type="button" id="payButton" class="btn btn-primary" title="Pay">
                        <i class="glyphicon glyphicon-ok"> <b>Pay</b></i>
                    </button>
                </div>
            </div>
            @else
            <div class="col-md-12" style="text-align:center"><span style="color:red;">Already Paid.Please wait for Payment Slip</span></div>
            @endif
        </div>

    </div>
    {{Form::close()}}

    {{-- Tab Loading Scripts --}}
    <script type="text/javascript">
        'use strict';

        $(document).ready(function () {
            const loadingDiv = '<i class="glyphicon glyphicon-refresh glyphicon-spin"> <b>Loading...</b></i>';
            const admissionNoHolder = $('#admissionNoHolder');
            const admissionNoField = $('#admission_no')
            const dobField = $('#dob');
            const phoneNumberField = $('#phone_number');
            const birthCertificateIdField = $('#birth_certificate_id');
            const nationalIdField = $('#national_id');
            const paymentMethodInformation = $('#payment_method_information');
            const paymentMethodsHolder = $('#payment_methods_holder');
            const preAdmissionFeesId = $('#pre_admission_fees_id');
            const preAdmissionFeesAmount = $('#pre_admission_fees_amount');
            const paymentInformationHolder = $('#payment_information_holder');

            const preAdmissionPaymentForm = $('#pre_admission_payment_form');
            const searchButton = $('#searchButton');
            const payButton = $('#payButton');

            @if(!isset($admission_no))
            admissionNoHolder.addClass('hidden');
            @endif


            // searchButton click get paymentMethods
            searchButton.click(function (e) {
                e.preventDefault();

                $.ajax({
                    url: `{{url('eims/pre-admission/payment-methods')}}`,
                    type: 'POST',
                    data: preAdmissionPaymentForm.serialize(),
                    dataType: 'json',
                    beforeSend: () => $('#payButton').html(loadingDiv),
                    success: function (_response) {
                        paymentMethodsHolder.empty();
                        const data = _response.data;

                        if (data.payment_methods.length > 0) {
                            paymentMethodInformation.removeClass('hidden');
                            preAdmissionFeesId.val(data.pre_admission_fee.id ?? null)
                            preAdmissionFeesAmount.val(data.pre_admission_fee.amount ?? 0);
                            // readonloy
                            admissionNoHolder.removeClass('hidden');
                            admissionNoField.val(data.admission_no);
                            admissionNoField.attr('readonly', true);
                            dobField.datepicker('destroy');
                            birthCertificateIdField.attr('readonly', true);
                            nationalIdField.attr('readonly', true);
                            phoneNumberField.attr('readonly', true);

                            // append payment method radio buttons in paymentMethodsHolder
                            $.each(data.payment_methods, function (_key, payment_method) {
                                paymentMethodsHolder.append(`
                                    <label for="payment_method${payment_method.id}">
                                         <input type="radio" name="payment_method_id" class="payment-method"
                                            id="payment_method${payment_method.id}"
                                            value="${payment_method.id}"
                                            data-name="${payment_method.name}"
                                            data-code="${payment_method.code}"
                                            data-configuration='${JSON.stringify(payment_method.configuration)}'
                                         >
                                         ${payment_method.name}
                                    </label>
                                `);
                            });

                            // show pay button
                            searchButton.addClass('hidden');
                            payButton.removeClass('hidden');
                        }
                    },
                    error: function (_response) {
                        $('#logInButton').html(
                            '<i class="glyphicon glyphicon-log-in"> <b>Login</b></i>');

                        const responseJSON = _response.responseJSON;
                        Swal.fire({
                            icon: 'error',
                            title: 'Oops...',
                            text: responseJSON.message,

                        });
                    },
                });
            });

            // document .payment-method check show information in paymentInformationHolder
            $(document).on('change', '.payment-method', function () {
                const paymentMethodId = $(this).val();
                const paymentMethodName = $(this).data('name');
                const paymentMethodCode = $(this).data('code');
                const paymentMethodConfiguration = $(this).data('configuration');
                const paymentAmount = $(this).data('amount');

                // show payment information
                paymentInformationHolder.empty();

                // if payment method code == bkash
                if (paymentMethodCode == 'bkash' || paymentMethodCode == 'nagad' || paymentMethodCode == 'upay') {

                    const information = `<p>${paymentMethodConfiguration.type} ${paymentMethodName}: ${paymentMethodConfiguration.number}</p>`;
                    paymentInformationHolder.append(information);

                    const senderNumberField = `
                    <div class="form-group">
                    {!! Form::label('sender_number', 'Sender Number: <sup class="text-danger">*</sup>', ['class' => 'control-label'],false) !!}
                    {!! Form::text('sender_number', null, ['class' => 'form-control','id' => 'sender_number',
                        'placeholder'=>"Sender Number", 'required'=>'true']) !!}
                    <p id='sender_numbere' style="max-height:3px;"></p>
                    </div>`;
                    paymentInformationHolder.append(senderNumberField);

                    const transactionField = `
                    <div class="form-group">
                    {!! Form::label('transaction_id', 'Transaction Id: <sup class="text-danger">*</sup>', ['class' => 'control-label'],false) !!}
                    {!! Form::text('transaction_id', null, ['class' => 'form-control','id' => 'transaction_id',
                        'placeholder'=>"Transaction ID", 'required'=>'true']) !!}
                    <p id='transaction_ide' style="max-height:3px;"></p>
                    </div>`;
                    paymentInformationHolder.append(transactionField);

                    const remarksField = `
                    <div class="form-group">
                    {!! Form::label('remarks', 'Remarks: ', ['class' => 'control-label'],false) !!}
                    {!! Form::textarea('remarks', null, [ 'class' => 'form-control', 'id' => 'remarks',
                         'placeholder'=>"Remarks", 'required'=>'true']) !!}
                    <p id='transaction_ide' style="max-height:3px;"></p>
                    </div>`;
                    paymentInformationHolder.append(remarksField);
                }
            });

            function setErrorsText(errors) {
                $.each(errors, function (key, value) {
                    $('#' + key + 'e').empty().show().append('<span class="errormsg" style="color:red;">' + value + '</span>');

                });
            }

            payButton.click(function (e) {
                e.preventDefault();

                $.ajax({
                    url: `{{url('eims/pre-admission/payment')}}`,
                    type: 'POST',
                    data: preAdmissionPaymentForm.serialize(),
                    dataType: 'json',
                    beforeSend: () => $('#payButton').html(loadingDiv),
                    success: function (_response) {
                        const data = _response.data;

                        Swal.fire({
                            icon: 'success',
                            title: 'Success',
                            text: _response.message,
                            showConfirmButton: true,
                        }).then((result) => {
                            if (result.isConfirmed) {
                                $('#payButton').html(
                                    '<i class="glyphicon glyphicon-ok"> <b>Pay</b></i>');

                                window.location.href = `{{route('eims_pre_admission_applicant_profile')}}`;
                            }
                        });
                    },
                    error: function (_response) {
                        $('#payButton').html(
                            '<i class="glyphicon glyphicon-ok"> <b>Pay</b></i>');
                        const responseJSON = _response.responseJSON;
                        Swal.fire({
                            icon: 'error',
                            title: 'Oops...',
                            text: responseJSON.message,
                        });

                        setErrorsText(responseJSON.errors);
                    }
                });

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