@extends('layouts.institution')

@push('styles')
<!-- DataTables Bootstrap 5 CSS -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css">
@endpush

@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">শিক্ষার্থী ব্যবস্থাপনা</h4>
            <p class="text-muted small mb-0">সকল অনুমোদিত শিক্ষার্থী এবং নতুন ভর্তির আবেদনসমূহ পরিচালনা করুন।</p>
        </div>
        <div class="d-flex gap-2">
            <!-- Print / PDF বাটনটি এখানে ওপরের হেডার অ্যাকশনে রাখলে বেশি সুন্দর দেখাবে -->
            <button type="button" id="printListBtn" class="btn btn-danger rounded-pill px-4 shadow-sm">
                <i class="fa-solid fa-file-pdf me-1"></i> Print / PDF
            </button>
            <a href="{{ route('institution.students.create') }}" class="btn btn-primary rounded-pill px-4 shadow-sm">
                <i class="fa-solid fa-plus me-2"></i> সরাসরি শিক্ষার্থী ভর্তি
            </a>
        </div>
    </div>


    <!-- Advanced Filter Bar -->
    <div class="card border-0 shadow-sm rounded-4 mb-4">
        <div class="card-body p-3">
            <div class="row g-3">
                <div class="col-md">
                    <label class="form-label small fw-bold text-muted">সেশন</label>
                    <select id="filter_session" class="form-select rounded-3 form-select-sm">
                        <option value="">-- সকল সেশন --</option>
                        @foreach($sessions as $session)
                            <option value="{{ $session->id }}">{{ $session->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md">
                    <label class="form-label small fw-bold text-muted">শ্রেণি</label>
                    <select id="filter_class" class="form-select rounded-3 form-select-sm">
                        <option value="">-- সকল শ্রেণি --</option>
                        @foreach($classes as $class)
                            <option value="{{ $class->id }}">{{ $class->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md">
                    <label class="form-label small fw-bold text-muted">সেকশন</label>
                    <select id="filter_section" class="form-select rounded-3 form-select-sm">
                        <option value="">-- সকল সেকশন --</option>
                        @foreach($sections as $section)
                            <option value="{{ $section->id }}">{{ $section->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md">
                    <label class="form-label small fw-bold text-muted">বিভাগ (গ্রুপ)</label>
                    <select id="filter_group" class="form-select rounded-3 form-select-sm">
                        <option value="">-- সকল বিভাগ --</option>
                        @foreach($groups as $group)
                            <option value="{{ $group->id }}">{{ $group->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md">
                    <label class="form-label small fw-bold text-muted">শিফট</label>
                    <select id="filter_shift" class="form-select rounded-3 form-select-sm">
                        <option value="">-- সকল শিফট --</option>
                        @foreach($shifts as $shift)
                            <option value="{{ $shift->id }}">{{ $shift->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-auto d-flex align-items-end gap-2">
                    <button type="button" id="filterBtn" class="btn btn-dark rounded-pill btn-sm px-4 shadow-sm">
                        <i class="fa-solid fa-filter me-1"></i> ফিল্টার
                    </button>
                    <button type="button" id="resetBtn" class="btn btn-light rounded-pill btn-sm px-3 border shadow-sm" title="রিসেট">
                        <i class="fa-solid fa-rotate-right"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Tabs (Approved vs Applied) -->
    <ul class="nav nav-pills mb-3 gap-2">
        <li class="nav-item">
            <a class="nav-link rounded-pill px-4 {{ $status == 'approve' ? 'active shadow-sm' : 'bg-white text-dark border' }}" href="{{ route('institution.students.index', ['status' => 'approve']) }}">
                অনুমোদিত শিক্ষার্থী (Approved)
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link rounded-pill px-4 {{ $status == 'applied' ? 'active shadow-sm' : 'bg-white text-dark border' }}" href="{{ route('institution.students.index', ['status' => 'applied']) }}">
                ভর্তির আবেদনসমূহ (Pending Applications)
            </a>
        </li>
    </ul>

    <!-- Students Table -->
    <div class="card border-0 shadow-sm rounded-4">
        <div class="card-body p-0">
            <div class="table-responsive p-3">
                <table class="table table-hover align-middle mb-0 w-100" id="studentTable">
                    <thead class="bg-light text-secondary small text-uppercase">
                        <tr>
                            <th class="ps-4">ছবি</th>
                            <th>ইউনিক আইডি</th>
                            <th>নাম (বাংলা / ইংরেজি)</th>
                            <th>শ্রেণি, বিভাগ ও সেকশন</th>
                            <th>রোল</th>
                            <th>মোবাইল নম্বর</th>
                            <th class="text-end pe-4">অ্যাকশন</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<!-- DataTables JS -->
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>

<script>
$(document).ready(function() {
    var table = $('#studentTable').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: "{{ route('institution.students.index', ['status' => $status]) }}",
            data: function (d) {
                d.academic_session_id  = $('#filter_session').val();
                d.institution_class_id = $('#filter_class').val();
                d.section_id           = $('#filter_section').val();
                d.group_id             = $('#filter_group').val();
                d.shift_id             = $('#filter_shift').val();
            }
        },
        columns: [
            { data: 'photo', name: 'photo', orderable: false, searchable: false },
            { data: 'unique_id', name: 'unique_id' },
            { data: 'name', name: 'name_bangla' },
            { data: 'class_section', name: 'class_section', orderable: false, searchable: false },
            { data: 'roll', name: 'student_enrollments.roll_number' },
            { data: 'phone_number', name: 'phone_number' },
            { data: 'action', name: 'action', orderable: false, searchable: false, className: 'text-end pe-4' }
        ],
        language: {
            search: "সার্চ করুন:",
            lengthMenu: "প্রতি পেজে _MENU_ টি রেকর্ড",
            info: "মোট _TOTAL_ টি রেকর্ডের মধ্যে _START_ থেকে _END_ পর্যন্ত দেখানো হচ্ছে",
            paginate: {
                first: "প্রথমে",
                last: "শেষে",
                next: "পরবর্তী",
                previous: "পূর্ববর্তী"
            },
            emptyTable: "কোনো শিক্ষার্থী পাওয়া যায়নি।"
        }
    });

    // ফিল্টার বাটনে ক্লিক
    $('#filterBtn').click(function() {
        table.draw();
    });

    // ফিল্টার রিসেট বাটন
    $('#resetBtn').click(function() {
        $('#filter_session, #filter_class, #filter_section, #filter_group, #filter_shift').val('');
        table.draw();
    });

    // ডিলিট কনফার্মেশন (SweetAlert2)
    $(document).on('submit', '.delete-form', function(e) {
        e.preventDefault();
        let form = this;

        Swal.fire({
            title: 'আপনি কি নিশ্চিত?',
            text: "এই ডাটাটি স্থায়ীভাবে মুছে যাবে!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#dc3545',
            cancelButtonColor: '#6c757d',
            confirmButtonText: 'হ্যাঁ, মুছে ফেলুন!',
            cancelButtonText: 'বাতিল'
        }).then((result) => {
            if (result.isConfirmed) {
                form.submit();
            }
        });
    });

    // প্রিন্ট / পিডিএফ ওপেন করার লজিক (ফিল্টার প্যারামিটারসহ)
    $('#printListBtn').click(function(e) {
        e.preventDefault();
        let query = $.param({
            status: "{{ $status }}",
            academic_session_id: $('#filter_session').val(),
            institution_class_id: $('#filter_class').val(),
            section_id: $('#filter_section').val(),
            group_id: $('#filter_group').val(),
            shift_id: $('#filter_shift').val()
        });
        window.open("{{ route('institution.students.print.list') }}?" + query, '_blank');
    });
});
</script>
@endpush