@extends('front.layout.app')
@section('title', 'Card Detail')
@section('content')

    @if(!empty($page->pageComponents))
        @forelse($page->pageComponents as $key => $section)
            @if($key == 0)
                <div class="innerBanner">
                    @if(!empty($section->pageComponentMedia[0]) && $section->pageComponentMedia[0]->file_type == 'image')
                        <img src="{{asset($section->pageComponentMedia[0]->file_name) ?? asset('front/images/aboutBanner.jpg')}}" class="w-100">
                    @elseif(!empty($section->pageComponentMedia[0]) && $section->pageComponentMedia[0]->file_type == 'video')
                        <video>
                            <source src="{{asset($section->pageComponentMedia[0]->file_name)}}" type="video/*">
                            Your browser does not support the video tag.
                        </video>
                    @endif

                    <h2>{{$section->title ?? ''}}</h2>
                </div>
            @endif
        @empty
        @endforelse
    @endif

    <div class="checkOutStyle">
        <div class="container">
            <div class="col-lg-12 col-md-12">
                <div class="title text-center">
                    <h2>Select Payment process</h2>
                </div>
            </div>
            <ul class="nav nav-pills" id="pills-tab" role="tablist">
                <li class="nav-item" role="presentation">
                    <a class="nav-link active" id="pills-online-tab" data-toggle="pill" href="#pills-online" role="tab" aria-controls="pills-online" aria-selected="true">Pay online
                    </a>
                </li>
                <li class="nav-item" role="presentation">
                    <a class="nav-link" id="pills-cash-tab" data-toggle="pill" href="#pills-cash" role="tab" aria-controls="pills-cash" aria-selected="false">Cash on delivery
                    </a>
                </li>
{{--                <li class="nav-item" role="presentation">--}}
{{--                    <a class="nav-link" id="pills-collect-tab" data-toggle="pill" href="#pills-collect" role="tab" aria-controls="pills-collect" aria-selected="false">Collect it yourself--}}
{{--                    </a>--}}
{{--                </li>--}}
            </ul>
            <div class="tab-content" id="pills-tabContent">
                <div class="tab-pane fade show active" id="pills-online" role="tabpanel" aria-labelledby="pills-online-tab">
                    <div class="row justify-content-center">
                        <div class="col-lg-12 col-md-12">
                            <div class="title text-center">
                                <h2>Payment Methods</h2>
                            </div>
                        </div>
                        <div class="col-lg-8 col-md-12">
                            <form class="row formStyle" method="post" action="{{route('doPayment')}}">
                                @csrf
                                <div class="col-md-12 mb-4 text-center">
                                    <img src="{{asset('front')}}/images/card-img.png" alt="">
                                </div>
{{--                                <div class="col-md-6">--}}
{{--                                    <label>Card Number</label>--}}
{{--                                    <input type="text" class="form-control @error('cc_number') is-invalid @enderror" name="cc_number" id="cc_number" placeholder="CARD NUMBER">--}}
{{--                                    @error('cc_number') <span class="invalid-feedback" role="alert"><strong>{{$message}}</strong></span> @enderror--}}
{{--                                </div>--}}
{{--                                <div class="col-md-6">--}}
{{--                                    <label>name on card</label>--}}
{{--                                    <input type="text" class="form-control" name="cc_name" id="cc_name" placeholder="CARD TITLE">--}}
{{--                                </div>--}}
{{--                                <div class="col-md-4">--}}
{{--                                    <label>expiration date (mm/yy)</label>--}}
{{--                                    <input type="text" class="form-control @error('cc_exp') is-invalid @enderror"--}}
{{--                                           name="cc_exp" id="cc_exp" placeholder="MM/YY" pattern="[0-9]{2}/[0-9]{2}" maxlength="5" size="5">--}}
{{--                                    @error('cc_exp') <span class="invalid-feedback" role="alert"><strong>{{$message}}</strong></span> @enderror--}}
{{--                                </div>--}}
{{--                                <div class="col-md-2">--}}
{{--                                    <label>CVV</label>--}}
{{--                                    <input type="text" class="form-control @error('cc_cvv') is-invalid @enderror" name="cc_cvv" id="cc_cvv" placeholder="***">--}}
{{--                                    @error('cc_cvv') <span class="invalid-feedback" role="alert"><strong>{{$message}}</strong></span> @enderror--}}
{{--                                </div>--}}
{{--                                <div class="col-md-6">--}}
{{--                                    <div class="checkbox mt-4">--}}
{{--                                        <input type="checkbox" id="box-2">--}}
{{--                                        <label for="box-2"><h5>save card</h5>information is encrypted and securely stored.</label>--}}
{{--                                    </div>--}}
{{--                                </div>--}}
                                <div class="col-md-12 mt-4 text-center">
{{--                                    <button class="btnStyle" type="submit">Place Order</button>--}}
                                    <button class="btnStyle" type="button" id="strongHoldPay">Pay With Strong Hold</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade" id="pills-cash" role="tabpanel" aria-labelledby="pills-cash-tab">
                    <form method="post" action="#" class="row justify-content-center formStyle" id="addAddrForm">
                        <div class="col-md-12">
                            <div class="title inner">
                                <h2>Billing Address</h2>
                                <h4>Review your shipping address</h4>
                            </div>
                        </div>
                        <div class="col-md-12" style="display: none" id="addAddrAlert">

                        </div>
                        @csrf
                        <div class="col-md-6">
                            <label>first Name</label>
                            <input type="text" name="first_name" class="form-control @error('first_name') is-invalid @enderror" placeholder="" value="{{$addressDetail['first_name'] ?? ''}}" required readonly>
                            @error('first_name')
                            <span class="invalid-feedback" role="alert"><strong>{{$message}}</strong></span>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <label>Last Name</label>
                            <input type="text" name="last_name" class="form-control @error('last_name') is-invalid @enderror" placeholder="" value="{{$addressDetail['last_name']??''}}" required readonly>
                            @error('last_name')
                            <span class="invalid-feedback" role="alert"><strong>{{$message}}</strong></span>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <label>Email <span>*</span></label>
                            <input type="text" name="email" class="form-control @error('email') is-invalid @enderror" placeholder="" value="{{$addressDetail['email'] ?? Auth::user()->email ?? ''}}" required readonly>
                            @error('email')
                            <span class="invalid-feedback" role="alert"><strong>{{$message}}</strong></span>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <label>Phone</label>
                            <input type="number" name="phone_no" class="form-control @error('phone_no') is-invalid @enderror" value="{{$addressDetail['phone_no']??''}}" placeholder="50 123 4567" required readonly>
                        </div>
                        <div class="col-md-6">
                            <label>Address Title <span>*</span></label>
                            <input type="text" name="title" class="form-control @error('title') is-invalid @enderror" placeholder="" value="{{$addressDetail['title']??''}}" required readonly>
                            @error('title')
                            <span class="invalid-feedback" role="alert"><strong>{{$message}}</strong></span>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <label>Address Number <span>*</span></label>
                            <input type="text" name="address_number" class="form-control @error('address_number') is-invalid @enderror" placeholder="" value="{{$addressDetail['address_number']??''}}" required readonly>
                            @error('address_number')
                            <span class="invalid-feedback" role="alert"><strong>{{$message}}</strong></span>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <label>Street <span>*</span></label>
                            <input type="text" name="street" class="form-control @error('street') is-invalid @enderror" placeholder="" value="{{$addressDetail['street']??''}}" required readonly>
                            @error('street')
                            <span class="invalid-feedback" role="alert"><strong>{{$message}}</strong></span>
                            @enderror
                        </div>

                        <div class="col-md-6">
                            <label>Apartment</label>
                            <input type="text" name="apartment" class="form-control @error('apartment') is-invalid @enderror" placeholder="" value="{{$addressDetail['address']??$addressDetail['apartment']??''}}" required readonly>
                            @error('apartment')
                            <span class="invalid-feedback" role="alert"><strong>{{$message}}</strong></span>
                            @enderror
                        </div>
                        {{-- <div class="col-md-6">
                            <label>Country</label>
                            <select class="form-control @error('country') is-invalid @enderror" name="country" required readonly>
                                <option value="">Select</option>
                                <option value="US" selected>USA</option>

                            </select>
                            @error('country')
                            <span class="invalid-feedback" role="alert"><strong>{{$message}}</strong></span>
                            @enderror
                        </div> --}}
                        <div class="col-md-6">
                            <label>city</label>
                            <input type="text" name="city" class="form-control @error('city') is-invalid @enderror" placeholder="" value="{{$addressDetail['city']??''}}" required readonly>
                            @error('city')
                            <span class="invalid-feedback" role="alert"><strong>{{$message}}</strong></span>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <label>Zip code</label>
                            <input type="text" id="zip_code" name="zip_code" class="form-control @error('zip_code') is-invalid @enderror" placeholder="" value="{{$addressDetail['zip_code']??''}}" required readonly>
                            @error('zip_code')
                            <span class="invalid-feedback" role="alert"><strong>{{$message}}</strong></span>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <label>State</label>
                            <input type="text" name="state" class="form-control @error('state') is-invalid @enderror" placeholder="" value="{{$addressDetail['state']??''}}" required readonly>
                            @error('state')
                            <span class="invalid-feedback" role="alert"><strong>{{$message}}</strong></span>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <label>Orders Revieving Date</label>
                            <input type="date" name="order_days" class="form-control @error('order_days') is-invalid @enderror" placeholder="" value="{{$addressDetail['order_days']??''}}" required readonly>
                            @error('order_days')
                            <span class="invalid-feedback" role="alert"><strong>{{$message}}</strong></span>
                            @enderror
                        </div>
                        <input type="hidden" id="cart_id" name="cart_id" value="">
                        <div class="col-md-12 text-center mt-4">
                            <button type="button" id="btnCashOnDelivery" class="btnStyle">Confirm</button>
                            <button type="button" class="btnStyle" onclick="history.back();">Edit</button>
                        </div>
                    </form>
                </div>
{{--                <div class="tab-pane fade text-center" id="pills-collect" role="tabpanel" aria-labelledby="pills-collect-tab">--}}
{{--                    <p class="h5">check your email for order details</p>--}}
{{--                    <button type="button" id="btnCollectYourself" class="btnStyle">Confirm</button>--}}
{{--                </div>--}}
            </div>


        </div>
    </div>
