@extends('layouts.app')

@section('content')
<div class="container mt-4">
    <h4 class="fw-bold text-primary mb-4">Assign Trainees (Students) to Class</h4>

    {{-- Error Messages --}}
    @if ($errors->any())
        <div class="alert alert-danger">
            <strong>There were some issues:</strong>
            <ul class="mb-0">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <form action="{{ route('assignments.store') }}" method="POST" id="assignmentForm">
        @csrf
        <div class="row g-3">
            {{-- Student Lookup --}}
            <div class="col-md-4">
                <label for="student_search" class="form-label">Student ID (National ID)</label>
                <input type="text" id="student_search" class="form-control" placeholder="Enter National ID" required>
                <input type="hidden" id="student_id" name="student_id">
            </div>

            <div class="col-md-8">
                <label class="form-label">Student Info</label>
                <div id="student_info" class="border rounded p-3 bg-light small text-muted">
                    No student loaded.
                </div>
            </div>

            <hr class="my-4">

            {{-- County → SubCounty → Center → Class --}}
            <div class="col-md-3">
                <label class="form-label">County</label>
                <select id="county_id" name="county_id" class="form-select" required>
                    <option value="">Select County</option>
                    @foreach($counties as $county)
                        <option value="{{ $county->id }}">{{ $county->name }}</option>
                    @endforeach
                </select>
            </div>

            <div class="col-md-3">
                <label class="form-label">Sub County</label>
                <select id="sub_county_id" name="sub_county_id" class="form-select" required>
                    <option value="">Select Sub County</option>
                </select>
            </div>

            <div class="col-md-3">
                <label class="form-label">Center</label>
                <select id="center_id" name="center_id" class="form-select" required>
                    <option value="">Select Center</option>
                </select>
            </div>

            <div class="col-md-3">
                <label class="form-label">Class</label>
                <select id="class_room_id" name="class_room_id" class="form-select" required>
                    <option value="">Select Class</option>
                </select>
            </div>

            <hr class="my-4">

            {{-- Dates and Payment --}}
            <div class="col-md-3">
                <label class="form-label">Start Date</label>
                <input type="date" name="start_date" id="start_date" class="form-control" required>
            </div>

            <div class="col-md-3">
                <label class="form-label">End Date</label>
                <input type="date" name="end_date" id="end_date" class="form-control" required>
            </div>

            <div class="col-md-2">
                <label class="form-label">Days</label>
                <input type="number" name="number_of_days" id="number_of_days" class="form-control" min="1" required readonly>
            </div>

            <div class="col-md-2">
                <label class="form-label">Rate/Day (Ksh)</label>
                <input type="number" name="payment_rate_per_day" id="payment_rate_per_day" class="form-control" min="0" step="0.01" required>
            </div>

            <div class="col-md-2">
                <label class="form-label">Amount Paid (Ksh)</label>
                <input type="number" name="amount_paid" id="amount_paid" class="form-control" min="0" step="0.01">
            </div>

            <div class="col-md-3">
                <label class="form-label">Total (Ksh)</label>
                <input type="text" id="total_amount" class="form-control" readonly>
            </div>

            <div class="col-md-3">
                <label class="form-label">Amount Due (Ksh)</label>
                <input type="text" id="amount_due" class="form-control" readonly>
            </div>

            <div class="col-12 mt-4">
                <button type="submit" class="btn btn-success">
                    <i class="bi bi-save"></i> Save Assignment
                </button>
                <a href="{{ route('assignments.index') }}" class="btn btn-secondary">Cancel</a>
            </div>
        </div>
    </form>
</div>

