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

    <form class="card mt-3" method="POST" action="/teacher" autocomplete="off" enctype="multipart/form-data">
        {{ csrf_field() }}
        <div class="card-body">
            <h2 class="card-title mb-5">Tambah Guru</h2>
            <div class="row"> 
                <div class="form-group col-md-4">
                    <label for="code">NIP <span class="required">*</span></label>
                    <input type="text" class="form-control" name="code" value="{{ old('code') }}" required>
                    @if ($errors->has('code')) <p class="invalid-feedback">{{ $errors->first('code') }}</p> @endif
                </div>

                <div class="form-group col-md-8">
                    <label for="name">Nama Guru <span class="required">*</span></label>
                    <input type="text" class="form-control" name="name" value="{{ old('name') }}" required>
                    @if ($errors->has('name')) <p class="invalid-feedback">{{ $errors->first('name') }}</p> @endif
                </div>

                <div class="form-group col-md-4">
                    <label for="phone">No. Handphone</label>
                    <input type="text" class="form-control" name="phone" value="{{ old('phone') }}">
                    @if ($errors->has('phone')) <p class="invalid-feedback">{{ $errors->first('phone') }}</p> @endif
                </div>

                <div class="form-group col-md-4">
                    <label for="email">Email</label>
                    <input type="email" class="form-control" name="email" value="{{ old('email') }}">
                    @if ($errors->has('email')) <p class="invalid-feedback">{{ $errors->first('email') }}</p> @endif
                </div>

                <div class="form-group col-md-4">
                    <label>Jenis Kelamin</label>
                    <div class="input-group mb-2">
                        <select class="form-control" name="gender">
                            <option value="">Pilih</option>
                            <option value="1">Laki-Laki</option>
                            <option value="2">Perempuan</option>
                        </select>
                    </div>
                    @if ($errors->has('gender')) <p class="invalid-feedback">{{ $errors->first('gender') }}</p> @endif
                </div>

                <div class="form-group col-md-4">
                    <label for="birthplace">Tempat Lahir</label>
                    <input type="text" class="form-control" name="birthplace" value="{{ old('birthplace') }}">
                    @if ($errors->has('birthplace')) <p class="invalid-feedback">{{ $errors->first('birthplace') }}</p> @endif
                </div>

                <div class="form-group col-md-4">
                    <label for="birthdate">Tanggal Lahir</label>
                    <div class="input-icon">
                        <input class="form-control datepicker" name="birthdate" type="text" value="{{ old('birthdate') }}">
                        <div class="input-icon-addon"><i class="fe fe-calendar" aria-hidden="true"></i></div>
                    </div>
                    @if ($errors->has('birthdate')) <p class="invalid-feedback">{{ $errors->first('birthdate') }}</p> @endif
                </div>

                <div class="form-group col-md-4">
                    <label for="image">Photo</label>
                    <div class="custom-file">
                        <input type="file" class="custom-file-input" name="image" accept=".png, .jpg, .jpeg">
                        <label class="custom-file-label">Pilih file...</label>
                    </div>
                    @if ($errors->has('image')) <p class="invalid-feedback">{{ $errors->first('image') }}</p> @endif
                </div>

                <div class="form-group col-md-12">
                    <label for="address">Alamat Lengkap</label>
                    <textarea class="form-control" name="address" rows="3">{{ old('address') }}</textarea>
                    @if ($errors->has('address')) <p class="invalid-feedback">{{ $errors->first('address') }}</p> @endif
                </div>

                <div class="form-group col-md-4">
                    <label for="parent">Gelar</label>
                    <input type="text" class="form-control" name="parent" value="{{ old('parent') }}">
                    @if ($errors->has('parent')) <p class="invalid-feedback">{{ $errors->first('parent') }}</p> @endif
                </div>

                <div class="form-group col-md-4">
                    <label for="password">Password <span class="required">*</span></label>
                    <input type="password" class="form-control" name="password" value="{{ old('password') }}" required>
                    @if ($errors->has('password')) <p class="invalid-feedback">{{ $errors->first('password') }}</p> @endif
                </div>

                <!-- <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>

            <div class="alert alert-warning mb-0" role="alert">
                <strong>Ketentuan Photo:</strong><br>
                - Format file image adalah jpg atau png<br>
                - Maksimal ukuran file image adalah 1MB<br>
                - Rekomendasi ukuran 500x500 pixel
            </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