@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>
    
    <section class="main_content_area">
        <div class="container">   
            <div class="account_dashboard">
                <div class="row">
                    <div class="col-sm-12 col-md-3 col-lg-3">
                        <!-- Nav tabs -->
                        <div class="dashboard_tab_button">
                            <ul role="tablist" class="nav flex-column dashboard-list">
                                {{-- <li><a href="#dashboard" data-bs-toggle="tab" class="nav-link active">Dashboard</a></li> --}}
                                <li> <a href="#orders" data-bs-toggle="tab" class="nav-link">Orders</a></li>
                                {{-- <li><a href="#downloads" data-bs-toggle="tab" class="nav-link">Downloads</a></li> --}}
                                {{-- <li><a href="#address" data-bs-toggle="tab" class="nav-link">Addresses</a></li>
                                <li><a href="#account-details" data-bs-toggle="tab" class="nav-link">Account details</a></li> --}}
                                <li><a href="{{route('logout')}}" class="nav-link">logout</a></li>
                            </ul>
                        </div>    
                    </div>
                    <div class="col-sm-12 col-md-9 col-lg-9">
                        <!-- Tab panes -->
                        <div class="tab-content dashboard_content">
                            {{-- <div class="tab-pane fade show active" id="orders">
                                <h3>Dashboard </h3>
                                <p>From your account dashboard. you can easily check &amp; view your <a href="#">recent orders</a>, manage your <a href="#">shipping and billing addresses</a> and <a href="#">Edit your password and account details.</a></p>
                            </div> --}}
                            <div class="tab-pane fade show active" id="orders">
                                <h3>Orders</h3>
                                <div class="table-responsive">
                                    <table class="table">
                                        <thead>
                                            <tr>
                                                <th>N<u>o</u></th>
                                                <th>Product</th>
                                                <th class="product_thumb">Image</th>
                                                <th>Date</th>
                                                <th>Status</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($checkoutProduct as $checkoutVal)
                                                <tr>
                                                    <td class="sn">{{$loop->iteration}}</td>
                                                    <td>{{$checkoutVal->product->title}}</td>
                                                    <td><img src="{{ URL::asset('storage/assets/uploads/products/'.$checkoutVal->product->id.'/'.$checkoutVal->product->productImage->main_image) }}" alt="" width="25%"></td>
                                                    <td>{{$checkout->created_at}}</td>
                                                    <td><span class="success">{{$checkout->delivery_status}}</span></td>
                                                </tr>
                                            @endforeach
                                            
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            {{-- <div class="tab-pane fade" id="downloads">
                                <h3>Downloads</h3>
                                <div class="table-responsive">
                                    <table class="table">
                                        <thead>
                                            <tr>
                                                <th>Product</th>
                                                <th>Downloads</th>
                                                <th>Expires</th>
                                                <th>Download</th>	 	 	 	
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>Shopnovilla - Free Real Estate PSD Template</td>
                                                <td>May 10, 2018</td>
                                                <td><span class="danger">Expired</span></td>
                                                <td><a href="#" class="view">Click Here To Download Your File</a></td>
                                            </tr>
                                            <tr>
                                                <td>Organic - ecommerce html template</td>
                                                <td>Sep 11, 2018</td>
                                                <td>Never</td>
                                                <td><a href="#" class="view">Click Here To Download Your File</a></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="tab-pane" id="address">
                               <p>The following addresses will be used on the checkout page by default.</p>
                                <h4 class="billing-address">Billing address</h4>
                                <a href="#" class="view">Edit</a>
                                <p><strong>Bobby Jackson</strong></p>
                                <address>
                                  <span><strong>City:</strong> Seattle</span>,
                                  <br>
                                  <span><strong>State:</strong> Washington(WA)</span>,
                                  <br>
                                  <span><strong>ZIP:</strong> 98101</span>,
                                  <br>
                                  <span><strong>Country:</strong> USA</span>
                                </address>   
                            </div>
                            <div class="tab-pane fade" id="account-details">
                                <h3>Account details </h3>
                                <div class="login">
                                    <div class="login_form_container">
                                        <div class="account_login_form">
                                            <form action="#">
                                                <p>Already have an account? <a href="#">Log in instead!</a></p>
                                                <div class="input-radio">
                                                    <span class="custom-radio"><input type="radio" value="1" name="id_gender"> Mr.</span>
                                                    <span class="custom-radio"><input type="radio" value="1" name="id_gender"> Mrs.</span>
                                                </div> <br>
                                                <label>First Name</label>
                                                <input type="text" name="first-name">
                                                <label>Last Name</label>
                                                <input type="text" name="last-name">
                                                <label>Email</label>
                                                <input type="text" name="email-name">
                                                <label>Password</label>
                                                <input type="password" name="user-password">
                                                <label>Birthdate</label>
                                                <input type="text" placeholder="MM/DD/YYYY" value="" name="birthday">
                                                <span class="example">
                                                  (E.g.: 05/31/1970)
                                                </span>
                                                <br>
                                                <span class="custom_checkbox">
                                                    <input type="checkbox" value="1" name="optin">
                                                    <label>Receive offers from our partners</label>
                                                </span>
                                                <br>
                                                <span class="custom_checkbox">
                                                    <input type="checkbox" value="1" name="newsletter">
                                                    <label>Sign up for our newsletter<br><em>You may unsubscribe at any moment. For that purpose, please find our contact info in the legal notice.</em></label>
                                                </span>
                                                <div class="save_button primary_btn default_button">
                                                    <a href="#">Save</a>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div> --}}
                        </div>
                    </div>
                </div>
            </div>  
        </div>        	
    </section>	
    
<!-- 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