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


<main class="flex-1
                 min-w-0">


        <!-- TOPBAR -->

        <header class="h-20
                       bg-white
                       border-b
                       border-gray-200
                       px-5
                       lg:px-8
                       flex
                       items-center
                       justify-between">


            <div class="flex
                        items-center
                        gap-4">


                <!-- Mobile Menu -->

                <button onclick="toggleSidebar()"
                        class="lg:hidden
                               p-2
                               rounded-lg
                               bg-gray-100">


                    <svg class="w-6
                                h-6"
                         fill="none"
                         stroke="currentColor"
                         viewBox="0 0 24 24">


                        <path stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="2"
                              d="M4 6h16M4 12h16M4 18h16"/>

                    </svg>

                </button>


                <div>

                    <h2 class="text-xl
                               sm:text-2xl
                               font-bold
                               text-gray-900">

                        <span class="capitalize">{{$users->role}}</span> Dashboard

                    </h2>


                    <p class="text-sm
                              text-gray-500
                              hidden sm:block">

                        Welcome back,
   

                    </p>

                </div>

            </div>


            <!-- System Status -->

            <div class="flex
                        items-center
                        gap-2
                        text-sm
                        text-gray-600">


                <span class="w-2
                             h-2
                             bg-green-500
                             rounded-full
                             animate-pulse">

                </span>


                <span class="hidden sm:block">

                    System Online

                </span>

            </div>

        </header>


        <!-- CONTENT -->

        <div class="p-5
                    lg:p-8">


            <!-- Welcome Banner -->

      <div class="max-w-full mx-auto my-8 p-4 sm:p-6 bg-white rounded-2xl border border-gray-100 shadow-sm space-y-4">

    <!-- Table Header Title Bar -->
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 pb-4 border-b border-gray-100">
        <div>
            <h2 class="text-xl font-bold text-gray-800 flex items-center gap-2">
                <span>📋</span> সাম্প্রতিক রিকোয়েস্ট তালিকা
            </h2>
            <p class="text-xs text-gray-500 mt-1">NID সার্ভার কপির সাম্প্রতিক ডাটা ডাউনলোডের হিস্ট্রি</p>
        </div>
        <div class="flex items-center gap-2">
            <span class="text-xs text-gray-500 font-medium">মোট রিকোয়েস্ট: <strong class="text-indigo-600 font-bold">৩ টি</strong></span>
        </div>
    </div>

    <!-- Responsive Table Container -->
    <div class="overflow-x-auto rounded-xl border border-gray-100">
        <table class="w-full text-left text-sm text-gray-600 border-collapse">
            
            <!-- Table Head -->
            <thead class="bg-gray-50/80 text-gray-700 font-bold uppercase text-[12px] tracking-wider border-b border-gray-100">
                <tr>
                    <th scope="col" class="py-3.5 px-4 text-center">#</th>
                    <th scope="col" class="py-3.5 px-4">NID নম্বর</th>
                    <th scope="col" class="py-3.5 px-4">জন্ম তারিখ</th>
                    <th scope="col" class="py-3.5 px-4">হোয়াটসঅ্যাপ</th>
                    <th scope="col" class="py-3.5 px-4">ফি</th>
                    <th scope="col" class="py-3.5 px-4 text-center">স্ট্যাটাস</th>
                    <th scope="col" class="py-3.5 px-4 text-center">অ্যাকশন</th>
                </tr>
            </thead>

            <!-- Table Body -->
            <tbody class="divide-y divide-gray-100 bg-white">
                @php
                    $i = 1;
                @endphp
            @foreach ($nid_requests as $nid_request)
                <!-- Row 1: Completed Status -->
                <tr class="hover:bg-indigo-50/30 transition-colors duration-150">
                    <td class="py-4 px-4 font-semibold text-gray-500 text-center"> {{ $i++ }} </td>
                    <td class="py-4 px-4 font-bold text-gray-800">
                        <span class="flex items-center gap-1.5">
                            <span class="text-blue-500">🪪</span> {{ $nid_request->nid_number }}
                        </span>
                    </td>
                    <td class="py-4 px-4 text-gray-600">{{ $nid_request->date_of_birth }}</td>
                    <td class="py-4 px-4 text-emerald-600 font-medium">{{ $nid_request->whatsapp_number }}</td>
                    <td class="py-4 px-4 font-bold text-gray-800">৳ {{ $nid_request->amount }}</td>

                    <td class="py-4 px-4 text-center">
                        <select onchange="changeStatus(this, {{ $nid_request->id }})" 
                                class="status-select font-bold text-xs px-3 py-1.5 rounded-full border cursor-pointer focus:outline-none transition">
                            
                            <option value="pending" {{ $nid_request->status == 'pending' ? 'selected' : '' }}>⏳ পেন্ডিং</option>
                            <option value="processing" {{ $nid_request->status == 'processing' ? 'selected' : '' }}>⚙️ প্রসেসিং</option>
                            <option value="completed" {{ $nid_request->status == 'completed' ? 'selected' : '' }}>✅ সম্পন্ন</option>
                            <option value="failed" {{ $nid_request->status == 'failed' ? 'selected' : '' }}>❌ ব্যর্থ</option>

                        </select>
                    </td>
                    <td class="py-4 px-4 text-center">
                        <a href="#" class="inline-flex items-center gap-1 bg-indigo-600 hover:bg-indigo-700 text-white text-xs font-semibold px-3 py-1.5 rounded-lg shadow-sm transition active:scale-95">
                            <span>📥</span> ডাউনলোড
                        </a>
                    </td>
                </tr>
            @endforeach

  

