@extends('frontend.layouts.app')

@section('content')
    <div class="row text-center">
        <div class="text-center">

            <img src="{{ getImageFile(get_option('payment_left_image')) }}" alt="hero" class="img-fluid"
                style="height: 23vh;margin-top: 13vh;">


        </div>
    </div>
    <div class="row d-flex">
        <div class="col-md-5">
            <div class="">

                @if (get_option('sign_up_left_image'))
                    <div class="row d-flex">


                        <div class="col-lg-8 mx-auto text-center md-mb-50">
                            <div class="pricing-table">
                                <div class="pricing-wrap">
                                    <div class="pricing-table-header">
                                        <h3 class="pricing-table-title">{{ $price_status }}</h3>
                                    </div>
                                    <div class="pricing-table-price">
                                        <div class="pricing-table-price-tag">
                                            <span class="pricing-table-currency">$</span><span
                                                class="pricing-table-price-text">{{ $priceInfo[0]['price'] }}</span>
                                        </div>
                                    </div>
                                    <div class="pricing-table-body">
                                        <h3 class="pricing-table-features-title">Perfect for Professional</h3>
                                        <div class="features">
                                            <ul>
                                                @foreach ($priceInfo as $item)
                                                    <li>{{ $item['price_data'] }}</li>
                                                @endforeach




                                            </ul>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>


                    </div>
                @endif
            </div>
        </div>
        <div class="col-md-7">
            <div class="text-center bg-white">
                <div class="">
                    <h2 class="mb-3" id="sign-in-header">Choose Payment Method</h2>
                    <ul class="nav nav-tabs mb-3" id="tab-tab" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="tab-trainee-tab" data-bs-toggle="tab"
                                data-bs-target="#tab-trainee" type="button" role="tab" aria-controls="tab-trainee"
                                aria-selected="true">Online</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="tab-institute-tab" data-bs-toggle="tab"
                                data-bs-target="#tab-institute" type="button" role="tab" aria-controls="tab-institute"
                                aria-selected="false">Offline</button>
                        </li>
                        {{-- <li class="nav-item" role="presentation">
                            <button class="nav-link" id="tab-admin-tab" data-bs-toggle="tab" data-bs-target="#tab-admin"
                                type="button" role="tab" aria-controls="tab-admin" aria-selected="false">Admin</button>
                        </li> --}}
                    </ul>
                    <div class="tab-content" id="tab-tabContent">
                        <div class="tab-pane fade show active" id="tab-trainee" role="tabpanel"
                            aria-labelledby="tab-trainee-tab">
                            <form id="trainee_login_form" method="POST" action="{{ route('login') }}">
                                @csrf
                                <div class="row mb-30">
                                    <div class="col-md-6">
                                        <label
                                            class="label-text-title color-heading font-medium font-16 mb-3">{{ __('Email') }}</label>
                                        <input name="email" value="{{ old('email') }}" class="form-control email"
                                            placeholder="{{ __('Type your email/username') }}">
                                        @if ($errors->has('email'))
                                            <span class="text-danger"><i class="fas fa-exclamation-triangle"></i>
                                                {{ $errors->first('email') }}</span>
                                        @endif
                                    </div>
                                </div>



                                <div class="row mb-2">
                                    <div class="col-md-6 text-center">
                                        <button type="submit"
                                            class="theme-btn theme-button1 theme-button3 font-15 fw-bold w-100">{{ __('Pay') }}</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="tab-pane fade" id="tab-institute" role="tabpanel" aria-labelledby="tab-institute-tab">

                            {{-- switcher  --}}
                            <div class="cntr">
                                <label for="rdo-1" class="btn-radio">
                                    <input type="radio" id="rdo-1" name="radio-grp" value="mobile" checked>
                                    <svg width="20px" height="20px" viewBox="0 0 20 20">
                                        <circle cx="10" cy="10" r="9"></circle>
                                        <path
                                            d="M10,7 C8.34314575,7 7,8.34314575 7,10 C7,11.6568542 8.34314575,13 10,13 C11.6568542,13 13,11.6568542 13,10 C13,8.34314575 11.6568542,7 10,7 Z"
                                            class="inner"></path>
                                        <path
                                            d="M10,1 L10,1 L10,1 C14.9705627,1 19,5.02943725 19,10 L19,10 L19,10 C19,14.9705627 14.9705627,19 10,19 L10,19 L10,19 C5.02943725,19 1,14.9705627 1,10 L1,10 L1,10 C1,5.02943725 5.02943725,1 10,1 L10,1 Z"
                                            class="outer"></path>
                                    </svg> <span>Mobile Banking</span> </label>
                                <label for="rdo-2" class="btn-radio">
                                    <input type="radio" id="rdo-2" name="radio-grp" value="bank">
                                    <svg width="20px" height="20px" viewBox="0 0 20 20">
                                        <circle cx="10" cy="10" r="9"></circle>
                                        <path
                                            d="M10,7 C8.34314575,7 7,8.34314575 7,10 C7,11.6568542 8.34314575,13 10,13 C11.6568542,13 13,11.6568542 13,10 C13,8.34314575 11.6568542,7 10,7 Z"
                                            class="inner"></path>
                                        <path
                                            d="M10,1 L10,1 L10,1 C14.9705627,1 19,5.02943725 19,10 L19,10 L19,10 C19,14.9705627 14.9705627,19 10,19 L10,19 L10,19 C5.02943725,19 1,14.9705627 1,10 L1,10 L1,10 C1,5.02943725 5.02943725,1 10,1 L10,1 Z"
                                            class="outer"></path>
                                    </svg> <span>Bank Account</span> </label>
                            </div>

                            <div class="row mt-3">
                                {{-- mobile banking tab --}}
                                <form id="mobile_bank_login_form">
                                    @csrf

                                    <div class="row mt-10">
                                        <div class="col-md-6 mt-30">
                                            <label
                                                class="label-text-title color-heading font-medium font-16 mb-3">{{ __('Select Mobile Banking') }}
                                                <span
                                                    class="cursor tooltip-show-btn share-referral-big-btn primary-btn get-referral-btn border-0 text-capitalize"
                                                    data-toggle="popover" data-bs-placement="bottom"
                                                    data-bs-content="Meridian sun strikes upper urface of the impenetrable foliage of my trees">
                                                    !
                                                </span>
                                            </label>

                                            <select id="mobile_banking" name="mobile_banking" class="form-select">

                                                <option value="">{{ __('Select Mobile Banking') }}</option>

                                                <option value="1">
                                                    Bkash
                                                </option>
                                                <option value="2">
                                                    Rocket
                                                </option>
                                                <option value="3">
                                                    Nagad
                                                </option>

                                            </select>

                                            @if ($errors->has('mobile_banking'))
                                                <span class="text-danger"><i class="fas fa-exclamation-triangle"></i>
                                                    {{ $errors->first('mobile_banking') }}</span>
                                            @endif
                                        </div>
                                        <div class="col-6 " id="bkash_num">
                                            <p
                                                style="
                                            margin-top: 11vh;
                                        ">
                                                Bkash Account Number : 01914652698</p>

                                        </div>
                                        <div class="col-6 " id="rocket_num">
                                            <p
                                                style="
                                            margin-top: 11vh;
                                        ">
                                                Rocket Account Number : 01914652698</p>

                                        </div>
                                        <div class="col-6 " id="nagad_num">
                                            <p
                                                style="
                                            margin-top: 11vh;
                                        ">
                                                Nagad Account Number : 01914652698</p>
                                        </div>

                                    </div>
                                    <div class="row mt-30">
                                        <div class="col-md-6" id="bkash_transaction_id">
                                            <label
                                                class="label-text-title color-heading font-medium font-16 mb-3">{{ __('Bkash Transaction ID') }}</label>
                                            <input name="bkash_transaction" class="form-control email"
                                                placeholder="{{ __('Type your Bkash Transaction Id') }}">
                                            @if ($errors->has('bkash_transaction'))
                                                <span class="text-danger"><i class="fas fa-exclamation-triangle"></i>
                                                    {{ $errors->first('bkash_transaction') }}</span>
                                            @endif
                                        </div>
                                        <div class="col-md-6" id="rocket_transaction_id">
                                            <label
                                                class="label-text-title color-heading font-medium font-16 mb-3">{{ __('Rocket Transaction ID') }}</label>
                                            <input name="rocket_transaction" class="form-control email"
                                                placeholder="{{ __('Type your Rocket Transaction Id') }}">
                                            @if ($errors->has('rocket_transaction'))
                                                <span class="text-danger"><i class="fas fa-exclamation-triangle"></i>
                                                    {{ $errors->first('rocket_transaction') }}</span>
                                            @endif
                                        </div>
                                        <div class="col-md-6" id="nagad_transaction_id">
                                            <label
                                                class="label-text-title color-heading font-medium font-16 mb-3">{{ __('Nagad Transaction ID') }}</label>
                                            <input name="nagad_transaction" class="form-control email"
                                                placeholder="{{ __('Type your Nagad Transaction Id') }}">
                                            @if ($errors->has('nagad_transaction'))
                                                <span class="text-danger"><i class="fas fa-exclamation-triangle"></i>
                                                    {{ $errors->first('nagad_transaction') }}</span>
                                            @endif
                                        </div>
                                    </div>



                                    <div class="row mt-5">
                                        <div class="col-md-6 text-center">
                                            <button type="button" onclick="mobilepaymentsubmit()"
                                                class="theme-btn theme-button1 theme-button3 font-15 fw-bold w-100">{{ __('Pay') }}</button>
                                        </div>
                                    </div>
                                </form>
                                {{-- bank account tab --}}
                                <form id="bank_login_form" method="POST" action="{{ route('login') }}">
                                    @csrf



                                    <div class="row mt-30">
                                        <div class="col-md-6">
                                            <label
                                                class="label-text-title color-heading font-medium font-16 mb-3">{{ __('Bank Transaction ID') }}</label>
                                            <input name="bank_transaction" class="form-control email"
                                                placeholder="{{ __('Type your Bank Transaction Id') }}">
                                            @if ($errors->has('bank_transaction'))
                                                <span class="text-danger"><i class="fas fa-exclamation-triangle"></i>
                                                    {{ $errors->first('bank_transaction') }}</span>
                                            @endif
                                        </div>
                                        <div class="col-6 ">
                                            <p
                                                style="
                                            margin-top: 7vh;
                                        ">
                                                Bank Account Number : 01914652698</p>

                                        </div>
                                    </div>

                                    <div class="row mt-3">
                                        <div class="col-md-6 text-center">
                                            <button type="button" onclick="bankpaymentsubmit()"
                                                class="theme-btn theme-button1 theme-button3 font-15 fw-bold w-100">{{ __('Pay') }}</button>
                                        </div>
                                    </div>
                                </form>

                            </div>



                        </div>

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

