@extends('layout.simpleapp')
@section('content')
    @include('include.simplenav')
    <style>
        @media (min-width: 575.98px) {
            .pricing2 {
                margin: 0 -2.7rem;
            }
        }
    </style>
    <section style="">



        <div class="container-fluid sec1  pb-4">
            <!--<div style="position: absolute; left: 20; float: left; padding-right: 0; z-index: -99;">-->
            <!--    <img src="{{ asset('employer-con/images/clients.png') }}" class="resize-img" height="98" width="150" style="opacity: .1">-->
            <!--</div>-->

            <!--<div style="position: absolute; right: 0; float: right; padding-right: 0; z-index: -99;">-->
            <!--    <img src="{{ asset('employer-con/images/Career.png') }}" class="resize-img" height="108" width="160" style="opacity: .2">-->
            <!--</div>-->
            <div class="row pl-4">


                <div class="col-lg-8 col-md-8 ">

                    <h5 class="text-capitalize">{{ __('Choose payment method') }}</h5>
                    @if (Session::has('error'))
                        <div class="alert alert-danger">
                            <ul>
                                <li>{{ Session::get('error') }}</li>
                            </ul>
                        </div>
                    @endif
                </div>
            </div>
            <form action="{{ route('payment-em-plan') }}" method="post">
                <div class="row pl-md-4">

                    @csrf
                    <input type="hidden" name="coupon_name" id="coupon-form-field">
                    <div class="col-lg-8">

                        <div class="card  px-lg-5  planscard3 shadow" style=" width:auto;">
                            <div class="card-body d-flex flex-column ">
                                <!-- <div class="text-center">
                                              <img src="https://drive.google.com/uc?export=view&id=1HswgEjS9kRoAKUDOMmDhnhUyyah7wBW9" class="img-fluid  mb-5" alt="Websearch">
                                            </div> -->

                                <div class="card-title pricing">

                                    <div class="p-3" style="border: 1px solid #6367FF; border-radius: 8px;">
                                        <div class="form-check">
                                            <input type="radio" value="Visa"
                                                class="form-check-input with-gap radio-bttn" id="radioGap1" name="radio"
                                                required>
                                            <label class="form-check-label" for="radioGap1"> &nbsp &nbsp Visa</label>

                                            <span class="float-right "> <img class="" height="38" width="55"
                                                    src="{{ asset('employer-con/images/visa.png') }}" alt="visa"
                                                    style="margin-bottom: 8px;"></span>
                                        </div>
                                    </div>
                                    <div class="pt-2">

                                        <div class="p-3" style="border: 1px solid #6367FF; border-radius: 8px;">
                                            <div class="form-check">
                                                <input type="radio" value="Master"
                                                    class="form-check-input with-gap radio-bttn" id="radioGap2"
                                                    name="radio">
                                                <label class="form-check-label" for="radioGap2"> &nbsp &nbsp Master
                                                    card</label>

                                                <span class="float-right "> <img class="" height="38"
                                                        width="55" src="{{ asset('employer-con/images/mcard.png') }}"
                                                        alt="visa"></span>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="pt-2">
                                        <div class="p-3" style="border: 1px solid #6367FF; border-radius: 8px;">
                                            <div class="form-check">
                                                <input type="radio" value="Knet"
                                                    class="form-check-input with-gap radio-bttn" id="radioGap3"
                                                    name="radio">
                                                <label class="form-check-label" for="radioGap3"> &nbsp &nbsp Knet</label>

                                                <span class="float-right "> <img class="" height="38"
                                                        width="55" src="{{ asset('employer-con/images/knet.png') }}"
                                                        alt="knet"></span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="pt-2">

                                        <div class="p-3" style="border: 1px solid #6367FF; border-radius: 8px;">
                                            <div class="form-check">
                                                <label for="">{{ __('Pay through') }}</label>
                                                <a href="#" data-toggle="modal" data-target="#payment"
                                                    class="btn btn-success float-right">{{ __('Wallet') }}</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>


                                <!-- <div class="text-center mt-auto mb-4">
                                              <span class="fw-bold fs-2 ">$11</span>/month
                                            </div> -->
                                <!--  <div class="float-left"><a href="#">Delete</a></div> -->

                            </div>


                        </div>
                        <div class="row">
                            <div class="col text-center pt-4">
                                <img class="" height="123" width="300"
                                    src="{{ asset('employer-con/images/secure.png') }}" alt="secure-payment">
                            </div>

                        </div>


                    </div>



                    <div class="col-lg-4 mb-3">
                        <div class="card py-4 px-lg-5 planscard5 shadow mx-auto" style=" width:20rem; ">
                            <div class="card-body d-flex flex-column pr-4" style="">

                                <div class="card-title mb-4 fs-2 font-weight-bold pricing2">
                                    <h5 class="">{{ __('Price Details') }}</h5>
                                    <!-- <h5 class="text-white">Intro</h5> -->
                                    <h6 class="text-capitalize pt-2">{{ __('Total') }} <span class="float-right">KWD
                                            {{ $plan['price'] }}</span></h6>
                                    <h6 class="text-capitalize pt-2 d-none" id="coupon-details">{{ __('Coupon') }} <span
                                        class="float-right"></span>
                                    </h6>
                                    @if (session()->get('locale') == 'ar')
                                        <h6 class="text-capitalize pt-2">({{ $plan['discount'] }}%
                                            off){{ __('Discount') }} <span class="float-right">KWD
                                                {{ ($plan['price'] / 100) * $plan['discount'] }}</span>
                                        </h6>
                                    @else
                                        <h6 class="text-capitalize pt-2">{{ __('Discount') }}({{ $plan['discount'] }}%
                                            off) <span class="float-right">KWD
                                                {{ ($plan['price'] / 100) * $plan['discount'] }}</span>
                                        </h6>
                                    @endif
                                    <h6 class="text-capitalize pt-2">{{ __('GST') }} ({{ $plan['gst'] }}%)<span
                                            class="float-right">KWD {{ ($plan['price'] / 100) * $plan['gst'] }}</span>
                                    </h6>
                                    <hr style="border-width: 2px;">
                                    <input type="hidden" id="session" value="{{ session()->get('locale') }}">
                                    <h6 class="text-capitalize">{{ __('Total Payable') }} <span class="float-right" id="total-payable">KWD
                                            {{ $amount = ($plan['price'] / 100) * $plan['gst'] + $plan['price'] - ($plan['price'] / 100) * $plan['discount'] }}</span>
                                    </h6>
                                    <input type="hidden" name="plan_id" value="{{ $plan['id'] }}">
                                </div>
                                <div class="card-title fs-2 font-weight-bold pricing2">

                                    <h6 class="text-capitalize" style="color: gray;">
                                        {{ __('Note: Extra charges may add for visa and mastercard service') }}</h6>
                                </div>
                                <div>
                                    <a href="#" data-toggle="modal"
                                        data-target="#couponModal">{{ __('apply coupon?') }}</a>
                                </div>
                                <div class="text-center"><button class="btn btn-lg btn-primaryy btnsize1 text-uppercase"
                                        style="">{{ __('Continue') }}</button></div>



                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </section>

    {{-- coupon modal --}}
    <div class="modal fade" id="couponModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">{{ __('Apply Coupon') }}</h5>
                    <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="name">{{ __('Coupon') }}</label>
                        <input type="text" class="form-control" id="coupon_name" name="coupon">
                    </div>
                    <div id="msg-coupon"></div>

                </div>
                <div class="modal-footer">
                    <a class="btn btn-secondary" type="button" data-dismiss="modal">{{ __('Cancel') }}</a>
                    <button type="button" id="coupon-btn" class="btn btn-primary">{{ __('Apply') }}</button>
                </div>
            </div>
        </div>
    </div>

    {{-- modal for payment through wallet --}}
    <div class="modal fade" id="payment" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">{{ __('Current Balance') }} KWD @if ($wallet)
                            {{ number_format($wallet['amount'], 2) }}
                        @else
                            00
                        @endif
                    </h5>
                    <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form action="pay-through-wallet" method="post">
                        @csrf
                        <input type="hidden" name="coupon_name" id="coupon-form-field-wallet">
                        <div class="form-group">
                            <label for="name">{{ __('Payable') }}</label>
                            <input type="number" class="form-control form-control-user" value="{{ $amount }}"
                                name="plan_price" id="plan_price_visible" readonly>
                            <input type="hidden" value="{{ $amount }}" id="plan_price">
                        </div>
                        <div class="form-group">
                            @if ($wallet)
                                <input type="number" value="{{ $wallet['amount'] }}"
                                    class="form-control form-control-user" id="balance" style="display: none">
                            @endif
                            <input type="hidden" name="plan_id" value="{{ $plan['id'] }}">
                        </div>
                        <div id="error" class="text-danger"></div>

                </div>
                <div class="modal-footer">
                    <a class="btn btn-secondary" type="button" data-dismiss="modal">{{ __('Cancel') }}</a>
                    <button type="submit" id="pay" disabled class="btn btn-primary">{{ __('Purchase') }}</button>
                </div>
                </form>
            </div>
        </div>
    </div>
