@extends('layouts.admin')

@section('title', 'Fee Reminders')
@section('page-title', 'Fee Reminders Setup')

@section('content')
<div class="row">
    <!-- Configuration & Dispatch -->
    <div class="col-lg-4 mb-4">
        <div class="admin-card">
            <h5 class="mb-3"><i class="bi bi-send-fill text-primary"></i> Broadcast Fee Alert</h5>
            <p class="text-muted small">Select students from the table and enter the reminder message below. Reminders are dispatched directly to the mapped parents via simulated SMS.</p>
            
            <form action="{{ route('admin.fee-reminders.store') }}" method="POST" id="reminder-form">
                @csrf
                <!-- Selected student IDs input wrapper -->
                <div id="selected-students-inputs"></div>

                <div class="mb-3">
                    <label class="form-label fw-bold">Selected Students Count</label>
                    <input type="text" id="selected-count-display" class="form-control bg-light fw-bold text-primary" value="0 selected" readonly>
                </div>

                <div class="mb-4">
                    <label class="form-label fw-bold">Reminder Message</label>
                    <textarea name="reminder_message" rows="5" class="form-control small" placeholder="e.g. Dear Parents, this is a friendly reminder that the second quarter tuition fees are due on July 15th. Please submit online." required>Dear Parents, this is a friendly reminder that the second quarter tuition fees are due on July 15th. Please submit online via your Parent Portal credentials or visit the Main Campus accounts office.</textarea>
                </div>

                <button type="submit" class="btn btn-primary rounded-pill w-100" id="submit-btn" disabled>
                    <i class="bi bi-chat-dots-fill"></i> Dispatch Reminders
                </button>
            </form>
        </div>
    </div>

    <!-- Student Fees Grid -->
    <div class="col-lg-8 mb-4">
        <div class="admin-card">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h5 class="mb-0"><i class="bi bi-people-fill text-success"></i> Student Records</h5>
                <button type="button" class="btn btn-outline-secondary btn-sm" onclick="selectAllStudents()">Select All</button>
            </div>
            
            <div class="table-responsive" style="max-height: 500px; overflow-y: auto;">
                <table class="table table-hover align-middle small text-secondary">
                    <thead>
                        <tr class="table-light">
                            <th style="width: 5%;"></th>
                            <th>Student</th>
                            <th>Class / Section</th>
                            <th>Parent Details</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($students as $std)
                            <tr>
                                <td>
                                    <input type="checkbox" class="student-checkbox" value="{{ $std->id }}" onclick="updateSelected()">
                                </td>
                                <td>
                                    <strong class="text-dark">{{ $std->name }}</strong>
                                    <span class="d-block text-muted" style="font-size: 0.75rem;">Roll: {{ $std->roll_number }}</span>
                                </td>
                                <td>{{ $std->schoolClass->name }} - {{ $std->section->name }}</td>
                                <td>
                                    @foreach($std->parents as $p)
                                        <span class="d-block fw-semibold">{{ $p->name }}</span>
                                        <span class="d-block text-muted" style="font-size: 0.75rem;">Mob: {{ $p->mobile }}</span>
                                    @endforeach
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="4" class="text-center text-muted">No students added to the system database.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    function updateSelected() {
        const checkboxes = document.querySelectorAll('.student-checkbox:checked');
        const count = checkboxes.length;
        
        // Update display input
        document.getElementById('selected-count-display').value = count + ' student(s) selected';
        
        // Toggle dispatch button
        const submitBtn = document.getElementById('submit-btn');
        submitBtn.disabled = count === 0;

        // Clear existing input fields in wrapper
        const wrapper = document.getElementById('selected-students-inputs');
        wrapper.innerHTML = '';

        // Generate hidden input parameters
        checkboxes.forEach(chk => {
            const input = document.createElement('input');
            input.type = 'hidden';
            input.name = 'student_ids[]';
            input.value = chk.value;
            wrapper.appendChild(input);
        });
    }

    function selectAllStudents() {
        const checkboxes = document.querySelectorAll('.student-checkbox');
        const allChecked = Array.from(checkboxes).every(chk => chk.checked);
        
        checkboxes.forEach(chk => {
            chk.checked = !allChecked;
        });

        updateSelected();
    }
</script>
@endsection