@extends('layouts.app')

@section('title', 'Add Schools to Payment Planning Task')

@section('content')
    <div class="d-flex flex-wrap justify-content-between align-items-center mb-4">
        <div>
            <h4 class="mb-1">Add Schools</h4>
            <p class="text-muted mb-0">Select schools to add to {{ $task->title }}</p>
        </div>
        <a href="{{ route('tasks.payment-planning.show', $task) }}" class="btn btn-outline-secondary">
            <i class="icon-base ti tabler-arrow-left me-1"></i>
            Back to Details
        </a>
    </div>

    @include('partials.alerts')

    <div class="card">
        <div class="card-body">
            <form method="post" action="{{ route('tasks.payment-planning.store-schools', $task) }}">
                @csrf
                <div class="mb-3">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <label class="form-label mb-0">Select Schools</label>
                        <div>
                            <button type="button" class="btn btn-sm btn-outline-primary" onclick="selectAll()">Select All</button>
                            <button type="button" class="btn btn-sm btn-outline-secondary" onclick="deselectAll()">Deselect All</button>
                        </div>
                    </div>
                    <div class="mb-3">
                        <input type="text" id="schoolSearch" class="form-control" placeholder="Search schools by name or contact number..." onkeyup="filterSchools()">
                    </div>
                    <div class="table-responsive" style="max-height: 500px; overflow-y: auto;">
                        <table class="table table-hover">
                            <thead class="table-light bg-label-success sticky-top">
                                <tr>
                                    <th width="50">
                                        <input type="checkbox" id="selectAllCheckbox" onchange="toggleAll(this)">
                                    </th>
                                    <th>School Name</th>
                                    <th>Contact Number</th>
                                    <th>Status</th>
                                </tr>
                            </thead>
                            <tbody id="schoolsTableBody">
                                @forelse($allSchools as $school)
                                    @php
                                        $isAdded = in_array($school->name, $addedSchoolNames);
                                    @endphp
                                    <tr class="school-row" data-school-name="{{ strtolower($school->name) }}" data-contact-number="{{ strtolower($school->contact_number ?? '') }}">
                                        <td>
                                            @if(!$isAdded)
                                                <input type="checkbox" name="school_ids[]" value="{{ $school->id }}" class="school-checkbox">
                                            @else
                                                <span class="text-muted">-</span>
                                            @endif
                                        </td>
                                        <td class="fw-medium">{{ $school->name }}</td>
                                        <td>{{ $school->contact_number ?? '-' }}</td>
                                        <td>
                                            @if($isAdded)
                                                <span class="badge bg-label-success">Already Added</span>
                                            @else
                                                <span class="badge bg-label-secondary">Not Added</span>
                                            @endif
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="4" class="text-center text-muted py-4">
                                            No schools available. Please add schools first.
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="d-flex gap-2">
                    <button type="submit" class="btn btn-primary">Add Selected Schools</button>
                    <a href="{{ route('tasks.payment-planning.show', $task) }}" class="btn btn-outline-secondary">Cancel</a>
                </div>
            </form>
        </div>
    </div>

    <script>
        function toggleAll(checkbox) {
            const checkboxes = document.querySelectorAll('.school-checkbox:not([style*="display: none"])');
            checkboxes.forEach(cb => {
                cb.checked = checkbox.checked;
            });
        }

        function selectAll() {
            const checkboxes = document.querySelectorAll('.school-checkbox:not([style*="display: none"])');
            checkboxes.forEach(cb => {
                cb.checked = true;
            });
            document.getElementById('selectAllCheckbox').checked = true;
        }

        function deselectAll() {
            const checkboxes = document.querySelectorAll('.school-checkbox:not([style*="display: none"])');
            checkboxes.forEach(cb => {
                cb.checked = false;
            });
            document.getElementById('selectAllCheckbox').checked = false;
        }

        function filterSchools() {
            const searchInput = document.getElementById('schoolSearch');
            const searchTerm = searchInput.value.toLowerCase().trim();
            const rows = document.querySelectorAll('.school-row');

            rows.forEach(row => {
                const schoolName = row.getAttribute('data-school-name') || '';
                const contactNumber = row.getAttribute('data-contact-number') || '';
                
                if (searchTerm === '' || 
                    schoolName.includes(searchTerm) || 
                    contactNumber.includes(searchTerm)) {
                    row.style.display = '';
                } else {
                    row.style.display = 'none';
                }
            });

            // Update select all checkbox state based on visible checkboxes
            const visibleCheckboxes = document.querySelectorAll('.school-checkbox:not([style*="display: none"])');
            const checkedVisible = document.querySelectorAll('.school-checkbox:not([style*="display: none"]):checked');
            const selectAllCheckbox = document.getElementById('selectAllCheckbox');
            
            if (visibleCheckboxes.length > 0) {
                selectAllCheckbox.checked = checkedVisible.length === visibleCheckboxes.length;
            }
        }
    </script>
@endsection