@extends('main')

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

@section('content')
<style>
    .detail-active {
        background-color: #eee;
    }
</style>
<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('jasa-pembuatan-aplikasi/project')}}">{{URL::to('jasa-pembuatan-aplikasi/project')}}</a>
        </div>
        <div class="row">
            <div class="col-12 mt-3">
                <button class="btn btn-primary float-right edit-content" act="add-new-slider">Add New Slider</button>
            </div>
            <div class="col-12">
                <div class="row row-slider">
                    @if(!empty($project->images->first()))
                    @foreach($project->images as $p)
                    <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 edit-content" act="delete-slider" slider-id="{{ $p->id }}"><i class="fas fa-trash"></i></button>
                                    <button class="btn btn-warning float-right d-block mr-2 mb-3 edit-content" act="edit-slider" slider-id="{{ $p->id }}" img="{{ $p->image }}" img-alt="{{ \app\Http\Controllers\ProjectController::checkAltMediaStatic($p->image) }}"><i class="fas fa-edit"></i></button>
                                </div>
                                <div class="col-12 text-center">
                                    <img class="d-block mx-auto mb-3" style="width: 100%;" src="{{ $p->image ? asset('media/' . $p->image) : asset('soft/images/banner/03.jpg') }}" alt="{{ \App\Http\Controllers\ProjectController::checkAltMediaStatic($p->image) }}">
                                </div>
                            </div>  
                            </div>
                        </div>
                    </div>
                    @endforeach
                    @endif
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <div class="card mt-3">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-3 col-sm-6">
                                <div class="card mt-3">
                                    <div class="card-body body-detail">
                                        <div class="row">
                                            <div class="col-12">
                                                <button class="btn btn-info float-right edit-content" act="show-detail" position="1"><i class="fas fa-eye"></i></button>
                                                <button class="btn btn-warning mr-2 float-right edit-content" act="detail-title" position="1"><i class="fas fa-edit"></i></button>
                                            </div>
                                            <div class="col-12 text-center">
                                                <span class="d-block" act="title-1">{!! $project->detail->title_1 !!}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3 col-sm-6">
                                <div class="card mt-3">
                                    <div class="card-body body-detail">
                                        <div class="row">
                                            <div class="col-12">
                                                <button class="btn btn-info float-right edit-content" act="show-detail" position="2"><i class="fas fa-eye"></i></button>
                                                <button class="btn btn-warning mr-2 float-right edit-content" act="detail-title" position="2"><i class="fas fa-edit"></i></button>
                                            </div>
                                            <div class="col-12 text-center">
                                                <span class="d-block" act="title-2">{!! $project->detail->title_2 !!}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3 col-sm-6">
                                <div class="card mt-3">
                                    <div class="card-body body-detail">
                                        <div class="row">
                                            <div class="col-12">
                                                <button class="btn btn-info float-right edit-content" act="show-detail" position="3"><i class="fas fa-eye"></i></button>
                                                <button class="btn btn-warning mr-2 float-right edit-content" act="detail-title" position="3"><i class="fas fa-edit"></i></button>
                                            </div>
                                            <div class="col-12 text-center">
                                                <span class="d-block" act="title-3">{!! $project->detail->title_3 !!}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3 col-sm-6 last-title-col">
                                <div class="card mt-3">
                                    <div class="card-body body-detail">
                                        <div class="row">
                                            <div class="col-12">
                                                <button class="btn btn-info float-right edit-content" act="show-detail" position="4"><i class="fas fa-eye"></i></button>
                                                <button class="btn btn-warning mr-2 float-right edit-content" act="detail-title" position="4"><i class="fas fa-edit"></i></button>
                                            </div>
                                            <div class="col-12 text-center">
                                                <span class="d-block" act="title-4">{!! $project->detail->title_4 !!}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </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 project_id = "{{ $project->id }}"