<!-- SweetAlert2 CDN for Alert Notification -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<!-- Status Change JavaScript Code -->
<script>
        function changeStatus(selectElement, requestId) {
            const selectedStatus = selectElement.value;

            // Laravel Route Helper ব্যবহার করে Dynamic URL তৈরি
            let updateUrl = "{{ route('nid.updateStatus', ':id') }}";
            updateUrl = updateUrl.replace(':id', requestId);

            fetch(updateUrl, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: JSON.stringify({ status: selectedStatus })
            })
            .then(async response => {
                const data = await response.json();
                
                if (!response.ok) {
                    Swal.fire({
                        icon: 'error',
                        title: 'এরর!',
                        text: data.message || 'স্ট্যাটাস আপডেট করা সম্ভব হয়নি।'
                    });
                    return;
                }

                // সফল হলে
                updateDropdownStyle(selectElement, selectedStatus);
                Swal.fire({
                    toast: true,
                    position: 'top-end',
                    icon: 'success',
                    title: data.message,
                    showConfirmButton: false,
                    timer: 2000
                });
            })
            .catch(error => {
                console.error('Error:', error);
            });
        }

            // Dynamic Tailwind Style Change for Dropdown
        function updateDropdownStyle(element, status) {
            // আগের সব ক্লাস রিমুভ করা
            element.classList.remove('bg-amber-50', 'text-amber-700', 'border-amber-200',
                                    'bg-blue-50', 'text-blue-700', 'border-blue-200',
                                    'bg-emerald-50', 'text-emerald-700', 'border-emerald-200',
                                    'bg-rose-50', 'text-rose-700', 'border-rose-200');

            if (status === 'completed') {
                element.classList.add('bg-emerald-50', 'text-emerald-700', 'border-emerald-200');
            } else if (status === 'processing') {
                element.classList.add('bg-blue-50', 'text-blue-700', 'border-blue-200');
            } else if (status === 'failed') {
                element.classList.add('bg-rose-50', 'text-rose-700', 'border-rose-200');
            } else { // pending
                element.classList.add('bg-amber-50', 'text-amber-700', 'border-amber-200');
            }
        }
</script>


            </tbody>
        </table>
    </div>

</div>

    




        </div>

    </main>
    @endsection