@extends('site.master')
@section('title','My Account')
@section('content')
    <!-- Page Banner Section Start -->
    @include('site.layouts.breadcrumb')
    <style>
        .sidebar-category li.active {
            border-left: 5px solid #ff5252;
        }

        /*theme Dark CSS*/
        .theme-dark #main-content {
            background: #1d1d1d !important;
        }

        .theme-dark #main-content .h5,
        #main-content .text-uppercase {
            font-weight: 600;
            margin-bottom: 0;
            color: #000;
        }

        #main-content .h5 + div {
            font-size: 0.9rem;
            color: #cbcbcb;

        }

        /*END DARK CSS*/

        #main-content {
            padding: 30px;
            border-radius: 15px
        }

        #main-content .h5,
        #main-content .text-uppercase {
            font-weight: 600;
            margin-bottom: 0

        }

        #main-content .h5 + div {
            font-size: 0.9rem
        }

        #main-content .box {
            padding: 10px;
            border-radius: 6px;
            width: 170px;
            height: 90px;
            margin-right: 10px;
        }

        #main-content .box img {
            width: 40px;
            height: 40px;
            object-fit: contain
        }

        #main-content .box .tag {
            font-size: 0.9rem;
            color: #000;
            font-weight: 500
        }

        #main-content .box .number {
            font-size: 1.5rem;
            font-weight: 600
        }

        .order {
            padding: 10px 30px;
            min-height: 150px
        }

        .order .order-summary {
            height: 100%
        }

        .order .blue-label {
            background-color: #aeaeeb;
            color: #0046dd;
            font-size: 0.9rem;
            padding: 0px 3px
        }

        .order .green-label {
            background-color: #a8e9d0;
            color: #008357;
            font-size: 0.9rem;
            padding: 0px 3px
        }

        .order .fs-8 {
            font-size: 0.85rem
        }

        .order .rating img {
            width: 20px;
            height: 20px;
            object-fit: contain
        }

        .order .rating .fa,
        .order .rating .far {
            font-size: 0.9rem
        }

        .order .rating .fa {
            color: #daa520
        }

        .order .status {
            font-weight: 600
        }

        .order .btn.btn-primary {
            background-color: #fff;
            color: #4e2296;
            border: 1px solid #4e2296
        }

        .order .btn.btn-primary:hover {
            background-color: #4e2296;
            color: #fff
        }

        .order .progressbar-track {
            margin-top: 20px;
            margin-bottom: 20px;
            position: relative
        }

        .order .progressbar-track .progressbar {
            list-style: none;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-left: 0rem
        }

        .order .progressbar-track .progressbar li {
            font-size: 1.5rem;
            border: 1px solid #333;
            padding: 8px 10px;
            border-radius: 50%;
            background-color: #dddddd;
            z-index: 100;
            position: relative
        }

        .order .progressbar-track .progressbar li.green {
            border: 1px solid #007965;
            background-color: #d5e6e2
        }

        .order .progressbar-track .progressbar li::after {
            position: absolute;
            font-size: 0.9rem;
            top: 50px;
            left: 0px
        }

        #tracker {
            position: absolute;
            border-top: 1px solid #bbb;
            width: 100%;
            top: 25px
        }

        #step-1::after {
            content: 'Placed'
        }

        #step-2::after {
            content: 'Accepted';
            left: -5px
        }

        #step-3::after {
            content: 'Pending'
        }

        #step-4::after {
            content: 'Processing';
        }

        #step-5::after {
            content: 'Shipped';

        }

        #step-6::after {
            content: 'Delivered';
            left: -5px
        }
        #step-cancel::after {
            content: 'Canceled';
            left: -10px
        }

        .bg-purple {
            background-color: #55009b
        }

        .bg-light {
            background-color: #f0ecec !important
        }

        .green {
            color: #007965 !important
        }
        .red {
            color: red !important
        }


        @media (max-width: 1199.5px) {
            nav ul li {
                padding: 0 10px
            }
        }

        @media (max-width: 500px) {
            .order .progressbar-track .progressbar li {
                font-size: 1rem
            }

            .order .progressbar-track .progressbar li::after {
                font-size: 0.8rem;
                top: 35px
            }

            #tracker {
                top: 20px
            }
        }

        @media (max-width: 440px) {
            #main-content {
                padding: 20px
            }

            .order {
                padding: 20px
            }

            #step-4::after {
                left: -5px
            }
        }

        @media (max-width: 395px) {
            .order .progressbar-track .progressbar li {
                font-size: 0.8rem
            }

            .order .progressbar-track .progressbar li::after {
                font-size: 0.7rem;
                top: 35px
            }

            #tracker {
                top: 15px
            }

            .order .btn.btn-primary {
                font-size: 0.85rem
            }
            #main-content .box {
                width: 144px;
            }

            #step-1::after {
                font-size:8px
            }

            #step-2::after {
                font-size:8px
            }

            #step-3::after {
                font-size:8px
            }

            #step-4::after {
                font-size:8px
            }

            #step-5::after {
                font-size:8px
            }
            #step-6::after {
                font-size:8px
            }

            #step-cancel::after {
                font-size:10px
            }
            .order .progressbar-track .progressbar li {
                padding: 4px 10px;
            }
        }

        @media (max-width: 355px) {
            #main-content {
                padding: 15px
            }

            .order {
                padding: 10px
            }

            #main-content .box {
                width: 144px;
            }
        }
    </style>
    <!-- Cart Page Start -->
    <div class="page-section section mt-20 mb-10">
        <div class="container-fluid">
            <div class="row">

                <div class="shop-sidebar-wrap col-xl-3 col-lg-4 col-12 order-lg-1 mb-15">
                    <div class="shop-sidebar mb-30">
                        <h4 class="title">MENU</h4>
                        <ul class="sidebar-category">
                            <li class="active"><a href="{{ route('site.myAccount') }}">My Account</a></li>
                            {{--                            <li class="active"><a href="{{ route('site.myOrder') }}">My Orders</a></li>--}}
                            <li class="active"><a href="{{ route('site.myWishlist') }}">My Wishlist</a></li>
                            <li class="active"><a href="{{ route('site.myProfile') }}">My Profile</a></li>
                            <li class="active"><a href="{{ route('site.logout') }}">Logout</a></li>
                        </ul>
                    </div>
                </div>

                <div class="col-xl-9 col-lg-8 col-12 order-lg-2 mb-50">
                    <div id="main-content" class="bg-white border">

                        <div class="row">
                            <div class="col-md-12">
                                <div class="h5" style="color: red">
                                    Hello {{ Auth::guard('customers')->user()->name }}
                                </div>

                                <div class="d-flex my-4 flex-wrap">
                                    <div class="box me-4 my-1 bg-light"><img
                                            src="https://www.freepnglogos.com/uploads/box-png/cardboard-box-brown-vector-graphic-pixabay-2.png"
                                            alt="">
                                        <div class="d-flex align-items-center mt-2">
                                            <div class="tag">Orders placed</div>
                                            <div class="ms-auto number">&nbsp;{{ $totalOrders }}</div>
                                        </div>
                                    </div>
                                    <div class="box me-4 my-1 bg-light"><img
                                            src="https://www.freepnglogos.com/uploads/shopping-cart-png/shopping-cart-campus-recreation-university-nebraska-lincoln-30.png"
                                            alt="">
                                        <div class="d-flex align-items-center mt-2">
                                            <div class="tag">Items in Cart</div>
                                            <div class="ms-auto number">
                                                &nbsp;{{ $totalProductQuantityCustomerCart }}</div>
                                        </div>
                                    </div>
                                    <div class="box me-4 my-1 bg-light"><img
                                            src="https://www.freepnglogos.com/uploads/love-png/love-png-heart-symbol-wikipedia-11.png"
                                            alt="">
                                        <div class="d-flex align-items-center mt-2">
                                            <div class="tag">Wishlist</div>
                                            <div class="ms-auto number">&nbsp;{{ $totalWishlist  }}</div>
                                        </div>
                                    </div>


                                </div>
                            </div>


                        </div>


                        <div class="text-uppercase" style="color: red">My orders</div>

                        @if($myOrders->count() == 0)
                            <h5> {{ "You did't order any product,Please go to shop.You can buy our new products." }}</h5>
                        @endif
                        @foreach($myOrders as $myOrder)
                            <div class="card">
                                <div class="order my-3 card-body ">
                                    <div class="row">
                                        <div class="col-lg-4">
                                            <div class="d-flex flex-column justify-content-between order-summary">
                                                <div class="d-flex align-items-center">
                                                    <div class="text-uppercase">Order
                                                        #{{ $myOrder->invoice_code }}</div>
                                                    <div
                                                        class="blue-label ms-auto text-uppercase">{{ \App\Lib\Enumerations\PaymentStatus::getPaymentStatus($myOrder->payment_status) }}</div>
                                                </div>
                                                <div class="fs-8">Total Amount  ৳&nbsp;
                                                    : {{ $myOrder->total_amount }}
                                                </div>
                                                <div class="fs-8">Payment Method
                                                    : {{ $myOrder->payment_method }}</div>
                                                <div class="fs-8">Order Date: {{ $myOrder->date }}</div>
                                            </div>
                                        </div>
                                        <div class="col-lg-8">
                                            <div class="d-sm-flex align-items-sm-start justify-content-sm-between">
                                                <div class="status">Delivery Status
                                                    : {{ \App\Lib\Enumerations\DeliveryStatus::getDeliveryStatusForCustomer($myOrder->delivery_status)}}</div>
                                                <button class="btn btn-info" data-toggle="modal"
                                                        data-target="#detailsModal" data-id="{{ $myOrder->id }}">order
                                                    info
                                                </button>
                                            </div>
                                            <div class="progressbar-track">
                                                <ul class="progressbar">
                                                    <li id="step-1" class="text-muted green"><i class="fa fa-gift"></i>
                                                    </li>
                                                    <li id="step-2" class="text-muted green"><i class="fa fa-check"></i>
                                                    </li>
                                                    @if($myOrder->delivery_status!=\App\Lib\Enumerations\DeliveryStatus::$CANCEL)
                                                        <li id="step-3"
                                                            class="text-muted green">
                                                            <i class="fa fa-th-large"></i></li>
                                                        <li id="step-4"
                                                            class="text-muted @if($myOrder->delivery_status !=\App\Lib\Enumerations\DeliveryStatus::$PENDING ) {{ "green" }} @endif">
                                                            <i class="fa fa-building"></i></li>
                                                        <li id="step-5"
                                                            class="text-muted @if($myOrder->delivery_status !=\App\Lib\Enumerations\DeliveryStatus::$PENDING && $myOrder->delivery_status !=\App\Lib\Enumerations\DeliveryStatus::$PROCESSING ) {{ "green" }} @endif">
                                                            <i class="fa fa-truck"></i></li>
                                                        <li id="step-6"
                                                            class="text-muted @if($myOrder->delivery_status !=\App\Lib\Enumerations\DeliveryStatus::$PENDING && $myOrder->delivery_status !=\App\Lib\Enumerations\DeliveryStatus::$PROCESSING && $myOrder->delivery_status!=\App\Lib\Enumerations\DeliveryStatus::$SHIPPED) {{ "green" }} @endif">
                                                            <i class="fa fa-check-circle"></i>
                                                        </li>
                                                    @else
                                                        <li id="step-cancel"
                                                            class="text-muted @if($myOrder->delivery_status==\App\Lib\Enumerations\DeliveryStatus::$CANCEL) {{ "red" }} @endif">
                                                            <i class="fa fa-check-circle"></i>
                                                        </li>
                                                    @endif
                                                </ul>
                                                <div id="tracker"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <br>
                        @endforeach

                    </div>
                </div>


            </div>
        </div>
    </div>
    <!-- Cart Page End -->
    <!-- Modal -->
    <div id="detailsModal" class="modal fade" role="dialog">
        <div class="modal-dialog">

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Order Details</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>

                </div>
                <div class="modal-body">

                    <div class="modal-detail-data">

                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>

        </div>
    </div>
@stop
@section('page_scripts')
    <script>
        //Modal Code
        $('#detailsModal').on('shown.bs.modal', function (e) {
            var request_id = $(e.relatedTarget).data('id');
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $.ajax({
                type: 'GET',
                url: "{{ route('site.myOrder.show') }}",
                data: "id=" + request_id,
                dataType: 'HTML',
                success: function (data) {
                },
            }).then(data => {
                $('.modal-detail-data').html(data);
                $('#detailsModal').modal("show");
            })

        });
    </script>
@endsection