@extends('layouts.front_end')
@section('title', 'My Account')
@section('content')
    <div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
        <style>
            .image-upload>input {
                display: none;
            }

            #profile-submit-button {
                display: none;
            }

            table {
                border: 1px solid #ccc;
                border-collapse: collapse;
                margin: 0;
                padding: 0;
                width: 100%;
                table-layout: fixed;
            }

            table caption {
                font-size: 1.5em;
                margin: .5em 0 .75em;
            }

            table tr {
                background-color: #fdfdfd;
                border: 1px solid #ddd;
                padding: .35em;
            }

            table th,
            table td {
                padding: .625em;
                text-align: center;
            }

            table th {
                font-size: .85em;
                letter-spacing: .1em;
                text-transform: uppercase;
            }

            @media screen and (max-width: 600px) {
                table {
                    border: 0;
                }

                table caption {
                    font-size: 1.3em;
                }

                table thead {
                    border: none;
                    clip: rect(0 0 0 0);
                    height: 1px;
                    margin: -1px;
                    overflow: hidden;
                    padding: 0;
                    position: absolute;
                    width: 1px;
                }

                table tr {
                    border-bottom: 3px solid #ddd;
                    display: block;
                    margin-bottom: .625em;
                }

                table td {
                    border-bottom: 1px solid #ddd;
                    display: block;
                    font-size: .8em;
                    text-align: right;
                }

                table td::before {
                    /*
                                            * aria-label has no advantage, it won't be read inside a table
                                            content: attr(aria-label);
                                            */
                    content: attr(data-label);
                    float: left;
                    font-weight: bold;
                    text-transform: uppercase;
                }

                table td:last-child {
                    border-bottom: 0;
                }
            }

            /* general styling */
            body {
                font-family: "Open Sans", sans-serif;
                line-height: 1.25;
            }

            /* order traking design start */
            .hh-grayBox {
                background-color: #F8F8F8;
                margin-bottom: 20px;
                padding: 35px;
                margin-top: 20px;
            }

            .pt45 {
                padding-top: 45px;
            }

            .order-tracking {
                text-align: center;
                width: 33.33%;
                position: relative;
                display: block;
            }

            .order-tracking .is-complete {
                display: block;
                position: relative;
                border-radius: 50%;
                height: 30px;
                width: 30px;
                border: 0px solid #AFAFAF;
                background-color: #f7be16;
                margin: 0 auto;
                transition: background 0.25s linear;
                -webkit-transition: background 0.25s linear;
                z-index: 2;
            }

            .order-tracking .is-complete:after {
                display: block;
                position: absolute;
                content: '';
                height: 14px;
                width: 7px;
                top: -2px;
                bottom: 0;
                left: 5px;
                margin: auto 0;
                border: 0px solid #AFAFAF;
                border-width: 0px 2px 2px 0;
                transform: rotate(45deg);
                opacity: 0;
            }

            .order-tracking.completed .is-complete {
                border-color: #27aa80;
                border-width: 0px;
                background-color: #27aa80;
            }

            .order-tracking.completed .is-complete:after {
                border-color: #fff;
                border-width: 0px 3px 3px 0;
                width: 7px;
                left: 11px;
                opacity: 1;
            }

            .order-tracking p {
                color: #A4A4A4;
                font-size: 16px;
                margin-top: 8px;
                margin-bottom: 0;
                line-height: 20px;
            }

            .order-tracking p span {
                font-size: 14px;
            }

            .order-tracking.completed p {
                color: #000;
            }

            .order-tracking::before {
                content: '';
                display: block;
                height: 3px;
                width: calc(100% - 40px);
                background-color: #f7be16;
                top: 13px;
                position: absolute;
                left: calc(-50% + 20px);
                z-index: 0;
            }

            .order-tracking:first-child:before {
                display: none;
            }

            .order-tracking.completed:before {
                background-color: #27aa80;
            }

            /* order traking design end */
        </style>

        <main>
            <!-- checkout-area -->
            <section class="checkout-area pt-50 pb-100">
                <div class="container">
                    {{-- Start My Account --}}
                    <div class="row">

                        {{-- Start Left Side --}}
                        <div class="col-md-4">
                            {{-- Start First Card --}}
                            <div class="card shadow-sm mb-3">
                                <center>
                                    <img loading="lazy" id="imagePreview" class="card-img-top rounded-circle my-2"
                                        src="{{ asset('images/' . Auth::user()->profile_photo_path) }}"
                                        style="width:100px;height:100px;" alt="Profile Photo">
                                    {{-- Start Profile Photo Change --}}
                                    <form enctype="multipart/form-data" id="profile_photo_path"
                                        action="{{ route('change-profile-photo') }}" method="POST">
                                        @csrf
                                        <div class="image-upload">
                                            <label for="file-input">
                                                <i style="font-size: 30px;" class="fas fa-camera"></i>
                                            </label>

                                            <input id="file-input" name="profile_photo_path" type="file" />
                                        </div>
                                        <button class="mb-1 mt-0 py-2 px-3" type="submit" id="profile-submit-button"
                                            style="border-radius: 80%; border: 1px solid red;font-size:14px;color: red;">Save</button>
                                    </form>
                                    {{-- End Profile Photo Change --}}
                                </center>
                                <div class="card-body pt-0 mt-0">
                                    <h6 class="card-title text-center">
                                        @if (Auth::user() && Auth::user()->Contact)
                                            {{ Auth::user()->Contact->business_name }}@endif
                                    </h6>
                                    <div class="card-title text-center font-weight-bold text-dark">
                                        @if (Auth::user())
                                            {{ Auth::user()->name }}@endif
                                    </div>
                                    <div class="card-title text-center pb-1" style="font-weight: bold;color: black;">
                                        {{ Auth::user()->mobile }}</div>
                                    @if(Auth::user()->Contact->referal_bonus==!null)
                                    <center>
                                        <div class="heder-top-guide">
                                            <a class="log-out-btn text-danger border border-danger p-1 pt-2 rounded"
                                                href="#">রেফারেল সংখ্যা : {{ $ReferralUsers->count() }}</a> <br><br>
                                            <a class="log-out-btn text-danger border border-danger p-1 pt-2 rounded"
                                                href="#">Balance: {{ $balance - $withdraw_payment }}</a>
                                        </div>
                                    </center>
                                    @endif
                                </div>
                                <ul class="list-group list-group-flush" style="font-weight: bold;">
                                    <li>
                                        @if (Auth::user())
                                            @if (Auth::user()->hasAnyRole('admin') || Auth::user()->hasAnyRole('user'))
                                    <li class="list-group-item">
                                        <a href="{{ route('dashboard') }}" class="text-dark">
                                            Admin Panel
                                        </a>
                                    </li>
                                    @endif
                                    @endif
                                    </li>
                                    @if (Auth::user()->hasAnyRole('seller'))
                                        <li class="list-group-item"><a class="text-dark"
                                                href="{{ route('vendor.vendor.dashboard') }}">সাপ্লায়ার প্যানেল </a></li>
                                    @endif

                                    @if(Auth::user()->Contact->referal_bonus==!null)
                                    <li class="list-group-item"><a class="text-dark"
                                            href="{{ route('referal') }}"><span>রেফারেল ইনকাম </span></a></li>
                                    @endif

                                    <li class="list-group-item"><a class="text-dark" href="#delivery-address"
                                            data-toggle="tab">ডেলিভারি এড্রেস</a></li>
                                    {{-- <li class="list-group-item"><a href="#basic-information" class="text-dark"
                                        data-toggle="tab">প্রোফাইল</a></li> --}}
                                    <li class="list-group-item"><a class="text-dark" href="#change-password"
                                            data-toggle="tab">পাসওয়ার্ড পরিবর্তন</a></li>
                                    {{-- <li class="list-group-item"><a class="text-dark" href="#transaction"
                                        data-toggle="tab">Transactions</a></li> --}}


                                    {{-- <li class="list-group-item"><a class="text-dark" href="#order"
                                            data-toggle="tab"><span>অর্ডার লিস্ট</span></a></li> --}}

                                    <li class="list-group-item active"><a class="text-dark" href="#order"
                                            data-toggle="tab"><span>আপনার অর্ডার লিস্ট</span></a></li>

                                    {{-- <a class="log-out-btn text-danger border border-danger p-1 pt-2 rounded"
                                            href="#"
                                            onclick="event.preventDefault();document.getElementById('logout-form').submit();"><i
                                                class="bx bx-power-off font-size-16 align-middle text-danger"></i>
                                            লগ আউট</a> --}}