@endsection
@section('script')
    <script>
        function checkBalance() {
            var balance = $('#balance').val();
            var payment = $('#plan_price').val();
            if ((balance - payment) >= 0) {
                $('#pay').attr('disabled', false);
                $('#error').html('');
            } else {
                if ($('#session') == 'ar') {
                    $('#error').html('رصيد غير كاف');
                } else {
                    $('#error').html('Insufficient balance');
                }
            }
        }

        checkBalance()


        $(document).ready(function() {
            $('#coupon-btn').click(function() {
                $.ajax({
                    url: "{{ route('apply-coupon') }}",
                    method: 'GET',
                    data: {
                        couponName: $('#coupon_name').val()
                    },
                    beforeSend: function(){
                        $('#coupon-btn').attr('disabled', true)
                    },
                    success: function(data) {
                        $('#msg-coupon').html('Coupon applied').css('color', '#28a745')
                        $('#coupon_name').attr('readonly', true)
                        oldPrice = parseInt($('#plan_price').val())
                        let newPrice = 0
                        if (data.type == 'percent') {
                            newPrice = oldPrice-(parseInt(oldPrice)/100 * parseInt(data.discount))
                            discount = data.discount+'%'
                        } else {
                            newPrice = oldPrice - parseInt(data.discount)
                            discount = 'KWD '+data.discount
                        }
                        $('#plan_price_visible').val(newPrice)
                        $('#plan_price').val(newPrice)
                        // calling checkBalance to check if current price is eligible for paying
                        checkBalance()

                        // changing details section
                        $('#coupon-details').removeClass('d-none')
                        $('#coupon-details').find('span').html(discount)
                        $('#total-payable').html('KWD '+newPrice)

                        // setting form field of coupon to send on backend
                        $('#coupon-form-field').val($('#coupon_name').val())
                        $('#coupon-form-field-wallet').val($('#coupon_name').val())

                    },
                    error: function(data) {
                        if (data?.responseJSON?.error) {
                            $('#msg-coupon').html(data.responseJSON.error).css('color',
                                "#dc3545")
                        }
                        $('#coupon-btn').attr('disabled', false)
                    }
                })
            })
        });
    </script>
@endsection