@extends('main')

@section('css')
<link rel="stylesheet" href="{{ asset('plugins/summernote/summernote-bs4.css') }}">
@endsection

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

    <!-- Main content -->
    <section class="content">
        @if(session('message'))
        <div class="row">
            <div class="col-12 mt-3">
                <div class="alert alert-success mt-3" role="alert">
                    {{ session('message') }}
                </div>
            </div>
        </div>
        @endif
        <div>
            Permalink : <a href="{{URL::to('manajemen-aset')}}">{{URL::to('manajemen-aset')}}</a>
        </div>
      <div class="row">
        <div class="col-12">
            <div class="card mt-3">
                <div class="card-body">
                    <div class="row">
                      <div class="col-12">
                          <button class="btn btn-warning float-right mb-3 d-block edit-content" act="title"><i class="fas fa-edit"></i></button>
                      </div>
                      <div class="col-12 text-center">
                          <span class="d-block" act="big-title">{!! $content->section_feature_big_title !!}</span><br>
                          <span class="d-block" act="small-title">{!! $content->section_feature_small_title !!}</span><br>
                      </div>
                    </div>
                </div>
            </div>
        </div>
          <div class="col-12 mt-3">
              <button class="btn btn-primary btn-add-new-feature float-right">Add New Feature</button>
          </div>
          <div class="col-12">
              <div class="row">
                  @if(!empty($features))
                  @foreach($features as $f)
                  <div class="col-md-4 col-sm-6">
                      <div class="card mt-3">
                          <div class="card-body">
                            <div class="row">
                                <div class="col-12">
                                    <button class="btn btn-danger float-right d-block mb-3 btn-delete" feature-id="{{ $f->id }}"><i class="fas fa-trash"></i></button>
                                    <button class="btn btn-info float-right d-block mr-2 mb-3 edit-content" act="edit-image-feature" feature-id="{{ $f->id }}" img="{{ $f->image }}" img-alt="{{ \app\Http\Controllers\AsetFeatureController::checkAltMediaStatic($f->image) }}"><i class="fas fa-image"></i></button>
                                    <button class="btn btn-warning float-right mb-3 mr-2 d-block edit-content" act="edit-content-feature" feature-id="{{ $f->id }}"><i class="fas fa-edit"></i></button>
                                </div>
                                <div class="col-12 text-center">
                                    <img class="d-block mx-auto mb-3" style="width: 100px; height:100px;" src="{{ $f->image ? asset('media/' . $f->image) : asset('soft/images/feature/06.png') }}" alt="{{ \App\Http\Controllers\AsetFeatureController::checkAltMediaStatic($f->image) }}">
                                    <span class="d-block feature-title">{!! $f->title !!}</span><br>
                                    <span class="d-block feature-description">{!! $f->description !!}</span><br>
                                </div>
                            </div>  
                          </div>
                      </div>
                  </div>
                  @endforeach
                  @endif
              </div>
          </div>
      </div>
      <!-- /.row -->
    </section>
    <!-- /.content -->
</div>
  <!-- Modal -->
  <div class="modal fade modal-data" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          
        </div>
      </div>
    </div>
  </div>
@endsection

@section('js')
<script src="{{ asset('plugins/summernote/summernote-bs4.min.js') }}"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>
<script>
const _token =  "{{ csrf_token()}}"
const url_store = "{{ route('layout.aset-feature-store') }}"
const url_edit = "{{ route('layout.aset-feature-edit') }}"
const url_update = "{{ route('layout.aset-feature-update') }}"
const url_media = "{{ asset('media') }}"