{{--                                    <li class="list-group-item"><a class="text-dark" href="#order_traking"--}}
{{--                                            data-toggle="tab"><span>অর্ডার ট্র্যাকিং</span></a></li>--}}

                                    <li class="list-group-item"><a class="text-dark" href="javascript:void(0)"
                                            onclick="event.preventDefault();document.getElementById('logout-form').submit();"
                                            data-toggle="tab"><span style="color:red;">
                                                <i class="bx bx-power-off font-size-16 align-middle"></i>লগ
                                                আউট</span></a></li>
                                    <form id="logout-form" action="{{ route('logout') }}" method="POST"
                                        style="display: none;">
                                        {{ csrf_field() }}
                                    </form>
                                </ul>
                            </div>
                            {{-- End First Card --}}
                        </div>
                        {{-- End Left Side --}}

                        {{-- Start Right Side --}}
                        <div class="col-md-8">
                            {{-- Start Card For Basic Information --}}
                            <div class="card shadow-sm tab-content clearfix">
                                {{-- Start Delivery Address --}}
                                <div class="card-body basic tab-pane" id="delivery-address">
                                    <form action="{{ route('edit-shipping-address') }}" method="POST">
                                        @csrf
                                        <h5 class="card-title">ডেলিভারি এড্রেস</h5>
                                        <hr class="mt-2">
                                        {{-- <div class="row">
                                        <div class="col-6 pb-2 font-weight-bold">Delivery Address:</div>
                                        <div class="col-6 pb-2">
                                            <input class="form-control" type="shipping_address" name="shipping_address"
                                                value="@if (Auth::user()->Contact) {{Auth::user()->Contact->shipping_address}}
                                    @endif" name="email" />
                                        </div>
                                        <hr>
                                    </div> --}}
                                        <div class="row">
                                            <div class="col-sm-6">
                                                <div class="form-grp">
                                                    <label for="fName" style="color: black;">দোকানের
                                                        নাম<span>*</span></label>
                                                    <input class="form-control" type="text" name="business_name" required
                                                        value="@if (Auth::user() && Auth::user()->Contact) {{ Auth::user()->Contact->business_name }} @endif"
                                                        placeholder="আপনার দোকানের নাম লিখুন">
                                                </div>
                                            </div>
                                            <div class="col-sm-6">
                                                <div class="form-grp">
                                                    <label for="fName" style="color: black;">আপনার
                                                        নাম<span>*</span></label>
                                                    <input class="form-control" type="text" name="first_name" required
                                                        value="@if (Auth::user() && Auth::user()->Contact) {{ Auth::user()->Contact->first_name }} @endif"
                                                        placeholder="আপনার নাম লিখুন">
                                                </div>
                                            </div>
                                            {{-- <div class="col-sm-6">
                                                <div class="form-grp">
                                                    <label for="mobile" style="color: black;">মোবাইল
                                                        নাম্বার<span>*</span></label>
                                                    <input class="form-control" type="text" name="mobile" required
                                                        value="@if (Auth::user() && Auth::user()->Contact) {{ Auth::user()->Contact->mobile }} @endif"
                                                        placeholder="মোবাইল নাম্বার লিখুন">
                                                </div>
                                            </div> --}}
                                            <div class="col-sm-6">
                                                <div class="form-grp">
                                                    <label style="color: black;">জেলা *</label>
                                                    <select class="custom-select district" name="district_id" required>
                                                        <option value="">সিলেক্ট করুন</option>
                                                        @foreach ($Districts as $zilla)
                                                            <option value="{{ $zilla->id }}"
                                                                class="district-items division_id_{{ $zilla->division_id }} "
                                                                @if (Auth::user()->Contact && !Auth::user()->Contact->District) @if ($zilla->name == 'Dhaka') selected @endif
                                                            @elseif(Auth::user()->Contact && $zilla->name == Auth::user()->Contact->District->name) selected @endif style="color:black;">{{ $zilla->name }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-12 mt-1">
                                                <div class="form-grp">
                                                    <label for="shipping_address" style="color: black;">পূর্ণ
                                                        ঠিকানা*</label>
                                                    <textarea id="shipping_address" class="form-control" name="shipping_address" placeholder="আপনার পূর্ণ ঠিকানা লিখুন"
                                                        style="height: 100px;" required placeholder="আপনার পূর্ণ ঠিকানা লিখুন">
                                    @if (Auth::user() && Auth::user()->Contact){{ Auth::user()->Contact->shipping_address }}@endif
                                    </textarea>
                                                </div>
                                            </div>
                                            <div class="col-12">
                                                <center>
                                                    <button type="submit"
                                                        class="border py-2 px-5 mt-3 rounded text-info text-light px-3"
                                                        style="background-color: #ff5c00;font-size: 14px;">Save</button>
                                                </center>
                                            </div>
                                        </div>

                                        <br>
                                    </form>
                                </div>
                                {{-- End Delivery Address --}}
                                {{-- Start Basic Information Card --}}
                                <div class="card-body basic tab-pane" id="basic-information">
                                    <form id="edit-info-customer" action="{{ route('edit') }}" method="POST">
                                        @csrf
                                        <hr class="mt-2">
                                        <div class="row">
                                            <div class="col-6 pb-2 font-weight-bold">আপনার নাম:</div>
                                            <div class="col-6 pb-2">
                                                {{-- {{$contact->first_name}} --}}
                                                <input class="form-control" type="text" name="name"
                                                    value="{{ Auth::user()->name }}" name="first_name"
                                                    placeholder="আপনার নাম লিখুন" />
                                            </div>
                                            <div class="col-6 pb-2 font-weight-bold">মোবাইল নাম্বার:</div>
                                            <div class="col-6 pb-2">
                                                {{-- {{$contact->phone}} --}}
                                                <input class="form-control" type="text" name="mobile"
                                                    value="{{ Auth::user()->mobile }}" name="phone"
                                                    placeholder="মোবাইল নাম্বার লিখুন" />
                                            </div>
                                            <div class="col-6 pb-2 font-weight-bold">পূর্ণ ঠিকানা :</div>
                                            <div class="col-6 pb-2">
                                                {{-- {{$contact->phone}} --}}
                                                <input class="form-control" type="text" name="address"
                                                    value="{{ Auth::user()->address }}" name="address"
                                                    placeholder="আপনার পূর্ণ ঠিকানা লিখুন" />
                                            </div>
                                            <hr>
                                        </div>
                                        <button type="submit"
                                            class="float-right border p-1 rounded text-info text-light px-3"
                                            style="background-color: #ff5c00;">Save</button>
                                        <br>
                                    </form>
                                </div>
                                {{-- End Basic Information Card --}}
                                {{-- Start Address Card --}}
                                <div class="card-body basic tab-pane" id="address">
                                    <h5 class="card-title">Address</h5>
                                    <hr class="mt-2">
                                    <div class="row">
                                        <div class="col-md-3 font-weight-bold">Full Name</div>
                                        <div class="col-md-3 font-weight-bold">Address</div>
                                        <div class="col-md-2 font-weight-bold">Region</div>
                                        <div class="col-md-2 font-weight-bold">Phone</div>
                                        <div class="col-md-2 font-weight-bold">Action</div>
                                        <div class="col-12">
                                            <hr class="mt-1">
                                        </div>
                                        <div class="col-md-3 font-weight-bold">Iqbal Hossain</div>
                                        <div class="col-md-3 font-weight-bold">Shahbagh, Dhaka</div>
                                        <div class="col-md-2 font-weight-bold">Dhaka</div>
                                        <div class="col-md-2 font-weight-bold">01700000000</div>
                                        <div class="col-md-2 font-weight-bold"></div>
                                        <div class="col-12">
                                            <hr class="mt-1 mx-5 mt-1">
                                        </div>
                                    </div>
                                </div>
                                {{-- End Address Card --}}
                                {{-- Start Order Card --}}
                                <div class="card-body basic tab-pane active" id="order">
                                    <h5 class="card-title text-center">আপনার অর্ডার লিস্ট</h5>
                                    <hr style="margin: 15px 0px;"/>
                                    <form style="margin-bottom: 20px;" action="{{route('my-account')}}" method="get">
                                        <div class="row">

                                            <div class="col-md-3">
                                                <label style="font-weight: 600;margin-top: 10px">From</label>
                                                <input type="date" name="start_date" class="form-control" value="{{$start_date}}"/>
                                            </div>
                                            <div class="col-md-3">
                                                <label style="font-weight: 600;margin-top: 10px">To</label>
                                                <input type="date" name="end_date" class="form-control" value="{{$end_date}}"/>
                                            </div>
                                            <div class="col-md-4">
                                                <label style="font-weight: 600;margin-top: 10px">Search</label>
                                                <input type="text" name="search" class="form-control" placeholder="Search" value="{{$search}}"/>
                                            </div>
                                            <div class="col-md-2">
                                                <label style="width: 100%;opacity: 0">Btn</label>
                                                <button type="submit" class="btn btn-primary btn-block" style="padding: 12px 20px;"><i class="fas fa-search"></i></button>
                                            </div>
                                        </div>
                                    </form>

                                    <div class="row" style="overflow: scroll;">
                                        <table class="table table-hover">
                                            <thead>
                                                <tr>
                                                    <th>#</th>
                                                    <th>আইডি</th>
                                                    <th>তারিখ</th>
                                                    <th>সর্বমোট</th>
                                                    <th>অর্ডার স্ট্যাটাস</th>
                                                    <th>ডিটেইলস</th>
                                                </tr>
                                            </thead>
                                            <tbody>

                                                @php
                                                    $i = 0;
                                                @endphp
                                                @if (count($orders) > 0)
                                                    @foreach ($orders as $order)
                                                        <tr>
                                                            <td scope="row">
                                                                <span
                                                                    class="badge badge-primary p-1">{{ ++$i }}</span>
                                                            </td>
                                                            <td data-label="আইডি" scope="row">{{ $order->code }}</td>
                                                            <td data-label="তারিখ">
                                                                {{ date('d F Y', strtotime($order->order_date)) }}
                                                            </td>
                                                            <td data-label="সর্বমোট">
                                                                @if ($currencySymbol)
                                                                    <span
                                                                        style="font-size: 14px;">{{ $currencySymbol->symbol }}</span>
                                                                @endif
                                                                {{ $order->total_amount }}
                                                            </td>
                                                            <td data-label="অর্ডার স্ট্যাটাস">{{ $order->status }}</td>
                                                            <td>
                                                                <center>
                                                                    <a href="{{ route('order-details', ['id' => $order->id]) }}"
                                                                        class="btn btn-info"
                                                                        style="background-color: #ff5c00;;margin-top:5px;padding:0.35em 1em;border:0.1em solid #FFFFFF;font-weight:300;color:#FFFFFF;text-align:center;font-weight:bold;"><i
                                                                            class="fa fa-eye font-size-18"
                                                                            aria-hidden="true"></i> অর্ডার ইনভয়েস</a>


<a href="javascript:void(0)" onclick="openConfirmModal('{{ route('re-order', ['order_id' => $order->id]) }}')"
                                                                       class="btn btn-info"
                                                                       style="background-color: brown;margin-top:5px;padding:0.35em 0.35em;border:0.1em solid #FFFFFF;font-weight:300;color:#FFFFFF;text-align:center;font-weight:bold;"> <i class="fas fa-cart-plus font-size-18"></i> পুনরায় অর্ডার?</a>

{{--                                                                    <a class="btn btn-info" href="{{route('customer-invoice-view',$order->id)}}" style="background-color: green;margin-top:5px;padding:0.35em 0.35em;border:0.1em solid #FFFFFF;font-weight:300;color:#FFFFFF;text-align:center;font-weight:bold;"><i class="fas fa-print"></i></a>--}}

                                                                </center>
                                                            </td>
                                                        </tr>
                                                    @endforeach
                                                @endif
                                            </tbody>
                                        </table>
                                    </div>

                                    <!--start confirmation modal -->
                                    <div class="modal fade confirm_modal_message" id="confirmModal" role="dialog" aria-labelledby="mySmallModalLabel"
                                         aria-hidden="true">
                                        <div class="modal-dialog modal-sm m-0">
                                            <div class="modal-content p-3">
                                                    <h5>
                                                    <span>
                                                        <i class="fas fa-shopping-basket" style="color: #ff5c00;"></i>
                                                    </span>
                                                        <span style="color: #ff5c00;">PAIKARI ELECTRONICS</span>
                                                    </h5>
                                                    <hr style="margin: 3px"/>
                                                    <h4 style="font-size: 17px;margin-top: 19px;">এই অর্ডারের প্রোডাক্টগুলো কি পুনরায় অর্ডার করতে চাচ্ছেন?</h4>
                                                    <div class="row" style="margin-top: 15px;">
                                                        <div class="col-12">
                                                            <center>
                                                                <a id="confirmYesButton" class="btn btn-primary" style="background-color: rgb(139, 39, 39); color: white; font-weight: bold;">হ্যাঁ</a>
                                                                <button type="button" class="btn btn-primary" style="background-color: rgb(139, 39, 39); color: white; font-weight: bold;">না</button>
                                                                        {{--                               href="{{ route('check-out') }}"--}}
                                                            </center>
                                                        </div>
                                                    </div>

                                            </div>
                                        </div>
                                    </div>
                                    <script>
                                        function openConfirmModal(url){
                                            $('.confirm_modal_message').modal('show');
                                            $("#confirmYesButton").attr('href',url);
                                        }
                                    </script>
                                    <!--end confirmation modal -->

                                </div>
                                {{-- End Order Card --}}
                                {{-- Start Change Password Card --}}
                                <div class="card-body basic tab-pane" id="change-password">
                                    <h5 class="card-title">পাসওয়ার্ড পরিবর্তন</h5>
                                    <hr class="mt-2">
                                    <form id="change-password-customer" action="{{ route('change-password-customer') }}"
                                        method="POST">
                                        @csrf
                                        <div class="row">
                                            <div class="col-md-12">
                                                <input name="oldpassword" id="oldpassword" type="password"
                                                    class="form-control" placeholder="পূর্বের পাসওয়ার্ড" required />
                                            </div>
                                            <div class="col-md-6 mt-2">
                                                <input name="newpassword" id="newpassword" type="password"
                                                    class="form-control" placeholder="নতুন পাসওয়ার্ড (সর্বনিম্ন ৪ সংখ্যা)"
                                                    required />
                                            </div>
                                            <div class="col-md-6 mt-2">
                                                <input name="password_confirmation" id="password_confirmation"
                                                    type="password" class="form-control" placeholder="কনফার্ম পাসওয়ার্ড"
                                                    required />
                                            </div>
                                            <div class="col-md-12">
                                                <center>
                                                    <button type="submit"
                                                        style="background-color: #ff5c00;;margin-top:5px;padding:0.35em 1.2em;border:0.1em solid #FFFFFF;font-weight:300;color:#FFFFFF;text-align:center;font-weight:bold;">Change</button>
                                                </center>
                                            </div>
                                        </div>
                                    </form>
                                    <br>
                                </div>
                                {{-- End Change Password Card --}}
                                {{-- Start Transaction Card --}}
                                <div class="card-body basic tab-pane" id="transaction">
                                    <h5 class="card-title">Order</h5>
                                    <hr class="mt-2">
                                    <div class="row" style="overflow: scroll;">
                                        <table class="table table-hover">
                                            <thead>
                                                <tr>
                                                    <th>#</th>
                                                    <th>Date</th>
                                                    <th>Payment Method</th>
                                                    <th>Transaction Id</th>
                                                    <th>Amount</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @php
                                                    $i = 0;
                                                @endphp
                                                @foreach ($contacts as $contact)
                                                    @foreach ($contact->Payment as $payment)
                                                        <tr>
                                                            <th scope="row">{{ ++$i }}</th>
                                                            <td>{{ $payment->date }}</td>
                                                            <td>
                                                                @if ($payment->PaymentMethod)
                                                                    {{ $payment->PaymentMethod->name }}
                                                                @endif
                                                            </td>
                                                            <td>{{ $payment->transaction_id }}</td>
                                                            <td>{{ $payment->amount }}</td>
                                                        </tr>
                                                    @endforeach
                                                @endforeach

                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                {{-- End Transaction Card --}}

                                {{-- Start Order Card --}}
                                <div class="card-body basic tab-pane" id="order_traking">
                                    <h5 class="card-title text-center">অর্ডার ট্র্যাকিং (Demo)</h5>
                                    <div class="row" style="overflow: scroll;">

                                        {{-- order traking design start --}}
                                        <div class="container">
                                            <div class="row">
                                                {{-- <div class="col-12 text-center">
                                                    <h5>Order Number: #A61452B</h5>
                                                </div> --}}
                                                <div class="col-12 col-md-12 hh-grayBox pt45 pb20">
                                                    <div class="row">
                                                        <h4 class="col-12 text-center">Order Number: #A61452B (Demo)</h4>
                                                        <h5 class="col-12 text-center">Order Date: 2-1-2023</h5>
                                                        <h5 class="col-12 text-center">Order Amount: 00.00</h5>
                                                    </div>
                                                    <div class="row justify-content-between">
                                                        <div class="order-tracking completed">
                                                            <span class="is-complete"></span>
                                                            <p>Ordered<br><span>Mon, June 24</span></p>
                                                        </div>
                                                        <div class="order-tracking completed">
                                                            <span class="is-complete"></span>
                                                            <p>Shipped<br><span>Tue, June 25</span></p>
                                                        </div>
                                                        <div class="order-tracking">
                                                            <span class="is-complete"></span>
                                                            <p>Delivered<br><span>Fri, June 28</span></p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        {{-- order traking design end --}}

                                    </div>
                                </div>
                                {{-- End Order Card --}}
                            </div>
                            {{-- End Card For Basic Information --}}
                        </div>
                        {{-- End Right Side --}}
                    </div>
                    {{-- End My Account --}}
                </div>
            </section>
            <!-- checkout-area-end -->
        </main>
        <!-- end row -->
    </div>

    <script>
        $(document).ready(function() {
            $('#change-password-customer').ajaxForm({
                beforeSend: formBeforeSend,
                beforeSubmit: formBeforeSubmit,
                error: formError,
                success: function(responseText, statusText, xhr, $form) {
                    // window.location.replace(responseText.redirect_url);
                    formSuccess(responseText, statusText, xhr, $form);
                },
                clearForm: true,
                resetForm: true
            });
        });
        $(document).ready(function() {
            $('#edit-info-customer').ajaxForm({
                beforeSend: formBeforeSend,
                beforeSubmit: formBeforeSubmit,
                error: formError,
                success: function(responseText, statusText, xhr, $form) {
                    // window.location.replace(responseText.redirect_url);
                    formSuccess(responseText, statusText, xhr, $form);
                },
                clearForm: true,
                resetForm: true
            });
        });
    </script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            // Start Image Image Preview
            $('#file-input').change(function() {

                let reader = new FileReader();

                reader.onload = (e) => {

                    $('#imagePreview').attr('src', e.target.result);
                }

                reader.readAsDataURL(this.files[0]);

            });
            // End Image Preview
            $('#profile_photo_path').ajaxForm({
                beforeSend: formBeforeSend,
                beforeSubmit: formBeforeSubmit,
                error: formError,
                success: function(responseText, statusText, xhr, $form) {
                    // window.location.replace(responseText.redirect_url);
                    formSuccess(responseText, statusText, xhr, $form);
                },
                clearForm: true,
                resetForm: true
            });
        });
        $("#profile_photo_path").change(function() {
            $("#profile-submit-button").css("display", "block");
        });










        // js for 3rd order traking start
        const timeline = new TimelineLite();
        const $progress = $('.progress-bar');
        const $processed = [$('.overlay-check-bubble.processed'), $('.checkmark.processed')];
        const $shipped = [$('.overlay-check-bubble.shipped'), $('.checkmark.shipped')];
        const $enroute = [$('.overlay-check-bubble.enroute'), $('.checkmark.enroute')];
        const $arrived = [$('.overlay-check-bubble.arrived'), $('.checkmark.arrived')];
        const $allStates = [$processed, $shipped, $enroute, $arrived];

        //Future functionality
        // const $processBtn = $('#js-processed');
        // const $shippedBtn = $('#js-shipped');
        // const $enRouteBtn = $('#js-en-route');
        // const $arrivedBtn = $('#js-arrived');

        // $processBtn.on('click', processed);
        // $shippedBtn.on('click', shipped);
        // $enRouteBtn.on('click', enRoute);
        // $arrivedBtn.on('click', arrived);

        timeline
            .from($processed, .1, {
                autoAlpha: 0,
                scale: 0,
                transformOrigin: "50% 50%"
            })
            .set($progress, {
                autoAlpha: 1
            })
            .fromTo($progress, .5, {
                drawSVG: 0
            }, {
                drawSVG: '30%'
            })
            .from($shipped, .1, {
                autoAlpha: 0,
                scale: 0,
                transformOrigin: "50% 50%"
            }, '-=0.15')
            .fromTo($progress, .5, {
                drawSVG: '30%'
            }, {
                drawSVG: '60%'
            })
            .from($enroute, .1, {
                autoAlpha: 0,
                scale: 0,
                transformOrigin: "50% 50%"
            }, '-=0.15')
            .fromTo($progress, .5, {
                drawSVG: '60%'
            }, {
                drawSVG: '100%'
            })
            .from($arrived, .1, {
                autoAlpha: 0,
                scale: 0,
                transformOrigin: "50% 50%"
            }, '-=0.15')

        // js for 3rd order traking end
    </script>
@endsection