@push('style')
    <style>
        .pricing-table .pricing-wrap {
            position: relative;
            overflow: hidden;
            padding: 35px 50px 50px 50px;
            border-radius: 30px;
            box-shadow: 0 0.2rem 2.8rem rgb(36 36 36 / 10%);
            margin: 0 -3px 0 -3px;
        }

        .pricing-table-title {
            font-size: 20px;
            font-weight: 500;
            color: #6722b5;
            line-height: 30px;
            text-transform: uppercase;
            margin: 0 0 15px;
        }

        .pricing-table-currency {
            font-size: 45px;
            line-height: 55px;
            color: #6722b5;
            font-family: "Jost", sans-serif;
            font-weight: 600;
        }

        .pricing-table-price-text {
            font-size: 45px;
            line-height: 55px;
            color: #6722b5;
            font-family: "Jost", sans-serif;
            font-weight: 600;
        }

        .pricing-table-body {
            border-style: solid;
            border-width: 1px 0px 0px 0px;
            border-color: #4d4c4c29;
            padding-bottom: 20px;
            margin-top: 26px;
        }

        .pricing-table-features-title {
            color: #3e3e3ecf;
            font-family: "Jost", Sans-serif;
            font-size: 16px;
            font-weight: 400;
            margin-bottom: 15px;
            margin-top: 15px;
        }

        .pricing-container.pricing-style2 .pricing-table .pricing-wrap .pricing-table-body .features ul li {
            position: relative;
            font-size: 16px;
            line-height: 26px;
            color: #372748;
            padding-left: 36px;
            margin: 15px 0;
            transition: all 0.5s ease;
        }

        /*  radio css*/
        .cntr {
            margin: auto;
        }

        .btn-radio {
            cursor: pointer;
            display: inline-block;
            float: left;
            -webkit-user-select: none;
            user-select: none;
        }

        .btn-radio:not(:first-child) {
            margin-left: 20px;
        }

        @media screen and (max-width: 480px) {
            .btn-radio {
                display: block;
                float: none;
            }

            .btn-radio:not(:first-child) {
                margin-left: 0;
                margin-top: 15px;
            }
        }

        .btn-radio svg {
            fill: none;
            vertical-align: middle;
        }

        .btn-radio svg circle {
            stroke-width: 2;
            stroke: #c8ccd4;
        }

        .btn-radio svg path {
            stroke: #008fff;
        }

        .btn-radio svg path.inner {
            stroke-width: 6;
            stroke-dasharray: 19;
            stroke-dashoffset: 19;
        }

        .btn-radio svg path.outer {
            stroke-width: 2;
            stroke-dasharray: 57;
            stroke-dashoffset: 57;
        }

        .btn-radio input {
            display: none;
        }

        .btn-radio input:checked+svg path {
            transition: all 0.4s ease;
        }

        .btn-radio input:checked+svg path.inner {
            stroke-dashoffset: 38;
            transition-delay: 0.3s;
        }

        .btn-radio input:checked+svg path.outer {
            stroke-dashoffset: 0;
        }

        .btn-radio span {
            display: inline-block;
            vertical-align: middle;
        }
    </style>
