@extends('admin.layout')
@section('content')
<script src="{{ url('./Panel/adminAssets/jquery-3.2.1.min.js') }}"></script>
<script>
    $(document).ready(function() {
        $('.manue-active ul').removeClass('mm-show').find('a').removeClass('mm-active');
        $('#Comments ul').addClass('mm-show').find('#CommentsCreat').addClass('mm-active');
    });

</script>


<style>
    .fa-cloud-upload-alt{
        font-size: 2em;
        color: #FB4D30
    }
    .upload-btn-wrapper {
        position: relative;
        overflow: hidden;
        display: inline-block;
    }

    .btn {
        border: 2px solid gray;
        color: gray;
        background-color: white;
        padding: 8px 20px;
        border-radius: 8px;
        font-size: 20px;
        font-weight: bold;
    }

    .upload-btn-wrapper input[type=file] {
        font-size: 100px;
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
    }

    .btn-default {
        background: #ffffff !important;
        color: #4b5359 !important;
        border: 1px solid #a2a2a2 !important;
        font-size: 1.1em !important;
    }

    .btn-default:hover {
        background: #002a53 !important;
        color: #ffffff !important;

    }

    a.chosen-single {
        height: 34px !important;
        line-height: 2.5 !important;
    }

    .inner-con {
        padding: 2em;
        border: 2px solid #f2a365;
        position: relative;
    }

    .btn-rounded {
        width: 100px;
    }

    .btn-secondary {
        background-color: #fff !important;
        border-color: #6c757d00 !important;
        color: #15AEB4;
        font-size: 3em;
        text-align: center;
    }

    .btn-secondary:hover {
        color: #15AEB4;
    }


    .bootstrap-filestyle {
        border-radius: 30%;

    }

    .bootstrap-filestyle span {
        width: 100%;
    }

</style>

    <div class="parts form">
        <div class="main-card mb-3 card">
            <div class="card-body">
                <h5 class="card-title">{{ __('comment.add_comment') }}</h5>
                @if (count($errors) > 0)
                    <div class="alert alert-danger">
                        <ul>
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif
                {!! Form::open(['method' => 'post', 'action' => 'Admin\CommentsController@store', 'files' => true]) !!}
                <div class="container">
                    <div class="form-group">
                        <label for="name">{{ __('comment.photo') }}</label>
                        <div>
                            <img id="photo_1" src="#" alt="your image" width="100" /><br />
                            {!! Form::file('photo', null, ['class' => 'form-control', 'placeholder' => 'photo', 'id' =>
                            'input03']) !!}
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="name">{{ __('comment.person_name') }}
                        </label>
                        <div>
                            {!! Form::text('name', null, ['class' => 'form-control', 'placeholder' =>
                            __('comment.person_name')]) !!}
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="name">{{ __('comment.position') }}
                        </label>
                        <div>
                            {!! Form::text('position', null, ['class' => 'form-control', 'placeholder' =>
                            __('comment.position')]) !!}
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="name">{{ __('comment.comment') }}
                        </label>
                        <div>
                            {!! Form::textarea('comment', null, ['class' => 'form-control', 'placeholder' =>
                            __('comment.comment')]) !!}
                        </div>
                    </div>


                </div>

                <div class="col-sm-12 offset-sm-2">
                    {!! Form::submit(__('General.Save'), ['class' => 'btn btn-primary form-control']) !!}
                </div>

                {!! Form::Close() !!}


            </div>


       
        
        <script>
            $(document).ready(function() {
                $('#photo_1').hide();
                $('input[type=file]').change(function() {
                    readURL(this)
                });

                function readURL(input) {
                    if (input.files && input.files[0]) {
                        var reader = new FileReader();

                        reader.onload = function(e) {
                            $('#' + input.name + '_1').attr('src', e.target.result);
                            $('#' + input.name + '_1').show();
                        }

                        reader.readAsDataURL(input.files[0]);
                    }
                }
                $('input[type=file]').filestyle({
                    badge: true,
                    input: false,
                    text: '',
                    htmlIcon: '<i class="fas fa-cloud-upload-alt"></i>'
                });
                $('input[type=file] span').text('');

    
            });

        </script>
 @endsection