@extends("../main")

@section("content")

@include('../navbar')

<style>
.css-16pvxfk {
    background: linear-gradient(270deg, rgb(211 211 211) -1.95%, rgb(110 7 7) 50.95%) !important;
}

  .css-6qw8qz {
    border: 1px solid rgba(203, 203, 203, 0.5);
    background: linear-gradient(163.42deg, rgb(90 90 90) -107%, rgba(255, 255, 255, 0) 105.46%);
}

  .css-6qw8qzz {
    border: 1px solid rgba(203, 203, 203, 0.5);
    background-color:#282828;
}




.css-138rpjn {
    background: linear-gradient(500deg, rgb(210 4 1) 0%, rgba(112, 127, 235, 0) 100%);
    color:white;
}

.css-138rpjnn:hover {
    background: linear-gradient(500deg, rgb(210 4 1) 0%, rgba(112, 127, 235, 0) 100%);
    color:white;
}

.min-w-full {
    min-width: 100%;
}


</style>
<main class="min-h-[50vh]">
    <div class="mx-auto max-w-7xl pb-24 grid grid-cols-12 gap-6 lg:gap-x-16 lg:py-8 lg:px-12 mb-10 md:px-4 px-4">
        <div class="hidden md:block lg:block xl:block col-span-1 lg:col-span-3">
            <aside class="py-6 lg:col-span-3 lg:p-0 sticky top-20">
                <nav class="h-full content-start lg:grid lg:content-between">
                    <div class="space-y-4">
                        <a class="group flex gap-3 items-center rounded-3xl px-3 py-2 text-sm font-medium css-138rpjn css-138rpjnn" aria-current="page" href="/user/dashboard">
                            <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
                                <path fill="none" d="M0 0h24v24H0z"></path>
                                <path d="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z"></path>
                            </svg>
                            <span class="truncate hidden lg:block xl:block">Akun</span>
                        </a>
                        <a class="group flex gap-3 items-center rounded-3xl px-3 py-2 text-sm font-medium css-138rpjnn" aria-current="page" href="/deposit">
                            <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
                                <path fill="none" d="M0 0h24v24H0z"></path>
                                <path d="M20 2H4c-1.11 0-2 .89-2 2v11c0 1.11.89 2 2 2h4v5l4-2 4 2v-5h4c1.11 0 2-.89 2-2V4c0-1.11-.89-2-2-2zm0 13H4v-2h16v2zm0-5H4V4h16v6z"></path>
                            </svg>
                            <span class="truncate hidden lg:block xl:block">Deposit</span>
                        </a>
                        
                    </div>
                    <div class="cursor-pointer content-end">
                    </div>
                </nav>
            </aside>
        </div>
        <div class="col-span-12 md:col-span-11 lg:col-span-9 mt-6 sm:mt-6 lg:mt-0 md:mt-6">
            <div class="flex flex-col gap-6">
                <div class="grid grid-cols-12 gap-6">
                    <div class="p-6 col-span-12 md:col-span-6 lg:col-span-8 xl:col-span-8 rounded-2xl css-6qw8qz">
                        <div class="flex justify-between items-center col-span-12 gap-4">
                            <div class="flex items-center gap-4">
                                <div class="relative h-12" style="width: 7rem;">
                                    <img
                                        alt="patih"
                                        sizes="100vw"
                                        srcset="/assets/logo/logo-user.png"
                                        src=""
                                        decoding="async"
                                        data-nimg="fill"
                                        class="rounded-full ring-1 ring-white"
                                        loading="lazy"
                                        style="position: absolute; height: 100%; width: 100%; inset: 0px; color: transparent;"
                                    />
                                </div>
                                <div class="flex flex-col gap-1">
                                    <h3 class="font-bold text-sm lg:text-lg text-white">Selamat Datang {{Auth()->user()->name}}</h3>
                                    <p class="text-white/70 text-[12px] lg:text-[14px] flex items-center gap-3">
                                        {{Str::upper(Auth()->user()->role)}}
                                        <span>
                                            <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
                                                <path fill="none" d="M0 0h24v24H0z"></path>
                                                <path d="M20 2H4c-1.11 0-2 .89-2 2v11c0 1.11.89 2 2 2h4v5l4-2 4 2v-5h4c1.11 0 2-.89 2-2V4c0-1.11-.89-2-2-2zm0 13H4v-2h16v2zm0-5H4V4h16v6z"></path>
                                            </svg>
                                        </span>
                                    </p>
                                </div>
                            </div>
                        </div>
                        <hr class="my-6 border-white/30" />
                        <div class="flex justify-between items-center gap-3">
                           <div class="info-user text-[12px] lg:text-[14px]" >
                            <table>
                                <tr>
                                    <td style="font-weight: bold; ">Nama</td><td>:</td><td>{{Auth()->user()->name}}</td>
                                </tr>
                                <tr>
                                    <td style="font-weight: bold; ">Username</td><td>:</td><td>{{Auth()->user()->whatsapp}}</td>
                                </tr>
                                
                            </table>
                        </div>
                        </div>
                        <div class="flex flex-row-reverse justify-end lg:flex-row md:flex-row gap-3 mt-3">
                         <a class="group flex items-center rounded-3xl px-3 py-2 text-sm font-medium btn-primary css-138rpjnn" aria-current="page" href="{{url('/user/edit/profile')}}">
                           <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg">
                                        <path fill="none" d="M0 0h24v24H0V0z"></path>
                                        <circle cx="10" cy="8" r="4"></circle>
                                        <path
                                            d="M10.67 13.02c-.22-.01-.44-.02-.67-.02-2.42 0-4.68.67-6.61 1.82-.88.52-1.39 1.5-1.39 2.53V20h9.26a6.963 6.963 0 01-.59-6.98zM20.75 16c0-.22-.03-.42-.06-.63l1.14-1.01-1-1.73-1.45.49c-.32-.27-.68-.48-1.08-.63L18 11h-2l-.3 1.49c-.4.15-.76.36-1.08.63l-1.45-.49-1 1.73 1.14 1.01c-.03.21-.06.41-.06.63s.03.42.06.63l-1.14 1.01 1 1.73 1.45-.49c.32.27.68.48 1.08.63L16 21h2l.3-1.49c.4-.15.76-.36 1.08-.63l1.45.49 1-1.73-1.14-1.01c.03-.21.06-.41.06-.63zM17 18c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"
                                        ></path>
                                    </svg>
                            <span class="truncate mt-1">Edit Profile</span>
                        </a>
                    </div>
                    </div>
                    
                    <div class="col-span-12 md:col-span-6 lg:col-span-4 xl:col-span-4 flex justify-center rounded-2xl css-6qw8qz">
                        <div class="membership-banner flex">
                            <div class="p-6 flex flex-col justify-between items-center gap-6">
                                <p class="leading-normal">Dapatkan harga lebih murah dengan Upgrade Membership!</p>
                                <div class="relative w-full flex items-center justify-center">
                                    <a class="flex btn-primary gap-2 px-5 py-2 rounded-full btn-primary items-center font-medium justify-center items-center z-20 w-full css-eqxk5j" aria-current="page" href="{{ !$config ? '' : $config->wa_admin }}?text=%20Halo%20Admin%20Deposit%20saya%20Mau%20di%20Upgrade%20ID%20Membership%20(...)" >
                                        <span class="text-[12px]" >
                                            <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg">
                                                <path fill="none" d="M0 0h24v24H0z"></path>
                                                <path d="M20 2H4c-1.11 0-2 .89-2 2v11c0 1.11.89 2 2 2h4v5l4-2 4 2v-5h4c1.11 0 2-.89 2-2V4c0-1.11-.89-2-2-2zm0 13H4v-2h16v2zm0-5H4V4h16v6z"></path>
                                            </svg>
                                        </span>
                                        <span class="undefined lg:text-[12px] text-[12px]">Upgrade Sekarang</span>
                                    
                                        
                                    </a> 
                                    <div class="absolute top-0 bottom-0 left-0 right-0 z-10 px-20 lg:px-11 md:px-14 py-1">
                                        <div class="relative w-full h-full"><div class="absolute animate-ping rounded-full w-full h-full css-1h67hu5"></div></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="grid grid-cols-12 gap-6">
                    <div class="p-6 col-span-12 md:col-span-6 lg:col-span-8 flex flex-col lg:flex-row lg:items-center justify-between gap-5 rounded-2xl css-6qw8qz">
                        <div>
                            <p class="text-md font-medium mb-4">Saldo {{ config('app.name') }} </p>
                            <h3 class="text-[24px] lg:text-[26px] font-bold css-m6e15a">Rp {{ number_format(Auth::user()->balance, 0, ',', '.') }},-</h3>
                        </div>
                        <div class="flex flex-row-reverse justify-end lg:flex-row md:flex-row gap-3">
                            <a class="group flex gap-3 items-center rounded-3xl px-3 py-2 text-sm font-medium btn-primary css-138rpjnn" aria-current="page" href="/deposit">
                            <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
                                <path fill="none" d="M0 0h24v24H0z"></path>
                                <path d="M20 2H4c-1.11 0-2 .89-2 2v11c0 1.11.89 2 2 2h4v5l4-2 4 2v-5h4c1.11 0 2-.89 2-2V4c0-1.11-.89-2-2-2zm0 13H4v-2h16v2zm0-5H4V4h16v6z"></path>
                            </svg>
                            <span class="truncate">Deposit</span>
                        </a>
                        </div>
                    </div>
                </div>
                
                <h3 class="mt-4 text-xl font-medium">Total Pesanan</h3>
                <div class="grid grid-cols-12 gap-6">
                    <div class="p-6 col-span-12 md:col-span-12 lg:col-span-12 flex flex-col lg:flex-row lg:items-center justify-between gap-5 rounded-2xl css-6qw8qz">
                        <div class="w-100 text-center">
                            <h3 class="text-[24px] lg:text-[26px] font-bold css-m6e15a">{{count($data)}}</h3>
                            <p class="text-md font-medium mb-4">Total Transaksi </p>
                        </div>
                    </div>
                    <div class="p-6 col-span-12 md:col-span-12 lg:col-span-12 flex flex-col lg:flex-row lg:items-center justify-between gap-5 rounded-2xl css-6qw8qz">
                        <div class="w-100 text-center">
                            <h3 class="text-[24px] lg:text-[26px] font-bold css-m6e15a">Rp 0</h3>
                            <p class="text-md font-medium mb-4">Total Penjualan </p>
                        </div>
                    </div>
                    <div class="p-6 col-span-12 md:col-span-6 lg:col-span-6 flex flex-col lg:flex-row lg:items-center justify-between gap-5 rounded-2xl" style="background-color: #E9B308;">
                        <div class="w-100 text-center">
                            <h3 class="text-[24px] lg:text-[26px] font-bold css-m6e15a">0</h3>
                            <p class="text-md font-medium mb-4">Pesanan Pending</p>
                        </div>
                    </div>
                    <div class="p-6 col-span-12 md:col-span-6 lg:col-span-6 flex flex-col lg:flex-row lg:items-center justify-between gap-5 rounded-2xl" style="background-color: #0384C6;">
                        <div class="w-100 text-center">
                            <h3 class="text-[24px] lg:text-[26px] font-bold css-m6e15a">0</h3>
                            <p class="text-md font-medium mb-4">Sedang Di Proses</p>
                        </div>
                    </div>
                    <div class="p-6 col-span-12 md:col-span-6 lg:col-span-6 flex flex-col lg:flex-row lg:items-center justify-between gap-5 rounded-2xl" style="background-color: #10B982;">
                        <div class="w-100 text-center">
                            <h3 class="text-[24px] lg:text-[26px] font-bold css-m6e15a">0</h3>
                            <p class="text-md font-medium mb-4">Pesanan Sukses</p>
                        </div>
                    </div>
                    <div class="p-6 col-span-12 md:col-span-6 lg:col-span-6 flex flex-col lg:flex-row lg:items-center justify-between gap-5 rounded-2xl" style="background-color: #F43F5E;">
                        <div class="w-100 text-center">
                            <h3 class="text-[24px] lg:text-[26px] font-bold css-m6e15a">0</h3>
                            <p class="text-md font-medium mb-4">Pesanan Gagal</p>
                        </div>
                    </div>
                </div>
                
                <h3 class="mt-4 text-xl font-medium">Pesanan Saya</h3>
                
                
              <div class="-mx-4 overflow-x-auto p-2 ring-1 ring-primary-x sm:mx-0 rounded-lg sm:rounded-lg mt-5">
                       
                             <table class="min-w-full divide-y divide-murky-600">
                                <thead>
                                    <tr>
                                        <th scope="col" colspan="1" class="table-cell px-3 py-3.5 text-left text-xs font-semibold text-white first:table-cell first:pl-4 sm:first:pl-6 first:pr-4 last:relative last:table-cell sm:last:pr-6 [&amp;:nth-last-child(2)]:table-cell">
                                    <div class="cursor-pointer select-none flex whitespace-nowrap items-center justify-between">Invoice</th>
                                        <th scope="col" colspan="1" class="table-cell px-3 py-3.5 text-left text-xs font-semibold text-white first:table-cell first:pl-4 sm:first:pl-6 first:pr-4 last:relative last:table-cell sm:last:pr-6 [&amp;:nth-last-child(2)]:table-cell">
                                    <div class="">Layanan</th>
                                        <th scope="col" colspan="1" class="table-cell px-3 py-3.5 text-left text-xs font-semibold text-white first:table-cell first:pl-4 sm:first:pl-6 first:pr-4 last:relative last:table-cell sm:last:pr-6 [&amp;:nth-last-child(2)]:table-cell">
                                    <div class="cursor-pointer select-none flex whitespace-nowrap items-center justify-between">Target</th>
                                        <th scope="col" colspan="1" class="table-cell px-3 py-3.5 text-left text-xs font-semibold text-white first:table-cell first:pl-4 sm:first:pl-6 first:pr-4 last:relative last:table-cell sm:last:pr-6 [&amp;:nth-last-child(2)]:table-cell">
                                    <div class="cursor-pointer select-none flex whitespace-nowrap items-center justify-between">Harga</th>
                                        <th scope="col" colspan="1" class="table-cell px-3 py-3.5 text-left text-xs font-semibold text-white first:table-cell first:pl-4 sm:first:pl-6 first:pr-4 last:relative last:table-cell sm:last:pr-6 [&amp;:nth-last-child(2)]:table-cell">
                                    <div class="cursor-pointer select-none flex whitespace-nowrap items-center justify-between">Status</th>
                                        <th scope="col" colspan="1" class="table-cell px-3 py-3.5 text-left text-xs font-semibold text-white first:table-cell first:pl-4 sm:first:pl-6 first:pr-4 last:relative last:table-cell sm:last:pr-6 [&amp;:nth-last-child(2)]:table-cell">
                                    <div class="cursor-pointer select-none flex whitespace-nowrap items-center justify-between">Detail</th>
                                    </tr>
                                </thead>
                                <tbody>
                                   @foreach($data as $pesanan)
                                    @php
                                    $zone = $pesanan->zone != null ? "-".$pesanan->zone : "";
                                    $label_pesanan = '';
                                    if($pesanan->status == "Pending" || $pesanan->status == "Menunggu Pembayaran" || $pesanan->status == "Waiting"){
                                    $label_pesanan = 'warning';
                                    }else if($pesanan->status == "Processing"){
                                    $label_pesanan = 'info';
                                    }else if($pesanan->status == "Success"){
                                    $label_pesanan = 'success';
                                    }else{
                                    $label_pesanan = 'danger';
                                    }
                                    @endphp
                                    <tr>
                                        <th class="table-cell px-3 py-3.5 text-left text-xs font-medium text-white first:table-cell first:pl-4 sm:first:pl-6 first:pr-4 last:relative last:table-cell sm:last:pr-6 [&amp;:nth-last-child(2)]:table-cell">
                            <div class="whitespace-nowrap">{{ $pesanan->order_id }}</th>
                                        <td class="table-cell px-3 py-3.5 text-left text-xs font-medium text-white first:table-cell first:pl-4 sm:first:pl-6 first:pr-4 last:relative last:table-cell sm:last:pr-6 [&amp;:nth-last-child(2)]:table-cell">
                            <div class="whitespace-nowrap">
                                            {{ $pesanan->layanan }}<br>
                                        </td>
                                        <td class="table-cell px-3 py-3.5 text-left text-xs font-medium text-white first:table-cell first:pl-4 sm:first:pl-6 first:pr-4 last:relative last:table-cell sm:last:pr-6 [&amp;:nth-last-child(2)]:table-cell">
                            <div class="whitespace-nowrap">{{ $pesanan->user_id.$zone }}</td>
                                        <td class="table-cell px-3 py-3.5 text-left text-xs font-medium text-white first:table-cell first:pl-4 sm:first:pl-6 first:pr-4 last:relative last:table-cell sm:last:pr-6 [&amp;:nth-last-child(2)]:table-cell">
                            <div class="whitespace-nowrap">Rp. {{ number_format($pesanan->harga, 0, ',', '.') }}</td>
                                        <td class="table-cell px-3 py-3.5 text-left text-xs font-medium text-white first:table-cell first:pl-4 sm:first:pl-6 first:pr-4 last:relative last:table-cell sm:last:pr-6 [&amp;:nth-last-child(2)]:table-cell">
                            <div class="whitespace-nowrap"><span class="badge bg-{{ $label_pesanan }}">{{ $pesanan->status }}</span></td>
                                        <td class="table-cell px-3 py-3.5 text-left text-xs font-medium text-white first:table-cell first:pl-4 sm:first:pl-6 first:pr-4 last:relative last:table-cell sm:last:pr-6 [&amp;:nth-last-child(2)]:table-cell">
                            <div class="whitespace-nowrap"><a href="javascript:;" onclick="modal('Order Details', '{{ route('riwayat.detail', [$pesanan->order_id]) }}')" class="btn btn-info"><i class="fa fa-qrcode"></i></a></td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                </div> 
            </div>
        </div>
    </div>
</main>


<script type="text/javascript">
     $(document).ready(function(){
        $('.table').DataTable();
    });
    function modal(name, link) {
        // var myModal = new bootstrap.Modal($('#modal-detail'))
        $.ajax({
            type: "GET",
            url: link,
            beforeSend: function() {
                $('#modal-detail-title').html(name);
                $('#modal-detail-body').html('Loading...');
            },
            success: function(result) {
                $('#modal-detail-title').html(name);
                $('#modal-detail-body').html(result);
            },
            error: function() {
                $('#modal-detail-title').html(name);
                $('#modal-detail-body').html('There is an error...');
            }
        });
        $("#modal-detail").modal("show");
    }
</script>

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" id="modal-detail" style="border-radius:7%">
    <div class="modal-dialog modal-lg">
                <div class="p-3 border-none rounded-2xl css-6qw8qzz">
        <div class="modal-content css-6qw8qzz">
            <div class="modal-header">
                <h4 class="modal-title" id="modal-detail-title"></h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" id="modal-detail-body"></div>
        </div>
        </div>
    </div>
</div>

@include('../footer')
@endsection