@extends('admin.layouts.app-form')

@section('form-title')
    @if(isset($data))
        Ubah Data {{ $settings['title'] }}
    @else
        Tambah Data {{ $settings['title'] }}
    @endif
@endsection

@section('form')
    @if(isset($data))
        <input type="hidden" name="_method" value="PUT">
    @endif

    <div class="form-group">
        <label for="nama" class="label-control">Nama <span class="text-danger">*</span></label>
        <input type="text" maxlength="200" class="form-control" name="name" id="nama" placeholder="nama" required value="{{ old('nama',@$data->name) }}">
        @error('nama')
            <strong class="text-danger">{{ $message }}</strong>
        @enderror
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="form-group">
                <label for="information">Information </label>
                <div id="toolbar"></div>
                <div id="information" style="min-height: 200px;">{!! old('information',@$data->information) !!}</div>
                <input type="hidden" name="information" id="isi_information" value="{{ old('information',@$data->information) }}">
                @error('information')
                    <div class="alert alert-danger">{{ $message }}</div>
                @enderror
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="form-group">
                <label for="responsibilities">Responsibilities</label>
                <div id="toolbar"></div>
                <div id="responsibilities" style="min-height: 200px;">{!! old('responsibilities',@$data->responsibilities) !!}</div>
                <input type="hidden" name="responsibilities" id="isi_responsibilities" value="{{ old('responsibilities',@$data->responsibilities) }}">
                @error('responsibilities')
                    <div class="alert alert-danger">{{ $message }}</div>
                @enderror
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="form-group">
                <label for="requirements">Requirement</label>
                <div id="toolbar"></div>
                <div id="requirements" style="min-height: 200px;">{!! old('requirements',@$data->requirements) !!}</div>
                <input type="hidden" name="requirements" id="isi_requirements" value="{{ old('requirements',@$data->requirements) }}">
                @error('requirements')
                    <div class="alert alert-danger">{{ $message }}</div>
                @enderror
            </div>
        </div>
    </div>

    <div class="form-group">
        <label for="link" class="label-control">Link Apply<span class="text-danger">*</span></label/>
        <input type="url" maxlength="200" class="form-control" name="link_apply" id="link" placeholder="https://" required value="{{ old('link',@$data->link_apply) }}">
        @error('link')
            <strong class="text-danger">{{ $message }}</strong>
        @enderror
    </div>

    <div class="form-group">
        <label for="tanggal" class="label-control">Closing Date <span class="text-danger">*</span></label/>
        <input type="date" class="form-control" name="batas_waktu" id="batas_tanggal" placeholder="batas_tanggal" required value="{{ old('batas_tanggal',@$data->batas_waktu) }}">
        @error('batas_tanggal')
            <strong class="text-danger">{{ $message }}</strong>
        @enderror
    </div>

@endsection

@push('styles')

<link href="//cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<link href="//cdn.quilljs.com/1.3.6/quill.bubble.css" rel="stylesheet">
@endpush
@push('scripts')
    <script src="//cdn.quilljs.com/1.3.6/quill.js"></script>
    <script src="//cdn.quilljs.com/1.3.6/quill.min.js"></script>
    <script>
        var container = document.getElementById('information');
        var editor = new Quill(container,{
        debug: 'info',
        modules: {
            toolbar: [
                ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
                ['blockquote', 'code-block'],
                [{ 'header': 1 }, { 'header': 2 }],               // custom button values
                [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                [{ 'script': 'sub'}, { 'script': 'super' }],      // superscript/subscript
                [{ 'indent': '-1'}, { 'indent': '+1' }],          // outdent/indent
                [{ 'direction': 'rtl' }],                         // text direction
                [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
                [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
                [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
                [{ 'font': [] }],
                [{ 'align': [] }],
                ['image'],
                ['clean'],
            ]
        },
            placeholder: 'Isi...',
            theme: 'snow'
        });

        $(document).on("submit","#form",function(){
            var myEditor = document.querySelector('#information')
            var html = myEditor.children[0].innerHTML
            $("#isi_information").val(html);
        });
    </script>
    <script>
        var container = document.getElementById('responsibilities');
        var editor = new Quill(container,{
        debug: 'info',
        modules: {
            toolbar: [
                ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
                ['blockquote', 'code-block'],
                [{ 'header': 1 }, { 'header': 2 }],               // custom button values
                [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                [{ 'script': 'sub'}, { 'script': 'super' }],      // superscript/subscript
                [{ 'indent': '-1'}, { 'indent': '+1' }],          // outdent/indent
                [{ 'direction': 'rtl' }],                         // text direction
                [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
                [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
                [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
                [{ 'font': [] }],
                [{ 'align': [] }],
                ['image'],
                ['clean'],
            ]
        },
            placeholder: 'Isi...',
            theme: 'snow'
        });

        $(document).on("submit","#form",function(){
            var myEditor = document.querySelector('#responsibilities')
            var html = myEditor.children[0].innerHTML
            $("#isi_responsibilities").val(html);
        });
    </script>
    <script>
        var container = document.getElementById('requirements');
        var editor = new Quill(container,{
        debug: 'info',
        modules: {
            toolbar: [
                ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
                ['blockquote', 'code-block'],
                [{ 'header': 1 }, { 'header': 2 }],               // custom button values
                [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                [{ 'script': 'sub'}, { 'script': 'super' }],      // superscript/subscript
                [{ 'indent': '-1'}, { 'indent': '+1' }],          // outdent/indent
                [{ 'direction': 'rtl' }],                         // text direction
                [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
                [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
                [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
                [{ 'font': [] }],
                [{ 'align': [] }],
                ['image'],
                ['clean'],
            ]
        },
            placeholder: 'Isi...',
            theme: 'snow'
        });

        $(document).on("submit","#form",function(){
            var myEditor = document.querySelector('#requirements')
            var html = myEditor.children[0].innerHTML
            $("#isi_requirements").val(html);
        });
    </script>
@endpush