@extends('backend.layouts.app')

@section('project') open @endsection
@section('project-add') active @endsection

@section('content')
<!-- Page Content -->
<div class="content">
    <div class="row">
        <!-- Row #2 -->
        <div class="col-md-12">
            <div class="block block-rounded">
                <div class="block-header block-header-default">
                    <h3 class="block-title">
                        Add New Project
                    </h3>
                    <a href="{{ route('project.index') }}" class="btn btn-success"><i class="fa-solid fa-list"></i> &nbsp; List</a>
                </div>
                <div class="block-content block-content-full">
                    <form action="{{ route('project.store') }}" method="post" enctype="multipart/form-data">
                        @csrf
                        <div class="row">     
                            <div class="col-md-6 mb-3">
                                <label class="form-label" for="title">Title:</label>
                                <input type="text" class="form-control" id="title" name="title"
                                    placeholder="Title" value="{{ old('title') }}">
                                @error('title')
                                    <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div>  
                            <div class="col-md-6">

                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label" for="image">Image:</label>
                                <input type="file" class="form-control" id="image" name="image"
                                    placeholder="Choose Photo" onchange="loadFile(event)">
                                @error('image')
                                    <small class="text-danger">{{ $message }}</small>
                                @enderror
                                <br>
                                
                                <img id="output" src="{{ asset('common/no-image.jpg') }}"
                                            alt="Image" style="width: 120px; height: 100px;">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label" for="breadcrumb">Breadcrumb:</label>
                                <input type="file" class="form-control" id="breadcrumb" name="breadcrumb"
                                    placeholder="Choose Photo" onchange="previewBreadcrumb(event)">
                                @error('breadcrumb')
                                    <small class="text-danger">{{ $message }}</small>
                                @enderror
                                <br>
                                <img id="preview-breadcrumb" src="{{ asset('common/no-image.jpg') }}"
                                            alt="breadcrumb" style="width: auto; height: 100px;">
                            </div>
                            <div class="col-md-12 mb-3">
                                <label class="form-label" for="description">Description:</label>
                                {{-- <textarea id="js-ckeditor" name="ckeditor">Hello CKEditor!</textarea> --}}
                                <textarea name="description" id="description" rows="3" class="form-control editor" placeholder="Description">{{ old('description') }}</textarea>
                                @error('description')
                                    <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div> 
                            <div class="col-md-12 mb-3">
                                <div class="space-x-2">
                                  <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="checkbox" value="1" id="is_upcoming" name="is_upcoming">
                                    <label class="form-check-label" for="is_upcoming">Upcoming Project</label>
                                  </div>
                                </div>
                            </div>
                        </div>
                        <div class="block-content block-content-full block-content-sm text-center border-top">
                            <button type="button" class="btn btn-alt-secondary" data-bs-dismiss="modal">
                                Close
                            </button>
                            <button type="submit" class="btn btn-alt-primary">
                                Submit
                            </button>
                        </div>
                    </form>                    
                </div>
            </div>           
        </div>
        <!-- END Row #2 -->
    </div>
</div>
<!-- END Page Content -->
@endsection

@section('script')

    <script src="/backend/assets/js/plugins/simplemde/simplemde.min.js"></script>
    <script src="/backend/assets/js/plugins/ckeditor/ckeditor.js"></script>
    <script>Codebase.helpersOnLoad(['js-ckeditor', 'js-simplemde']);</script>

    <script>
        var previewBreadcrumb = function(event) {
            var reader = new FileReader();
            reader.onload = function(){
            var output = document.getElementById('preview-breadcrumb');
            output.src = reader.result;
            };
            reader.readAsDataURL(event.target.files[0]);
        };
    </script>
@endsection