@extends('layouts.app')
@section('title', 'Print Challans')
@section('page_title', 'Print Challans (Class / Section)')
@section('breadcrumbs')
    <li class="breadcrumb-item"><a href="{{ route('challans.index') }}">Challans</a></li>
    <li class="breadcrumb-item active">Print</li>
@endsection

@section('content')
    <div class="card"><div class="card-body">
        <p class="text-muted small">Select a class to print <b>all its challans</b>. Choose a section to limit it to that section, and optionally a month/status.</p>
        <form method="GET" action="{{ route('challans.print-bulk') }}" target="_blank" class="row g-3">
            <div class="col-md-3">
                <label class="form-label">Class <span class="text-danger">*</span></label>
                <select name="class_id" id="pc_class" class="form-select" required>
                    <option value="">— Select class —</option>
                    @foreach($classes as $c)<option value="{{ $c->id }}">{{ $c->name }}</option>@endforeach
                </select>
            </div>
            <div class="col-md-3">
                <label class="form-label">Section</label>
                <select name="section_id" id="pc_section" class="form-select">
                    <option value="">All sections</option>
                </select>
            </div>
            <div class="col-md-3">
                <label class="form-label">Billing Month</label>
                <input type="month" name="month" class="form-control">
                <div class="form-text">Leave blank for all months.</div>
            </div>
            <div class="col-md-3">
                <label class="form-label">Status</label>
                <select name="status" class="form-select">
                    <option value="all">All</option>
                    <option value="unpaid">Unpaid</option>
                    <option value="partial">Partial</option>
                    <option value="paid">Paid</option>
                </select>
            </div>
            <div class="col-12">
                <button class="btn btn-primary"><i class="bi bi-printer me-1"></i>Open & Print Challans</button>
                <a href="{{ route('challans.index') }}" class="btn btn-light border">Cancel</a>
            </div>
        </form>
    </div></div>

    @push('scripts')
    <script>
        const PC_SECTIONS = @json($sections);
        function pcLoad() {
            const c = document.getElementById('pc_class').value;
            const sel = document.getElementById('pc_section');
            sel.innerHTML = '<option value="">All sections</option>';
            PC_SECTIONS.filter(s => String(s.class_id) === String(c)).forEach(s => {
                const o = document.createElement('option'); o.value = s.id; o.textContent = s.name; sel.appendChild(o);
            });
        }
        document.getElementById('pc_class').addEventListener('change', pcLoad);
    </script>
    @endpush
@endsection
