<x-user.content>
    <x-slot:title>eCommerce MM</x-slot:title>
    <x-slot:head>
        <style>
            a.btn_akun {
                /* border: 1px solid; */

                border-radius: 5px;
                text-align: left;
                padding: 13px;
                font-size: 20px;
                margin-bottom: 10px;
                color: black;
            }



            span.nol {
                position: relative;
                float: right;
                background-color: red;
                border-radius: 15px;
                padding: 5px;
                font-size: 13px;
                font-weight: bold;
                color: white;
            }

            .aktv {
                background-color: rgb(252, 220, 78);
                color: black !important;
            }

            .tgl {
                float: right;
                font-size: 12px;
            }


            .tracking-detail {
                padding: 3rem 0
            }

            #tracking {
                margin-bottom: 1rem
            }

            [class*=tracking-status-] p {
                margin: 0;
                font-size: 1.1rem;
                color: #fff;
                text-transform: uppercase;
                text-align: center
            }

            [class*=tracking-status-] {
                padding: 1.6rem 0
            }

            .tracking-status-intransit {
                background-color: #65aee0
            }

            .tracking-status-outfordelivery {
                background-color: #f5a551
            }

            .tracking-status-deliveryoffice {
                background-color: #f7dc6f
            }

            .tracking-status-delivered {
                background-color: #4cbb87
            }

            .tracking-status-attemptfail {
                background-color: #b789c7
            }

            .tracking-status-error,
            .tracking-status-exception {
                background-color: #d26759
            }

            .tracking-status-expired {
                background-color: #616e7d
            }

            .tracking-status-pending {
                background-color: #ccc
            }

            .tracking-status-inforeceived {
                background-color: #214977
            }

            .tracking-list {
                border: 1px solid #e5e5e5
            }

            .tracking-item {
                border-left: 1px solid #e5e5e5;
                position: relative;
                padding: 2rem 1.5rem .5rem 2.5rem;
                font-size: .9rem;
                margin-left: 3rem;
                min-height: 5rem
            }

            .tracking-item:last-child {
                padding-bottom: 4rem
            }

            .tracking-item .tracking-date {
                margin-bottom: .5rem
            }

            .tracking-item .tracking-date span {
                color: #888;
                font-size: 85%;
                padding-left: .4rem
            }

            .tracking-item .tracking-content {
                padding: .5rem .8rem;
                background-color: #f4f4f4;
                border-radius: .5rem
            }

            .tracking-item .tracking-content span {
                display: block;
                color: #888;
                font-size: 85%
            }

            .tracking-item .tracking-icon {
                line-height: 2.6rem;
                position: absolute;
                left: -1.3rem;
                width: 2.6rem;
                height: 2.6rem;
                text-align: center;
                border-radius: 50%;
                font-size: 1.1rem;
                background-color: #fff;
                color: #fff
            }

            .tracking-item .tracking-icon.status-sponsored {
                background-color: #f68
            }

            .tracking-item .tracking-icon.status-delivered {
                background-color: #4cbb87
            }

            .tracking-item .tracking-icon.status-outfordelivery {
                background-color: #f5a551
            }

            .tracking-item .tracking-icon.status-deliveryoffice {
                background-color: #f7dc6f
            }

            .tracking-item .tracking-icon.status-attemptfail {
                background-color: #b789c7
            }

            .tracking-item .tracking-icon.status-exception {
                background-color: #d26759
            }

            .tracking-item .tracking-icon.status-inforeceived {
                background-color: #214977
            }

            .tracking-item .tracking-icon.status-intransit {
                color: #e5e5e5;
                border: 1px solid #e5e5e5;
                font-size: .6rem
            }

            td.pro {
                line-height: 15px;
            }

            @media(min-width:992px) {
                .tracking-item {
                    margin-left: 10rem
                }

                .tracking-item .tracking-date {
                    position: absolute;
                    left: -10rem;
                    width: 7.5rem;
                    text-align: right
                }

                .tracking-item .tracking-date span {
                    display: block
                }

                .tracking-item .tracking-content {
                    padding: 0;
                    background-color: transparent
                }


            }
        </style>
    </x-slot:head>
    <div class="container-fluid">
        <div class="row px-xl-5">
            <div class="col-12">
                <nav class="breadcrumb bg-light mb-30">
                    <a class="breadcrumb-item text-dark" href="/">Home</a>
                    <span class="breadcrumb-item active">Akun</span>
                </nav>
            </div>
        </div>
    </div>

    <div class="container-fluid">
        <div class="row px-xl-5">


            <div class="col-lg-4">
                <div class="bg-light p-30 mb-5">
                    <div class="border-bottom ">
                        <div class="justify-content-center d-flex">
                            <img class="rounded-circle shadow-4-strong" alt="avatar2"
                                style="border: 1px solid; width:40%"
                                src="https://mdbcdn.b-cdn.net/img/new/avatars/1.webp" />
                        </div>
                        <div class="text-center mt-2">
                            <h6 class="mb-3">Nama Lengkap</h6>
                        </div>
                    </div>
                    <div class=" pt-3 pb-2">
                        <div class="">
                            <a href="" class="btn btn-block btn_akun aktv">
                                <i class="fa fa-cube mr-2"></i>
                                Pemesanan
                                <span class="nol">10</span>
                            </a>

                            <a href="" class="btn btn-block btn_akun">
                                <i class="fa fa-credit-card mr-2"></i>
                                Pembayaran
                                <span class="nol">10</span>
                            </a>

                            <a href="" class="btn btn-block btn_akun">
                                <i class="fa fa-map-marker-alt mr-2"></i>
                                Alamat
                            </a>
                            <hr>
                            <a href="" class="btn btn-block btn_akun">
                                <i class="fa fa-cog mr-2"></i>
                                Setting Akun
                            </a>

                            <a href="" class="btn btn-block btn_akun">
                                <i class="fa fa-sign-out-alt mr-2"></i>
                                Log out
                            </a>
                        </div>



                    </div>

                </div>




            </div>

            <div class="col-lg-8">

                <div class="bg-light p-30 mb-5">

                    <div class="card mb-3">
                        <div class="card-header">
                            <span style="font-size: 13px;"> Order ID: #ORD-2024-1278</span>
                            <span class="tgl">Feb 20, 2025</span>
                        </div>

                        <div class="card-body">
                            <div class="">
                                <div class="d-flex justify-content-between">
                                    <p>Status </p>
                                    <p>3 Item</p>
                                </div>
                                <div class="d-flex justify-content-between">
                                    <p>Jumlah</p>
                                    <p>3 Item</p>
                                </div>
                                <div class="d-flex justify-content-between">
                                    <p>Total</p>
                                    <p>$150</p>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <button class="btn btn-success btn-block rounded mb-2" data-toggle="collapse"
                                        data-target="#status">Status Pesanan</button>
                                </div>
                                <div class="col-md-6">
                                    <button class="btn btn-outline-dark rounded btn-block" data-toggle="collapse"
                                        data-target="#detail">Detail Pesanan</button>
                                </div>
                            </div>

                            {{-- status order --}}
                            <div class="collapse mb-5 mt-3" id="status">
                                <div class="tracking-list">

                                    <div class="tracking-item">
                                        <div class="tracking-icon status-intransit">
                                            <i class="fa fa-home"></i>
                                            <!-- <i class="fas fa-circle"></i> -->
                                        </div>
                                        <div class="tracking-date">Aug 10, 2018<span>05:01 PM</span></div>
                                        <div class="tracking-content">Order Confirmed
                                            <span>KUALA LUMPUR (LOGISTICS HUB), MALAYSIA,
                                                MALAYSIA</span>
                                        </div>
                                    </div>



                                </div>
                            </div>


                            {{-- detail order --}}
                            <div class="collapse mb-5 mt-5" id="detail">
                                <div class="table-responsive">
                                    <table class="table table-light table-borderless table-hover text-center mb-0 dtl">
                                        <thead class="thead-dark">
                                            <tr>
                                                <th>Produk</th>
                                                <th>Harga</th>
                                                <th>Qty</th>

                                                <th>Total</th>
                                            </tr>
                                        </thead>
                                        <tbody class="align-middle">
                                            <tr>
                                                <td class="align-middle pro">
                                                    <img src="{{ asset('assets/publics') }}/img/product-1.jpg"
                                                        alt="" style="width: 50px;">
                                                    <small>Rinso Anti Noda + Molto</small>
                                                </td>

                                                <td class="align-middle">
                                                    <small>20.000</small>
                                                </td>
                                                <td class="align-middle">
                                                    <small>1</small>
                                                </td>

                                                <td class="align-middle">
                                                    <small>20.000</small>
                                                </td>

                                            </tr>



                                        </tbody>
                                    </table>
                                </div>
                            </div>

                        </div>
                    </div>

                    <div class="card mb-3">
                        <div class="card-header">
                            <span style="font-size: 13px;"> Order ID: #ORD-2024-1278</span>
                            <span class="tgl">Feb 20, 2025</span>
                        </div>

                        <div class="card-body">
                            <div class="">
                                <div class="d-flex justify-content-between">
                                    <p>Status </p>
                                    <p>3 Item</p>
                                </div>
                                <div class="d-flex justify-content-between">
                                    <p>Jumlah</p>
                                    <p>3 Item</p>
                                </div>
                                <div class="d-flex justify-content-between">
                                    <p>Total</p>
                                    <p>$150</p>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <button class="btn btn-success btn-block rounded mb-2" data-toggle="collapse"
                                        data-target="#status">Status Pesanan</button>
                                </div>
                                <div class="col-md-6">
                                    <button class="btn btn-outline-dark rounded btn-block" data-toggle="collapse"
                                        data-target="#detail">Detail Pesanan</button>
                                </div>
                            </div>

                            {{-- status order --}}
                            <div class="collapse mb-5 mt-3" id="status">
                                <div class="tracking-list">

                                    <div class="tracking-item">
                                        <div class="tracking-icon status-intransit">
                                            <i class="fa fa-home"></i>
                                            <!-- <i class="fas fa-circle"></i> -->
                                        </div>
                                        <div class="tracking-date">Aug 10, 2018<span>05:01 PM</span></div>
                                        <div class="tracking-content">Order Confirmed
                                            <span>KUALA LUMPUR (LOGISTICS HUB), MALAYSIA,
                                                MALAYSIA</span>
                                        </div>
                                    </div>



                                </div>
                            </div>


                            {{-- detail order --}}
                            <div class="collapse mb-5 mt-5" id="detail">
                                <div class="table-responsive">
                                    <table class="table table-light table-borderless table-hover text-center mb-0 dtl">
                                        <thead class="thead-dark">
                                            <tr>
                                                <th>Produk</th>
                                                <th>Harga</th>
                                                <th>Qty</th>

                                                <th>Total</th>
                                            </tr>
                                        </thead>
                                        <tbody class="align-middle">
                                            <tr>
                                                <td class="align-middle pro">
                                                    <img src="{{ asset('assets/publics') }}/img/product-1.jpg"
                                                        alt="" style="width: 50px;">
                                                    <small>Rinso Anti Noda + Molto</small>
                                                </td>

                                                <td class="align-middle">
                                                    <small>20.000</small>
                                                </td>
                                                <td class="align-middle">
                                                    <small>1</small>
                                                </td>

                                                <td class="align-middle">
                                                    <small>20.000</small>
                                                </td>

                                            </tr>



                                        </tbody>
                                    </table>
                                </div>
                            </div>

                        </div>
                    </div>



                </div>

                <div class="col-12">
                    <nav>
                        <ul class="pagination justify-content-center">
                            <li class="page-item disabled"><a class="page-link" href="#">Previous</span></a>
                            </li>
                            <li class="page-item active"><a class="page-link" href="#">1</a></li>
                            <li class="page-item"><a class="page-link" href="#">2</a></li>
                            <li class="page-item"><a class="page-link" href="#">3</a></li>
                            <li class="page-item"><a class="page-link" href="#">Next</a></li>
                        </ul>
                    </nav>
                </div>


            </div>




        </div>
    </div>



    <x-slot:foot> </x-slot:foot>
</x-user.content>
