@extends('layouts.saas')
@section('title', 'প্রতিষ্ঠানের তালিকা')

@push('styles')
    <!-- DataTables CSS -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.7/css/dataTables.bootstrap5.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.5.0/css/responsive.bootstrap5.min.css">
    <style>
        .table > :not(caption) > * > * {
            padding: 0.75rem 1rem;
            vertical-align: middle;
        }
        .dataTables_wrapper .dataTables_paginate .paginate_button {
            padding: 0;
        }
    </style>
@endpush

@section('content')
<div class="container-fluid px-0">
    <!-- Header Section -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h4 class="fw-bold mb-1"><i class="fa-solid fa-school text-primary me-2"></i>প্রতিষ্ঠানের তালিকা</h4>
            <p class="text-muted small mb-0">সকল রেজিস্টার্ড প্রতিষ্ঠানের তালিকা এবং তাদের সাবস্ক্রিপশন স্ট্যাটাস</p>
        </div>
        <a href="{{ route('superadmin.institutions.create') }}" class="btn btn-primary rounded-3">
            <i class="fa-solid fa-plus me-1"></i> নতুন প্রতিষ্ঠান যুক্ত করুন
        </a>
    </div>


    <!-- Data Table Card -->
    <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="institutions-table">
                    <thead class="table-light">
                        <tr>
                            <th width="5%">#</th>
                            <th width="25%">প্রতিষ্ঠানের নাম ও ডোমেইন</th>
                            <th width="20%">যোগাযোগ</th>
                            <th width="18%">প্যাকেজ ও মেয়াদ</th>
                            <th width="10%">শিক্ষার্থী</th>
                            <th width="12%">স্ট্যাটাস</th>
                            <th width="10%" class="text-end">অ্যাকশন</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- AJAX DataTables Content -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
    <!-- jQuery & DataTables JS -->
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.7/js/dataTables.bootstrap5.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script>
        $(document).ready(function() {
            let table = $('#institutions-table').DataTable({
                processing: true,
                serverSide: true,
                ajax: "{{ route('superadmin.institutions.index') }}",
                columns: [
                    { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false },
                    { data: 'name_domain', name: 'name_domain' },
                    { data: 'contact', name: 'contact' },
                    { data: 'package_info', name: 'package_info', orderable: false },
                    { data: 'students_count', name: 'students_count', orderable: false, searchable: false },
                    { data: 'status', name: 'status', orderable: false },
                    { data: 'action', name: 'action', orderable: false, searchable: false }
                ],
                language: {
                    processing: "ডাটা লোড হচ্ছে...",
                    search: "খুঁজুন:",
                    lengthMenu: "দেখান _MENU_ টি রেকর্ড",
                    info: "মোট _TOTAL_ টি রেকর্ডের মধ্যে _START_ থেকে _END_ দেখানো হচ্ছে",
                    infoEmpty: "কোনো ডাটা পাওয়া যায়নি",
                    zeroRecords: "মেলে এমন কোনো রেকর্ড পাওয়া যায়নি",
                    paginate: {
                        first: "প্রথম",
                        last: "শেষ",
                        next: "পরবর্তী",
                        previous: "পূর্ববর্তী"
                    }
                }
            });

            // SweetAlert Delete Confirmation
            $(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();
                    }
                });
            });
        });
    </script>
@endpush