@extends('mobile.template.app')

@section('content')
    <div class="p-4 space-y-4 view-transition">
        <div class="grid grid-cols-2 gap-3">
            <a href="/cs-daily-reports"
                class="flex items-center justify-center bg-gradient-to-br from-green-500 to-green-600 text-white py-3 rounded-xl shadow-md transition hover:scale-[1.02] active:scale-95">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v16a1
                                1 0 01-1 1H4a1 1 0 01-1-1V4z" />
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 2v4m8-4v4M3 10h18" />
                </svg>
                <span class="font-semibold text-sm">Laporan Harian</span>
            </a>

            <a href=""
                class="flex items-center justify-center bg-gradient-to-br from-indigo-500 to-indigo-600 text-white py-3 rounded-xl shadow-md transition hover:scale-[1.02] active:scale-95">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M4 6h16M4 10h16M4 14h10m-6 4h6" />
                </svg>
                <span class="font-semibold text-sm">Laporan Bulanan</span>
            </a>
        </div>

        <!-- Saldo CS -->
        <div class="bg-gradient-to-br from-indigo-600 to-indigo-800 text-white p-4 shadow-lg rounded-xl">
            <div class="flex justify-between items-center mb-1">
                <p class="text-xs opacity-80">Saldo CS</p>
                <div class="flex items-center text-xs bg-white/20 px-2.5 py-1 rounded-lg cursor-pointer">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24"
                        stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0
                                11-18 0 9 9 0 0118 0z" />
                    </svg>
                    <span class="ml-1 font-semibold">History</span>
                </div>
            </div>

            <!-- Nominal Saldo -->
            <p class="text-2xl font-bold my-1 text-center">
                Rp 2.450.000
            </p>

            <!-- Tombol Input Order -->
            <div class="flex justify-center mt-3">
                <a href="{{ route('draft-orders.add') }}"
                    class="flex items-center bg-white text-indigo-700 font-semibold text-sm px-4 py-2 rounded-full shadow-md hover:bg-indigo-50 transition active:scale-95">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1.5" fill="none" viewBox="0 0 24 24"
                        stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                    </svg>
                    Input Order
                </a>
            </div>
        </div>

        <!-- CRBOX Progress -->
        <div class="bg-white p-4 shadow-sm rounded-xl">
            <div class="flex justify-between items-center mb-2">
                <h3 class="font-semibold text-gray-700 text-sm">CRBOX Target</h3>
                <span class="text-xs bg-indigo-100 text-indigo-700 px-2 py-1 rounded-full font-semibold">
                    72.4%
                </span>
            </div>

            <div class="relative">
                <div class="w-full bg-gray-200 rounded-full h-3 mb-2">
                    <div class="bg-gradient-to-r from-indigo-500 to-indigo-600 h-3 rounded-full transition-all duration-500"
                        style="width: 72.4%"></div>
                </div>
                <div class="flex justify-between text-xs text-gray-600">
                    <span class="font-semibold">246 box</span>
                    <span>Target: 340 box</span>
                </div>
            </div>

            <div class="mt-3 pt-3 border-t border-gray-100 space-y-2 text-sm">
                <div class="flex justify-between items-center">
                    <div class="flex items-center">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-yellow-500 mr-1" viewBox="0 0 20 20"
                            fill="currentColor">
                            <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07
                                        3.292a1 1 0 00.95.69h3.462c.969 0
                                        1.371 1.24.588 1.81l-2.8 2.034a1
                                        1 0 00-.364 1.118l1.07
                                        3.292c.3.921-.755 1.688-1.54
                                        1.118l-2.8-2.034a1 1 0
                                        00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1
                                        1 0 00-.364-1.118L2.98
                                        8.72c-.783-.57-.38-1.81.588-1.81h3.461a1
                                        1 0 00.951-.69l1.07-3.292z" />
                        </svg>
                        <span class="text-gray-600">Bonus Target (35%):</span>
                    </div>
                    <span class="font-bold text-green-600">Rp 5.000</span>
                </div>
                <div class="flex justify-between items-center">
                    <div class="flex items-center">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-blue-500 mr-1" viewBox="0 0 20 20"
                            fill="currentColor">
                            <path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0
                                        00-2 2v10a2 2 0 002 2h12a2 2 0
                                        002-2V6a2 2 0 00-2-2h-1V3a1 1 0
                                        10-2 0v1H7V3a1 1 0
                                        00-1-1zm0 5a1 1 0 000 2h8a1 1 0
                                        100-2H6z" clip-rule="evenodd" />
                        </svg>
                        <span class="text-gray-600">Bonus Normal:</span>
                    </div>
                    <span class="font-bold text-blue-600">Rp 3.000/box</span>
                </div>
            </div>
        </div>

        <!-- Statistik Grid -->
        <div class="grid grid-cols-2 gap-4">
            <div class="bg-white p-4 shadow-sm text-center rounded-xl">
                <div class="mx-auto w-12 h-12 bg-green-100 flex items-center justify-center mb-2 rounded-full">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-green-500" fill="none"
                        viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3
                                    2s1.343 2 3 2 3 .895 3
                                    2-1.343 2-3 2m0-8c1.11 0 2.08.402
                                    2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11
                                    0-2.08-.402-2.599-1M21
                                    12a9 9 0 11-18 0 9 9 0
                                    0118 0z" />
                    </svg>
                </div>
                <p class="font-bold text-xl text-gray-800">Rp 738.000</p>
                <p class="text-xs text-gray-500">Perkiraan Bonus</p>
                <p class="text-xs text-blue-600 font-semibold mt-1">246 box terjual</p>
            </div>

            <div class="bg-white p-4 shadow-sm text-center rounded-xl">
                <div class="mx-auto w-12 h-12 bg-red-100 flex items-center justify-center mb-2 rounded-full">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-red-500" fill="none" viewBox="0 0 24 24"
                        stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 15v-1a4 4 0
                                    00-4-4H8m0 0l3
                                    3m-3-3l3-3m9
                                    14V5a2 2 0 00-2-2H6a2 2 0
                                    00-2 2v14a2 2 0 002
                                    2h12a2 2 0 002-2z" />
                    </svg>
                </div>
                <p class="font-bold text-xl text-red-600">- Rp 180.000</p>
                <p class="text-xs text-gray-500">Pengurangan Retur</p>
                <p class="text-xs text-red-500 font-semibold mt-1">12 retur</p>
            </div>
        </div>

        <!-- Rincian Saldo -->
        <div class="bg-white p-4 shadow-sm rounded-xl">
            <h3 class="font-semibold text-gray-700 mb-3 text-sm">Rincian Saldo CS</h3>
            <div class="space-y-3 text-sm">
                <div class="flex justify-between">
                    <span class="text-gray-500">Bonus Pending</span>
                    <span class="font-semibold text-gray-700">Rp 150.000</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-gray-500">Total Bonus Diterima</span>
                    <span class="font-semibold text-green-600">Rp 8.750.000</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-gray-500">Saldo Sudah Ditarik</span>
                    <span class="font-semibold text-gray-700">Rp 6.120.000</span>
                </div>
                <div class="flex justify-between pt-2 border-t border-gray-100">
                    <span class="text-gray-500">Total Pengurangan Retur</span>
                    <span class="font-semibold text-red-600">- Rp 180.000</span>
                </div>
            </div>
        </div>

        <!-- Transaksi 10 Hari Terakhir (Scrollable) -->
        <div class="bg-white p-4 shadow-sm rounded-xl">
            <h3 class="font-semibold text-gray-700 mb-3 text-sm">Transaksi 10 Hari Terakhir</h3>
            <div class="overflow-y-auto max-h-64 divide-y divide-gray-100 text-sm">

                <!-- Hari 1 -->
                <div class="flex justify-between py-2">
                    <div>
                        <p class="font-semibold text-gray-800">Penjualan 10 Box</p>
                        <p class="text-xs text-gray-500">DRSBOX-01 • 17 Okt 2025</p>
                    </div>
                    <p class="font-semibold text-green-600">+ Rp 30.000</p>
                </div>

                <!-- Hari 2 -->
                <div class="flex justify-between py-2">
                    <div>
                        <p class="font-semibold text-gray-800">Retur 3 Box</p>
                        <p class="text-xs text-gray-500">DRSA-01 • 18 Okt 2025</p>
                    </div>
                    <p class="font-semibold text-red-600">- Rp 9.000</p>
                </div>

                <!-- Hari 3 -->
                <div class="flex justify-between py-2">
                    <div>
                        <p class="font-semibold text-gray-800">Penjualan 8 Box</p>
                        <p class="text-xs text-gray-500">DRSBOX-01 • 19 Okt 2025</p>
                    </div>
                    <p class="font-semibold text-green-600">+ Rp 24.000</p>
                </div>

                <!-- Hari 4 -->
                <div class="flex justify-between py-2">
                    <div>
                        <p class="font-semibold text-gray-800">Penjualan 12 Box</p>
                        <p class="text-xs text-gray-500">DRSBOX-01 • 20 Okt 2025</p>
                    </div>
                    <p class="font-semibold text-green-600">+ Rp 36.000</p>
                </div>

                <!-- Hari 5 -->
                <div class="flex justify-between py-2">
                    <div>
                        <p class="font-semibold text-gray-800">Retur 2 Box</p>
                        <p class="text-xs text-gray-500">DRSA-01 • 21 Okt 2025</p>
                    </div>
                    <p class="font-semibold text-red-600">- Rp 6.000</p>
                </div>

                <!-- Hari 6 -->
                <div class="flex justify-between py-2">
                    <div>
                        <p class="font-semibold text-gray-800">Penjualan 9 Box</p>
                        <p class="text-xs text-gray-500">DRSBOX-01 • 22 Okt 2025</p>
                    </div>
                    <p class="font-semibold text-green-600">+ Rp 27.000</p>
                </div>

                <!-- Hari 7 -->
                <div class="flex justify-between py-2">
                    <div>
                        <p class="font-semibold text-gray-800">Penjualan 7 Box</p>
                        <p class="text-xs text-gray-500">DRSBOX-01 • 23 Okt 2025</p>
                    </div>
                    <p class="font-semibold text-green-600">+ Rp 21.000</p>
                </div>

                <!-- Hari 8 -->
                <div class="flex justify-between py-2">
                    <div>
                        <p class="font-semibold text-gray-800">Retur 1 Box</p>
                        <p class="text-xs text-gray-500">DRSA-01 • 24 Okt 2025</p>
                    </div>
                    <p class="font-semibold text-red-600">- Rp 3.000</p>
                </div>

                <!-- Hari 9 -->
                <div class="flex justify-between py-2">
                    <div>
                        <p class="font-semibold text-gray-800">Penjualan 11 Box</p>
                        <p class="text-xs text-gray-500">DRSBOX-01 • 25 Okt 2025</p>
                    </div>
                    <p class="font-semibold text-green-600">+ Rp 33.000</p>
                </div>

                <!-- Hari 10 -->
                <div class="flex justify-between py-2">
                    <div>
                        <p class="font-semibold text-gray-800">Penjualan 5 Box</p>
                        <p class="text-xs text-gray-500">DRSBOX-01 • 26 Okt 2025</p>
                    </div>
                    <p class="font-semibold text-green-600">+ Rp 15.000</p>
                </div>
            </div>
        </div>

        <!-- Info CRBOX -->
        <div
            class="bg-gradient-to-br from-blue-50 to-indigo-50 p-4 rounded-xl border border-indigo-100 text-xs text-gray-700">
            <div class="flex items-start">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-indigo-600 mr-2 mt-0.5" viewBox="0 0 20 20"
                    fill="currentColor">
                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0
                                0116 0zm-7-4a1 1 0 11-2 0 1 1 0
                                012 0zM9 9a1 1 0 000 2v3a1 1 0
                                001 1h1a1 1 0 100-2v-3a1 1 0
                                00-1-1H9z" clip-rule="evenodd" />
                </svg>
                <div class="leading-relaxed">
                    <p class="font-semibold text-indigo-700 mb-1">Informasi CRBOX:</p>
                    <ul class="space-y-1 ml-1">
                        <li>• Target CRBOX: <span class="font-semibold">35% (340 box)</span></li>
                        <li>• Bonus Target: <span class="font-semibold text-green-600">Rp 5.000/box</span></li>
                        <li>• Bonus Normal: <span class="font-semibold text-blue-600">Rp 3.000/box</span></li>
                        <li>• Sisa target: <span class="font-semibold">94 box lagi</span></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <style>
        /* Scrollbar Custom untuk Mobile */
        .custom-scrollbar::-webkit-scrollbar {
            width: 4px;
        }

        .custom-scrollbar::-webkit-scrollbar-thumb {
            background-color: rgba(99, 102, 241, 0.5);
            border-radius: 10px;
        }

        .custom-scrollbar::-webkit-scrollbar-thumb:hover {
            background-color: rgba(79, 70, 229, 0.8);
        }
    </style>
@endsection