@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">

                    <h5 class="text-capitalize">{{ __('Choose payment method') }}</h5>
                </div>
            </div>
            <form action="{{ route('payment-wallet-em') }}" method="post">
                <div class="row pl-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>


                                <!-- <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="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 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
                                            {{ $amount }}</span></h6>
                                    <h6 class="text-capitalize pt-2 d-none" id="coupon-details">{{ __('Coupon') }} <span
                                            class="float-right"></span>
                                    </h6>
                                    <hr style="border-width: 2px;">
                                    <h6 class="text-capitalize">{{ __('Total Payable') }} <span class="float-right" id="total-payable">KWD
                                            {{ $amount }}</span></h6>
                                    <input type="hidden" id="payable_amount" name="amount"
                                        value="{{ $amount }}" />
                                </div>
                                <div class="card-title mb-4 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>
@endsection

@section('script')
    <script>
        $(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($('#payable_amount').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
                        }
                        $('#payable_amount').val(newPrice)

                        // 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())

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