@extends('layouts.panel')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">       
            <form class="form-ajax" method="POST" action="{{ route('panel.scripts.store') }}">
                @method('POST')
                <div class="d-flex mb-2 align-items-center">
                    <h4 class="m-0 text-uppercase fw-bold">Naskah Soal</h4>
                    <div class="btn-toolbar ms-auto">
                        <div class="btn-group btn-group-sm me-2">
                            <a href="{{ route('panel.scripts.index') }}" class="btn btn-outline-secondary">Batal</a>
                        </div>
                        <div class="btn-group btn-group-sm">
                            <button type="submit" class="btn btn-primary">Tambah</button>
                        </div>
                    </div>
                </div> 
                <div class="card">
                    <div class="card-body">
                        <div class="form-group mb-3">
                            <label for="code" class="mb-1">Kode</label>
                            <input id="code" type="text" class="form-control" name="code">
                            <div class="invalid-feedback"></div>
                        </div>
                        <div class="form-group mb-3">
                            <label for="title" class="mb-1">Judul</label>
                            <input id="title" type="text" class="form-control" name="title">
                            <div class="invalid-feedback"></div>
                        </div>
                        <div class="form-group mb-3">
                            <label for="description" class="mb-1">Deskripsi</label>
                            <textarea id="description" class="form-control" name="description"></textarea>
                            <div class="invalid-feedback"></div>
                        </div>
                        <div class="form-group mb-3">
                            <label for="discipline_id" class="mb-1">Disiplin Ilmu</label>
                            <select id="discipline_id" class="form-select" name="discipline_id"></select>
                            <div class="invalid-feedback"></div>
                        </div>
                        <div class="form-group mb-3">
                            <label for="grade_id" class="mb-1">Jenjang</label>
                            <select id="grade_id" class="form-select" name="grade_id"></select>
                            <div class="invalid-feedback"></div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('css')
<link rel="stylesheet" href="{{ asset('vendor/select2/css/select2.min.css') }}">
<link rel="stylesheet" href="{{ asset('vendor/select2/css/select2-bootstrap-5-theme.min.css') }}" />
@endpush

@push('js')
<script src="{{ asset('vendor/select2/js/select2.full.min.js') }}"></script>
<script>
$.fn.select2.defaults.set("width", "100%");
$.fn.select2.defaults.set("theme", "bootstrap-5");
$('#discipline_id').select2({
    placeholder : 'Pilih Salah Satu',
    allowClear  : true,
    ajax : {
        url : `{{ route('panel.helpers.select2') }}`,
        data : (params)=>{
            return $.extend({},params,{
                model : 'Discipline'
            });
        }
    }
});
$('#grade_id').select2({
    placeholder : 'Pilih Salah Satu',
    allowClear  : true,
    ajax : {
        url : `{{ route('panel.helpers.select2') }}`,
        data : (params)=>{
            return $.extend({},params,{
                model : 'Grade'
            });
        }
    }
});
$('form.form-ajax').submit((e)=>{
    e.preventDefault();
    let form    = e.target,
        data    = new FormData(form),
        btn     = $(form).find('[type="submit"]'),
        btnHTML = btn.html();

    $.ajax({
        method  : $(form).attr('method'),
        url     : $(form).attr('action'),
        data    : data,
        contentType: false,
        processData: false,
        beforeSend:()=>{
            btn.prop('disabled',true).addClass('disabled').html('Loading ...');
        },
        error:(xhr)=>{
            btn.prop('disabled', false).removeClass('disabled').html(btnHTML);
            let errorFields = xhr.responseJSON.errors;
            let toast = new bootstrap.Toast(document.getElementById('toast-error'));
            toast.show();
            $.each(errorFields, (key, value)=>{
                $(`[name="${key}"]`).addClass('is-invalid');
                $(`[name="${key}"]`).next('.invalid-feedback').text(value[0]);
            });
        },
        success: (response)=>{
            btn.prop('disabled', false).removeClass('disabled').html(btnHTML);
            let toast = new bootstrap.Toast(document.getElementById('toast-success'));
            toast.show();
            setTimeout(()=>{
                window.location.href = `{{ route('panel.scripts.index') }}/${response.data.id}`;
            }, 1000);
        }
    });
});
</script>
@endpush