{{-- Script Section --}}
<script>
document.addEventListener('DOMContentLoaded', () => {

    function debounce(fn, delay = 400) {
        let timeout;
        return (...args) => {
            clearTimeout(timeout);
            timeout = setTimeout(() => fn(...args), delay);
        };
    }

    const countySelect = document.getElementById('county_id');
    const subCountySelect = document.getElementById('sub_county_id');
    const centerSelect = document.getElementById('center_id');
    const classSelect = document.getElementById('class_room_id');

    const studentSearchInput = document.getElementById('student_search');
    const hiddenStudentId = document.getElementById('student_id');
    const studentInfoDiv = document.getElementById('student_info');

    // --- Dependent Dropdowns ---
    countySelect.addEventListener('change', async () => {
        subCountySelect.innerHTML = '<option value="">Select Sub County</option>';
        centerSelect.innerHTML = '<option value="">Select Center</option>';
        classSelect.innerHTML = '<option value="">Select Class</option>';

        if (!countySelect.value) return;

        try {
            const res = await fetch(`/admin/assignments/get-subcounties/${countySelect.value}`);
            const data = await res.json();
            data.forEach(s => {
                const option = document.createElement('option');
                option.value = s.id;
                option.textContent = s.name;
                subCountySelect.appendChild(option);
            });
        } catch (err) {
            console.error('Error fetching sub-counties:', err);
        }
    });

    subCountySelect.addEventListener('change', async () => {
        centerSelect.innerHTML = '<option value="">Select Center</option>';
        classSelect.innerHTML = '<option value="">Select Class</option>';

        if (!subCountySelect.value) return;

        try {
            const res = await fetch(`/admin/assignments/get-centers/${subCountySelect.value}`);
            const data = await res.json();
            data.forEach(center => {
                const option = document.createElement('option');
                option.value = center.id;
                option.textContent = center.name;
                centerSelect.appendChild(option);
            });
        } catch (err) {
            console.error('Error fetching centers:', err);
        }
    });

    centerSelect.addEventListener('change', async () => {
        classSelect.innerHTML = '<option value="">Select Class</option>';
        if (!centerSelect.value) return;

        try {
            const res = await fetch(`/admin/assignments/get-classes/${centerSelect.value}`);
            const data = await res.json();
            data.forEach(cls => {
                const option = document.createElement('option');
                option.value = cls.id;
                option.textContent = `Class ${cls.class_number}`;
                classSelect.appendChild(option);
            });
        } catch (err) {
            console.error('Error fetching classes:', err);
        }
    });

    // --- Student Lookup ---
    studentSearchInput.addEventListener('input', debounce(async () => {
        const studentKey = studentSearchInput.value.trim();
        if (!studentKey) {
            hiddenStudentId.value = '';
            studentInfoDiv.innerHTML = 'No student loaded.';
            studentInfoDiv.className = 'border rounded p-3 bg-light small text-muted';
            return;
        }

        try {
            const res = await fetch(`/admin/assignments/lookup-student/${studentKey}`);
            const data = await res.json();

            if (!data || data.message === 'Student not found') {
                hiddenStudentId.value = '';
                studentInfoDiv.innerHTML = `<span class="text-danger">Student not found!</span>`;
                studentInfoDiv.className = 'border rounded p-3 bg-danger-subtle text-danger-emphasis small';
                return;
            }

            hiddenStudentId.value = data.id;
            studentInfoDiv.innerHTML = `
                <div>
                    <strong>${data.name}</strong><br>
                    <small>
                        <strong>ID Number:</strong> ${data.id_number || 'N/A'}<br>
                        <strong>National ID:</strong> ${data.national_id || 'N/A'}<br>
                        <strong>Phone:</strong> ${data.phone || 'N/A'}<br>
                        <strong>Email:</strong> ${data.email || 'N/A'}<br>
                        <strong>County:</strong> ${data.county || 'N/A'}<br>
                        <strong>Sub-county:</strong> ${data.sub_county || 'N/A'}<br>
                        <strong>Center:</strong> ${data.center || 'N/A'}<br>
                        <strong>Training Type:</strong> ${data.training_type || 'N/A'}
                    </small>
                </div>
            `;
            studentInfoDiv.className = 'border rounded p-3 bg-success-subtle text-success-emphasis small';
        } catch (error) {
            hiddenStudentId.value = '';
            studentInfoDiv.innerHTML = `<span class="text-danger">Error fetching student!</span>`;
            studentInfoDiv.className = 'border rounded p-3 bg-danger-subtle text-danger-emphasis small';
        }
    }));

    // --- Auto-calculation ---
    function calculateTotals() {
        const days = parseFloat(document.getElementById('number_of_days').value) || 0;
        const rate = parseFloat(document.getElementById('payment_rate_per_day').value) || 0;
        const paid = parseFloat(document.getElementById('amount_paid').value) || 0;
        const total = days * rate;
        document.getElementById('total_amount').value = total.toFixed(2);
        document.getElementById('amount_due').value = (total - paid).toFixed(2);
    }

    ['number_of_days', 'payment_rate_per_day', 'amount_paid'].forEach(id =>
        document.getElementById(id).addEventListener('input', calculateTotals)
    );

    // --- Days Calculation from Dates ---
    function updateDays() {
        const startDate = new Date(document.getElementById('start_date').value);
        const endDate = new Date(document.getElementById('end_date').value);
        const daysInput = document.getElementById('number_of_days');

        if (!isNaN(startDate) && !isNaN(endDate) && endDate >= startDate) {
            const diffDays = Math.floor((endDate - startDate) / (1000*60*60*24)) + 1;
            daysInput.value = diffDays;
            calculateTotals();
        } else {
            daysInput.value = '';
        }
    }

    document.getElementById('start_date').addEventListener('change', updateDays);
    document.getElementById('end_date').addEventListener('change', updateDays);
});
</script>
@endsection