@extends('admin.layouts.main')

@section('content')
<div class="page-wrapper">

    <div class="container-fluid">

        <div class="row page-titles">
            <div class="col-md-5 align-self-center">
                <h4 class="text-themecolor font-bold">{{ @$data ? 'Edit' : 'Add' }} Content</h4>    
            </div>
            <div class="col-md-7 align-self-center text-right">
                <div class="d-flex justify-content-end align-items-center">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ url('/manager/dashboard') }}">Home</a></li>
                        <li class="breadcrumb-item active">
                            <a href="{{ url('/manager/contents') }}" class="text-danger">Content</a>
                        </li>
                    </ol>
                </div>
            </div>
        </div>

        @include('admin.includes.alert')
        <div class="card">
            <div class="card-body">

                <form action="{{ @$data ? url('/manager/contents/' . $data['id']  ) : url('/manager/contents') }}" method="post" enctype="multipart/form-data" data-parsley-validate>
                    @csrf

                    @if( @$data )
                    @method('PATCH')
                    @endif

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="control-label">Content Title<span class="text-danger">*</span></label>
                            <input type="text" data-parsley-required-message="The title field is required" name="title" value="{{ old('title', @$data->title) }}" class="form-control {{ $errors->has('title') ? 'is-invalid' : '' }}" autocomplete="off" placeholder="Enter title" disabled>
                            @if ($errors->has('title'))
                            <span class="text-danger">{{ $errors->first('title') }}</span>
                            @endif
                        </div>

                        <div class="col-md-6 mb-3">
                            <label class="control-label">Content Image<span class="text-danger">*</span></label>
                            <div>
                                <label for="content-image" style="cursor: pointer;">
                                    <img id="previewImg" src="{{ @$data->image_url != '' ? @$data->image_url : url('assets/images/upload.jpg') }}" alt="logo" class="mb-3" id="showUpload" style="width: 150px;height: 150px">
                                </label>
                            </div>
                            <input type="file" name="image" data-parsley-required-message="The image field is required" class="form-control upload-image" id="content-image" style="display: none;" {{ @$data->image_url == null ? 'required' : '' }}>
                            @if ($errors->has('image'))
                            <span class="text-danger">{{ $errors->first('image') }}</span>
                            @endif
                        </div>

                        <div class="col-md-12 mb-3">
                            <label class="control-label">Content Description<span class="text-danger">*</span></label>
                            <textarea class="form-control" id="ckeditor" name="description" data-parsley-required-message="The description field is required" data-parsley-errors-container="#description-errors" rows="6" placeholder="Enter description" required>{!! old('description', @$data['description']) !!}</textarea>
                            <div id="description-errors"></div>
                            @if ($errors->has('description'))
                            <span class="text-danger">{{ $errors->first('description') }}</span>
                            @endif
                        </div>

                    </div>

                    <button class="btn btn-primary" type="submit">Save</button>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@push('script')
<script>
    $(document).ready(function() {
        CKEDITOR.replace('ckeditor');
        CKEDITOR.config = {
            autoUpdateElement: true,
        }

        CKEDITOR.on('instanceReady', function() {
            $('#ckeditor').attr('required', '');
            $.each(CKEDITOR.instances, function(instance) {
                CKEDITOR.instances[instance].on("change", function(e) {
                    for (instance in CKEDITOR.instances) {
                        CKEDITOR.instances[instance].updateElement();
                        $('form').parsley().validate();
                    }
                });
            });
        });
    });

    $(".upload-image").change(function() {
        var inputFile = $(this).parent().children('div').children('label').children('img')
        var reader = new FileReader();
        reader.onload = function(e) {
            inputFile.attr('src', e.target.result);
        };
        reader.readAsDataURL(this.files[0]);
        console.log(this.files[0])
    });

    function previewFile(input) {
        var file = $("input[type=file]").get(0).files[0];
        if (file) {
            var reader = new FileReader();
            reader.onload = function() {
                $("#previewImg").attr("src", reader.result);
            }
            reader.readAsDataURL(file);
        }
    }
</script>
@endpush