@extends('layouts.admin')

@section('content')
<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 class="w-full text-left">
            <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 text-right">অ্যাকশন</th>
                </tr>
            </thead>
            <tbody id="classTableBody" class="text-gray-600">
                @foreach($classes as $class)
                <tr class="border-b border-gray-50 hover:bg-gray-50 transition">
                    <td class="py-4 pl-2 font-bold">#{{ $class->id }}</td>
                    <td class="py-4">{{ $class->class_name }}</td>
                    <td class="py-4 text-right">
                        <button onclick="openModal('{{ $class->id }}', '{{ $class->class_name }}')" class="text-blue-500 hover:text-blue-700 mr-3">
                            <i class="fas fa-edit"></i>
                        </button>
                        <button onclick="deleteClass('{{ $class->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="classModal" 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 text-gray-800 mb-6">নতুন ক্লাস যোগ করুন</h3>
        <form id="classForm">
            @csrf
            <input type="hidden" name="class_id" id="class_id">
            <div class="mb-6">
                <label class="block text-sm font-bold text-gray-500 mb-2">ক্লাসের নাম</label>
                <input type="text" name="class_name" id="class_name" class="w-full p-4 bg-gray-50 border rounded-2xl focus:ring-2 focus:ring-red-500" required>
            </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.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
    // ফাংশনগুলোকে উইন্ডো অবজেক্টে দিচ্ছি যাতে AJAX রিফ্রেশের পর বাটন কাজ করে
    window.openModal = function(id = '', name = '') {
        $('#classForm')[0].reset();
        $('#class_id').val(id);
        $('#class_name').val(name);
        $('#modalTitle').text(id ? 'ক্লাস এডিট করুন' : 'নতুন ক্লাস যোগ করুন');
        $('#classModal').removeClass('hidden').addClass('flex');
    }

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

    // সেভ এবং আপডেট
    $('#classForm').on('submit', function(e) {
        e.preventDefault();
        let id = $('#class_id').val();
        let url = id ? "{{ url('classes/update') }}/" + id : "{{ route('classes.store') }}";

        $.ajax({
            url: url,
            method: "POST",
            data: $(this).serialize(),
            success: function(res) {
                closeModal();
                fetchClasses();
                Swal.fire({ title: 'সফল!', text: res.message, icon: 'success', timer: 1500, showConfirmButton: false });
            },
            error: function(xhr) {
                let errorMsg = xhr.responseJSON ? xhr.responseJSON.message : 'কিছু একটা ভুল হয়েছে!';
                Swal.fire('এরর!', errorMsg, 'error');
            }
        });
    });

    // ডিলিট
    window.deleteClass = function(id) {
        Swal.fire({
            title: 'আপনি কি নিশ্চিত?',
            text: "এটি ডিলিট করলে আর ফিরে পাওয়া যাবে না!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#ef4444',
            cancelButtonColor: '#6b7280',
            confirmButtonText: 'হ্যাঁ, ডিলিট করুন!',
            cancelButtonText: 'বাতিল'
        }).then((result) => {
            if (result.isConfirmed) {
                $.post("{{ url('classes/delete') }}/" + id, { _token: "{{ csrf_token() }}" }, function(res) {
                    fetchClasses();
                    Swal.fire('ডিলিট!', res.message, 'success');
                }).fail(function() {
                    Swal.fire('এরর!', 'ডিলিট করা সম্ভব হয়নি।', 'error');
                });
            }
        });
    }

    // টেবিল ডাটা রিফ্রেশ (SPA স্টাইল)
    function fetchClasses() {
        $.get("{{ route('classes.index') }}", function(data) {
            let newTableBody = $(data).find('#classTableBody').html();
            $('#classTableBody').html(newTableBody);
        });
    }
</script>
@endsection