@extends('layouts.site.master')
@section('panel-orders', true)
@section('content')
<div class="container">
    <div class="row mx-0 mt-md-5 mt-0 w-100">
        @include('site.panel.sidebar')
        <div class="col-md-9 col-12 p-2">
            <div class="p-2 shadow-sm bg-white main-radius">
                <div class="p-2 pb-0 d-flex justify-content-between mb-2">
                    <p class="bold side-title position-relative max-w mb-0">
                        سفارشات من
                    </p>
                </div>
                <div class="table-responsive p-2 pb-0 order-table">
                    <table class="w-100">
                        <thead>
                            <tr>
                                <th class="text-start p-2 font-13 medium-gray">#</th>
                                <th class="text-center p-2 font-13 medium-gray">نوع خدمات</th>
                                <th class="text-center p-2 font-13 medium-gray">نوع خرید</th>
                                <th class="text-center p-2 font-13 medium-gray">مبلغ</th>
                                <th class="text-center p-2 font-13 medium-gray">وضعیت</th>
                                <th class="text-end p-2 font-13 medium-gray">مشاهده</th>
                            </tr>
                        </thead>
                        <tbody>
                        @forelse($orders as $number => $recentOrder)
                            @php
                                $statusData = $recentOrder->getStatusData();
                            @endphp
                            <tr class="bg-body">
                                <td class="p-3 font-13">{{ $recentOrder->convertToPersian($number + 1) }}</td>
                                <td class="text-center p-3 font-13">
                                    {{ $recentOrder->service->title ?? 'سرویس حذف شده' }}
                                </td>
                                <td class="text-center p-3 font-13">
                                    {{ $recentOrder->getOrderTypeFarsi() }}
                                </td>
                                <td class="text-center p-3 font-13">
                                    {{ $recentOrder->getFormattedPriceFa() }} تومان 
                                </td>
                                <td class="text-center p-3">
                                    <div
                                        class="font-12 {{ $statusData['class'] }} align-items-center gap-1 justify-content-center d-flex">

                                        @if($statusData['svg_type'] == 'success')
                                            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13"
                                                 viewBox="0 0 512 512" class="flex-shrink-0">
                                                <path
                                                    d="M497.36 69.995c-7.532-7.545-19.753-7.558-27.285-.032L238.582 300.845l-83.522-90.713c-7.217-7.834-19.419-8.342-27.266-1.126-7.841 7.217-8.343 19.425-1.126 27.266l97.126 105.481a19.273 19.273 0 0 0 13.784 6.22c.141.006.277.006.412.006a19.317 19.317 0 0 0 13.623-5.628L497.322 97.286c7.551-7.525 7.564-19.746.038-27.291z"
                                                    fill="#029a49"/>
                                                <path
                                                    d="M492.703 236.703c-10.658 0-19.296 8.638-19.296 19.297 0 119.883-97.524 217.407-217.407 217.407-119.876 0-217.407-97.524-217.407-217.407 0-119.876 97.531-217.407 217.407-217.407 10.658 0 19.297-8.638 19.297-19.296C275.297 8.638 266.658 0 256 0 114.84 0 0 114.84 0 256c0 141.154 114.84 256 256 256 141.154 0 256-114.846 256-256 0-10.658-8.638-19.297-19.297-19.297z"
                                                    fill="#029a49"/>
                                            </svg>
                                        @elseif($statusData['svg_type'] == 'failed')
                                            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13"
                                                 viewBox="0 0 512 512" class="flex-shrink-0">
                                                <path
                                                    d="M256 512C114.836 512 0 397.164 0 256S114.836 0 256 0s256 114.836 256 256-114.836 256-256 256zM256 32C132.48 32 32 132.48 32 256s100.48 224 224 224 224-100.48 224-224S379.52 32 256 32z"
                                                    fill="#ff0000"/>
                                                <path
                                                    d="M176.813 351.188c-4.098 0-8.196-1.555-11.31-4.692-6.25-6.25-6.25-16.383 0-22.633l158.4-158.402c6.253-6.25 16.386-6.25 22.636 0s6.25 16.383 0 22.637L188.137 346.496a16.016 16.016 0 0 1-11.325 4.692z"
                                                    fill="#ff0000"/>
                                                <path
                                                    d="M335.188 351.188c-4.094 0-8.192-1.555-11.305-4.692L165.484 188.117c-6.254-6.25-6.254-16.383 0-22.633 6.25-6.254 16.383-6.254 22.633 0l158.399 158.399c6.254 6.25 6.254 16.383 0 22.633a16.007 16.007 0 0 1-11.329 4.672z"
                                                    fill="#ff0000"/>
                                            </svg>
                                        @else
                                            <svg xmlns="http://www.w3.org/2000/svg" version="1.1"
                                                 xmlns:xlink="http://www.w3.org/1999/xlink" width="13" height="13"
                                                 x="0"
                                                 y="0" viewBox="0 0 465.2 465.2"
                                                 style="enable-background:new 0 0 512 512"
                                                 xml:space="preserve" class="flex-shrink-0">
                                            <g>
                                                <path
                                                    d="M279.591 423.714a192.461 192.461 0 0 1-11.629 2.52c-10.148 1.887-16.857 11.647-14.98 21.804a18.651 18.651 0 0 0 7.618 11.876 18.64 18.64 0 0 0 14.175 3.099 233.175 233.175 0 0 0 13.854-3.008c10.021-2.494 16.126-12.646 13.626-22.662-2.494-10.025-12.637-16.125-22.664-13.629zM417.887 173.047a18.644 18.644 0 0 0 6.97 9.398c4.684 3.299 10.813 4.409 16.662 2.475 9.806-3.256 15.119-13.83 11.875-23.631a232.327 232.327 0 0 0-4.865-13.314c-3.836-9.59-14.714-14.259-24.309-10.423-9.585 3.834-14.256 14.715-10.417 24.308a194.816 194.816 0 0 1 4.084 11.187zM340.36 397.013a195.86 195.86 0 0 1-10.134 6.261c-8.949 5.162-12.014 16.601-6.854 25.546a18.664 18.664 0 0 0 5.416 5.942c5.769 4.059 13.604 4.667 20.127.909a233.049 233.049 0 0 0 12.062-7.452c8.614-5.691 10.985-17.294 5.291-25.912-5.693-8.621-17.291-10.989-25.908-5.294zM465.022 225.279c-.407-10.322-9.101-18.356-19.426-17.953-10.312.407-18.352 9.104-17.947 19.422.155 3.945.195 7.949.104 11.89-.145 6.473 3.021 12.243 7.941 15.711a18.647 18.647 0 0 0 10.345 3.401c10.322.229 18.876-7.958 19.105-18.285.103-4.709.064-9.48-.122-14.186zM414.835 347.816c-8.277-6.21-19.987-4.524-26.186 3.738a195.193 195.193 0 0 1-7.434 9.298c-6.69 7.86-5.745 19.666 2.115 26.361.448.38.901.729 1.371 1.057 7.814 5.509 18.674 4.243 24.992-3.171a232.358 232.358 0 0 0 8.874-11.102c6.2-8.262 4.522-19.98-3.732-26.181zM442.325 280.213c-9.855-3.09-20.35 2.396-23.438 12.251a198.06 198.06 0 0 1-3.906 11.253c-3.105 8.156-.13 17.13 6.69 21.939a18.635 18.635 0 0 0 4.126 2.19c9.649 3.682 20.454-1.159 24.132-10.812a240.351 240.351 0 0 0 4.646-13.382c3.085-9.857-2.397-20.349-12.25-23.439zM197.999 426.402a193.1 193.1 0 0 1-47.968-15.244c-.18-.094-.341-.201-.53-.287a204.256 204.256 0 0 1-10.63-5.382c-.012-.014-.034-.023-.053-.031a199.491 199.491 0 0 1-18.606-11.628C32.24 331.86 11.088 209.872 73.062 121.901c13.476-19.122 29.784-35.075 47.965-47.719.224-.156.448-.311.67-.468 64.067-44.144 151.06-47.119 219.089-1.757l-14.611 21.111c-4.062 5.876-1.563 10.158 5.548 9.518l63.467-5.682c7.12-.64 11.378-6.799 9.463-13.675L387.61 21.823c-1.908-6.884-6.793-7.708-10.859-1.833l-14.645 21.161C312.182 7.638 252.303-5.141 192.87 5.165a235.263 235.263 0 0 0-17.709 3.78c-.045.008-.081.013-.117.021-.225.055-.453.128-.672.189-51.25 13.161-95.965 43.052-127.872 85.7-.269.319-.546.631-.8.978a220.276 220.276 0 0 0-3.145 4.353 229.217 229.217 0 0 0-4.938 7.308c-.199.296-.351.597-.525.896C10.762 149.191-1.938 196.361.24 244.383c.005.158-.004.317 0 .479a227.87 227.87 0 0 0 1.088 14.129c.027.302.094.588.145.89a230.909 230.909 0 0 0 1.998 14.145c8.344 48.138 31.052 91.455 65.079 125.16.079.079.161.165.241.247.028.031.059.047.086.076a235.637 235.637 0 0 0 29.793 24.898c28.02 19.744 59.221 32.795 92.729 38.808 10.167 1.827 19.879-4.941 21.703-15.103 1.823-10.169-4.939-19.889-15.103-21.71z"
                                                    fill="#ffa500" opacity="1" data-original="#000000" class=""></path>
                                                <path
                                                    d="M221.124 83.198c-8.363 0-15.137 6.78-15.137 15.131v150.747l137.87 71.271a15.042 15.042 0 0 0 6.933 1.69c5.476 0 10.765-2.982 13.454-8.185 3.835-7.426.933-16.549-6.493-20.384L236.244 230.65V98.329c-.001-8.351-6.767-15.131-15.12-15.131z"
                                                    fill="#ffa500" opacity="1" data-original="#000000" class=""></path>
                                            </g>
                                        </svg>
                                        @endif

                                        <span class="max-w">{{ $statusData['label'] }}</span>
                                    </div>
                                </td>
                                <td class="p-3">
                                    {{-- هدایت به صفحه جزئیات فاکتور --}}
                                    <a class="text-end justify-content-end align-items-center d-flex font-12 mint-green"
                                       href="{{route('panel.order.factor',$recentOrder->id)}}">
                                        مشاهده
                                        <img width="7" class="ms-1"
                                             src="{{asset('assets/site/img/article-more.svg')}}" alt="">
                                    </a>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6" class="text-center p-5">
                                    <p class="mt-3 font-14 medium-gray">هنوز هیچ سفارشی ثبت نکردی!</p>
                                    {{--                                        <a href="{{ route('panel.order.create') }}" class="btn btn-sm btn-outline-success font-12">ثبت اولین سفارش</a>--}}
                                </td>
                            </tr>
                            {{--                                TODO : kasra_fix - وقتی هیچ سفارشی ثبت نشده این قراره نمایش داده بشه--}}
                        @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection