@extends('layout._default')
@section('title')
<a href="javascript:history.back()" class="fs-3 text-gray-800 text-hover-primary fw-bold mb-3"><i class="ki-duotone ki-arrow-left">
    <span class="path1"></span>
    <span class="path2"></span>
    </i>Go Back</a>
    Feedback From {{ $feedback->user->name }}
@endsection
@section('body-con')

   
<div class="card">
    <!--begin::Card header-->
    <div class="card-header border-0 pt-6">
        <div class="card-title">
           Email: {{ $feedback->user->email }}
        </div>
        <div>
            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#kt_modal_add_user">Reply</button>
        </div>
    </div>

    <div class="card-body py-4">
        Description: {{ $feedback->description }} <br>
        Rating Stars: {{ $feedback->rating_stars }} <br>
        Type: {{ $feedback->type }} <br>
        Medium: {{ $feedback->user->source }} <br>
    </div>  
</div>

@push('modals')
    <div class="modal fade" id="kt_modal_add_user" tabindex="-1" aria-hidden="true">
        <!--begin::Modal dialog-->
        <div class="modal-dialog modal-dialog-centered mw-650px">
            <!--begin::Modal content-->
            <div class="modal-content">
                <!--begin::Modal header-->
                <div class="modal-header" id="kt_modal_add_user_header">
                    <!--begin::Modal title-->
                    <h2 class="fw-bold">Reply To Feedback</h2>
                    <!--end::Modal title-->
                    <!--begin::Close-->
                    <div class="btn btn-icon btn-sm btn-active-icon-primary" data-bs-dismiss="modal" aria-label="Close">
                        {!! getIcon('cross','fs-1') !!}
                    </div>
                    <!--end::Close-->
                </div>
                <!--end::Modal header-->
                <!--begin::Modal body-->
                <div class="modal-body px-5 my-7">
                    <!--begin::Form-->
                    <form method="POST" id="kt_modal_add_reply_form" class="form" action="{{ route('feedbacks.reply', $feedback->id) }}">
                        @csrf
                        <!--begin::Scroll-->
                        <div class="d-flex flex-column scroll-y px-5 px-lg-10" id="kt_modal_add_user_scroll" data-kt-scroll="true" data-kt-scroll-activate="true" data-kt-scroll-max-height="auto" data-kt-scroll-dependencies="#kt_modal_add_user_header" data-kt-scroll-wrappers="#kt_modal_add_user_scroll" data-kt-scroll-offset="300px">
                            
                            {{-- <div id="kt_quil_1" style="height: 325px">
                                Compose a message
                            </div> --}}

                            <textarea name="description" id="kt-ckeditor-1" onkeyup="validate()"></textarea>
                            <span class="text-danger" id="description_error"></span>      
                        </div>
                        <!--end::Scroll-->
                        <!--begin::Actions-->
                        <div class="text-center pt-15">
                            <button type="reset" class="btn btn-light me-3" data-bs-dismiss="modal" aria-label="Close">Discard</button>
                            <button type="submit" class="btn btn-primary" data-kt-users-modal-action="submit">
                                <span class="indicator-label">Submit</span>
                                <span class="indicator-progress">
                                    Please wait...
                                    <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
                                </span>
                            </button>
                        </div>
                        <!--end::Actions-->
                    </form>
                    <!--end::Form-->
                </div>
                <!--end::Modal body-->
            </div>
            <!--end::Modal content-->
        </div>
        <!--end::Modal dialog-->
    </div>
@endpush

@push('scripts')
<script src="https://cdn.ckeditor.com/ckeditor5/40.0.0/classic/ckeditor.js"></script>

<script>

var KTCkeditor = function () {
    // Private functions
    var demos = function () {
        ClassicEditor
            .create( document.querySelector( '#kt-ckeditor-1' ) )
            .then( editor => {
                console.log( editor );
            } )
            .catch( error => {
                console.error( error );
            } );
    }

    return {
        // public functions
        init: function() {
            demos();
        }
    };
}();

// Initialization
jQuery(document).ready(function() {
    KTCkeditor.init();

    $('#kt_modal_add_reply_form').submit(function(e) {
        e.preventDefault();
        
        if(validate()) {
            this.submit();
        }
    })

    function validate()
    {
        $(".text-danger").html('');
        var description = $("#kt-ckeditor-1").val();
        if(description === '')
        {
            $('#description_error').html('Description is required');return false;
        }
        return true;
    }
});


</script>

@endpush
@endsection