@extends('layouts.app')

@section('content')
<div class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-8">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title"><strong>Tambah Servis</strong></h3>
                    </div>
                    <div class="card-body">
                        <form role="form" method="POST" enctype="multipart/form-data" action="{{ route('services.create') }}">
                            <div class="card-body">
                                <div class="form-group">
                                    <label for="exampleInputEmail1">Judul</label>
                                    <input type="text" class="form-control" name="title" id="exampleInputEmail1">
                                </div>
                                <div class="form-group">
                                    <label for="exampleInputEmail2">Deskripsi</label>
                                    <textarea name="description" class="textarea" placeholder="Place some text here" style="width: 100%; height: 200px; font-size: 14px; line-height: 18px; border: 1px solid #dddddd; padding: 10px;"></textarea>
                                </div>
                            </div>
                            <div class="card-body">
                                <div class="form-group">
                                    <label for="exampleInputEmail1">Judul Inggris</label>
                                    <input type="text" class="form-control" name="title2" id="exampleInputEmail1">
                                </div>
                                <div class="form-group">
                                    <label for="exampleInputEmail2">Deskripsi Inggris</label>
                                    <textarea name="description2" class="textarea" placeholder="Place some text here" style="width: 100%; height: 200px; font-size: 14px; line-height: 18px; border: 1px solid #dddddd; padding: 10px;"></textarea>
                                </div>
                            </div>
                            <div class="card-footer">
                                @csrf
                                <button type="submit" class="btn btn-primary">Simpan</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('custom_style')
<link rel="stylesheet" href="{{ asset('storage/assets/plugins/summernote/summernote-bs4.css') }}">
@endpush

@push('customer_script')
<script src="{{ asset('storage/assets/plugins/summernote/summernote-bs4.min.js') }}"></script>
<script>
    $(document).ready(() => {
        $('.textarea').summernote({
            height: 240
        });

        $('[data-handle="uploader"]').click(function () {
            var _this = $(this),
                targetInput = $(_this.data('target'));
            targetInput.change(function () {
                if (this.files && this.files[0]) {
                    handleChange(_this, this.files[0]);
                }
            });

            targetInput.click();
        });

        function handleChange(el, file) {
            var fr = new FileReader();
            fr.readAsDataURL(file);
            fr.onload = function (e) {
                el.parent().parent().parent().find('.card-body')
                    .css({
                        "background-image": "url(\"" + e.target.result + "\")"
                    });
            }

        }
    });
</script>
@endpush