@extends('layouts.master')



@section('title')
{{__('Edit project')}}
@endsection

@section('breadcrumb')
<div class="row page-title">
    <div class="col-md-12">
        
        <h3 class="mb-1 mt-0">{{__('Edit project')}}</h3>
        <nav aria-label="breadcrumb" class="float-left mt-1">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{route('dashboard')}}">{{__('Home')}}</a></li>
                <li class="breadcrumb-item"><a href="{{route('project-list')}}">{{__('Project list')}}</a></li>
                <li class="breadcrumb-item active" aria-current="page">{{__('Edit project')}}</li>
            </ol>
        </nav>
    </div>
</div>
@endsection



@section('content')
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <h4 class="header-title mt-0 mb-1">{{__('Edit project')}}</h4>
                <p class="sub-header">
                    {{__('Please fill all given fields')}}.
                </p>
                <div class="row">
                    <div class="col-lg-12">
                        <div class="row">
                            <div class="col-lg-7">
                                <div class="row">
                                    <div class="col-12">
                                        <label class="col-form-label" for="">{{__('Project name')}} <span
                                                class="text-danger">*</span></label>
                                        <input type="text" class="form-control" required id="title" name="title"
                                            placeholder="{{__('Enter project name')}}">
                                    </div>
                                    <div class="col-12">
                                        <label class="col-form-label" for="">{{__('Short despcription')}} <span
                                                class="text-danger">*</span></label>
                                        <textarea name="" id="" cols="30" rows="4" required class="form-control"
                                            placeholder="{{__('Enter short description')}}"></textarea>
                                    </div>
                                    <div class="col-12">
                                        <label class="col-form-label">{{__('Status')}}</label>
                                        <select class="custom-select" required>
                                            <option selected disabled>{{__('Select status')}}</option>
                                            <option value="1">Pending</option>
                                            <option value="2">In progress</option>
                                            <option value="3">Completed</option>
                                            <option value="3">Reject</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-5 col-sm-12 col-form-label">
                                <div class="col-12 text-center">
                                    <img id="user_photo_selected" src="{{asset('assets/images/projects/project-10.jpg')}}"
                                        style="height:206px; width:620px;" class="img-fluid"
                                        style="width:130px;height:130px;object-fit:cover;" alt="user image">

                                </div>
                                <div id="photo-error" class="text-muted small mt-1 text-center">
                                    {{__('Allowed JPG, GIF or PNG. Max size of 2MB')}}
                                </div>

                                <div class="col-12">
                                    <label class="col-form-label" for="">{{__('Feature image')}} <span
                                            class="text-danger">*</span>
                                    </label>
                                    <input type="file" class="form-control imageChange" accept="image/*" required
                                        id="imageChange" name="image">

                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-12 col-sm-4">
                        <form action="/" method="post" class="dropzone" id="myAwesomeDropzone">
                            <div class="fallback">
                                <input name="file" type="file" multiple />
                            </div>

                            <div class="dz-message needsclick">
                                <i class="h1 text-muted  uil-cloud-upload"></i>
                                <h3>{{__('Drop files here or click to upload')}}.</h3>
                                <span class="text-muted font-13">( {{__('drag’n’drop multiple photos and files to upload')}} )
                                </span>
                            </div>
                        </form>
                    </div>


                    <div class="col-lg-12 col-sm-4">
                        <label class="col-form-label" for="">{{__('Detail description')}}</label>
                        <div id="summernote-editor">

                        </div> <!-- end summernote-editor-->

                    </div>
                    <div class="col-lg-12 col-sm-4 pt-2">

                        <input type="submit" class="btn custom-button d-flex mr-0" id="btnSubmit" value="S{{__('save changes')}}">
                    </div>
                </div>
            </div> <!-- end card-body -->
        </div> <!-- end card-->
    </div> <!-- end col -->
</div>
<!-- end row -->


@endsection

@section('script-bottom')
<script>
    $(document).ready(function (e) {
        $(document).on('change', '.imageChange', function (e) {
            photoError = 0;
            if (e.target.files && e.target.files[0]) {
                // console.log(e.target.files[0].name.strtolower())
                if (e.target.files[0].name.match(/\.(jpg|jpeg|JPG|png|gif|PNG)$/)) {
                    $("#photo-error").empty();
                    photoError = 0;
                    var reader = new FileReader();

                    reader.onload = function (e) {
                        $('#user_photo_selected').attr('src', e.target.result);
                    }
                    reader.readAsDataURL(e.target.files[0]);

                } else {
                    photoError = 1;
                    $("#photo-error").empty();
                    $("#btnSubmit").prop('disabled', true);

                    $("#photo-error").append(
                        '<p class="text-danger">Please upload only jpg, png format!</p>');
                }
            } else {
                $('#user_photo_selected').attr('src', '');
            }

            if (photoError == 0) {
                $(".btn-change-photo").prop('disabled', false);
                $("#btnSubmit").attr('disabled', false);
            } else {
                $(".btn-change-photo").prop('disabled', true);
            }
        });
    });

</script>

@endsection
