@extends('backend.layouts.app')

@section('course') open @endsection
@section('course-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 course
                    </h3>
                    <a href="{{ route('course.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('course.update', $course->id) }}" method="post" enctype="multipart/form-data">
                        @csrf
                        @method("PUT")
                        <input type="hidden" name="old_image" value="{{ $course->image }}">
                        <input type="hidden" name="old_breadcrumb" value="{{ $course->breadcrumb }}">
                        <input type="hidden" name="old_presentation" value="{{ $course->presentation }}">
                        <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="{{ $course->title }}">
                                @error('title')
                                    <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div>
                            <div class="col-md-6 mb-3">
                                <div class="">
                                    <label class="form-label" for="category_id">Select Category</label>
                                    <select class="js-select2 form-select" id="example-select2"
                                        name="category_id" data-validation="required" style="width: 100%;" data-placeholder="Choose one..">
                                        <option value="0" selected>Select One</option>
                                        @foreach ($categories as $category)
                                        <option value="{{ $category->id }}" {{ $category->id == $course->category_id ? 'selected' : '' }}>{{ $category->name }}</option>
                                        @endforeach
                                    </select>
                                    @error('category_id')
                                    <small class="text-danger">{{ $message }}</small>
                                    @enderror
                                </div>
                            </div>                           
                            <div class="col-md-6 mb-3">
                                <label class="form-label" for="date">Date:</label>
                                <input type="date" class="form-control" id="date" name="date"
                                    placeholder="course date" value="{{ $course->date }}">
                                @error('date')
                                    <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label" for="goal">Goal Amount:</label>
                                <input type="number" class="form-control" id="goal" name="goal"
                                    placeholder="goal amount" value="{{ $course->goal }}">
                                @error('goal')
                                    <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </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">{{ $course->description }}</textarea>
                                @error('description')
                                    <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div>   
                            <div class="col-md-12 mb-3">
                                <label class="form-label" for="summary">Summary:</label>
                                <textarea name="summary" id="summary" rows="3" class="form-control editor" placeholder="summary">{{ $course->summary }}</textarea>
                                @error('summary')
                                    <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div>
                            <div class="col-md-4 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
                                <img id="output" src="{{ asset($course->image) }}"
                                            alt="Image" style="width: 180px; height: 100px;" class="mt-3">
                            </div>                           
                            <div class="col-md-4 mb-3">
                                <label class="form-label" for="breadcrumb">Breadcrump:</label>
                                <input type="file" class="form-control" id="breadcrumb" name="breadcrumb"
                                    placeholder="Choose Breadcrumb" onchange="loadBreadcrumb(event)">
                                @error('breadcrumb')
                                    <small class="text-danger">{{ $message }}</small>
                                @enderror
                                <img id="preview-breadcrumb" src="{{ asset($course->breadcrumb) }}"
                                            alt="breadcrumb" style="width: 250px; height: 100px;" class="mt-3">
                            </div>
                            <div class="col-md-4 mb-3">
                                <label class="form-label" for="presentation">Presentation:</label>
                                <input type="file" class="form-control" id="presentation" name="presentation"
                                    placeholder="Choose Presentation PDF" value="{{ $course->presentation }}">
                                @error('presentation')
                                    <small class="text-danger">{{ $message }}</small>
                                @enderror                                
                            </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/select2/js/select2.full.min.js"></script>
    <script>
        Codebase.helpersOnLoad(['js-flatpickr', 'jq-datepicker', 'jq-colorpicker', 'jq-maxlength', 'jq-select2', 'jq-rangeslider', 'jq-masked-inputs', 'jq-pw-strength']);
    </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