@extends('layouts.layout')

@section('title', 'Checkout')

@section('content')

@php
    function currency(){
        $result=DB::table('membership_currency')->where('status','Active')->first();
        return isset($result->currency_symbol)?$result->currency_symbol:'';
    }
    function currency_code(){
        $result=DB::table('membership_currency')->where('status','Active')->first();
        return isset($result->currency_code)?$result->currency_code:'';
    }
    function city_name($id){
        $result=DB::table('cities')->where('id',$id)->first();
        return $result->name;
    }
    function state_name($id){
        $result=DB::table('states')->where('id',$id)->first();
        return $result->name;
    }
@endphp


<!-- Content Body Start -->
<div class="content-body">

    <!-- Page Headings Start -->
    <div class="row justify-content-between align-items-center mb-10">

        <!-- Page Heading Start -->
        <div class="col-12 col-lg-auto mb-20">
            <div class="page-heading">
                <h3 class="title">Products <span>/ checkout</span></h3>
            </div>
        </div><!-- Page Heading End -->
    </div><!-- Page Headings End -->

    <div class="row">
         <!--Export Data Table Start-->
        <div class="col-12 mb-30">
            <div class="box">
                <div class="box-body">
                    <!-- <div class="user-actions">
                        <h3> 
                            <i class="fa fa-file-o" aria-hidden="true"></i>
                            Returning customer?
                            <a class="Returning" href="#" data-toggle="collapse" data-target="#checkout_coupon" aria-expanded="true">Click here to enter your code</a>     
                        </h3>
                        <div id="checkout_coupon" class="collapse" data-parent="#accordion">
                            <div class="checkout_info">
                                <form action="#" name="discountFrm" id="discountFrm">
                                    <input placeholder="Coupon code" name="coupon_code" id="coupon_code" type="text">
                                    <button type="button" onclick="applyCoupon()">Apply coupon</button>
                                </form>
                            </div>
                        </div>    
                    </div>  -->

                    <form action="{{url('/')}}/sale/proceed_payment" id="checkoutFrm" method="post" style="width: 100%;">
                        <h3>Billing Details</h3>
                        <div class="row">
                            <div class="col-lg-6 mb-20">
                                <label> Name <span>*</span></label>
                                <input type="text" name="name" id="name" class="form-control" required="" @if(Auth::check()) value="{{Auth::user()->name}}" @endif class="billing">    
                            </div>
                            <div class="col-lg-6 mb-20">
                                <label> Phone Number <span>*</span></label>
                                <input type="text" class="billing form-control" name="phone_no" required="" id="phone_no"  @if(Auth::check()) value="{{Auth::user()->phone_no}}" @endif>    
                            </div>
                            <div class="col-lg-12 mb-20">
                                <label> Email </label>
                                <input type="email" class="billing form-control" name="email" id="email"  @if(Auth::check()) value="{{Auth::user()->email}}" @endif>    
                            </div>

                            <div class="col-12 mb-20">
                                <label>Address  <span>*</span></label>
                                <input required="" class="billing form-control" placeholder="House number and street name" type="text" name="address" id="address" @if(Auth::check()) value="{{Auth::user()->address}}" @endif>     
                            </div>

                            <div class="col-6 mb-20">
                                <label for="country">Country </label>
                                <select class="form-control selectpicker billing" name="country" id="country"> 
                                    <option value="101">India</option> 
                                </select>
                            </div>

                            <div class="col-6 mb-20">
                                <label>State </label>
                                <select id="state" name="state" class="form-control selectpicker billing" required="" data-live-search="true" onchange="getCity(this.value)">
                                    <option value="">Select a State</option>
                                    @foreach($states as $key=>$item)
                                        @php $select = ''; @endphp
                                        @if(Auth::check())     
                                            @php
                                                if(Auth::user()->state==$item['STATEID']) {
                                                $select = 'selected';
                                            } 
                                            @endphp
                                         @endif

                                        <option {{$select}} value="{{$item['STATEID']}}">{{$item['STATENAME']}}
                                        </option>
                                    @endforeach
                                </select>   
                            </div>
                            <div class="col-6 mb-20">
                                <label>Town / City </label>
                                <div id="city_div"><select id="city" name="city" class="form-control selectpicker billing" required="" data-live-search="true">
                                    <option value="">Select a City</option>
                                    
                                    @php if(isset($user->city)) { @endphp
                                        <option selected="" value="{{$user->city}}">{{ city_name($user->city)}}</option>
                                    @php } else { 

                                    if(isset(Auth::user()->city)) { @endphp               
                                        <option selected="" value="{{Auth::user()->city}}">{{ city_name(Auth::user()->city)}}</option>
                                    @php } } @endphp

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

                            <div class="col-6 mb-20">
                                <label>Zipcode <span>*</span></label>
                                <input name="zip_code" class="billing form-control" id="zip_code" @if(Auth::check()) value="{{Auth::user()->zip_code}}" @endif required="" type="text">    
                            </div> 

                            @if(Auth::check()) 
                            @else
                            <div class="col-12 mb-20">
                                <input id="account" type="checkbox" data-target="createp_account" />
                                <label for="account" data-toggle="collapse" data-target="#collapseOne" aria-controls="collapseOne">Create an account?</label>

                                <div id="collapseOne" class="collapse one" data-parent="#accordion">
                                    <div class="card-body1">
                                       <label>Account password <span>*</span></label>
                                        <input placeholder="password" type="password" name="password" id="password">
                                    </div>
                                </div>
                            </div>
                            @endif

                            <div class="col-12 mb-20">
                                <input id="shipaddress" type="checkbox" data-target="createp_account" value="1" />
                                <label style="margin-bottom: 5%" class="righ_0" for="address" data-toggle="collapse" data-target="#collapsetwo" aria-controls="collapseOne">Ship to a different address?</label>

                                <div id="collapsetwo" class="collapse one" data-parent="#accordion">
                                   <div class="row">
                                        <div class="col-lg-6 mb-20">
                                <label> Name <span>*</span></label>
                                <input type="text" name="ship_name" id="ship_name" class="form-control">    
                            </div>
                            <div class="col-lg-6 mb-20">
                                <label> Phone Number <span>*</span></label>
                                <input type="text" name="ship_phone_no" id="ship_phone_no" class="form-control">    
                            </div>

                            <div class="col-lg-12 mb-20">
                                <label> Email <span>*</span></label>
                                <input type="text" name="ship_email" id="ship_email" class="form-control">    
                            </div>

                            <div class="col-12 mb-20">
                                <label>Address  <span>*</span></label>
                                <input placeholder="House number and street name" class="form-control" type="text" name="ship_address" id="ship_address">     
                            </div>

                            <div class="col-6 mb-20">
                                <label for="country">Country <span>*</span></label>
                                <select class="form-control niceselect_option" name="ship_country" id="ship_country"> 
                                    <option value="101">India</option> 
                                </select>
                            </div>

                            <div class="col-6 mb-20">
                                <label>State  <span>*</span></label>
                                <select id="ship_state" name="ship_state" class="form-control selectpicker" data-live-search="true" onchange="getCity(this.value)">
                                    <option value="">Select a State</option>
                                    @foreach($states as $key=>$item)
                                        <option value="{{$item['STATEID']}}">{{$item['STATENAME']}}
                                        </option>
                                    @endforeach
                                </select>   
                            </div>
                            <div class="col-6 mb-20">
                                <label>Town / City <span>*</span></label>
                                <div id="shipcity_div"><select id="ship_city" name="ship_city" class="form-control selectpicker" data-live-search="true">
                                    <option value="1">Select a City</option>

                                    @php if(isset($user->city)) { @endphp
                                        <option selected="" value="{{$user->city}}">{{ city_name($user->city)}}</option>
                                    @php } else { 

                                    if(isset(Auth::user()->city)) { @endphp               
                                        <option selected="" value="{{Auth::user()->city}}">{{ city_name(Auth::user()->city)}}</option>
                                    @php } } @endphp

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

                            <div class="col-6 mb-20">
                                <label>Zipcode <span>*</span></label>
                                <input name="ship_zip_code" id="ship_zip_code" type="text" class="form-control">    
                            </div> 
                                    </div>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="order-notes">
                                     <label for="order_note">Order Notes</label>
                                    <textarea id="order_note" name="order_note" class="form-control" placeholder="Notes about your order, e.g. special notes for delivery."></textarea>
                                </div>    
                            </div>

                            <div style="display: none;"> 
                            {!! Form::select('roles[]', $roles, isset($user) ? $user->roles->pluck('id')->toArray() : null,  ['class' => 'form-control select2-selection__rendered roleselect']) !!} </div>                                                   
                        </div>
                     
                </div>
                <div class="col-lg-12 col-md-12">
                     
                    <h3>Your order</h3> 
                        <div class="order_table table-responsive">
                            <table style="width: 100%">
                                <thead>
                                    <tr>
                                        <th>Product</th>
                                        <th>Total</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @php $total_price = 0; @endphp

                                    @if(count(session('cart'))>0)
                                        @foreach(session('cart') as $item)
                                            @php
                                                $unit_price = $item['unit_price'] * $item['quantity'];
                                                $total_price = $total_price + $unit_price;
                                            @endphp

                                            @if($item['product_id'])
                                            <tr>
                                                <td> {{$item['product_name']}} <strong> × {{$item['quantity']}}</strong></td>
                                                <td> {!!currency()!!} {{number_format($item['quantity']*$item['unit_price'])}}</td>
                                            </tr>
                                            @endif
                                        @endforeach
                                    @endif
                                </tbody>
                                <tfoot>
                                    <tr>
                                        <th>Subtotal</th>
                                        <td>{!!currency()!!} {{number_format($total_price,2)}}</td>
                                    </tr>
                                    <tr>
                                        <th>GST (18%)</th>
                                        <td>
                                        @php
                                            $x = 18;   
                                            $percentage = ($x*$total_price)/100;
                                        @endphp
                                        {!!currency()!!} {{number_format($percentage,2)}}</td>
                                    </tr>
                                    <!--<tr>
                                        <th>Shipping</th>
                                        <td><strong>$5.00</strong></td>
                                    </tr> -->
                                    <tr class="order_total" id="totDiv" style="display: none;">
                                        <th>Total</th>
                                        @php
                                            $tot = $percentage + $total_price;
                                        @endphp
                                       <input type="hidden" name="total_val" id="total_val" value="{{$tot}}">
                                        <td>{!!currency()!!} <span id="totalprice">{{number_format($tot)}}.00</span> </td>
                                    </tr>
                                    <tr class="order_total" id="disDiv" style="display: none;">
                                        <th>Discount (-)</th>
                                        <input type="hidden" name="discount_price" id="discount_price">
                                        <td>{!!currency()!!} <span id="discountTot">{{number_format($tot)}}.00</span></td>
                                    </tr>

                                    <tr class="order_total">
                                        <th>Grand Total</th>
                                        <input type="hidden" name="gtotal_price" id="gtotal_price">
                                        <td><strong>{!!currency()!!} <span id="grandTot">{{number_format($tot)}}.00</span> </strong></td>
                                    </tr>
                                </tfoot>
                            </table>     
                        </div>
                        <div class="payment_method">
                           <!-- <div class="panel-default">
                                <input id="payment" name="check_method" type="radio" data-target="createp_account" />
                                <label for="payment" data-toggle="collapse" data-target="#method" aria-controls="method">Create an account?</label>

                                <div id="method" class="collapse one" data-parent="#accordion">
                                    <div class="card-body1">
                                       <p>Please send a check to Store Name, Store Street, Store Town, Store State / County, Store Postcode.</p>
                                    </div>
                                </div>
                            </div> 
                           <div class="panel-default">
                                <input id="payment_defult" name="check_method" type="radio" data-target="createp_account" />
                                <label for="payment_defult" data-toggle="collapse" data-target="#collapsedefult" aria-controls="collapsedefult">Razorpay <img src="{{url('/')}}/assets/frontend/img/icon/papyel.png" alt=""></label>

                                <div id="collapsedefult" class="collapse one" data-parent="#accordion">
                                    <div class="card-body1">
                                       <p>Pay via Razorpay; you can pay with your credit card if you don’t have a Razorpay account.</p> 
                                    </div>
                                </div>
                            </div> -->

                            <img src="{{url('/')}}/assets/frontend/img/icon/papyel.png" alt="">

                            <div class="order_button">

                            @php 
                              $amount=$tot*1000;
                            @endphp

                            <button type="button" class="button button-primary" onclick="submitFrm()" style="margin: 25px 10px; width: 100% ">Proceed to PayPal</button>

                            </div>    
                        </div>
                        @csrf 
                    </form>

                    <form action="{{url('/')}}/success" id="paymentFrm" method="POST" style="display: none; width: 100%;">         
                        <script src="https://checkout.razorpay.com/v1/checkout.js"
                                data-key="{{$_ENV['RAZOR_KEY']}}"
                                data-amount="{{$amount}}"
                                data-currency="INR"
                                data-buttonclass="button-info"
                                data-image="{{url('/')}}/assets/images/logo/logo.png"
                                data-theme.color="#428bfa">
                        </script>
                        <input type="hidden" name="razorpay_order_id" id="razorpay_order_id" value="order_DadO9KVWHlwe1Y">
                        <input type="hidden" name="name" id="payment_name">
                          <input type="hidden" name="description" id="description">
                          <input type="hidden" name="prefill[name]" id="prefill_name" >
                          <input type="hidden" name="prefill[contact]" id="prefill_phone_no">
                          <input type="hidden" name="prefill[email]" id="prefill_email">
                        <input type="hidden" name="_token" value="{!!csrf_token()!!}">
                    </form>
                </div>
      
                </div>
            </div>
        </div>
        <!--Export Data Table End-->
    </div>
