@extends('layout.app')
@section('content')


    <div class="gs-dashboard-user-content-wrapper gs-dashboard-outlet">
        <div class="ud-page-title-box">
            <!-- mobile sidebar trigger btn -->
            <h3 class="ud-page-title">Dashboard</h3>
        </div>

        <!-- dashboard statatics -->
        <div class="row gy-4">
            <div class="col-12 col-sm-6 col-lg-3">
                <div class="gs-single-statatics first-child">
                    <div class="icon-wrapper">
                        <svg width="81" height="80" viewBox="0 0 81 80" fill="none"
                             xmlns="http://www.w3.org/2000/svg">
                            <path
                                d="M34.5 3.4641C38.2128 1.32051 42.7872 1.32051 46.5 3.4641L69.141 16.5359C72.8538 18.6795 75.141 22.641 75.141 26.9282V53.0718C75.141 57.359 72.8538 61.3205 69.141 63.4641L46.5 76.5359C42.7872 78.6795 38.2128 78.6795 34.5 76.5359L11.859 63.4641C8.14617 61.3205 5.85898 57.359 5.85898 53.0718V26.9282C5.85898 22.641 8.14617 18.6795 11.859 16.5359L34.5 3.4641Z"
                                fill="#5B68FF"/>
                            <g clip-path="url(#clip0_6959_70604)">
                                <path fill-rule="evenodd" clip-rule="evenodd"
                                      d="M38.2024 28.4993L40.375 29.6035V24H35.1875V29.6035L37.3579 28.5005C37.614 28.3706 37.9263 28.3601 38.2024 28.4993Z"
                                      fill="white"/>
                                <path fill-rule="evenodd" clip-rule="evenodd"
                                      d="M51.0625 35.3274V24.9375C51.0625 24.4197 50.6428 24 50.125 24H42.25V31.1289C42.25 31.803 41.5308 32.3218 40.8284 31.9316L37.7812 30.3833L34.6711 31.9639C34.0469 32.28 33.3142 31.8186 33.3147 31.1289L33.3125 24H25.4375C24.9197 24 24.5 24.4197 24.5 24.9375V49.625C24.5 50.1428 24.9197 50.5625 25.4375 50.5625H35.8274C34.6709 47.7129 34.6831 44.5432 35.8596 41.7031C38.3198 35.7634 45.105 32.9097 51.0625 35.3274Z"
                                      fill="white"/>
                                <path
                                    d="M46.3375 36H46.3306C40.918 36 36.5 40.4022 36.5 45.8306C36.5 51.2505 40.9095 55.66 46.3306 55.66C51.7505 55.66 56.16 51.2505 56.16 45.8306C56.16 40.393 51.7294 36 46.3375 36ZM51.8403 47.3433H46.3306C45.4944 47.3433 44.8175 46.6656 44.8175 45.8306C44.8175 43.3025 44.8248 40.4579 44.8248 39.177C44.8954 38.4076 45.542 37.8055 46.3306 37.8055H46.3375C47.1698 37.8093 47.8433 38.4851 47.8433 39.3182V44.3179H51.8403C52.6764 44.3179 53.3533 44.9944 53.3533 45.8306C53.3533 46.6656 52.6764 47.3433 51.8403 47.3433Z"
                                    fill="white"/>
                            </g>
                            <defs>
                                <clipPath id="clip0_6959_70604">
                                    <rect width="32" height="32" fill="white"
                                          transform="translate(24.5 24)"/>
                                </clipPath>
                            </defs>
                        </svg>
                    </div>
                    <h5>{{$totalOrders ?? '0'}}</h5>
                    <p>Total Orders</p>
                </div>
            </div>
            <div class="col-12 col-sm-6 col-lg-3">
                <div class="gs-single-statatics second-child">
                    <div class="icon-wrapper">
                        <svg width="81" height="80" viewBox="0 0 81 80" fill="none"
                             xmlns="http://www.w3.org/2000/svg">
                            <path
                                d="M34.5 3.4641C38.2128 1.32051 42.7872 1.32051 46.5 3.4641L69.141 16.5359C72.8538 18.6795 75.141 22.641 75.141 26.9282V53.0718C75.141 57.359 72.8538 61.3205 69.141 63.4641L46.5 76.5359C42.7872 78.6795 38.2128 78.6795 34.5 76.5359L11.859 63.4641C8.14617 61.3205 5.85898 57.359 5.85898 53.0718V26.9282C5.85898 22.641 8.14617 18.6795 11.859 16.5359L34.5 3.4641Z"
                                fill="#26C3A4"/>
                            <g clip-path="url(#clip0_6959_70611)">
                                <path fill-rule="evenodd" clip-rule="evenodd"
                                      d="M38.2024 28.4993L40.375 29.6035V24H35.1875V29.6035L37.3579 28.5005C37.614 28.3706 37.9263 28.3601 38.2024 28.4993Z"
                                      fill="white"/>
                                <path fill-rule="evenodd" clip-rule="evenodd"
                                      d="M51.0625 35.3274V24.9375C51.0625 24.4197 50.6428 24 50.125 24H42.25V31.1289C42.25 31.803 41.5308 32.3218 40.8284 31.9316L37.7812 30.3833L34.6711 31.9639C34.0469 32.28 33.3142 31.8186 33.3147 31.1289L33.3125 24H25.4375C24.9197 24 24.5 24.4197 24.5 24.9375V49.625C24.5 50.1428 24.9197 50.5625 25.4375 50.5625H35.8274C34.6709 47.7129 34.6831 44.5432 35.8596 41.7031C38.3198 35.7634 45.105 32.9097 51.0625 35.3274Z"
                                      fill="white"/>
                                <path fill-rule="evenodd" clip-rule="evenodd"
                                      d="M53.6213 39.2224C51.8428 37.4438 49.3857 36.3438 46.6719 36.3438C43.958 36.3438 41.501 37.4438 39.7224 39.2224C37.9438 41.001 36.8438 43.458 36.8438 46.1719C36.8438 48.8857 37.9438 51.3428 39.7224 53.1213C41.501 54.8999 43.958 56 46.6719 56C49.3857 56 51.8428 54.8999 53.6213 53.1213C55.3999 51.3428 56.5 48.8857 56.5 46.1719C56.5 43.458 55.3999 41.001 53.6213 39.2224ZM50.624 49.2493C49.9678 49.9055 49.0613 50.3125 48.0623 50.3125H43.6875C43.1697 50.3125 42.75 49.8928 42.75 49.375C42.75 48.8572 43.1697 48.4375 43.6875 48.4375H48.0623C49.0251 48.4375 49.8125 47.6501 49.8125 46.6873C49.8125 46.1665 49.6499 45.7405 49.2983 45.3892C48.9812 45.0718 48.5437 44.875 48.0623 44.875H45.4507L46.0076 45.4309C46.3738 45.7949 46.3755 46.387 46.0115 46.7529C45.6475 47.1191 45.0554 47.1206 44.6895 46.7566L42.5352 44.6064C42.1689 44.2424 42.1675 43.6506 42.5315 43.2844L44.6816 41.1304C45.0457 40.7644 45.6375 40.7627 46.0037 41.1267C46.3696 41.4907 46.3713 42.0825 46.0073 42.4487L45.457 43H48.0623C50.0603 43 51.6875 44.6272 51.6875 46.6252C51.6875 47.6658 51.314 48.5593 50.624 49.2493Z"
                                      fill="white"/>
                            </g>
                            <defs>
                                <clipPath id="clip0_6959_70611">
                                    <rect width="32" height="32" fill="white"
                                          transform="translate(24.5 24)"/>
                                </clipPath>
                            </defs>
                        </svg>
                    </div>
                    <h5>{{$pendingOrders ?? '0'}}</h5>
                    <p>Pending Orders</p>
                </div>
            </div>
            <div class="col-12 col-sm-6 col-lg-3">
                <div class="gs-single-statatics third-child">
                    <div class="icon-wrapper">
                        <svg width="81" height="80" viewBox="0 0 81 80" fill="none"
                             xmlns="http://www.w3.org/2000/svg">
                            <path
                                d="M34.5 3.4641C38.2128 1.32051 42.7872 1.32051 46.5 3.4641L69.141 16.5359C72.8538 18.6795 75.141 22.641 75.141 26.9282V53.0718C75.141 57.359 72.8538 61.3205 69.141 63.4641L46.5 76.5359C42.7872 78.6795 38.2128 78.6795 34.5 76.5359L11.859 63.4641C8.14617 61.3205 5.85898 57.359 5.85898 53.0718V26.9282C5.85898 22.641 8.14617 18.6795 11.859 16.5359L34.5 3.4641Z"
                                fill="#FFB134"/>
                            <g clip-path="url(#clip0_6959_70618)">
                                <path
                                    d="M38.2031 46.9696L37.8248 48.8611L40.3193 48.0296C40.3779 48.0101 40.4389 48.0003 40.5 48.0003C40.561 48.0003 40.622 48.0101 40.6807 48.0296L43.1751 48.8611L42.7968 46.9696C42.765 46.8101 42.8025 46.6446 42.9 46.5146L44.0703 44.9543L42.1023 44.5606C41.9644 44.5331 41.8415 44.4556 41.7572 44.3431L40.4999 42.667L39.2428 44.3432C39.1584 44.4557 39.0355 44.5331 38.8977 44.5607L36.9297 44.9543L38.0999 46.5146C38.1975 46.6447 38.235 46.8101 38.2031 46.9696Z"
                                    fill="white"/>
                                <path
                                    d="M36.2785 33.1429L35.3864 30.4664C35.2866 30.167 35.4484 29.8434 35.7478 29.7436C36.0471 29.6439 36.3708 29.8056 36.4706 30.105L37.4832 33.1429H39.9285V30.2857C39.9285 29.9701 40.1842 29.7143 40.4999 29.7143C40.8155 29.7143 41.0713 29.9701 41.0713 30.2857V33.1429H43.5166L44.5292 30.105C44.629 29.8057 44.9525 29.6439 45.252 29.7436C45.5514 29.8434 45.7132 30.167 45.6135 30.4664L44.7212 33.1429H45.4612C46.3137 32.5319 48.1725 31.0531 48.5364 30.0848C48.89 29.1438 49.617 26.6131 49.9949 25.275C49.774 25.3611 49.592 25.4824 49.388 25.6184C48.942 25.9156 48.3869 26.2857 47.3567 26.2857C46.2138 26.2857 45.6435 25.5253 45.1852 24.9143C44.7472 24.3304 44.4728 24 43.9279 24C43.383 24 43.1087 24.3304 42.6708 24.9143C42.2126 25.5254 41.6423 26.2857 40.4995 26.2857C39.3566 26.2857 38.7863 25.5253 38.328 24.9143C37.8901 24.3304 37.6157 24 37.0709 24C36.526 24 36.2517 24.3304 35.8139 24.9143C35.3556 25.5253 34.7853 26.2857 33.6425 26.2857C32.6124 26.2857 32.0574 25.9156 31.6114 25.6183C31.4075 25.4824 31.2256 25.3611 31.0049 25.275C31.3828 26.613 32.1099 29.1437 32.4635 30.0847C32.8273 31.0531 34.6861 32.5319 35.5385 33.1428H36.2785V33.1429Z"
                                    fill="white"/>
                                <path
                                    d="M35.6106 34.2861C35.416 34.5034 35.0634 34.9031 34.6228 35.429H46.3773C45.9365 34.9031 45.5839 34.5034 45.3892 34.2861H35.6106Z"
                                    fill="white"/>
                                <path
                                    d="M40.5001 52.5714C43.966 52.5714 46.7858 49.7516 46.7858 46.2857C46.7858 42.8198 43.966 40 40.5001 40C37.0341 40 34.2144 42.8198 34.2144 46.2857C34.2144 49.7516 37.0341 52.5714 40.5001 52.5714ZM35.3949 44.3675C35.4649 44.1842 35.6241 44.0496 35.8166 44.0111L38.4596 43.4826L40.0429 41.3714C40.1509 41.2275 40.3202 41.1429 40.5001 41.1429C40.6799 41.1429 40.8493 41.2275 40.9572 41.3714L42.5405 43.4825L45.1836 44.0111C45.376 44.0496 45.5353 44.1841 45.6053 44.3674C45.6753 44.5508 45.6464 44.7572 45.5286 44.9142L43.9676 46.9956L44.489 49.6021C44.5289 49.8019 44.4595 50.0079 44.3069 50.1426C44.2009 50.2361 44.0659 50.2856 43.9286 50.2856C43.8681 50.2856 43.8071 50.276 43.748 50.2564L40.5001 49.1738L37.2522 50.2564C37.059 50.3207 36.8461 50.2776 36.6934 50.1426C36.5406 50.0079 36.4713 49.8019 36.5112 49.6022L37.0326 46.9956L35.4715 44.9143C35.3537 44.7573 35.3248 44.5509 35.3949 44.3675Z"
                                    fill="white"/>
                                <path
                                    d="M28.522 51.5209C28.3849 52.6561 28.7413 53.7977 29.4997 54.6534C30.2584 55.5091 31.3495 55.9999 32.4932 55.9999H48.5065C49.6503 55.9999 50.7414 55.5091 51.5 54.6533C52.2585 53.7976 52.6149 52.656 52.4778 51.5209C51.9553 47.195 51.5727 44.4405 51.3712 43.5552C50.8842 41.415 48.8939 38.5775 47.3078 36.5713H33.6924C32.1061 38.5781 30.1153 41.4164 29.6285 43.5552C29.427 44.4406 29.0444 47.195 28.522 51.5209ZM40.4999 38.8571C44.596 38.8571 47.9285 42.1895 47.9285 46.2856C47.9285 50.3818 44.596 53.7142 40.4999 53.7142C36.4038 53.7142 33.0713 50.3818 33.0713 46.2856C33.0713 42.1895 36.4038 38.8571 40.4999 38.8571Z"
                                    fill="white"/>
                                <path
                                    d="M34.5086 33.8031C34.2829 34.0581 33.9821 34.4053 33.6343 34.8224C32.73 35.1381 31.595 35.5974 30.47 36.2253C27.2671 38.011 25.6429 40.2424 25.6429 42.8567C25.6429 43.1724 25.3871 43.4281 25.0714 43.4281C24.7557 43.4281 24.5 43.1724 24.5 42.8567C24.5 39.8331 26.38 37.1903 29.9364 35.2145C31.5071 34.3424 33.0636 33.7838 34.0786 33.4717C34.235 33.5953 34.38 33.7074 34.5086 33.8031Z"
                                    fill="white"/>
                                <path
                                    d="M56.5 42.8567C56.5 43.1724 56.2443 43.4281 55.9286 43.4281C55.6129 43.4281 55.3572 43.1724 55.3572 42.8567C55.3572 40.2424 53.7329 38.011 50.53 36.2253C49.405 35.5981 48.27 35.1374 47.365 34.8224C47.0179 34.4053 46.7172 34.0581 46.4915 33.8031C46.62 33.7074 46.765 33.5953 46.9215 33.4717C47.9365 33.7838 49.4929 34.3424 51.0636 35.2145C54.62 37.1903 56.5 39.8331 56.5 42.8567Z"
                                    fill="white"/>
                            </g>
                            <defs>
                                <clipPath id="clip0_6959_70618">
                                    <rect width="32" height="32" fill="white"
                                          transform="translate(24.5 24)"/>
                                </clipPath>
                            </defs>
                        </svg>
                    </div>

                    <h5>0.00$</h5>
                    <p>Discount Bonus</p>
                </div>
            </div>

        </div>

        <!-- recent orders -->
        <div class="user-table recent-orders-table table-responsive wow-replaced" data-wow-delay=".1s">
            <h4 class="table-title">Recent Orders</h4>
            @if($recentOrder)
                <table class="table table-bordered">
                    <tr>
                        <th><span class="header-title">#Order</span></th>
                        <th><span class="header-title">Date</span></th>
                        <th><span class="header-title">Order Total</span></th>
                        <th><span class="header-title">Order Status</span></th>
                        <th><span class="header-title">View</span></th>
                    </tr>

                    <tr>
                        <td><span class="content">{{$recentOrder->order_number ?? ''}}</span></td>
                        <td><span
                                class="content">{{ optional($recentOrder)->paid_at ? \Carbon\Carbon::parse($recentOrder->paid_at)->format('d-m-y') : '' }}</span>
                        </td>
                        <td><span
                                class="content">{{$recentOrder->grand_total ?? '0.00'}}$</span>
                        </td>
                        <td>
                            <button type="button" disabled class="template-btn md-btn yellow-btn">
                                {{$recentOrder->order_status ?? ''}}
                            </button>
                        </td>
                        <td class="view-btn-wrapper">
                            <a href="{{route('user.order.detail',$recentOrder->id)}}"
                               class="view-btn">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                     xmlns="http://www.w3.org/2000/svg">
                                    <g clip-path="url(#clip0_548_16589)">
                                        <path
                                            d="M12 4.84668C7.41454 4.84668 3.25621 7.35543 0.187788 11.4303C-0.0625959 11.7641 -0.0625959 12.2305 0.187788 12.5644C3.25621 16.6442 7.41454 19.1529 12 19.1529C16.5855 19.1529 20.7438 16.6442 23.8122 12.5693C24.0626 12.2354 24.0626 11.769 23.8122 11.4352C20.7438 7.35543 16.5855 4.84668 12 4.84668ZM12.3289 17.0369C9.28506 17.2284 6.7714 14.7196 6.96287 11.6709C7.11998 9.1572 9.15741 7.11977 11.6711 6.96267C14.7149 6.7712 17.2286 9.27994 17.0371 12.3287C16.8751 14.8375 14.8377 16.8749 12.3289 17.0369ZM12.1767 14.7098C10.537 14.8129 9.18196 13.4628 9.28997 11.8231C9.37343 10.468 10.4732 9.37322 11.8282 9.28485C13.4679 9.18175 14.823 10.5319 14.7149 12.1716C14.6266 13.5316 13.5268 14.6264 12.1767 14.7098Z"
                                            fill="white"/>
                                    </g>
                                    <defs>
                                        <clipPath id="clip6_548_16589">
                                            <rect width="24" height="24" fill="white"/>
                                        </clipPath>
                                    </defs>
                                </svg>
                            </a>
                        </td>
                    </tr>
                    @else
                        <lable>No Order Found!</lable>
                    @endif
                </table>
        </div>


    </div>

@endsection