@extends('layouts.admin')
@section('content')

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.min.css">
<style>
    /* মডালের ভেতর Chosen এর উইডথ এবং সার্চ বক্স ফিক্স */
    .chosen-container { width: 100% !important; }
    .chosen-container-single .chosen-single { 
        height: 48px !important; 
        line-height: 38px !important;
        border-radius: 12px !important; 
        background: #f9fafb !important;
        border: 1px solid #e5e7eb !important;
    }
    .chosen-container .chosen-drop {
        border-radius: 0 0 12px 12px !important;
        border: 1px solid #e5e7eb !important;
        z-index: 9999 !important;
    }
    .chosen-container .chosen-search input[type="text"] {
        height: 40px !important;
        border-radius: 8px !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="openWaiverModal()" class="bg-indigo-600 text-white px-6 py-2 rounded-xl font-bold hover:bg-indigo-700 transition shadow-lg">
            + নতুন ওয়েভার যোগ করুন
        </button>
    </div>

    <table id="waiverTable" class="w-full text-left display">
        <thead>
            <tr class="text-gray-400 text-sm border-b">
                <th>ছাত্রের নাম</th>
                <th>ফির ধরন</th>
                <th>ডিসকাউন্ট টাইপ</th>
                <th>ভ্যালু</th>
                <th>স্ট্যাটাস</th>
                <th class="text-right">অ্যাকশন</th>
            </tr>
        </thead>
        <tbody>
            @foreach($waivers as $waiver)
            <tr class="border-b hover:bg-gray-50 transition">
                <td class="py-4 font-bold">{{ $waiver->student->student_name_en ?? 'N/A' }}</td>
                <td class="py-4">{{ $waiver->feeType->type_name ?? 'N/A' }}</td>
                <td class="py-4">
					@if($waiver->discount_type == 'Percentage')
						<span class="px-3 py-1 rounded-full text-xs font-bold bg-purple-100 text-purple-700 border border-purple-200">
							<i class="fas fa-percent mr-1"></i> শতকরা
						</span>
					@else
						<span class="px-3 py-1 rounded-full text-xs font-bold bg-blue-100 text-blue-700 border border-blue-200">
							<i class="fas fa-money-bill-wave mr-1"></i> পরিমাণ
						</span>
					@endif
				</td>
                <td class="py-4 font-bold text-blue-600">
                    {{ number_format($waiver->discount_value, 0) }}{{ $waiver->discount_type == 'Percentage' ? '%' : ' TK' }}
                </td>
                <td class="py-4">
                    <span class="{{ $waiver->is_active ? 'text-green-600' : 'text-red-500' }}">
                        {{ $waiver->is_active ? 'Active' : 'Inactive' }}
                    </span>
                </td>
                <td class="py-4 text-right">
                    <button onclick="editWaiver('{{ $waiver->id }}')" class="text-blue-500 mr-2"><i class="fas fa-edit"></i></button>
                    <button onclick="deleteWaiver('{{ $waiver->id }}')" class="text-red-400"><i class="fas fa-trash"></i></button>
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>
</div>

<div id="waiverModal" class="fixed inset-0 bg-black bg-opacity-50 z-[100] hidden flex items-center justify-center p-4">
    <div class="bg-white rounded-3xl max-w-lg w-full p-8 shadow-2xl">
        <div class="flex justify-between items-center mb-6">
            <h2 class="text-2xl font-black text-gray-800" id="modalTitle">ওয়েভার ফরম</h2>
            <button onclick="closeWaiverModal()" class="text-gray-400 hover:text-red-600 text-3xl">&times;</button>
        </div>

        <form id="waiverForm">
            @csrf
            <div id="id_container"></div> <div class="space-y-4">
                <div>
                    <label class="block text-sm font-bold text-gray-700 mb-1">ছাত্র সিলেক্ট করুন (নাম বা আইডি লিখুন)</label>
					<input list="studentList" id="student_input" class="w-full p-3 bg-gray-50 border rounded-xl" placeholder="টাইপ করে খুঁজুন..." required>
					<datalist id="studentList">
						@foreach($students as $student)
							<option data-id="{{ $student->id }}" value="{{ $student->student_name_en }} (ID: {{ $student->admission_no }})">
						@endforeach
					</datalist>
					<input type="hidden" name="student_id" id="student_id_hidden">
                </div>

                <div>
                    <label class="block text-sm font-bold text-gray-700 mb-1">ফি-র ধরন</label>
                    <select name="fee_type_id" id="fee_type_id" class="chosen-select w-full" required>
                        <option value=""></option>
                        @foreach($feeTypes as $ft)
                        <option value="{{ $ft->id }}">{{ $ft->type_name }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-1">ডিসকাউন্ট টাইপ</label>
                        <select name="discount_type" id="discount_type" class="w-full p-3 bg-gray-50 border rounded-xl">
                            <option value="Fixed">Fixed Amount</option>
                            <option value="Percentage">Percentage (%)</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-1">ডিসকাউন্ট ভ্যালু</label>
                        <input type="number" name="discount_value" id="discount_value" class="w-full p-3 bg-gray-50 border rounded-xl" required>
                    </div>
                </div>

                <div>
                    <label class="block text-sm font-bold text-gray-700 mb-1">স্ট্যাটাস</label>
                    <select name="is_active" id="is_active" class="w-full p-3 bg-gray-50 border rounded-xl">
                        <option value="1">Active</option>
                        <option value="0">Inactive</option>
                    </select>
                </div>

                <div class="flex justify-end gap-4 mt-8">
                    <button type="button" onclick="closeWaiverModal()" class="text-gray-500 font-bold">বাতিল</button>
                    <button type="submit" class="bg-indigo-600 text-white px-8 py-3 rounded-xl font-bold shadow-lg" id="btnSave">সংরক্ষণ করুন</button>
                </div>
            </div>
        </form>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
    $(document).ready(function()
	{
		$('#student_input').on('input', function() {
			var val = $(this).val();
			var id = $('#studentList option').filter(function() {
				return this.value == val;
			}).data('id');
			$('#student_id_hidden').val(id ? id : '');
		});

		// ফি-র আইডি সেট করা
		$('#fee_type_input').on('input', function() {
			var val = $(this).val();
			var id = $('#feeTypeList option').filter(function() {
				return this.value == val;
			}).data('id');
			$('#fee_type_id_hidden').val(id ? id : '');
		});
		
        initChosen();

        // AJAX Save/Update
        $('#waiverForm').on('submit', function(e) {
			e.preventDefault(); 
			
			// এখানে এডিটের আইডিটি ধরা হচ্ছে
			const waiverId = $('#waiver_id_val').val(); 
			const url = waiverId ? "{{ url('waivers/update') }}" : "{{ route('waivers.store') }}";
			
			$('#btnSave').prop('disabled', true).text('প্রসেসিং...');

			$.ajax({
				url: url,
				method: "POST",
				data: $(this).serialize(),
				success: function(res) {
					Swal.fire('সফল!', res.message, 'success').then(() => location.reload());
				},
				error: function(xhr) {
					$('#btnSave').prop('disabled', false).text('সংরক্ষণ করুন');
					Swal.fire('এরর!', 'ডাটা সেভ হয়নি। সার্ভার চেক করুন।', 'error');
				}
			});
		});
    });

    function initChosen() {
		if ($.isFunction($.fn.chosen)) {
			$(".chosen-select").chosen({
				no_results_text: "দুঃখিত, কোনো ছাত্র পাওয়া যায়নি!",
				placeholder_text_single: "ছাত্রের নাম বা আইডি লিখে খুঁজুন...",
				search_contains: true, // নামের মাঝখানের অংশ লিখলেও যেন খুঁজে পায়
				width: "100%",
				display_disabled_options: false
			});
		}
	}

    function openWaiverModal() {
        $('#modalTitle').text('নতুন ওয়েভার যোগ করুন');
        $('#waiverForm')[0].reset();
        $('#id_container').empty();
        $(".chosen-select").val('').trigger("chosen:updated");
        $('#waiverModal').removeClass('hidden');
    }

    function closeWaiverModal() {
        $('#waiverModal').addClass('hidden');
    }

    function editWaiver(id) {
		Swal.fire({ title: 'অপেক্ষা করুন...', didOpen: () => { Swal.showLoading(); } });

		$.get("{{ url('waivers/edit') }}/" + id, function(data) {
			Swal.close();
			
			if(!data) {
				Swal.fire('Error', 'কোনো ডাটা পাওয়া যায়নি', 'error');
				return;
			}

			openWaiverModal();
			$('#modalTitle').text('ওয়েভার তথ্য আপডেট');

			// আইডি সেট করা - এখানে নিশ্চিত করুন ID টি #waiver_id_val ই হচ্ছে
			$('#id_container').html(`<input type="hidden" name="waiver_id" id="waiver_id_val" value="${id}">`);

			// ছাত্রের নাম সেট করা
			if(data.student) {
				let studentDisplayName = `${data.student.student_name_en} (ID: ${data.student.admission_no})`;
				$('#student_input').val(studentDisplayName);
				$('#student_id_hidden').val(data.student_id);
			}
			
			// ফি-র ধরন সেট করা এবং Chosen আপডেট করা
			if(data.fee_type_id) {
				$('#fee_type_id').val(data.fee_type_id).trigger("chosen:updated");
			}

			// অন্যান্য ফিল্ড সেট করা
			$('#discount_type').val(data.discount_type);
			$('#discount_value').val(data.discount_value);
			$('#is_active').val(data.is_active);
			
		}).fail(function() {
			Swal.close();
			Swal.fire('Error', 'সার্ভার থেকে ডাটা আনতে সমস্যা হয়েছে', 'error');
		});
	}

    function deleteWaiver(id) {
        Swal.fire({
            title: 'মুছে ফেলবেন?',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'হ্যাঁ',
            cancelButtonText: 'না'
        }).then((result) => {
            if (result.isConfirmed) {
                $.post("{{ url('waivers/delete') }}/" + id, { _token: "{{ csrf_token() }}" }, () => location.reload());
            }
        });
    }
</script>
@endsection