@extends('layouts.front-end.body')

@section('content')

    <div class="wrapper" style="margin-bottom:90px;">

        <!-- Content Wrapper. Contains page content -->
        <div class="content-wrapper" style="min-height: 923px;">
            <div class="curve"></div>
            <div class="toast" id="alert_toast" role="alert" aria-live="assertive" aria-atomic="true">
                <div class="toast-body text-white">
                </div>
            </div>
            <div id="toastsContainerTopRight" class="toasts-top-right fixed"></div>
            <!-- Content Header (Page header)-->
            <div class="content-header">
                <div class="container-fluid">
                    <div class="row mb-2">
                        <div class="col-sm-6">
                            <!--<h1 class="m-0">My Order</h1>-->
                        </div>

                    </div>
                    <!--<hr class="border-primary">-->
                </div>
            </div>
            <!-- /.content-header -->

            <section class="content">
                <div class="container-fluid">
                    <style>
                        .van_tab_box {

                            color: #fff;
                            border-radius: 5px;
                            width: 32%;
                            text-align: center;
                            line-height: 30px;
                            font-size: 0.8rem;
                        }

                        .user_botton {
                            padding-left: 5px;
                            padding-right: 5px;
                            min-width: 80px;
                            height: 30px;
                            background: linear-gradient(-57deg, rgba(193, 133, 27, 0.99), rgba(241, 221, 122, 0.99), rgba(196, 150, 62, 0.99));
                            border-radius: 15px;
                            color: #333333;
                            font-family: Leelawadee UI;
                            font-weight: 400;
                            text-align: center;
                            line-height: 30px;
                            margin-top: 15px;
                        }

                        .confirm-order {
                            cursor: pointer;
                        }

                        * {
                            margin: 0;
                            padding: 0;
                        }

                        .vertical_tab {
                            max-width: 1280px;
                            height: auto;
                            margin: 0 auto;
                            padding-top: 10px;
                            position: relative;
                            z-index: 2;
                        }

                        .tablink {
                            background-color: #f4f6fb;
                            background-size: 100%;
                            color: #000;
                            float: left;
                            outline: none;
                            cursor: pointer;
                            padding: 5px 5px;
                            width: 33.33%;
                            font-size: 22px;
                            font-family: DB-Heavent-Cond;
                            font-weight: 500;
                            text-align: center;
                            border: 1px solid #fff;
                        }

                        .tablink i {
                            display: block;
                            margin-left: auto;
                            margin-right: auto;
                            font-size: 30px;
                            color: #000;
                        }

                        .tablink img:hover {
                            transition: 0.5s;
                            transform: scale(1.1);
                        }

                        .tabcontent {
                            color: white;
                            display: none;
                            height: 100%;
                        }

                        .tabcontent .container {
                            width: 100%;
                            display: grid;
                            grid-template-columns: repeat(1, 1fr);
                            box-sizing: border-box;
                            gap: 0.5em;
                        }

                        .tabcontent .container .row {
                            margin: 0;
                        }

                        .tabcontent .container .row img {
                            width: 100%;
                        }

                        .product-title {
                            text-align: center;
                            color: #000;
                            font-size: 20px;
                            font-family: DB-Heavent-Cond;
                        }

                        /* -----------------------VerticalTab------------------ */
                        .product {
                            width: 100%;
                            height: auto;
                        }

                        .product .container {
                            position: relative;
                            max-width: 1280px;
                            height: auto;
                            margin: 0 auto;
                            display: grid;
                            grid-template-columns: repeat(1, 1fr);
                            box-sizing: border-box;
                            gap: 1em;
                            padding: 5px 10px;
                        }

                        .product .container .row {
                            /* background-color: #ffffffff; */
                            border-radius: 10px;
                            padding: 10px 3px;
                            /* padding-bottom: 10px; */

                        }

                        .product .container .row .time {
                            position: relative;
                            font-family: DB-Heavent-Cond;
                            font-size: 12px;
                            height: 2px;
                            color: #333333;
                            /* padding: 10px; */
                            padding: 0px 8px;

                        }

                        .product .container .row .img-descrip {
                            display: flex;
                            /* border-bottom: 1px solid #e3e7ef; */
                            padding: 10px 0;
                            height: auto;
                        }

                        .product .container .row .img-descrip img {
                            /* width: 100px;
                                                                                                                                            height: 100px; */
                            width: 126px;
                            height: 120px;
                            float: left;
                            border-radius: 5px;
                        }

                        .product .container .row .img-descrip p {
                            float: left;
                            left: 100px;
                            color: #6a6a6a;
                            font-family: DB-Heavent-Cond;
                            font-weight: 500;
                            font-size: 13px;
                            padding: 0 10px;
                            text-align: left;
                            margin-top: 5px;
                        }

                        .product .container .row .price-p {
                            display: flex;
                            height: 30px;
                        }

                        .product .container .row .price-p h2 {
                            color: #000;
                            float: left;
                            font-family: DB-Heavent-Cond;
                            font-weight: 500;
                            font-size: 16px;
                            line-height: 30px;
                        }

                        .product .container .row .price-p p {
                            color: #000;
                            position: absolute;
                            float: right;
                            right: 20px;
                            font-family: DB-Heavent-Cond;
                            font-weight: 500;
                            font-size: 16px;
                            line-height: 20px;
                        }

                        .product .container .row .comission {
                            display: flex;
                            height: 24px;
                        }

                        .product .container .row .comission h2 p {
                            color: #000;
                            float: left;
                            font-family: DB-Heavent-Cond;
                            font-weight: 500;
                            font-size: 14px;
                            line-height: 30px;
                        }

                        .product .container .row .comission p {
                            position: absolute;
                            float: right;
                            right: 20px;
                            font-family: DB-Heavent-Cond;
                            font-weight: 500;
                            font-size: 16px;
                            line-height: 20px;
                            color: #2f9b47;
                        }

                        .product .container .row button {
                            width: 60%;
                            color: #fff;
                            background: linear-gradient(135deg, #3fe, #209bff);
                            padding: 8px;
                            border: none;
                            font-size: 16px;
                            font-family: DB-Heavent-Cond;
                            border-radius: 50px;
                            display: block;
                            margin-left: auto;
                            margin-right: auto;

                        }

                        /* ------------------List---------------- */
                        .deposit_widraw {
                            width: 100%;
                            height: auto;
                        }

                        .deposit_widraw .container {
                            max-width: 1280px;
                            height: auto;
                            margin: 0 auto;
                            /* padding: 10px; */
                        }

                        .deposit_widraw .container .row {
                            border-radius: 15px;
                            margin-top: 10px;
                            background-color: #f4f6fb;
                            padding: 10px;
                        }

                        .deposit_widraw .container .row table {
                            width: 100%;
                            border-radius: 10px;
                        }

                        .deposit_widraw .container .row td {
                            max-width: 1280px;
                            text-align: left;
                            color: #000;
                            font-size: 18px;
                            font-family: DB-Heavent-Cond;
                            padding: 0px 5px;
                            text-decoration: none;
                        }

                        .deposit_widraw .container .row ion-icon {
                            color: #000;
                            font-size: 20px;
                            position: relative;
                            top: 5px;
                        }

                        .balace_com {
                            width: 100%;
                            height: auto;
                            margin-top: 10px;
                        }

                        .balace_com .container {
                            max-width: 1280px;
                            height: auto;
                            display: grid;
                            grid-template-columns: repeat(1, 1fr);
                            box-sizing: border-box;
                            padding: 0 10px;
                            margin: 0 auto;
                        }

                        .balace_com .container .row {
                            position: relative;
                            cursor: pointer;
                            border-radius: 10px;
                            background: linear-gradient(135deg, #3fe, #209bff);
                            padding: 20px 10px;
                            display: inline-flex;
                        }

                        .balace_com .container .row h2 {
                            color: #fff;
                            font-size: 18px;
                            font-family: DB-Heavent-Cond;
                            font-weight: 500;
                            text-align: left;
                        }

                        .balace_com .container .row p {
                            position: absolute;
                            color: #fff;
                            font-size: 18px;
                            font-family: DB-Heavent-Cond;
                            text-align: right;
                            right: 10px;
                        }

                        .balace_com .container .row ion-icon {
                            color: #fff;
                            font-size: 25px;
                            font-family: DB-Heavent-Cond;
                            position: relative;
                            top: 7px;
                        }

                        .title-t {
                            width: 100%;
                            height: auto;
                            background: #0d4da3;
                        }

                        .title-t p {
                            color: #fff;
                            font-size: 20px;
                            font-family: DB-Heavent-Cond;
                            text-align: center;
                            padding: 10px;
                        }

                        @media screen and (max-width:991px) {
                            .tablink {
                                font-size: 18px;
                                font-family: DB-Heavent-Cond;
                                padding: 10px 0;
                            }
                        }

                        /* tab  */
                        .nav-link {
                            width: 100%;
                            align-content: center;
                            padding: 4px;
                        }

                        .nav-pills .nav-link.active,
                        .nav-pills .show>.nav-link {
                            color: #fff;
                            background-color: #6e83b7 !important;
                        }

                        .bg-grad2:hover {
                            /* background-color: #0d4da3; */
                            align-items: center;
                        }

                        .text-secondary {
                            font-weight: bold;
                            font-size: 14px;
                        }

                        .text-left {
                            font-size: 14px;
                            color: grey;
                        }

                        /*
                            .col {
                                padding: 10px 10px 8px 20px !important;
                            }

                            padding: 10px 10px 8px 20px !important;

                            @media only screen and (max-width: 350px) {
                                .col {
                                    padding: 10px 10px 8px 39px !important;
                                }
                            }

                            @media only screen and (max-width: 390px) {
                                .col {
                                    padding: 10px 10px 8px 39px !important;
                                }
                            } */
                    </style>

                    <div class="col-xs-12 col-md-12 p-0 pb-0">
                        <div class="card records_top p-1 pb-0 bg-custom-grad" style=" width: 100%;">
                            <div class="records_top1" style="color: #28309c;">
                                <!-- <p style="color: #28309c; font-size: 16px;">บันทึกการรับคำสั่งซื้อ</p><p data-v-35ad745e="" style="font-size: 0.4rem;color: #28309c;">THB3576.00</p> -->

                                <div class="col-12" style="display: flex; padding-left:5px ;align-items:center">
                                    <div class="d-flex w-100" style="flex-direction:column">
                                        <div class="d-flex" style="align-items:center">
                                            <div class="tou_xiang col-2 p-0">
                                                <img style="width: 52px; height: 52px;"
                                                    src="{{ asset('front-end/assets/uploads/client.png') }}" alt=""
                                                    onerror="this.src='{{ asset('front-end/assets/uploads/client.png') }}'"
                                                    srcset="">
                                            </div>
                                            <div class="user_name pl-2 text-white col-10">
                                                <span>
                                                    <!-- : Anusorn Mokaphan ID: 1400 -->
                                                </span>
                                                <div class="d-flex col-12 justify-content-start">

                                                    <div class="col-5 text-white">
                                                        User ID {{ Auth::user()->customer->id ?? null }}
                                                    </div>
                                                    <div class="col-5 text-white">
                                                        {{ __('message.credit') }} 0
                                                    </div>
                                                </div>
                                            </div>


                                        </div>

                                    </div>
                                </div>

                                <div style="margin:-6px" class="mt-3">
                                    <div class="w-100"
                                        style="background: #fff; padding: 5px; border-top-left-radius: 20px;
                                    border-top-right-radius: 20px; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px;">
                                        <div
                                            class="w-100 p-2 d-flex justify-content-start align-items-center border-bottom">

                                            <div class="w-50 col-6 wallet"
                                                style="font-size: 1.4rem;color: #333333;margin-bottom: 5px;">