$(document).ready(function() {
    $('.summernote-create').summernote({
        height: "80px",
        toolbar: [
            ['style', ['style']],
            ['font', ['bold', 'underline']],
            ['fontname', ['fontname']],
            ['fontsize', ['fontsize']],
            ['color', ['color']],
            ['para', ['ul', 'ol','paragraph']],
            ['insert', ['link']],
            ['view', ['codeview']],
        ],
    })

    $('body').on('click', '.btn-add-new-feature', function() {
        $('body').find('.modal-body').html(`
            <form action="${url_store}" method="POST" enctype="multipart/form-data">
            <input type="hidden" name="_token" value="${_token}">
            <div class="form-group">
            <label>Title</label>
            <textarea class="form-control summernote-editor" name="title"></textarea>
            </div>
            <div class="form-group">
            <label>Description</label>
            <textarea class="form-control summernote-editor" name="description"></textarea>
            </div>
            <div class="form-group">
                <label>Image</label>
                <input type="file" class="form-control" name="image" accept="image/*">
            </div>
            <div class="form-group">
                <label>ALT Image</label>
                <input type="text" class="form-control" name="alt">
            </div>
            <button type="submit" name="save" value="save-as-webp" class="float-right mt-3 btn btn-success">Add & Save as Webp</button>
            <button type="submit" name="save" value="save-as" class="float-right mt-3 mr-2 btn btn-primary">Add</button>
            </form>
        `)
        setSummernote('80px')

        $('.modal-data').modal('show')
    })

    $('body').on('click', '.edit-content' ,function() {
        let act = $(this).attr('act')

        if(act == 'edit-content-feature') {
            let feature_id = $(this).attr('feature-id')
            let title = $('body').find('.edit-content[feature-id="' + feature_id + '"]').parent().parent().find('.feature-title').html()
            let description = $('body').find('.edit-content[feature-id="' + feature_id + '"]').parent().parent().find('.feature-description').html()

            $('body').find('.modal-body').html(`
                <div class="form-group">
                <label>Title</label>
                <textarea class="form-control summernote-editor" name="title"></textarea>
                </div>
                <div class="form-group">
                <label>Description</label>
                <textarea class="form-control summernote-editor" name="description"></textarea>
                </div>
                <button type="button" class="float-right mt-3 btn btn-primary update-content" act="${act}" feature-id="${feature_id}">Save</button>
            `)
            setSummernote('80px')
            $('body').find('[name="title"]').summernote("code", title)
            $('body').find('[name="description"]').summernote("code", description)

            $('.modal-data').modal('show')
        } else if(act == 'edit-image-feature') {
            let feature_id = $(this).attr('feature-id')
            editContent({ act, feature_id })
        } else if(act == 'title') {
            let big_title = $(this).parent().parent().find('[act="big-title"]').html()
            let small_title = $(this).parent().parent().find('[act="small-title"]').html()

            $('body').find('.modal-body').html(`
                <div class="form-group">
                <label>Big Title</label>
                <input type="text" class="form-control summernote-editor" name="big_title">
                </div>
                <div class="form-group">
                <label>Small Title</label>
                <input type="text" class="form-control summernote-editor" name="small_title">
                </div>
                <button class="float-right mt-3 btn btn-primary update-content" act="${act}">Save</button
            `)
            setSummernote('80px')
            $('body').find('[name="big_title"]').summernote("code", big_title)
            $('body').find('[name="small_title"]').summernote("code", small_title)

            $('.modal-data').modal('show')
        }
    })

    $('body').on('click', '.update-content', function() {

        let act = $(this).attr('act')

        if(act == 'edit-content-feature') {
            let feature_id = $(this).attr('feature-id')
            let title = $(this).parent().find('[name="title"]').summernote("code")
            let description = $(this).parent().find('[name="description"]').summernote("code")
            updateContent({ _token, act, feature_id, title, description })
        } else if(act == 'edit-alt-feature') {
            let feature_id = $(this).attr('feature-id')
            let alt = $(this).parent().find('[name="img_alt"]').val()
            updateContent({ _token, act, feature_id, alt })
        } else if(act == 'choose-from-media-feature') {
            let feature_id = $(this).attr('feature-id');
            let image = $(this).attr('image')
            updateContent({ _token, act, feature_id, image })
        } else if(act == 'title') {
            let big_title = $(this).parent().find('[name="big_title"]').summernote("code")
            let small_title = $(this).parent().find('[name="small_title"]').summernote("code")
            updateContent({ _token, act, big_title, small_title })
        }
    })

    $('body').on('click', '.btn-delete', function() {
        let feature_id = $(this).attr('feature-id')
        Swal.fire({
            title: 'Do you want to delete this feature ?',
            text: "",
            type: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Ya'
        }).then((result) => {
            if (result.value) {
                $.ajax({
                    type: "POST",
                    url: url_update,
                    data: {
                        _token,
                        feature_id,
                        act: 'delete-feature'
                    },
                    beforeSend: function() {
                        let timerInterval;
                        Swal.fire({
                            title: 'Please Wait',
                            html: 'We Deleting the Feature',
                            timerProgressBar: true,
                            onBeforeOpen: () => {
                                Swal.showLoading()
                            },
                            onClose: () => {
                                clearInterval(timerInterval)
                            }
                            }).then((result) => {
                            if (
                                /* Read more about handling dismissals below */
                                result.dismiss === Swal.DismissReason.timer
                            ) {
                                console.log('I was closed by the timer') // eslint-disable-line
                            }
                            })
                    },
                    success: function(response) {
                        $('body').find('.btn-delete[feature-id="' + feature_id + '"]').parent().parent().parent().parent().parent().remove()
                        Swal.fire({
                            position: 'center',
                            icon: 'success',
                            title: 'Feature Successfully Deleted',
                            showConfirmButton: false,
                            timer: 1500
                        });
                    }
                });
            }
        });
    })
})

function editContent(data) {
    $.ajax({
        type: 'get',
        url: url_edit,
        data,
        success(response) {
            if(data.act == 'edit-image-feature') {
                $('body').find('.modal-body').html(response)
            } 

            $('body').find('.modal-data').modal('show')
        }

    })
}

function updateContent(data) {
    $.ajax({
        type: 'post',
        url: url_update,
        data,
        success(response) {

            if(data.act == 'edit-content-feature') {
                $('body').find('.edit-content[feature-id="' + data.feature_id + '"]').parent().parent().find('.feature-title').html(data.title)
                $('body').find('.edit-content[feature-id="' + data.feature_id + '"]').parent().parent().find('.feature-description').html(data.description)
            } else if(data.act == 'edit-alt-feature') {
                $('body').find('.edit-content[feature-id="' + data.feature_id + '"]').parent().parent().find('img').attr('alt', data.alt)
            } else if(data.act == 'choose-from-media-feature') {
                $('body').find('.edit-content[feature-id="' + data.feature_id + '"]').parent().parent().find('img').attr('src', url_media + '/' + data.image)
            } else if(data.act == 'title') {
                $('body').find('.edit-content[act="title"]').parent().parent().find('[act="big-title"]').html(data.big_title)
                $('body').find('.edit-content[act="title"]').parent().parent().find('[act="small-title"]').html(data.small_title)
            }

            $('body').find('.modal-data').modal('hide')
        }
    })
}

function setSummernote(height) {
  $('.summernote-editor').summernote({
    height: height,
    toolbar: [
        ['style', ['style']],
        ['font', ['bold', 'underline']],
        ['fontname', ['fontname']],
        ['fontsize', ['fontsize']],
        ['color', ['color']],
        ['para', ['ul', 'ol','paragraph']],
        ['insert', ['link']],
        ['view', ['codeview']],
    ],
  })
}

</script>
@endsection