@endpush
@push('script')
    <script>
        $('select').on('change', function() {
            if (this.value == "") {
                $('#bank_login_form').hide();
                $('#rocket_num').hide();
                $('#nagad_num').hide();
                $('#bkash_num').hide();
                // // trasnaction 
                $('#bkash_transaction_id').hide();
                $('#rocket_transaction_id').hide();
                $('#nagad_transaction_id').hide();
            }
            if (this.value == 1) {
                $('#rocket_num').hide();
                $('#nagad_num').hide();
                $('#bkash_num').show();

                // trasnaction 
                $('#bkash_transaction_id').show();
                $('#rocket_transaction_id').hide();
                $('#nagad_transaction_id').hide();


            }
            if (this.value == 2) {
                $('#rocket_num').show();
                $('#nagad_num').hide();
                $('#bkash_num').hide();
                // trasnaction 
                $('#bkash_transaction_id').hide();
                $('#rocket_transaction_id').show();
                $('#nagad_transaction_id').hide();
            }
            if (this.value == 3) {

                $('#rocket_num').hide();
                $('#nagad_num').show();
                $('#bkash_num').hide();
                // // trasnaction 
                $('#bkash_transaction_id').hide();
                $('#rocket_transaction_id').hide();
                $('#nagad_transaction_id').show();
            }
        });

        $(function() {
            $('#bank_login_form').hide();
            $('#rocket_num').hide();
            $('#nagad_num').hide();
            $('#bkash_num').hide();
            // // trasnaction 
            $('#bkash_transaction_id').hide();
            $('#rocket_transaction_id').hide();
            $('#nagad_transaction_id').hide();
        });
        $("input[name='radio-grp']").change(function() {
            if ($(this).val() === 'mobile') {
                $('#mobile_bank_login_form').show();
                $('#bank_login_form').hide();


            } else if ($(this).val() === 'bank') {
                $('#bank_login_form').show();
                $('#mobile_bank_login_form').hide();

            }

        });
    </script>

    <script>
        function mobilepaymentsubmit() {
            Swal.fire({
                title: "Are you sure to submit?",
                text: "You won't be able to revert this!",
                icon: "warning",
                showCancelButton: true,
                confirmButtonText: "Yes, Pay!",
                cancelButtonText: "No, cancel!",
                reverseButtons: true
            }).then(function(result) {
                if (result.value) {
                    let payment_mode = 2 //offline 
                    let off_payment_type = 1 //mobile_banking'
                    let mobile_transaction_id = "";
                    let mobile_payment_type = $('#mobile_banking').val();
                    if (mobile_payment_type == 1) {
                        mobile_transaction_id = $('[name=bkash_transaction]').val();
                    } else if (mobile_payment_type == 2) {
                        mobile_transaction_id = $('[name=rocket_transaction]').val();
                    } else if (mobile_payment_type == 3) {
                        mobile_transaction_id = $('[name=rocket_transaction]').val();
                    }

                    $.ajax({
                        type: "POST",
                        url: "{{ route('dashboard.mobilepayment') }}",
                        data: {
                            "payment_mode": payment_mode,
                            "off_payment_type": off_payment_type,
                            "mobile_payment_type": mobile_payment_type,
                            "mobile_transaction_id": mobile_transaction_id,
                            "_token": "{{ csrf_token() }}",
                        },
                        datatype: "json",
                        success: function(data) {
                            toastr.options.positionClass = 'toast-bottom-right';
                            toastr.success('', 'Payment Send. Wait for Approval');
                            window.location.replace('/dashboard/dashboard');
                        },

                    });
                } else if (result.dismiss === "cancel") {}
            });



            // $.ajax({
            //     url: '/update-sign',
            //     method: 'post',
            //     data:

            //         formdata,

            //     success: function(response) {

            //         toastr.success('', response.message);

            //         if (response.status == 'success') {
            //             $(modal).modal('hide');
            //             window.location.reload();

            //         } else {
            //             toastr.error('', response.message);

            //         }
            //     }
            // })
        }

        function bankpaymentsubmit() {
            Swal.fire({
                title: "Are you sure to submit?",
                text: "You won't be able to revert this!",
                icon: "warning",
                showCancelButton: true,
                confirmButtonText: "Yes, Pay!",
                cancelButtonText: "No, cancel!",
                reverseButtons: true
            }).then(function(result) {
                if (result.value) {
                    let payment_mode = 2 //offline 
                    let off_payment_type = 2 //bank payment'
                    let bank_transaction_id = $('[name=bank_transaction]').val();

                    $.ajax({
                        type: "POST",
                        url: "{{ route('dashboard.bankPayment') }}",
                        data: {
                            "payment_mode": payment_mode,
                            "off_payment_type": off_payment_type,
                            "bank_transaction_id": bank_transaction_id,
                            "_token": "{{ csrf_token() }}",
                        },
                        datatype: "json",
                        success: function(data) {
                            toastr.options.positionClass = 'toast-bottom-right';
                            toastr.success('', 'Payment Send. Wait for Approval');
                            window.location.replace('/dashboard/dashboard');
                        },

                    });
                } else if (result.dismiss === "cancel") {}
            });



        }
    </script>
@endpush