@extends('layouts.admin')

@section('content')
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.7/css/jquery.dataTables.min.css">
<style>
    /* DataTables কে আপনার ডিজাইনের সাথে ম্যাচ করানোর জন্য কাস্টম স্টাইল */
    .dataTables_wrapper .dataTables_filter input {
        border-radius: 12px;
        padding: 8px 12px;
        border: 1px solid #e5e7eb;
        margin-bottom: 10px;
    }
    .dataTables_wrapper .dataTables_length select {
        border-radius: 8px;
        padding: 4px 8px;
        border: 1px solid #e5e7eb;
    }
    table.dataTable.no-footer { border-bottom: 1px solid #f3f4f6 !important; }
</style>

<div class="bg-white p-6 rounded-3xl shadow-sm border border-gray-100">
    <div class="flex justify-between items-center mb-6">
        <h3 class="font-black text-xl text-gray-800">সেকশন তালিকা</h3>
        <button onclick="openModal()" class="bg-red-600 text-white px-6 py-2 rounded-xl font-bold hover:bg-red-700 transition">
            + নতুন সেকশন
        </button>
    </div>

    <div class="overflow-x-auto">
        <table id="sectionTable" class="w-full text-left display">
            <thead>
                <tr class="border-b border-gray-100 text-gray-400 text-sm">
                    <th class="pb-3 pl-2">ID</th>
                    <th class="pb-3">সেকশন</th>
                    <th class="pb-3">ক্লাস</th>
                    <th class="pb-3 text-right">অ্যাকশন</th>
                </tr>
            </thead>
            <tbody id="sectionTableBody" class="text-gray-600">
                @foreach($sections as $section)
                <tr class="border-b border-gray-50 hover:bg-gray-50 transition">
                    <td class="py-4 pl-2 font-bold">#{{ $section->id }}</td>
                    <td class="py-4 font-bold text-gray-800">{{ $section->section_name }}</td>
                    <td class="py-4">{{ $section->schoolClass->class_name ?? 'N/A' }}</td>
                    <td class="py-4 text-right">
                        <button onclick="openModal('{{ $section->id }}', '{{ $section->section_name }}', '{{ $section->class_id }}')" class="text-blue-500 hover:text-blue-700 mr-3">
                            <i class="fas fa-edit"></i>
                        </button>
                        <button onclick="deleteSection('{{ $section->id }}')" class="text-red-400 hover:text-red-600">
                            <i class="fas fa-trash"></i>
                        </button>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>

<div id="sectionModal" class="fixed inset-0 bg-black/50 hidden flex items-center justify-center z-50">
    <div class="bg-white w-96 p-8 rounded-3xl shadow-2xl scale-95 transition-transform">
        <h3 id="modalTitle" class="text-xl font-bold mb-6 text-gray-800">নতুন সেকশন</h3>
        <form id="sectionForm">
            @csrf
            <input type="hidden" name="section_id" id="section_id">
            <div class="mb-4">
                <label class="block text-sm font-bold text-gray-500 mb-2">সেকশন নাম</label>
                <input type="text" name="section_name" id="section_name" class="w-full p-4 bg-gray-50 border rounded-2xl focus:ring-2 focus:ring-red-500" required>
            </div>
            <div class="mb-6">
                <label class="block text-sm font-bold text-gray-500 mb-2">ক্লাস সিলেক্ট করুন</label>
                <select name="class_id" id="class_id" class="w-full p-4 bg-gray-50 border rounded-2xl" required>
                    <option value="">ক্লাস বেছে নিন</option>
                    @foreach($classes as $class)
                        <option value="{{ $class->id }}">{{ $class->class_name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="flex gap-3">
                <button type="button" onclick="closeModal()" class="flex-1 py-3 bg-gray-100 rounded-2xl font-bold">বাতিল</button>
                <button type="submit" class="flex-1 py-3 bg-red-600 text-white rounded-2xl font-bold">সেভ</button>
            </div>
        </form>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
    const baseUrl = "{{ url('/') }}";
    let table;

    $(document).ready(function() {
        // DataTable Initialize
        table = $('#sectionTable').DataTable({
            "language": {
                "search": "সার্চ করুন:",
                "lengthMenu": "_MENU_ টি ডাটা দেখুন",
                "info": "মোট _TOTAL_ টি সেকশনের মধ্যে _START_ থেকে _END_ দেখানো হচ্ছে",
                "paginate": { "first": "প্রথম", "last": "শেষ", "next": "পরে", "previous": "আগে" }
            }
        });
    });

    window.openModal = function(id = '', name = '', classId = '') {
        $('#sectionForm')[0].reset();
        $('#section_id').val(id);
        $('#section_name').val(name);
        $('#class_id').val(classId);
        $('#modalTitle').text(id ? 'সেকশন এডিট' : 'নতুন সেকশন');
        $('#sectionModal').removeClass('hidden').addClass('flex');
    }

    window.closeModal = function() { $('#sectionModal').addClass('hidden').removeClass('flex'); }

    $('#sectionForm').on('submit', function(e) {
        e.preventDefault();
        let id = $('#section_id').val();
        let url = id ? `${baseUrl}/sections/update/${id}` : "{{ route('sections.store') }}";

        $.ajax({
            url: url,
            method: "POST",
            data: $(this).serialize(),
            success: function(res) {
                closeModal();
                fetchSections();
                Swal.fire({ title: 'সফল!', text: res.message, icon: 'success', timer: 1500, showConfirmButton: false });
            }
        });
    });

    window.deleteSection = function(id) {
        Swal.fire({
            title: 'নিশ্চিত?',
            text: "এটি ডিলিট করলে আর ফিরে পাওয়া যাবে না!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'হ্যাঁ, ডিলিট করুন!'
        }).then((result) => {
            if (result.isConfirmed) {
                $.post(`${baseUrl}/sections/delete/${id}`, { _token: "{{ csrf_token() }}" }, function() {
                    fetchSections();
                    Swal.fire('ডিলিট হয়েছে!', '', 'success');
                });
            }
        });
    }

    // টেবিল রিফ্রেশ (DataTable Compatible)
    function fetchSections() {
        $.get("{{ route('sections.index') }}", function(data) {
            // DataTable destroy করে নতুন ডাটা লোড করে আবার init করতে হবে
            table.destroy();
            $('#sectionTableBody').html($(data).find('#sectionTableBody').html());
            table = $('#sectionTable').DataTable({
                "language": { "search": "সার্চ করুন:", "paginate": { "next": "পরে", "previous": "আগে" } }
            });
        });
    }
</script>
@endsection