const url_store = "{{ route('apps.project-layout-store') }}"
const url_edit = "{{ route('apps.project-layout-edit') }}"
const url_update = "{{ route('apps.project-layout-update') }}"
const url_update_image = "{{ route('apps.project-layout-update-image') }}"
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')
        } else if(act == 'add-new-slider') {
            $('body').find('.modal-body').html(`
                <form action="${url_update_image}" method="POST" enctype="multipart/form-data">
                <input type="hidden" name="_token" value="${_token}">
                <input type="hidden" name="act" value="${act}">
                <input type="hidden" name="project_id" value="${project_id}">
                <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>
            `)

            $('.modal-data').modal('show')
        } else if(act == 'edit-slider') {
            let slider_id = $(this).attr('slider-id')
            let img = $(this).attr('img')
            editContent({ act, slider_id, img })
        } else if(act == 'delete-slider') {
            let slider_id = $(this).attr('slider-id')
            Swal.fire({
                title: 'Do you want to delete this slider image ?',
                text: "",
                type: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Ya'
            }).then((result) => {
                if (result.value) {
                    $.ajax({
                        type: "POST",
                        url: url_update,
                        data: {
                            _token,
                            slider_id,
                            act: 'delete-slider'
                        },
                        beforeSend: function() {
                            let timerInterval;
                            Swal.fire({
                                title: 'Please Wait',
                                html: 'We Deleting the Slider Image',
                                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('[act="delete-slider"][slider-id="' + slider_id + '"]').parent().parent().parent().parent().parent().remove()
                            Swal.fire({
                                position: 'center',
                                icon: 'success',
                                title: 'Slider Image Successfully Deleted',
                                showConfirmButton: false,
                                timer: 1500
                            });
                        }
                    });
                }
            });
        } else if(act == 'detail-title') {
            let position = $(this).attr('position')
            let detail_title = $('body').find('[act="title-'+position+'"]').html()

            $('body').find('.modal-body').html(`
                <div class="form-group">
                <label>Title</label>
                <input type="text" class="form-control" name="title" value="${detail_title}">
                </div>
                <button class="float-right mt-3 btn btn-primary update-content" act="${act}" position="${position}">Save</button
            `)

            $('.modal-data').modal('show')
        } else if(act == 'show-detail') {
            $('body').find('.body-detail').removeClass('detail-active')
            $(this).parent().parent().parent().addClass('detail-active')
            let position = $(this).attr('position')

            editContent({ act, _token, position, project_id })
        } else if(act == 'detail-image') {
            let position = $(this).attr('position')
            let img = $(this).attr('img')
            editContent({ act, _token, position, img, project_id })
        } else if(act == 'detail-show-title') {
            let position = $(this).attr('position')
            let big_title = $(this).parent().parent().find('[act="detail-big-title"]').html()
            let small_title = $(this).parent().parent().find('[act="detail-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}" position="${position}">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')
        } else if(act == 'detail-point') {
            let position = $(this).attr('position')
            let modal_body = `<div class="form-group"><button class="btn btn-info btn-tambah-point">Tambah</button></div>`

            $('body').find('.detail-point-list').each(function(e) {
                modal_body += `
                <div class="input-group mb-3">
                    <input type="text" class="form-control" value="${$(this).html()}" name="detail-point">
                    <div class="input-group-append">
                        <button class="btn btn-outline-secondary delete-detail-point" type="button" id="button-addon2">Delete</button>
                    </div>
                </div>
                `
            })

            modal_body += `<button class="float-right mt-3 btn btn-primary update-content" act="${act}" position="${position}">Save</button`
            $('body').find('.modal-body').html(modal_body)
            $('.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 })
        } else if(act == 'edit-alt-slider') {
            let slider_id = $(this).attr('slider-id')
            let image_alt = $(this).parent().find('[name="img_alt"]').val()
            updateContent({ act, _token ,slider_id, image_alt })
        } else if(act == 'choose-from-media-slider') {
            let image = $(this).attr('image')
            let slider_id = $(this).attr('slider-id')
            updateContent({ act, _token, image, slider_id })
        } else if(act == 'detail-title') {
            let position = $(this).attr('position')
            let title = $(this).parent().find('[name="title"]').val()

            updateContent({ act, _token, position, title, project_id })
        } else if(act == 'edit-alt-detail-image') {
            let position = $(this).attr('position')
            let img_alt = $(this).parent().find('[name="img_alt"]').val()
            updateContent({ act, _token, position, img_alt, project_id })
        } else if(act == 'choose-from-media-detail-image') {
            let img = $(this).attr('image')
            let position = $(this).attr('position')
            updateContent({ act, _token, img, position, project_id })
        } else if(act == 'detail-show-title') {
            let position = $(this).attr('position')
            let big_title = $(this).parent().find('[name="big_title"]').summernote("code")
            let small_title = $(this).parent().find('[name="small_title"]').summernote("code")
            updateContent({ act, _token, position, big_title, small_title, project_id })
        } else if(act == 'detail-point') {
            let position = $(this).attr('position')
            let points = []
            $('body').find('[name="detail-point"]').each(function(e) {
                if($(this).val()) {
                    points.push($(this).val())
                }
            })
            updateContent({ _token, act, points, position, project_id })
        }
    })

    $('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
                        });
                    }
                });
            }
        });
    })

    $('body').on('click', '.btn-tambah-point', function() {
        $(`
        <div class="input-group mb-3">
            <input type="text" class="form-control" name="section-2-point">
            <div class="input-group-append">
                <button class="btn btn-outline-secondary delete-section-2-point" type="button" id="button-addon2">Delete</button>
            </div>
        </div>
        `).insertBefore('.update-content')
    })

    $('body').on('click', '.delete-detail-point', function() {
        $(this).parent().parent().remove()
    })
})

function editContent(data) {
    $.ajax({
        type: 'get',
        url: url_edit,
        data,
        success(response) {
            if(data.act == 'edit-slider' || data.act == 'detail-image') {
                $('body').find('.modal-body').html(response)
                $('body').find('.modal-data').modal('show')
            }  else if(data.act == 'show-detail') {
                $('body').find('.col-show-detail').remove()
                $(response).insertAfter('.last-title-col')
            }

        }

    })
}

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)
            } else if(data.act == 'choose-from-media-slider') {
                $('body').find('[act="edit-slider"][slider-id="'+data.slider_id+'"]').parent().parent().find('img').attr('src', url_media + '/' + data.image)
            } else if(data.act == 'detail-title') {
                $('body').find('[act="detail-title"][position="'+data.position+'"]').parent().parent().find('[act="title-'+data.position+'"]').html(data.title)
            } else if(data.act == 'choose-from-media-detail-image') {
                $('body').find('[act="detail-image"][position="'+data.position+'"]').parent().find('img').attr('src', url_media + '/' + data.img)
            } else if(data.act == 'detail-show-title') {
                $('body').find('[act="detail-show-title"][position="'+data.position+'"]').parent().parent().find('[act="detail-big-title"]').html(data.big_title)
                $('body').find('[act="detail-show-title"][position="'+data.position+'"]').parent().parent().find('[act="detail-small-title"]').html(data.small_title)
            } else if(data.act == 'detail-point') {
                let new_points = ''

                for(let i = 0; i <= data.points.length - 1; i++) {
                    new_points += `
                    <dd class="col-sm-6 detail-point-list">${data.points[i]}</dd>
                    `
                }

                $('body').find('.detail-point').html(new_points)
            }

            $('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