@extends('Dashboard/app')

@section('main-content')
    <form class="d-flex bg-light " action="" method="POST"  enctype="multipart/form-data">
        @csrf
        <div class="p-3 col-lg-8 col-12 mt-2 m-auto create-project shadow"> 
            <h5>CREATE NEW</h5>       
            <div class="my-5"><a href="" class="mb-5 back-btn rounded"><span class="fa fa-arrow-left"></span> Back</a> </div> 
            
            <div for="" class="mt-4 "><span class="field-title">* Student </span> 
                <select name="role" id="" class="form-control" >
                    <option value="" class="text-muted">Select Student</option>
                    <option value="">Student 1</option>
                    <option value="">Student 2</option>
                    <option value="">Student 3</option>
                </select>
            </div> 
           
            <div for="" class="mt-4 field-title">* Attach Image</div>
            <div class="border p-3">
                <div class=""  id="imgs_container">
                    <div class="project-media my-3 p-4 bg-white d-flex" id="img_1" >
                        <span><input type="file" name="photo"></span>
                        <span class="btn btn-danger ms-auto fa fa-close" onclick="removePhoto()"></span>
                    </div>
                </div>
                {{-- <div class="container d-flex">
                    <div class="btn btn-dark m-auto" id="new-img-btn" onclick="addNewImage()">New Image</div>
                </div> --}}
            </div>

            <div for="" class="field-title">* Title</div>
            <input type="text" name="title" required class="form-control">

            <div for="" class="field-title"> Article Content</div>
            <textarea name="content" id="content"></textarea>

            <div for="" class="mt-4 field-title">Attach Document (PDF)</div>
            <div class="border p-3">
                <div class=""  id="imgs_container">
                    <div class="project-media my-3 p-4 bg-white d-flex" id="img_1" >
                        <span><input type="file" name="resume"></span>
                        <span class="btn btn-danger ms-auto fa fa-close " onclick="removeResume()"></span>
                    </div>
                </div>
                {{-- <div class="container d-flex">
                    <div class="btn btn-dark m-auto" id="new-img-btn" onclick="addNewImage()">New Image</div>
                </div> --}}
            </div>


            <div class="mt-5">
                <input type="submit" value="SAVE" class="btn btn-success px-5">
            </div>
        </div>
    </form>
@endsection

@section('footer-scripts')

<script>
    ClassicEditor
        .create( document.querySelector( '#content' ) )
        
        .catch( error => {
            console.error( error );
        } );
        CKEDITOR.addCss('.cke_editable p { margin: 0 !important; }');
</script>
@endsection