@extends('admin')

@push('after-style')
<link rel="stylesheet" href="{{ asset('adminn/plugins/summernote/summernote-bs4.css') }}">

@endpush

@push('header')
<div class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1 class="m-0 text-dark">About Us</h1>
            </div><!-- /.col -->
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="#">Home</a></li>
                    <li class="breadcrumb-item active">About Us</li>
                </ol>
            </div><!-- /.col -->
        </div><!-- /.row -->
    </div><!-- /.container-fluid -->
</div>
@endpush

@section('content')
<!-- Small boxes (Stat box) -->
<div class="row">
    <div class="col-lg-12 col-12 col-md-12">
        <div class="card">
            <div class="card-header">
                <!-- <h3 class="card-title">DataTable with default features</h3> -->
                <!-- <button class="btn-sm btn btn-primary" onclick="add();">tambah</button> -->
            </div>
            <!-- /.card-header -->
            <form id="form">
                <div class="card-body">
                    <div class="form-group">
                        <label for="about_us_image">Image</label>
                        <br>
                        <img src="{{ asset('assets/images/about-us/'.$about_us->about_us_image) }}" alt="">
                        <br>
                        <br>
                        <input type="file" name="about_us_image" id="about_us_image" class="form-control">
                    </div>
                    <div class="form-group">
                        <label for="about_us_content">Content</label>
                        <textarea class="textarea" name="about_us_content" id="about_us_content" placeholder="Place some text here" style="width: 100%; height: 1000px; font-size: 14px; line-height: 18px; border: 1px solid #dddddd; padding: 10px;">
                        {{ $about_us->about_us_content }}
                        </textarea>
                    </div>
                </div>
                <div class="modal-footer" style="justify-content: unset;">
                    <button type="button" id="btnSave" onclick="save();" class="btn btn-primary waves-effect waves-light">Simpan</button>
                    <button type="reset" class="btn btn-secondary waves-effect">Hapus</button>
                </div>
            </form>
            <!-- /.card-body -->
        </div>
    </div>
</div>


@endsection

@push('after-script')
<!-- Summernote -->
<script src="{{ asset('adminn/plugins/summernote/summernote-bs4.min.js') }}"></script>
<script>
    $(document).ready(function() {
        $('#about_us_content').summernote({
            height: "600",
            callbacks: {
                onImageUpload: function(image) {
                    console.log('1');
                    uploadImage(image[0]);
                },
                onMediaDelete: function(target) {
                    console.log('2');
                    deleteImage(target[0].src);
                }
            }
        });

        function uploadImage(image) {
            console.log('upload image');
            var data = new FormData();
            data.append("image", image);
            $.ajax({
                url: "{{ url('/admin/about-us/upload-image') }}",
                cache: false,
                contentType: false,
                processData: false,
                data: data,
                type: "POST",
                success: function(url) {
                    $('#about_us_content').summernote("insertImage", url.message);
                },
                error: function(data) {
                    console.log(data);
                }
            });
        }

        function deleteImage(image) {
            console.log('delete image');
            $.ajax({
                data: {
                    image: image
                },
                type: "POST",
                url: "{{ url('/admin/about-us/delete-image') }}",
                cache: false,
                success: function(response) {
                    console.log(response);
                }
            });
        }

    });

    function save() {
        $('.text-error').empty(); // clear error string
        $('#btnSave').text('Menyimpan...'); //change button text
        $('#btnSave').attr('disabled', true); //set button disable 

        var formData = new FormData($('#form')[0]);
        formData.append("_token", "{{ csrf_token() }}");

        $.ajax({
            url: "{{ url('/admin/about-us/update') }}",
            type: "POST",
            data: formData,
            dataType: "JSON",
            processData: false,
            contentType: false,
            success: function(data) {
                console.log(data);
                if (data.status) //if success close modal and reload ajax table
                {
                    var text = '';
                    text = 'Data Updated Successfully';

                    toastr.success(text);
                    // notification('success', 'Success', text);
                    // $('#modal_form').modal('hide');
                    // reload_table();
                    location.reload();
                } else {
                    for (const [key, value] of Object.entries(data.message)) {
                        $('#' + key + '_error').html('*' + value);
                    }
                }
                $('#btnSave').text('Simpan');
                $('#btnSave').attr('disabled', false); //set button enable 
            },
            error: function(jqXHR, textStatus, errorThrown) {
                alert('Error adding / update data');
                console.log(jqXHR);
                console.log(textStatus);
                console.log(errorThrown);
                // $('#btnSave').attr('disabled', false); //set button enable 
            }
        });
    }
</script>
@endpush