@extends('index')
@section('content')

    <form class="card mt-3" method="POST" action="/student/bulk" autocomplete="off" enctype="multipart/form-data">
        {{ csrf_field() }}
        <div class="card-body">
            <h2 class="card-title mb-5">Tambah Siswa</h2>
            <div class="row"> 
                <div class="form-group col-md-4">
                    <label>Tahun Ajaran <span class="required">*</span></label>
                    <div class="input-group mb-2">
                        <select class="tb-year form-control" name="year">
                            <option value="">Pilih</option>
                            @foreach($year as $rows)
                                <option value="{{ $rows->id }}">{{ $rows->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    @if ($errors->has('year')) <p class="invalid-feedback">{{ $errors->first('year') }}</p> @endif
                </div>

                <div class="form-group col-md-4">
                    <label>Kelas <span class="required">*</span></label>
                    <div class="input-group mb-2">
                        <select class="tb-classroom form-control" name="classroom">
                            <option value="">Pilih</option>
                        </select>
                    </div>
                    @if ($errors->has('classroom')) <p class="invalid-feedback">{{ $errors->first('classroom') }}</p> @endif
                </div>
                <div class="form-group col-md-4">
                    <label for="file">File Csv</label>
                    <div class="custom-file">
                        <input type="file" class="custom-file-input" name="csv" accept=".csv">
                        <label class="custom-file-label">Pilih file...</label>
                    </div>
                    @if ($errors->has('file')) <p class="invalid-feedback">{{ $errors->first('file') }}</p> @endif
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <a href="/teacher" class="btn btn-light">Kembali</a>
            <button type="submit" class="btn btn-primary">Proses</button>
        </div>
    </form>
    
@endsection
@push('script')
<script type="text/javascript">
    $('.tb-year').on('change', function(e) {
        $.fn.loadData($(this).val());
    });

    $.fn.loadData = function(id = null) {
        $.ajax({
            type: "POST",
            trigger: 'manual',
            cache: false,
            url: "/classroom/select/ajax",
            data: {
                id: id
            },
            dataType: "html",
            beforeSend: function() {
                $('.tb-classroom').html('<option value="">Loading...</option>');
            },
            complete: function() {},
            success: function(html) {
                $('.tb-classroom').html('<option value="">Pilih</option>');
                $('.tb-classroom').append(html);
            }
        });
    }
</script>
@endpush