@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">
                        Edit 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.update', $project->id) }}" method="post" enctype="multipart/form-data">
                        @csrf
                        @method("PUT")
                        <input type="hidden" name="old_image" value="{{ $project->image }}">
                        <input type="hidden" name="old_breadcrumb" value="{{ $project->breadcrumb }}">
                        <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="{{ $project->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 mb-2" id="image" name="image"
                                    placeholder="Choose Photo" onchange="loadFile(event)">
                                @error('image')
                                    <small class="text-danger">{{ $message }}</small>
                                @enderror
                                @if (isset($project->image) && file_exists($project->image))
                                    <img id="output" src="{{ asset($project->image) }}"
                                    alt="image" style="width: 120px; height: 100px;" class="mt-3">  
                                @else
                                    <img id="output" src="{{ asset('common/no-image.jpg') }}" alt="Image"
                                    style="width: 120px; height: 100px;">  
                                @endif
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label" for="breadcrumb">Breadcrumb:</label>
                                <input type="file" class="form-control mb-2" id="breadcrumb" name="breadcrumb"
                                    placeholder="Choose breadcrumb" onchange="loadBreadcrumb(event)">
                                @error('breadcrumb')
                                    <small class="text-danger">{{ $message }}</small>
                                @enderror
                                @if (isset($project->breadcrumb) && file_exists($project->breadcrumb))
                                    <img id="preview-breadcrumb" src="{{ asset($project->breadcrumb) }}"
                                    alt="breadcrumb" style="width: 180px; height: 100px;" class="mt-3">  
                                @else
                                    <img id="preview-breadcrumb" src="{{ asset('common/no-image.jpg') }}" alt="Image"
                                    style="width: 180px; height: 100px;">  
                                @endif
                            </div>  
                           
                            <div class="col-md-12 mb-3">
                                <label class="form-label" for="description">Description:</label>
                                {{-- <textarea name="description" id="description" rows="3" class="form-control editor" placeholder="Description">{{ $project->description }}</textarea> --}}
                                <textarea id="" name="description" class="form-control editor" placeholder="Description">{{ $project->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" {{ $project->is_upcoming == 1 ? 'checked' : '' }}>
                                    <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 loadBreadcrumb = 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