@extends('layouts.admin')

@section('content')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.7/css/jquery.dataTables.min.css">

<style>
    /* Select2 কে আপনার রাউন্ডেড ডিজাইনের সাথে ম্যাচ করানোর জন্য */
    .select2-container--default .select2-selection--single {
        height: 58px;
        padding: 12px;
        border-radius: 16px;
        border: 1px solid #f3f4f6;
        background-color: #f9fafb;
    }
    .select2-container--default .select2-selection--single .select2-selection__arrow { height: 56px; }
    .select2-container { width: 100% !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>

    <table id="feeSetupTable" class="w-full text-left display">
        <thead>
            <tr class="text-gray-400 text-sm border-b">
                <th class="pb-3">ক্লাস</th>
                <th class="pb-3">ফি টাইপ</th>
                <th class="pb-3 text-center">পরিমাণ (টাকা)</th>
                <th class="pb-3 text-right">অ্যাকশন</th>
            </tr>
        </thead>
        <tbody>
            @foreach($fees as $fee)
			<tr class="border-b hover:bg-gray-50">
				<td class="py-4 font-bold">{{ $fee->schoolClass->class_name ?? 'N/A' }}</td>
				<td class="py-4">{{ $fee->feeType->type_name ?? 'N/A' }}</td>
				<td class="py-4 text-center font-bold text-red-600">{{ number_format($fee->default_amount, 2) }}</td>
				<td class="py-4 text-right">
					<button onclick="openModal('{{ $fee->id }}', '{{ $fee->class_id }}', '{{ $fee->fee_type_id }}', '{{ $fee->default_amount }}')" class="text-blue-500 hover:text-blue-700 mr-3">
						<i class="fas fa-edit"></i>
					</button>
					<button onclick="deleteFee('{{ $fee->id }}')" class="text-red-400 hover:text-red-600">
						<i class="fas fa-trash"></i>
					</button>
				</td>
			</tr>
			@endforeach
        </tbody>
    </table>
</div>

<div id="feeModal" class="fixed inset-0 bg-black/50 hidden items-center justify-center z-50">
    <div class="bg-white w-96 p-8 rounded-3xl shadow-2xl">
        <h3 class="text-xl font-bold mb-6">ফি নির্ধারণ করুন</h3>
        <form id="feeSetupForm">
            @csrf
            <div class="mb-4">
                <label class="block text-sm font-bold text-gray-500 mb-2">ক্লাস</label>
                <select name="class_id" id="class_select" class="select2-init w-full" required>
                    <option value="">ক্লাস বেছে নিন</option>
                    @foreach($classes as $class) 
                        <option value="{{ $class->id }}">{{ $class->class_name }}</option> 
                    @endforeach
                </select>
            </div>
            <div class="mb-4">
                <label class="block text-sm font-bold text-gray-500 mb-2">ফি টাইপ</label>
                <select name="fee_type_id" id="type_select" class="select2-init w-full" required>
                    <option value="">ফি টাইপ বেছে নিন</option>
                    @foreach($feeTypes as $type) 
                        <option value="{{ $type->id }}">{{ $type->type_name }}</option> 
                    @endforeach
                </select>
            </div>
            <div class="mb-6">
                <label class="block text-sm font-bold text-gray-500 mb-2">টাকার পরিমাণ</label>
                <input type="number" name="default_amount" class="w-full p-4 bg-gray-50 border rounded-2xl" placeholder="0.00" step="0.01" 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.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

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

    $(document).ready(function() {
        // DataTable Initialize
        $('#feeSetupTable').DataTable({
            "language": { "search": "সার্চ করুন:" }
        });

        // Select2 Initialize
        $('.select2-init').select2({
            dropdownParent: $('#feeModal'),
            placeholder: "খুঁজুন...",
            allowClear: true
        });
    });

    // আপডেট করা openModal ফাংশন
    window.openModal = function(id = '', classId = '', typeId = '', amount = '') {
        // ১. ফর্ম রিসেট
        $('#feeSetupForm')[0].reset();
        $('#feeSetupForm').find('input[name="fee_id"]').remove(); // আগের হিডেন আইডি থাকলে ডিলিট

        if(id) {
            // ২. এডিট মোড: ডাটা সেট করা
            $('#modalTitle').text('ফি সেটআপ এডিট');
            
            // হিডেন আইডি ইনপুট যোগ (আপডেটের জন্য)
            $('#feeSetupForm').prepend(`<input type="hidden" name="id" value="${id}">`);
            
            // টাকার পরিমাণ সেট
            $('input[name="default_amount"]').val(amount);
            
            // Select2 ভ্যালু সেট এবং রিফ্রেশ
            $('#class_select').val(classId).trigger('change');
            $('#type_select').val(typeId).trigger('change');
        } else {
            // ৩. নতুন এন্ট্রি মোড
            $('#modalTitle').text('ফি নির্ধারণ করুন');
            $('.select2-init').val(null).trigger('change');
        }

        // ৪. মডাল দেখানো
        $('#feeModal').removeClass('hidden').addClass('flex');
    }

    function closeModal() { 
        $('#feeModal').addClass('hidden').removeClass('flex'); 
    }

    // ফর্ম সাবমিট (Store/Update)
    // ফর্ম সাবমিট (Store/Update)
	$('#feeSetupForm').on('submit', function(e) {
		e.preventDefault();
		$.post("{{ route('classfees.store') }}", $(this).serialize(), function(res) {
			closeModal();
			
			// মিষ্টি অ্যালার্ট দেখাবে কিন্তু পেজ রিফ্রেশ করবে না
			Swal.fire({
				title: 'সফল!',
				text: res.message,
				icon: 'success',
				timer: 1000,
				showConfirmButton: false
			});

			// শুধু টেবিলের ডাটা রিফ্রেশ করার ফাংশন কল
			fetchTableData();
		});
	});

	// টেবিল ডাটা রিফ্রেশ করার ফাংশন
	function fetchTableData() {
		$.get("{{ route('classfees.index') }}", function(data) {
			// নতুন ডাটা দিয়ে টেবিলের বডি রিপ্লেস করা
			let newTableBody = $(data).find('#feeSetupTable tbody').html();
			
			// DataTable destroy করে ডাটা ঢুকিয়ে আবার Initialize করা
			$('#feeSetupTable').DataTable().destroy();
			$('#feeSetupTable tbody').html(newTableBody);
			$('#feeSetupTable').DataTable({
				"language": { "search": "সার্চ করুন:" }
			});
		});
	}

    // ডিলিট ফাংশন (SweetAlert2 সহ)
    function deleteFee(id) {
        Swal.fire({
            title: 'নিশ্চিত?',
            text: "এই ফি রেকর্ডটি ডিলিট করতে চান?",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#3085d6',
            confirmButtonText: 'হ্যাঁ, ডিলিট করুন',
            cancelButtonText: 'বাতিল'
        }).then((result) => {
            if (result.isConfirmed) {
                $.post(`${baseUrl}/class-fees/delete/${id}`, { _token: "{{ csrf_token() }}" }, function() {
                    location.reload();
                });
            }
        });
    }
</script>
@endsection