@extends('layouts.master')
@section('title') Aramian Brother`s Jewelry @endsection
<meta name="csrf-token" content="{{ csrf_token() }}">
@section('content')
@php
    use App\Helpers\Helpers;
@endphp
{{-- <script
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCz9wx7Byp1XvSJLLrrMsJg3hQ3a0Z6bDo&callback=initAutocomplete&libraries=places&v=weekly"
            defer
    src="http://maps.googleapis.com/maps/api/js?libraries=places" type="text/javascript">
</script> --}}
{{-- <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCz9wx7Byp1XvSJLLrrMsJg3hQ3a0Z6bDo&libraries=places"></script> --}}
<style>
    /* Set the size of the map */
    #map {
        height: 100vh; /* Full screen height */
        width: 100%;   /* Full screen width */
    }
</style>
    <!--breadcrumbs area start-->
    <div class="breadcrumbs_area">
        <div class="container">   
            <div class="row">
                <div class="col-12">
                    <div class="breadcrumb_content">
                        
                    </div>
                </div>
            </div>
        </div>         
    </div>
    @if (session('success'))
        <div class="alert alert-success">
            {{ session('success') }}
        </div>
    @endif
    @if (session('error'))
        <div class="alert alert-danger">
            {{ session('error') }}
        </div>
    @endif
    @if($errors)
        @foreach ($errors->all() as $error)
            <div class="alert alert-danger">{{ $error }}</div>
        @endforeach
    @endif
    <!--breadcrumbs area end-->
    <div id="ajax-danger-message" class="alert alert-danger" style="display: none;"></div>
    
    <!--shopping cart area start -->
    <div class="Checkout_section" id="accordion">
        <div class="container">
             <div class="row">
                <div class="col-12">
                     {{-- <div class="user-actions">
                         <h3> 
                             <i class="fa fa-file-o" aria-hidden="true"></i>
                             Returning customer?
                             <a class="Returning" href="#" data-bs-toggle="collapse" data-bs-target="#checkout_login" aria-expanded="true">Click here to login</a>     
 
                         </h3>
                          <div id="checkout_login" class="collapse" data-parent="#accordion">
                             <div class="checkout_info">
                                 <p>If you have shopped with us before, please enter your details in the boxes below. If you are a new customer please proceed to the Billing & Shipping section.</p>  
                                 <form action="#">  
                                     <div class="form_group">
                                         <label>Username or email <span>*</span></label>
                                         <input type="text">     
                                     </div>
                                     <div class="form_group">
                                         <label>Password  <span>*</span></label>
                                         <input type="text">     
                                     </div> 
                                     <div class="form_group group_3 ">
                                         <button type="submit">Login</button>
                                         <label for="remember_box">
                                             <input id="remember_box" type="checkbox">
                                             <span> Remember me </span>
                                         </label>     
                                     </div>
                                     <a href="#">Lost your password?</a>
                                 </form>          
                             </div>
                         </div>    
                     </div> --}}
                     {{-- <div class="user-actions">
                         <h3> 
                             <i class="fa fa-file-o" aria-hidden="true"></i>
                             Returning customer?
                             <a class="Returning" href="#" data-bs-toggle="collapse" data-bs-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="#">
                                     <input placeholder="Coupon code" type="text">
                                     <button type="submit">Apply coupon</button>
                                 </form>
                             </div>
                         </div>    
                     </div>     --}}
                </div>
             </div>
             <form action="{{route('checkout.order')}}" method="POST">
                <div class="checkout_form">
                    <div class="row">
                        <div class="col-lg-6 col-md-6">
                            
                                @csrf
                                <h3>Shipping Details</h3>
                                <div class="row">
                                    <div class="col-lg-12 mb-20">
                                        <label>Full Name <span>*</span></label>
                                        <input type="text" name="fullname" value="{{old('fullname')}}">  
                                        @if ($errors->has('fullname'))
                                        <span class="invalid-feedback" role="alert" style="display: block">
                                            <strong>{{ $errors->first('fullname') }}</strong>
                                        </span>
                                        @endif  
                                    </div>
                                    <div class="col-12 mb-20">
                                        <label>Street address  <span>*</span></label>
                                        <div class="controls">
                                            <input id="search-input" type="text" placeholder="Search for places" name="street_address" value="{{old('street_address')}}">
                                        </div>
                                        @if ($errors->has('street_address'))
                                        <span class="invalid-feedback" role="alert" style="display: block">
                                            <strong>{{ $errors->first('street_address') }}</strong>
                                        </span>
                                        @endif    
                                    </div>
                                    <div class="col-12 mb-20">
                                        <input placeholder="Apartment, suite, unit etc. (optional)" type="text" name="apart" value="{{old('apart')}}">   
                                    </div>
                                    <div class="col-12 mb-20">
                                        <label for="country">Country <span>*</span></label>
                                        <select class="niceselect_option" name="country" id="country"> 
                                            @foreach ($country as $countryVal)
                                                <option value="{{$countryVal->id}}">{{$countryVal->name}}</option>         
                                            @endforeach
                                        </select>
                                        @if ($errors->has('country'))
                                        <span class="invalid-feedback" role="alert" style="display: block">
                                            <strong>{{ $errors->first('country') }}</strong>
                                        </span>
                                        @endif 
                                    </div>
                                    <div class="col-12 mb-20">
                                        <label for="state">State/Province <span>*</span></label>
                                        <select class="niceselect_option" name="state_province" id="state"> 
                                            <option value="">Choose</option>         
                                            @foreach ($state as $stateVal)
                                                <option value="{{$stateVal->id}}"
                                                    {{ old('state_province') == $stateVal->id ? 'selected' : '' }}>
                                                    {{$stateVal->name}}
                                                </option>
                                            @endforeach
                                        </select>
                                        @if ($errors->has('state_province'))
                                        <span class="invalid-feedback" role="alert" style="display: block">
                                            <strong>{{ $errors->first('state_province') }}</strong>
                                        </span>
                                        @endif 
                                    </div>
                                    <div class="col-12 mb-20">
                                        <label>Town / City <span>*</span></label>
                                        <input  type="text" name="town_city" value="{{old('town_city')}}">    
                                        @if ($errors->has('town_city'))
                                        <span class="invalid-feedback" role="alert" style="display: block">
                                            <strong>{{ $errors->first('town_city') }}</strong>
                                        </span>
                                        @endif 
                                    </div> 
                                    <div class="col-12 mb-20">
                                        <label>Zip/Postal Code<span>*</span></label>
                                        <input  type="text" name="zip" value="{{old('zip')}}">  
                                        @if ($errors->has('zip'))
                                        <span class="invalid-feedback" role="alert" style="display: block">
                                            <strong>{{ $errors->first('zip') }}</strong>
                                        </span>
                                        @endif   
                                    </div> 
                                    <div class="col-lg-6 mb-20">
                                        <label>Phone<span>*</span></label>
                                        <input type="tel" name="phone_number" value="{{old('phone_number')}}"> 
                                        @if ($errors->has('phone_number'))
                                        <span class="invalid-feedback" role="alert" style="display: block">
                                            <strong>{{ $errors->first('phone_number') }}</strong>
                                        </span>
                                        @endif
                                    </div> 
                                    <div class="col-lg-6 mb-20">
                                        <label> Email Address   <span>*</span></label>
                                        <input type="email" name="email" value="{{old('email')}}"> 
                                        @if ($errors->has('email'))
                                        <span class="invalid-feedback" role="alert" style="display: block">
                                            <strong>{{ $errors->first('email') }}</strong>
                                        </span>
                                        @endif
                                    </div>
                                    <div class="col-12 mb-20">
                                        <input id="account" type="checkbox" data-bs-target="createp_account" name="account" value="1" {{ old('account') ? 'checked' : '' }}/>
                                        <label for="account" >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">  
                                            </div>
                                            @if ($errors->has('password'))
                                            <span class="invalid-feedback" role="alert" style="display: block">
                                                <strong>{{ $errors->first('password') }}</strong>
                                            </span>
                                            @endif
                                        </div>
                                    </div>
                                    {{-- <div class="col-12 mb-20">
                                        <input id="toggleCheckbox" type="checkbox" data-bs-target="createp_account" />
                                        <label class="righ_0" for="toggleCheckbox" >Ship to a different address?</label>
    
                                        <div id="collapsetwo" class="collapse one" data-parent="#accordion">
                                            <div class="row">
                                                <div class="col-lg-12 mb-20">
                                                    <label>Full Name <span>*</span></label>
                                                    <input type="text">    
                                                </div>
                                                <div class="col-12 mb-20">
                                                    <label>Street address  <span>*</span></label>
                                                    <input placeholder="House number and street name" type="text">     
                                                </div>
                                                <div class="col-12 mb-20">
                                                    <input placeholder="Apartment, suite, unit etc. (optional)" type="text">     
                                                </div>
                                                <div class="col-12 mb-20">
                                                    <label for="country">Country <span>*</span></label>
                                                    <select class="niceselect_option" name="cuntry" id="country"> 
                                                        @foreach ($country as $countryVal)
                                                            <option value="{{$countryVal->id}}">{{$countryVal->name}}</option>         
                                                        @endforeach
                                                    </select>
                                                </div>
                                                <div class="col-12 mb-20">
                                                    <label for="country">State/Province <span>*</span></label>
                                                    <select class="niceselect_option" name="cuntry" id="country"> 
                                                        <option value="">Choose</option>         
                                                        @foreach ($state as $stateVal)
                                                            <option value="{{$stateVal->id}}">{{$stateVal->name}}</option>         
                                                        @endforeach
                                                    </select>
                                                </div>
                                                <div class="col-12 mb-20">
                                                    <label>Town / City <span>*</span></label>
                                                    <input  type="text">    
                                                </div> 
                                                <div class="col-12 mb-20">
                                                    <label>Zip/Postal Code<span>*</span></label>
                                                    <input  type="text">    
                                                </div> 
                                                <div class="col-lg-6 mb-20">
                                                    <label>Phone<span>*</span></label>
                                                    <input type="text"> 
                                                </div> 
                                                <div class="col-lg-6 mb-20">
                                                    <label> Email Address   <span>*</span></label>
                                                    <input type="text"> 
                                                </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_notes" 
                                            placeholder="Notes about your order, e.g. special notes for delivery.">{{old('order_notes')}}</textarea>
                                        </div>    
                                    </div>     	    	    	    	    	    	    
                                </div>
                        </div>
                        <div class="col-lg-6 col-md-6">
                            
                                <h3>Your order</h3> 
                                <div class="order_table table-responsive">
                                    <table>
                                        <thead>
                                            <tr>
                                                <th>Product</th>
                                                <th>Total</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @php
                                                $subTotal=0;
                                                $discountPrice = 0;
                                            @endphp
                                            @foreach ($addCart as $cart)
                                            
                                                <tr>
                                                    <td> {{$cart->product->title}}<strong> × {{$cart->products_count}}</strong></td>
                                                    <input type="hidden" value="{{$cart->product->id}}" name="products[]">
                                                    @php
                                                        if($cart->product->discount_price > 0)
                                                            $price=$cart->product->discount_price;
                                                        else{
                                                            $price=$cart->product->price;
                                                        }

                                                        $cartTotal = $price * $cart->products_count
                                                    @endphp
                                                    <td> {{ Helpers::getUserNumberFormat()->format($cartTotal) }}</td>
                                                </tr>
                                            @php
                                                $subTotal+=$price * $cart->products_count;
                                                $discountPrice+=$cart->product->price * $cart->products_count;
                                            @endphp
                                            @endforeach
                                        </tbody>
                                        <tfoot>
                                            <tr>
                                                <th>Cart Subtotal</th>
                                                <td>{{ Helpers::getUserNumberFormat()->format($subTotal) }}</td>
                                            </tr>
                                            <tr>
                                                <th>Shipping</th>
                                                <td><strong>$0</strong></td>
                                            </tr>
                                            <tr>
                                                <th>Tax</th>
                                                @php
                                                    if($subTotal > 0){
                                                            $vat = $subTotal * 10.25 /100;
                                                    }else{
                                                            $vat = 0;
                                                    }
                                                @endphp
                                                <td><strong> {{ Helpers::getUserNumberFormat()->format($vat) }}</strong></td>
                                            </tr>
                                            <tr class="order_total">
                                                @php
                                                    $discountSubTotal = $discountPrice+$vat;
                                                    $total = $subTotal+$vat
                                                @endphp
                                                @if ($total < $discountSubTotal)
                                                    @php
                                                        $discountTotal = $discountSubTotal - $discountPrice + $vat;
                                                        // dd($discountTotal);
                                                    @endphp
                                                    <th>Discount</th>
                                                    <td><strong>{{ Helpers::getUserNumberFormat()->format($discountTotal) }}</strong></td>
                                                @endif

                                                
                                                
                                            </tr>

                                            <tr class="order_total">
                                                <th>Order Total</th>
                                                
                                                <td><strong>{{ Helpers::getUserNumberFormat()->format($total) }}</strong></td>
                                            </tr>
                                        </tfoot>
                                    </table>     
                                </div>
                                <div class="payment_method">
                                    <div class="order_button">
                                        <button  type="submit">Order</button> 
                                    </div>    
                                </div> 
                            
                        </div>
                    
                    </div> 
                </div> 
            </form>         
         </div>       
     </div>
    
     <!--shopping cart area end -->
    
<!-- JS
============================================ -->

<!-- Plugins JS -->

<script src="{{ URL::asset('storage/assets/js/vendor/jquery-3.4.1.min.js') }}"></script>
<script src="{{ URL::asset('storage/assets/js/popper.js') }}"></script>
<script src="{{ URL::asset('storage/assets/js/bootstrap.min.js') }}"></script>
<script src="{{ URL::asset('storage/assets/js/plugins.js') }}"></script>
<script src="{{ URL::asset('storage/assets/js/owl.carousel.main.js') }}"></script>
<script src="{{ URL::asset('storage/assets/js/jquery.nice.select.js') }}"></script>
<script src="{{ URL::asset('storage/assets/js/scrollup.js') }}"></script>
<script src="{{ URL::asset('storage/assets/js/ajax.chimp.js') }}"></script>
<script src="{{ URL::asset('storage/assets/js/jquery.ui.js') }}"></script>
<script src="{{ URL::asset('storage/assets/js/jquery.elevatezoom.js') }}"></script>
<script src="{{ URL::asset('storage/assets/js/imagesloaded.js') }}"></script>
<script src="{{ URL::asset('storage/assets/js/isotope.main.js') }}"></script>
<script src="{{ URL::asset('storage/assets/js/jqquery.ripples.js') }}"></script>
<script src="{{ URL::asset('storage/assets/js/jquery.cookie.js') }}"></script>
<script src="{{ URL::asset('storage/assets/js/bpopup.js') }}"></script>
<script src="{{ URL::asset('storage/assets/js/main.js') }}"></script>

<script>

    $(document).ready(function () {
    
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
    
        $('.remove-from-cart').on('click', function () {
            var productId = $(this).data('id');
    
            $.ajax({
                url: '/cart/remove/' + productId,
                method: 'POST',
                success: function (response) {
                    if (response.success) {
                        $('#ajax-danger-message').text(response.message).show().delay(5000).fadeOut();
                        window.location.reload();
                        // Optionally update the UI to reflect the wishlist addition
                    } else {
                        alert('Something went wrong. Please try again.');
                    }
                },
                error: function (xhr) {
                    alert('An error occurred: ' + xhr.status + ' ' + xhr.statusText);
                }
            });
        });

        
    });

    $(document).ready(function() {
        $("#toggleCheckbox").change(function() {
            if (this.checked) {
                $("#collapsetwo").show();  // Show the element when checked
            } else {
                $("#collapsetwo").hide();  // Hide the element when unchecked
            }
        });
    });

    $(document).ready(function() {
        $("#account").change(function() {
            if (this.checked) {
                $("#collapseOne").show();  // Show the element when checked
            } else {
                $("#collapseOne").hide();  // Hide the element when unchecked
            }
        });

        if($("#account").is(":checked")) {
            $("#collapseOne").show();
        }
    });
</script>

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCz9wx7Byp1XvSJLLrrMsJg3hQ3a0Z6bDo&v=3.exp&sensor=false&libraries=places"></script>
<script>
    function initialize() {
        var input = document.getElementById('search-input');
        new google.maps.places.Autocomplete(input);
    }

    google.maps.event.addDomListener(window, 'load', initialize);
</script>

@endsection