@extends('layouts.admin')

@section('content')
<div class="space-y-6">
    <div class="bg-white p-6 rounded-3xl shadow-sm border border-gray-100 flex flex-wrap justify-between items-center gap-4">
        <div class="flex items-center gap-4">
            <div class="w-12 h-12 bg-rose-50 text-rose-600 rounded-2xl flex items-center justify-center text-2xl">
                📉
            </div>
            <div>
                <h3 class="font-black text-xl text-gray-800">বকেয়া (Due) রিপোর্ট</h3>
                <p class="text-[10px] text-gray-400 font-bold uppercase tracking-widest">ইনভয়েস ভিত্তিক বকেয়া তালিকা</p>
            </div>
			
			<div style="float:right;">
				<a href="{{ route('reports.due.print', request()->query()) }}" 
				   target="_blank" 
				   class="inline-flex items-center gap-2 bg-indigo-600 text-white px-5 py-3 rounded-2xl text-sm font-black hover:bg-indigo-700 transition-all shadow-lg shadow-indigo-100">
					<span>🖨️</span>
					<span>প্রিন্ট প্রিভিউ</span>
				</a>			</div>
        </div>
        
        <form action="" method="GET" class="flex items-center gap-3">
            <select name="class_id" class="p-3 border border-gray-100 rounded-2xl text-sm outline-none bg-gray-50 focus:ring-2 focus:ring-rose-500 transition-all font-bold text-gray-600">
                <option value="">সকল ক্লাস</option>
                @foreach($classes as $class)
                    {{-- এখানে $class->id এবং $class->class_name ব্যবহার করা হয়েছে যাতে এরর না আসে --}}
                    <option value="{{ $class->id }}" {{ request('class_id') == $class->id ? 'selected' : '' }}>
                        {{ $class->class_name }}
                    </option>
                @endforeach
            </select>
            
            <button type="submit" class="bg-gray-800 text-white px-6 py-3 rounded-2xl text-sm font-black hover:bg-black transition-all shadow-lg shadow-gray-100">
                ফিল্টার করুন
            </button>
        </form>
    </div>

    <div class="bg-white p-6 rounded-[2.5rem] shadow-sm border border-gray-100 overflow-hidden">
        <table id="dueTable" class="w-full text-left border-collapse">
            <thead>
                <tr class="bg-gray-50 text-gray-400 text-[10px] uppercase tracking-widest border-b border-gray-100">
                    <th class="px-4 py-5">ইনভয়েস নং</th>
                    <th class="py-5">ছাত্রের নাম (বাংলা)</th>
                    <th class="py-5">ক্লাস ও রোল</th>
                    <th class="py-5 text-right">মোট বিল</th>
                    <th class="py-5 text-right">জমা</th>
                    <th class="px-4 py-5 text-right">বকেয়া (Due)</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-50">
                @foreach($report as $row)
                <tr class="hover:bg-gray-50 transition-all group">
                    <td class="px-4 py-5">
                        <span class="text-xs font-black text-gray-400 group-hover:text-gray-800 transition-colors">#{{ $row->invoice_no }}</span>
                    </td>
                    <td class="py-5">
                        <span class="font-black text-gray-800 block leading-tight">{{ $row->student_name_bn }}</span>
                    </td>
                    <td class="py-5">
                        <span class="font-bold text-blue-600 text-sm">{{ $row->class_name }}</span>
                        <span class="text-gray-400 text-xs ml-1 font-bold">(রোল: {{ $row->roll_no }})</span>
                    </td>
                    <td class="py-5 text-right font-bold text-gray-600">
                        {{ number_format($row->total_amount, 2) }}
                    </td>
                    <td class="py-5 text-right font-black text-emerald-600">
                        {{ number_format($row->paid_amount, 2) }}
                    </td>
                    <td class="px-4 py-5 text-right">
                        <span class="px-3 py-1.5 rounded-xl font-black {{ $row->due_amount > 0 ? 'bg-rose-50 text-rose-600' : 'bg-emerald-50 text-emerald-600' }}">
                            {{ number_format($row->due_amount, 2) }} ৳
                        </span>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>

<link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.3.6/css/buttons.dataTables.min.css">

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.3.6/js/dataTables.buttons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.print.min.js"></script>

<style>
    .dt-buttons { margin-bottom: 20px; }
    .dt-button { 
        background: #f3f4f6 !important; 
        border: none !important; 
        border-radius: 12px !important; 
        font-weight: 900 !important; 
        font-size: 11px !important; 
        padding: 8px 16px !important;
    }
    .dataTables_filter input {
        border-radius: 12px;
        padding: 6px 12px;
        border: 1px solid #f3f4f6;
    }
</style>

<script>
    $(document).ready(function() {
        $('#dueTable').DataTable({
            dom: 'Bfrtip', // 'B' মানে বাটনগুলো দেখাবে
            buttons: [
                {
                    extend: 'print',
                    text: '🖨️ প্রিন্ট করুন',
                    className: 'bg-gray-800 text-white px-4 py-2 rounded-xl text-xs font-bold hover:bg-black transition-all mb-4',
                    exportOptions: {
                        columns: ':visible'
                    }
                },
                {
                    extend: 'pdf',
                    text: '📄 পিডিএফ ডাউনলোড',
                    className: 'bg-rose-600 text-white px-4 py-2 rounded-xl text-xs font-bold hover:bg-rose-700 transition-all mb-4',
                    orientation: 'portrait',
                    pageSize: 'A4',
                    exportOptions: {
                        columns: ':visible'
                    },
                    customize: function (doc) {
                        doc.defaultStyle.fontSize = 10;
                        doc.styles.tableHeader.fontSize = 12;
                    }
                },
                {
                    extend: 'excel',
                    text: '📊 এক্সেল',
                    className: 'bg-emerald-600 text-white px-4 py-2 rounded-xl text-xs font-bold hover:bg-emerald-700 transition-all mb-4'
                }
            ],
            language: {
                search: "খুঁজুন:",
                lengthMenu: "দেখান _MENU_ টি",
                info: "মোট _TOTAL_ টি রেকর্ডের মধ্যে _START_ থেকে _END_ দেখানো হচ্ছে",
                paginate: {
                    next: "→",
                    previous: "←"
                }
            },
            pageLength: 50
        });
    });
</script>
@endsection