@extends('layouts.institution')

@section('content')
<div class="container-fluid px-4 py-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h4 class="fw-bold mb-1">নিষ্ক্রিয়/ডিলিটকৃত শিক্ষার্থীর তালিকা (Trash)</h4>
            <p class="text-muted small mb-0">যে সমস্ত শিক্ষার্থীর তথ্য মুছে ফেলা হয়েছে তাদের তালিকা এবং ব্যবস্থাপনা।</p>
        </div>
        <a href="{{ route('institution.students.index') }}" class="btn btn-light rounded-pill px-4 shadow-sm border">
            <i class="fa-solid fa-arrow-left me-2"></i> সক্রিয় শিক্ষার্থীদের তালিকায় যান
        </a>
    </div>


    <div class="card border-0 shadow-sm rounded-4">
        <div class="card-body p-4">
            <div class="table-responsive">
                <table class="table table-hover align-middle w-100" id="clientDataTable">
                    <thead class="table-light">
                        <tr>
                            <th width="5%">#</th>
                            <th width="8%">ছবি</th>
                            <th width="12%">ইউনিক আইডি</th>
                            <th width="20%">নাম (বাংলা ও ইংরেজি)</th>
                            <th width="20%">শ্রেণি ও সেকশন</th>
                            <th width="10%">রোল</th>
                            <th width="10%">মোবাইল</th>
                            <th width="15%" class="text-center">অ্যাকশন</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($students as $key => $student)
                            <tr>
                                <td class="fw-bold text-secondary">{{ $key + 1 }}</td>
                                <td>
                                    @php
                                        $photoUrl = $student->photo ? asset('storage/' . $student->photo) : asset('assets/img/default-user.png');
                                    @endphp
                                    <img src="{{ $photoUrl }}" class="rounded-circle shadow-sm" width="40" height="40" style="object-fit: cover;">
                                </td>
                                <td>
                                    <span class="badge bg-light text-dark border font-monospace">{{ $student->unique_id ?? 'N/A' }}</span>
                                </td>
                                <td class="fw-semibold text-danger">
                                    {{ $student->name_bangla }}
                                    <div class="small text-muted fw-normal">{{ $student->name_english ?? 'N/A' }}</div>
                                </td>
                                <td>
                                    @php
                                        $enrollment = $student->currentEnrollment;
                                    @endphp
                                    @if($enrollment)
                                        <div class="fw-semibold text-dark">
                                            {{ $enrollment->institutionClass->name ?? 'N/A' }}
                                            @if(optional($enrollment->group)->name)
                                                | গ্রুপ: {{ $enrollment->group->name }}
                                            @endif
                                        </div>
                                        <div class="small text-muted">সেকশন: {{ $enrollment->section->name ?? 'N/A' }}</div>
                                    @else
                                        <span class="text-muted small">এনরোলমেন্ট নেই</span>
                                    @endif
                                </td>
                                <td>
                                    @php
                                        $roll = optional($student->currentEnrollment)->roll_number ?? 'N/A';
                                    @endphp
                                    <span class="badge bg-secondary font-monospace">{{ $roll }}</span>
                                </td>
                                <td>{{ $student->phone_number ?? 'N/A' }}</td>
                                <td class="text-center">
                                    <!-- Restore Button -->
                                    <form action="{{ route('institution.students.restore', $student->id) }}" method="POST" class="d-inline me-1">
                                        @csrf
                                        <button type="submit" class="btn btn-sm btn-success rounded-3 shadow-sm" title="পুনরায় সচল করুন">
                                            <i class="fa-solid fa-rotate-left"></i> Restore
                                        </button>
                                    </form>

                                    <!-- Permanent Delete Button -->
                                    <form action="{{ route('institution.students.force-delete', $student->id) }}" method="POST" class="d-inline delete-form">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn btn-sm btn-danger rounded-3 shadow-sm" title="স্থায়ীভাবে মুছে ফেলুন">
                                            <i class="fa-solid fa-trash-can"></i> Delete
                                        </button>
                                    </form>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="8" class="text-center py-4 text-muted">কোনো নিষ্ক্রিয় বা ডিলিটকৃত শিক্ষার্থী পাওয়া যায়নি।</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    // Frontend / Client-side DataTable Initialize with Search & Pagination
    $('#clientDataTable').DataTable({
        paging: true,          // পেজিনেশন চালু রাখা
        searching: true,       // সার্চ বক্স চালু রাখা
        ordering: true,        // সোর্টিং চালু রাখা
        info: true,            // তথ্য দেখানো (Showing 1 to 10 of entries)
        lengthChange: true,    // প্রতি পেজে কতটি ডেটা দেখাবে তার ড্রপডাউন
        pageLength: 10,        // ডিফল্টভাবে প্রতি পেজে ১০টি রো দেখাবে
        language: {
            url: "//cdn.datatables.net/plug-ins/1.13.6/i18n/bn.json" // বাংলা ভাষা রূপান্তর
        },
        columnDefs: [
            { orderable: false, targets: [1, 7] } // ছবি (index 1) এবং অ্যাকশন (index 7) কলামে সোর্টিং বন্ধ রাখা হলো
        ]
    });

    // ডিলিট কনফার্মেশন অ্যালার্ট
    $(document).on('submit', '.delete-form', function(e) {
        e.preventDefault();
        if (confirm('সতর্কতা! এই শিক্ষার্থীকে স্থায়ীভাবে মুছে ফেলা হবে। আপনি কি নিশ্চিত?')) {
            this.submit();
        }
    });
});
</script>
@endpush