</div><!-- Content Body End -->


<script type="text/javascript">

    $('#payment_name').val();
    $('#description').val($("#order_note").val());
    $('#prefill_name').val($("#name").val());
    $('#prefill_phone_no').val($("#phone_no").val());
    $('#prefill_email').val($("#email").val());

    $(".billing").on('change', function () {
        $("#collapsetwo").hide();

        if ($("#shipaddress").is(":checked")==true) {
             $("#collapsetwo").show();
            $('#ship_'+this.id).val(this.value);
        } 
    });

    $("#shipaddress").on('change', function () {
        if($(this).prop('checked')==true){
            $("#collapsetwo").show();

            $('.billing').each(function (index, value) {
                var id = $(this).attr('id');
                $('#ship_'+this.id).val($("#"+id).val());
            });

            var cityid = $("#city option:selected").val();
            var cityname = $("#city option:selected").text();

            var select = document.createElement("select");
            select.id = "shipcity";
            select.className = "form-control required";
            select.name = "shipcity";
            $('#shipcity_div').html(select);

            var option = document.createElement("option");
            option.value = cityid;
            option.text = cityname;
            select.appendChild(option); 
        } else {
            $("#collapsetwo").hide();

            $('.billing').each(function (index, value) {
                var id = $(this).attr('id');
                $('#ship_'+this.id).val('');
            });
        }
    });

    function submitFrm() {
        if($("#name").val()=='' || $("#phone_no").val()=='' || $("#address").val()=='' || $("#state").val()=='' || $("#city").val()=='' || $("#zip_code").val()=='' || $("#ship_name").val()=='' || $("#ship_phone_no").val()=='') {
            swal({
                title: "Warning!",
                text: "Please enter all the mandatory fields!",
                icon: "warning"
            });
        } else {
            $.ajax("{{ url('/') }}/proceed_payment", {
                type: 'POST',  
                data: $('#checkoutFrm').serialize(), 
                success: function (response) {

                    $('#payment_name').val($("#name").val());
                    $('#description').val($("#order_note").val());
                    $('#prefill_name').val($("#name").val());
                    $('#prefill_phone_no').val($("#phone_no").val());
                    $('#prefill_email').val($("#email").val());

                    $("#razorpay_order_id").val(response);
                    $("#paymentFrm").submit();
                }      
            });
        }
    }

    function getCity(val) {
        var sid=val;
        $('#city_div').html('');
        var select = document.createElement("select");
            select.id = "city";
            select.className = "form-control required";
            select.name = "city";
            $('#city_div').html(select);
        $.ajax({
            type:"GET",
            headers: { 'X-CSRF-Token' : $('meta[name=_token]').attr('content') },
            url:"{{ url('/') }}/members/GET-CITY",
            data:{SID:sid,_token:$('meta[name=_token]').attr('content')},
            async:false,
            dataType:"JSON",
            completed:function(e, x, settings, exception){ajax_errors(e, x, settings, exception)},
            error:function(e, x, settings, exception){ajax_errors(e, x, settings, exception)},

            success:function(response){

                $('#city').find('option').remove().end();
                $('#city').append('<option value="" disabled selected>Select a City</option>');

                for(var i=0;i<response.length;i++){
                    var option = document.createElement("option");
                    option.value = response[i]['CITYID'];
                    option.text = response[i]['CITYNAME'];
                    select.appendChild(option);
                }
            }
        });

        $('#city').attr('data-live-search',true);
        getShipCity(val);

    }

    function getShipCity(val) {
        $('#shipcity_div').html('');
        var sid=val;
        var select = document.createElement("select");
            select.id = "shipcity";
            select.className = "form-control required";
            select.name = "shipcity";
            $('#shipcity_div').html(select);
        $.ajax({
            type:"GET",
            headers: { 'X-CSRF-Token' : $('meta[name=_token]').attr('content') },
            url:"{{ url('/') }}/members/GET-CITY",
            data:{SID:sid,_token:$('meta[name=_token]').attr('content')},
            async:false,
            dataType:"JSON",
            completed:function(e, x, settings, exception){ajax_errors(e, x, settings, exception)},
            error:function(e, x, settings, exception){ajax_errors(e, x, settings, exception)},

            success:function(response){

                $('#shipcity').find('option').remove().end();
                $('#shipcity').append('<option value="" disabled selected>Select a City</option>');

                for(var i=0;i<response.length;i++){
                    var option = document.createElement("option");
                    option.value = response[i]['CITYID'];
                    option.text = response[i]['CITYNAME'];
                    select.appendChild(option);
                }
            }
        });

        $('#shipcity').attr('data-live-search',true);
    }

    function applyCoupon() {
        if($("#coupon_code").val()=='') {
            responseMsg('Enter coupon code!','Warning!','warning');
        } else {
           $.ajax("{{ url('/') }}/calculate_discount", {
                type: 'GET',  
                data: { "coupon_code": $("#coupon_code").val() },
                success: function (response) {
                    if(response==0) {
                        responseMsg('Invalid coupon code!','Error!','error');
                    } else {
                        $("#totDiv,#disDiv").show();
                        var grandTot = $("#total_val").val();

                        var gTot = grandTot - parseInt(response);
                        $("#discountTot").text(currencyFormat(parseInt(response)));
                        $("#discount_price").val(parseInt(response));
                        $("#grandTot").text(currencyFormat(gTot));
                        $("#gtotal_price").val(gTot);
                        
                        responseMsg('Discount coupon applied successfully!','Success!','success');
                    }
                }      
            }); 
        }
    }

    function currencyFormat(num) {
      return num.toFixed(2).replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,')
    }
</script>

<style type="text/css">
    .checkout_form input[type="submit"] { 
        background: #00aeef;
        border: 0;
        color: #ffffff;
        display: inline-block;
        font-size: 12px;
        font-weight: 700;
        height: 34px;
        line-height: 21px;
        padding: 5px 20px;
        text-transform: uppercase;
        cursor: pointer;
        -webkit-transition: 0.3s;
        transition: 0.3s;
        margin-left: 20px;
        border-radius: 20px;
        margin-top : 5%;
    }
</style>
@endsection