@endsection

@section('scripts')
    <script src="https://api.strongholdpay.com/v2/js"></script>
    <script>
        $(document).ready(function (){
            $("#cc_exp").focusout(function (){
                $("#exp_err").remove();
                $(this).removeClass('is-invalid');
                let val = $(this).val();
                if (val.match('^(0[1-9]|1[0-2])\/?([0-9]{2})$')){
                    $("#exp_err").remove();
                }else{
                    $(this).addClass('is-invalid');
                    $('<span id="exp_err" class="invalid-feedback" role="alert"><strong>Please match the requested format.</strong></span>').insertAfter($(this));
                }
            });

            var totalAmount = {{$totalAmount}};
            var tip = {{$tip}};
            var customerData = {
                first_name: "{{$addressDetail['first_name']??''}}",
                last_name : "{{$addressDetail['last_name']??''}}",
                email : "{{$addressDetail['email'] ?? Auth::user()->email ?? ''}}",
                //email : "stafforqq@mailinator.com",
                date_of_birth : "{{$addressDetail['dob']??'1994-01-25'}}",
                mobile : "{{$addressDetail['phone_no']??''}}",
                //mobile : "150078110",
                country : "{{$addressDetail['country']??''}}",
                state : "CA",
                city : "{{$addressDetail['state']??''}}",
            }


            $("#strongHoldPay").on('click', function (){
                var strong_publishableKey = "{{env('STRONGHOLD_API_KEY_SAND')}}";
                var strong_secretKey = "{{env('STRONGHOLD_SECRET_KEY_SAND')}}";
                var strong_environment = "{{env('STRONGHOLD_ENV_SAND')}}";
                var customer_id = "{{Auth::check() ? Auth::user()->sh_customer_id : ''}}"
                var customerToken = "";
                var payment_source = "";
                var stronghold_url = "https://api.strongholdpay.com/v2/";
                var settings = "";

                var strongholdPay = Stronghold.Pay({
                    publishableKey: strong_publishableKey,
                    environment: strong_environment,
                });

                /* ------------------CREATE CUSTOMER CODE START---------------------- */
                if (customer_id == '' || customer_id == null){
                    settings = {
                        "async": true,
                        "crossDomain": true,
                        "url": stronghold_url+"customers",
                        "method": "POST",
                        "headers": {
                            "Content-Type": "application/json",
                            "SH-SECRET-KEY": strong_secretKey
                        },
                        "processData": true,
                        "data": '{\n "individual": {\n "first_name": "'+customerData.first_name+'", \n "last_name": "'+customerData.last_name+'", \n ' +
                            '"data_of_birth": "'+customerData.date_of_birth+'", \n "email": "'+customerData.email+'", \n "mobile": "+'+customerData.mobile+'"\n},'+
                            '\n "country": "'+customerData.country+'", \n "state": "'+customerData.state+'" \n }',

                    };
                }else{
                    settings = {
                        "async": true,
                        "crossDomain": true,
                        "url": stronghold_url + "customers/" + customer_id,
                        "method": "GET",
                        "headers": {
                            "Content-Type": "application/json",
                            "SH-SECRET-KEY": strong_secretKey
                        },
                    };
                }


                // ---------------- CREATE CUSTOMER CODE END -----------------------

                $.ajax(settings).done(function (response) {
                    if (customer_id == "" || customer_id == null) {
                        customer_id = response['result']['id'];
                        payment_source = (response['result']['payment_sources'].length > 0) ? response['result']['payment_sources'][0]['id'] : "";
                    }

                    // GET CUSTOMER TOKEN START
                    const settingsC = {
                        "async": true,
                        "crossDomain": true,
                        "url": stronghold_url+"customers/"+customer_id+"/token",
                        "method": "GET",
                        "headers": {
                            "Content-Type": "application/json",
                            "SH-SECRET-KEY": strong_secretKey
                        }
                    };
                    var payment_source_id = null;
                    $.ajax(settingsC).done(function (responseC) {
                        customerToken = responseC['result']['token'];
                        // GET CUSTOMER TOKEN END

                        strongholdPay.addPaymentSource(customerToken, {
                            onSuccess: function (paymentSource) {
                                payment_source_id = paymentSource.id;

                                strongholdPay.charge(customerToken, {
                                    charge: {
                                        amount: totalAmount*100,
                                        paymentSourceId: payment_source_id,
                                    },
                                    authorizeOnly: false, // Set to true to not capture the charge immediately and create it as `authorized`.
                                    tip: { // Optional
                                        amount: tip*100,
                                        beneficiaryName: 'John',
                                    },
                                    onSuccess: function (charge) {
                                        

                                        let result = charge;
                                        var url = "{{route('strongHoldCharge')}}";
                                        var data = {
                                            'responseId': charge.id,
                                            'result': result,
                                            'customer_id': customer_id,
                                            'tip': tip,
                                            '_token': '{{csrf_token()}}',
                                        }
                                        sendPayDetail(url, data);
                                    },
                                    onExit: function () { 
                                    },
                                    onError: function (err) {  }
                                });
                            },
                            onExit: function () { 
                            },
                            onError: function (err) {  }
                        });
                    }).fail(function (err){
                        if (err.responseJSON){
                            toastr.error(err.responseJSON.error.message);
                        }
                    });
                }).fail(function (err){
                    if (err.responseJSON){
                        toastr.error(err.responseJSON.error.message);
                    }
                });
            });

            $("#btnCashOnDelivery").on('click', function (){
                var url = "{{route('cashOnDelivery')}}";
                var data = {
                    '_token': "{{csrf_token()}}",
                }

                sendPayDetail(url, data);
            })
            $("#btnCollectYourself").on('click', function (){
                var url = "{{route('collectItYourself')}}";
                var data = {
                    '_token': "{{csrf_token()}}",
                }

                sendPayDetail(url, data);
            })
        });

        function sendPayDetail(url, data){
            $.ajax({
                url: url,
                type: 'POST',
                data: data,
                success(resp){
                    if (resp.status == true){

                        toastr.success('Payment Done Successfully');
                        window.location.href = "{{url('checkout/success')}}";
                    }else{
                        toastr.error(resp.msg);
                        window.location.href = "{{url('cart')}}";
                    }
                }
            })
        }
    </script>
@endsection