@extends('master')
@section('title', 'Edit BKK')
@push('script')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.20/summernote-bs5.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.css" />


    <style>
        .input-container {
            display: flex;
            align-items: center;
        }

        .input-container input {
            width: 100%;
            padding: 10px;
            margin-right: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        .input-container button {
            padding: 10px 20px;
            background-color: #5e615e;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        .input-container button:hover {
            background-color: #313631;
        }
    </style>
@endpush
@section('content')

    <div class="col-md-12 mb-4">
        <div class="row">
            <div class="col-md-9">
                <div class="card">
                    <form id="form" method="post" enctype="multipart/form-data">
                        <div class="card-body">
                            <div class="form-group">
                                <label>Title</label>
                                @csrf
                                <input type="text" class="form-control" value="{{ $edit->id_news }}" name="id_news"
                                    id="id_news" hidden>
                                <input type="text" class="form-control" value="{{ $edit->title }}" name="title">
                            </div>
                            <div class="form-group">
                                <label>Content</label>
                                <textarea class="form-control" rows="5" id="body" name="body">{{ $edit->body }}</textarea>
                            </div>

                        </div>
                </div>
            </div>


            <div class="col-md-3">
                <div class="card">
                    <div class="card-body">
                        <div class="form-group mt-3">
                            <label>Menu Action</label>
                            <a class="btn btn-sm btn-secondary btn-block save_draft" style="color:white;">Draft</a>
                            <a class="btn btn-sm btn-secondary btn-block preview" style="color:white;">Preview</a>
                            <a class="btn btn-sm btn-secondary btn-block publish" style="color:white;">Publish</a>
                        </div>

                        <hr>

                        <div class="form-group mt-3">
                            <label>Author</label>
                            <select class="form-control" name="author">
                                <option value="" disabled selected hidden>Select Author</option>
                                <option value="Admin" {{ isset($edit) && $edit->author == 'Admin' ? 'selected' : '' }}>
                                    Admin</option>
                                <option value="{{ Auth::user()->name }}"
                                    {{ isset($edit) && $edit->author == Auth::user()->name ? 'selected' : '' }}>
                                    {{ Auth::user()->name }}</option>
                            </select>
                        </div>
                        <hr>

                        <div class="form-group mt-3">
                            <label>Tag Lembaga</label>
                            <select class="form-control" name="tag">
                                <option value="" disabled selected hidden>Select Tag</option>
                                <option value="1" {{ isset($edit) && $edit->tag == '1' ? 'selected' : '' }}>SMA
                                </option>
                                <option value="2" {{ isset($edit) && $edit->tag == '2' ? 'selected' : '' }}>SMK
                                </option>
                                <option value="3" {{ isset($edit) && $edit->tag == '3' ? 'selected' : '' }}>
                                    SMA-SMK</option>
                            </select>
                        </div>
                        <hr>
                        </form>

                        <form id="uploadheader" enctype="multipart/form-data">
                            <div class="form-group mt-3">
                                <label>Image Header</label>
                                <input type="file" class="form-control image-header" name="image" id="header">
                            </div>
                        </form>

                        <div class="image-view"></div>

                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modal-waiting" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-body text-center font-18">
                    <div class="mb-30 text-center">
                        <img src="{{ asset('waiting.png') }}" width="100" height="100" />
                    </div>
                    Your content is in the publish approval queue

                </div>
                <div class="modal-footer justify-content-center">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">
                        Oke
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modal-publish" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-body text-center font-18">
                    <div class="mb-30 text-center">
                        <img src="{{ asset('happy.png') }}" width="100" height="100" />
                    </div>
                    Congratulations, your content has been published, here is the link
                    <div class="input-container">
                        <input type="text" id="linkInput">
                        <button onclick="copyLink()">Copy</button>
                    </div>
                    <p id="copyMessage" style="color:green;"></p>

                </div>

            </div>
        </div>
    </div>



@endsection

@push('javascript')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.js"></script>

    <script>
        function copyLink() {
            // Dapatkan elemen input
            var copyText = document.getElementById("linkInput");

            // Pilih teks di dalam input
            copyText.select();
            copyText.setSelectionRange(0, 99999); // Untuk perangkat mobile

            // Salin teks ke clipboard
            document.execCommand("copy");

            // Tampilkan pesan bahwa teks telah disalin
            var message = document.getElementById("copyMessage");
            message.textContent = "link successfully copied!";
        }
    </script>

    <script>
        $(document).ready(function() {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            viewHeader();

            $('#body').summernote({
                height: 500,
                toolbar: [
                    ['style', ['style', 'italic']],
                    ['font', ['bold', 'underline', 'clear']],
                    ['fontname', ['fontname']],
                    ['fontsize', ['fontsize']],
                    ['height', ['height']],
                    ['color', ['color']],
                    ['para', ['ul', 'ol', 'paragraph']],
                    ['table', ['table']],
                    ['insert', ['link', 'picture']],
                    ['view', ['fullscreen', 'codeview', 'help']],
                ],
                callbacks: {
                    onImageUpload: function(files) {
                        uploadImage(files[0]);
                    }
                },

            });

            $('body').on('click', '.save_draft', function() {
                $('.save_draft').removeClass('btn-primary').addClass('btn-primary disabled').text(
                    'Loading....');
                var form = new FormData($('#form')[0]);
                form.append('save_name', '0');

                var id = $('#id_news').val();
                $.ajax({
                    url: '{{ url('panel/updatebkk') }}/' + id,
                    enctype: 'multipart/form-data',
                    type: 'post',
                    processData: false,
                    contentType: false,
                    cache: false,
                    data: form,
                    success: function(result) {
                        $('.save_draft').removeClass('btn-primary disabled ').addClass(
                                'btn-primary')
                            .text('Save Draft');
                        if (result.status == 'success') {

                            Swal.fire({
                                title: "Info !!",
                                text: result.message,
                                icon: "success"
                            }).then(function() {

                            });

                        } else {
                            $.each(result.message, function(prefix, val) {
                                toastr.error(val);
                            });
                        }
                    }
                })
            });

            $('body').on('click', '.preview', function() {
                $('.preview').removeClass('btn-primary').addClass('btn-primary disabled').text(
                    'Loading....');
                var form = new FormData($('#form')[0]);
                form.append('save_name', '0');

                var id = $('#id_news').val();
                $.ajax({
                    url: '{{ url('panel/updatebkk') }}/' + id,
                    enctype: 'multipart/form-data',
                    type: 'post',
                    processData: false,
                    contentType: false,
                    cache: false,
                    data: form,
                    success: function(result) {
                        $('.preview').removeClass('btn-primary disabled ').addClass(
                                'btn-primary')
                            .text('Preview');
                        if (result.status == 'success') {
                            var url = '{{ url('bkk/preview') }}/' + result.slug;
                            window.open(url, '_blank');

                        } else {
                            $.each(result.message, function(prefix, val) {
                                toastr.error(val);
                            });
                        }
                    }
                })
            });

            $('body').on('click', '.publish', function() {
                $('.publish').removeClass('btn-primary').addClass('btn-primary disabled').text(
                    'Loading....');
                var form = new FormData($('#form')[0]);
                form.append('save_name', '1');

                var id = $('#id_news').val();
                $.ajax({
                    url: '{{ url('panel/updatebkk') }}/' + id,
                    enctype: 'multipart/form-data',
                    type: 'post',
                    processData: false,
                    contentType: false,
                    cache: false,
                    data: form,
                    success: function(result) {
                        $('.publish').removeClass('btn-primary disabled ').addClass(
                                'btn-primary')
                            .text('Publish');
                        if (result.status == 'success') {

                            if (result.save_name == '2') {
                                $('#modal-waiting').modal('show');
                            } else if (result.save_name == '1') {
                                $('#modal-publish').modal('show');
                                $('#linkInput').val('{{ url('bkk') }}/' + result.slug);
                            }
                        } else {
                            $.each(result.message, function(prefix, val) {
                                toastr.error(val);
                            });
                        }
                    }
                })
            });

            $('#header').change(function() {
                var id = $('#id_news').val();
                toastr.warning('Waiting process upload');

                var formdata = new FormData($('#uploadheader')[0]);
                formdata.append('id_news', id);

                $.ajax({
                    url: '{{ route('bkk.upload-header') }}',
                    enctype: 'multipart/form-data',
                    type: 'POST',
                    processData: false,
                    contentType: false,
                    cache: false,
                    data: formdata,
                    success: function(result) {
                        $('#uploadheader')[0].reset();
                        viewHeader()
                        if (result.status == 'success') {
                            Swal.fire({
                                title: "Info !!",
                                text: result.message,
                                icon: "success"
                            }).then(function() {

                            });

                        } else {
                            $.each(result.message, function(prefix, val) {
                                toastr.error(val);
                            });
                        }
                    }
                })
            });

            function viewHeader() {
                var id = $('#id_news').val();
                $.ajax({
                    url: '{{ route('bkk.view-header') }}',
                    type: 'GET',
                    data: {
                        id_news: id
                    },
                    success: function(result) {
                        if (result.data == null) {
                            $('.image-view').html(
                                '<div class="alert alert-danger">Image header not found</div');
                        } else {
                            $('.image-view').html('<center><img src="{{ asset('storage') }}/' + result
                                .data + '" style="height:200px;"></center>');
                        }

                    }
                })
            }

            function uploadImage(file) {
                let data = new FormData();
                data.append("file", file);
                $.ajax({
                    url: '{{ route('bkk.upload-image') }}',
                    method: 'POST',
                    data: data,
                    processData: false,
                    contentType: false,
                    success: function(response) {
                        $('#body').summernote('insertImage', response.url);
                    },
                    error: function(data) {
                        console.log(data);
                    }
                });
            }


        })
    </script>
@endpush