@extends('frontend.layouts.partials.default')
@section('title','Shopping Cart')
@section('main')

<div class="section">
    <div class="container">
        <div class="row py-5 justify-content-center">
                <div class="col-12 col-md-8 text-center">
                        <h4 class="pb-3">Order Summary</h4>
                    </div>
        
                    @if(count($items)==0)
                    <div class="col-12 col-md-8 border p-2 mb-2">
                        <h3>No Items in cart</h3>
                    </div>
                    @endif
                    @foreach($items as $item)
                    @if($item['item_type'] == 1)
                    <div class="col-12 col-md-8 border p-2 mb-2">
                        <div class="row align-items-center">
                            <div class="col-12 col-md-2">
                                <img width="100%" src="{{url('/')}}/uploads/thumbnail/{{$item['image_link']}}" alt="">
                            </div>
                            <div class="col-3">
                                <p class="m-0">Image ID : </p>
                                <span class="font-weight-bold" > {{$item['image_name_id']}} </span>
                            </div>
                            <div class="col-3">
                                <p class="m-0">License Type : </p>
                                <span class="font-weight-bold" > {{config('variables.License')[$item['license_type']]}}</span>
                            </div>
                            <div class="col-2">
                                <p class="m-0">Size : </p>
                                <span class="font-weight-bold" > {{$item['size']}} </span> <i class="text-warning fa fa-pencil"></i>
                            </div>
                            <div class="col-2">
                                <p class="m-0">Price : </p>
                                <span class="font-weight-bold" > {{Priceformat($item['price'])}} </span>
                            </div>
                        </div>
                    </div>
                    @else
                    <div class="col-12 col-md-8 border p-2 mb-2">
                        <div class="row align-items-center">
                            <div class="col-12 col-md-2">
                                <video class="video" width="100%">
                                    <source src="{{url('/')}}/uploads/videos/{{$item['video_secret']}}/watermarked.mp4" type="video/mp4">
                                    Your browser does not support the video tag.
                                </video> 
                            </div>
                            <div class="col-3">
                                <p class="m-0">Video ID : </p>
                                <span class="font-weight-bold" > {{$item['video_secret']}} </span>
                            </div>
                            <div class="col-3">
                                <p class="m-0">License Type : </p>
                                <span class="font-weight-bold" > {{config('variables.License')[$item['license_type']]}}</span>
                            </div>
                            <div class="col-2">
                                <p class="m-0">Size : </p>
                                <span class="font-weight-bold" > {{$item['size']}} </span> <i class="text-warning fa fa-pencil"></i>
                            </div>
                            <div class="col-2">
                                <p class="m-0">Price : </p>
                                <span class="font-weight-bold" > {{Priceformat($item['price'])}} </span>
                            </div>
                        </div>
                    </div>
                    @endif
                    @endforeach
        
        
                    @if (count($items))
                        
        
                    <div class="col-12 col-md-8">
                        <div class="row">
                            <div class="col-12 col-md-6">
                            </div>
                            <div class="col-12 col-md-6">
                              
                                <div class="row align-items-center">
                                    <div class="col-4"></div>
                                    <div class="col-8">
                                        <div class="row">
                                            <div class="col-4 py-1">
                                                    <span>Sub Total </span>
                                            </div>
                                            <div class="col-6 py-1">
                                                    <span class="font-weight-bold">  {{Priceformat($total)}}</span>
                                            </div>
                                        </div>
                                        
                                        <div class="row">
                                            <div class="col-4 py-1">
                                                    <span>Vat (%) </span>
                                            </div>
                                            <div class="col-6 py-1">
                                                    <span class="font-weight-bold"> {{$vat}} % </span>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-4 py-1">
                                            </div>
                                            <div class="col-6 py-1">
                                                    <p class="text-muted m-0">Grand Total</p>
                                                    <h4 class="text-warning"> {{Priceformat($grand_total)}}</h4>
        
                                                {{-- <a class="btn btn-warning mt-3" id="pay_order" href="{{ route('user.payment.order',$CryptedOrderId) }}">Place Order</a> --}}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <hr>
                    </div>
                    @endif
        
        </div>

        <div class="row pb-5 justify-content-center">

            <div class="col-12 text-center">
                <h4 class="pb-3 text-warning">Payment Details</h4>
                <p>Please note that we cannot accept paper check or wire transfer for this purchase</p>
            </div>
            <div class="col-12 col-md-4 pt-4">
                <i class="fa fa-lock text-warning"> Secure Checkout</i>
                <p class="text-muted" style="font-size: 13px">Your payment information is encrypted before transaction. For your convenience Image souk will save your encrypted payment information for future services, however, you can manage your information in account settings.</p>
            </div>

                <div class="col-12 col-md-4 pt-4">
                    <form method="GET" action="{{route('user.payment.order',Crypt::encrypt((int)$Order->order_id,false))}}">
                    @csrf
                    
                    <h3 >$ {{$Order->order_price}}.00  </h3>
                    <h5 >Payment Via</h5>
                    <input type="radio" class="" name="payment_method" value="Foloosi" checked  > <label for="payment-method"> Credit/Debit Card(Foloosi )</label><br>
                    <input type="radio" class="" name="payment_method" value="Paypal" > <label for="payment-method"> Paypal</label>

                    <div class="row checkout">
                        <div class="col-6">
                                <p>First Name</p>
                                <input type="text" value="Vijay" class="form-control" name="first_name"  placeholder="Eg. Jone Smith">
                        </div>
                        <div class="col-6">
                                <p>Last Name</p>
                                <input type="text" value="Dhiman" class="form-control" name="last_name" >
                        </div>
                        <div class="col-12">
                                <p>Mobile / Phone</p>
                                <input type="number" value="8950357771" class="form-control" name="phone_number"  >
                        </div>
                        <div class="col-12">
                                <p>Street Address</p>
                                <input type="text" value="India" class="form-control" name="Street" >
                        </div>
                        <div class="col-6">
                                <p>City</p>
                                <input type="text" value="Chandigard" class="form-control" name="city" >
                        </div>
                        <div class="col-6">
                                <p>State</p>
                                <input type="text" value="Chandigard" class="form-control" name="state" >
                        </div>
                        <div class="col-6">
                                <p>Postal Code</p>
                                <input type="text" value="1323244" class="form-control" name="postal_code" >
                        </div>
                        <div class="col-6">
                                <p>Country</p>
                                <select name="country" class="form-control" id="country">
                                    @foreach (config('variables.contries') as $item)
                                        <option
                                         value="{{$item}}">
                                            {{$item}}
                                        </option>
                                    @endforeach
                                </select>
                        </div>
                        <div class="col-12 text-center pt-4">
                            <input type="submit" class="btn btn-warning" value="Process Order">
                        </div>
                    </div>

                    </form>

                    @if ($token ?? false)
                    <script type="text/javascript" src="https://www.foloosi.com/js/foloosipay.v2.js"></script> 
                    <script type="text/javascript">
                        var reference_token = "{{$token}}"
                        var options = {
                            "reference_token" : reference_token, 
                            "merchant_key" : "{{env('FOLOOSI_KEY')}}"
            
                        }
                        var fp1 = new Foloosipay(options);
                        fp1.open();
                        foloosiHandler(response, function (e) {
                            if(e.data.status == 'success'){
                                $.ajax({
                                        type : "POST",
                                        url : '/api/verigypaymentfoloosi',
                                        headers : {
                                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                                            },
                                        data : {
                                            token:e.data.data.transaction_no,
                                            order_id:{{$Order->order_id}},
                                            user_id:{{session('user_id')}},
                                        },
                                        success : function(response)
                                        {
                                            if(response === true){
                                                window.location.replace('{{route('user.payment.success')}}');
                                            }
                                            // console.log(response);
                                            // 
                                        }
                                    });
                            }
                            if(e.data.status == 'error'){
                                console.error(e.data)
                            }
                            if(e.data.status == 'closed'){
                                console.error(e.data)
                            }
                        }); 
                    </script>
                    
                    @endif

                </div>

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

@endsection