@extends('layoutsV2.master')

@push('plugin-styles')
    {!! Html::style('/assets/plugins/select2/select2.min.css') !!}
    {!! Html::style('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css') !!}
    {!! Html::style('/assets/plugins/select2/css/select2-bootstrap4.css') !!}
    {!! Html::style('/assets/plugins/sweetalert2/sweetalert2.min.css') !!}
    <style>
        .is-invalid .select2-selection,
        .needs-validation ~ span > .select2-dropdown {
            border-color: #dc3545 !important;
        }

        .treeview .btn-default {
            border-color: #e3e5ef;
        }

        .treeview .btn-primary:hover {
            cursor: pointer;
        }

        .treeview ul {
            list-style: none;
            padding-left: 30px;
        }

        .treeview ul li {
            padding: 50px 0 0 35px;
            position: relative;
        }

        .treeview ul li:before {
            content: "";
            position: absolute;
            top: -26px;
            left: -31px;
            border-left: 2px dashed #a2a5b5;
            width: 1px;
            height: 100%;
        }

        .treeview ul li:after {
            content: "";
            position: absolute;
            border-top: 2px dashed #a2a5b5;
            top: 70px;
            left: -30px;
            width: 65px;
        }

        .treeview ul li:last-child:before {
            top: -35px;
            height: 105px;
        }

        .treeview > ul > li:after, .treeview > ul > li:last-child:before {
            content: unset;
        }

        .treeview > ul > li:before {
            top: 90px;
            left: 36px;
        }

        .treeview > ul > li:not(:last-child) > ul > li:before {
            content: unset;
        }

        .treeview > ul > li > .treeview__level:before {
            height: 60px;
            width: 60px;
            top: -9.5px;
            border: 7px solid #e9ebfd;
            background-color: #727cf5;
            font-size: 22px;
        }

        .treeview > ul > li > ul {
            padding-left: 34px;
        }

        .treeview__level {
            padding: 7px 7px 7px 42px;
            display: block;
            border-radius: 5px;
            border: 1px solid #e3e5ef;
            position: relative;
            /*z-index: 1;*/
        }

        .treeview__level:before {
            content: attr(data-level);
            position: absolute;
            left: -27.5px;
            top: -6.5px;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 55px;
            width: 55px;
            border-radius: 50%;
            border: 7px solid #e9ebfd;
            background-color: #727cf5;
            color: #fff;
            font-size: 20px;
            z-index: 1;
        }

        .treeview__level-btns {
            /*margin-left: 15px;*/
            display: inline-block;
            position: relative;
        }

        .treeview__level .level-same, .treeview__level .level-sub {
            /*position: absolute;*/
            /*display: none;*/
            transition: opacity 250ms cubic-bezier(0.7, 0, 0.3, 1);
        }

        .treeview__level .level-same.in, .treeview__level .level-sub.in {
            display: block;
        }

        .treeview__level .level-same.in .btn-default, .treeview__level .level-sub.in .btn-default {
            background-color: #faeaea;
            color: #da5555;
        }

        .treeview__level .level-same {
            top: 0;
            left: 45px;
        }

        .treeview__level .level-sub {
            top: 42px;
            left: 0px;
        }

        .treeview__level .level-edit {
            display: none;
        }

        .treeview__level .level-remove {
            display: none;
        }

        .treeview__level.selected {
            background-color: #f9f9fb;
            box-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.1);
        }

        .treeview__level.selected .level-edit {
            display: inline-block;
        }

        .treeview__level.selected .level-remove {
            display: inline-block;
        }

        .treeview__level.selected .level-add {
            display: none;
        }

        .treeview__level.selected .level-same, .treeview__level.selected .level-sub {
            display: none;
        }

        .treeview .level-title {
            cursor: pointer;
            user-select: none;
        }

        .treeview .level-title:hover {
            /*text-decoration: underline;*/
        }

        .treeview--mapview ul {
            justify-content: center;
            display: flex;
        }

        .treeview--mapview ul li:before {
            content: unset;
        }

        .treeview--mapview ul li:after {
            content: unset;
        }
    </style>
@endpush

@section('content')
    <div class="row">
        <div class="col-8 py-2">
            <h5>
                LOGICAL FRAME
            </h5>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-header text-uppercase">
                    <div class="row justify-content-end">
                        <div class="col-8">
                            PEMERINTAH KABUPATEN HULU SUNGAI SELATAN
                        </div>
                        <div class="col-2">
                            <select id="filterPeriode" name="filterPeriode">
                                <option></option>
                                @foreach($periode as $item)
                                    <option value="{{ $item->id }}">{{ $item->tahun_awal.'-'.$item->tahun_akhir }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-2">
                            <select id="filterTahun" name="filterTahun">
                                <option></option>
                            </select>
                        </div>

                    </div>
                </div>
                <div class="card-body p-0">
                    <div class="treeview js-treeview"></div>
                </div>
            </div>
        </div>
    </div>

    {{--Form Add Logic Frame--}}
    <div class="modal fade" id="addLogicalFrame" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header bg-inverse-primary">
                    <h5 class="modal-title text-uppercase text-primary" id="exampleModalLabel">Formulir Logical
                        Frame</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true"><small><i data-feather="x-circle"></i></small></span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="formAddLogicalFrame">
                        <div class="form-group">
                            <label>Logical Frame<code>*</code></label>
                            <textarea id="fieldAddLogicalFrame" name="fieldAddLogicalFrame" class="form-control"
                                      aria-label="fieldAddLogicalFrame" placeholder="Tulis logic frame disini..."
                                      rows="3"></textarea>
                            <div class="invalid-feedback"></div>
                        </div>
                        <div class="form-group">
                            <label>Indikator<code>*</code></label>
                            <textarea id="fieldAddIndicator" name="fieldAddIndicator" class="form-control"
                                      aria-label="fieldAddIndicator" placeholder="Tulis logic frame disini..."
                                      rows="3"></textarea>
                            <div class="invalid-feedback"></div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button id="saveLogicalFrame" type="button" class="btn btn-primary text-uppercase text-white">
                        Simpan
                    </button>
                    <button type="button" class="btn btn-outline-secondary text-uppercase" data-dismiss="modal">
                        Batal
                    </button>
                </div>
            </div>
        </div>
    </div>

    {{--Form Edit Logic Frame--}}
    <div class="modal fade" id="editLogicalFrame" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header bg-inverse-primary">
                    <h5 class="modal-title text-uppercase text-primary" id="exampleModalLabel">
                        Perbaharui Logical Frame
                    </h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true"><small><i data-feather="x-circle"></i></small></span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="formEditLogicalFrame">
                        <div class="form-group">
                            <label>Logical Frame<code>*</code></label>
                            <textarea id="fieldEditLogicalFrame" name="fieldEditLogicalFrame" class="form-control"
                                      aria-label="fieldEditLogicalFrame" placeholder="Tulis logic frame disini..."
                                      rows="3"></textarea>
                            <div class="invalid-feedback"></div>
                        </div>
                        <div class="form-group">
                            <label>Indikator<code>*</code></label>
                            <textarea id="fieldEditIndicator" name="fieldEditIndicator" class="form-control"
                                      aria-label="fieldEditIndicator" placeholder="Tulis logic frame disini..."
                                      rows="3"></textarea>
                            <div class="invalid-feedback"></div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button id="updateLogicalFrame" type="button" class="btn btn-primary text-uppercase text-white">
                        Perbaharui
                    </button>
                    <button type="button" class="btn btn-outline-secondary text-uppercase" data-dismiss="modal">
                        Batal
                    </button>
                </div>
            </div>
        </div>
    </div>

    <nav class="settings-sidebar">
        <div class="sidebar-body">
            <a href="#" onclick="add(this)" class="settings-sidebar-toggler settings-open text-white"
               style="border-radius: 25px; border: 1px #727cf5;">
                <i data-feather="plus-circle" style="color:white"></i>
            </a>
        </div>
    </nav>
@endsection

@push('plugin-scripts')
    {!! Html::script('https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.4/axios.min.js') !!}
    {!! Html::script('https://cdn.jsdelivr.net/npm/gasparesganga-jquery-loading-overlay@2.1.7/dist/loadingoverlay.min.js') !!}
    {!! Html::script('/assets/plugins/select2/select2.min.js') !!}
    {!! Html::script('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/js/all.min.js') !!}
    {!! Html::script('/assets/plugins/moment/moment.min.js') !!}
    {!! Html::script('/assets/plugins/sweetalert2/sweetalert2.min.js') !!}
    {!! Html::script('/assets/plugins/promise-polyfill/polyfill.min.js') !!}
    {{--{!! Html::script('/assets/plugins/tree/custom-jstree.js') !!}--}}
@endpush
@push('custom-scripts')
    {!! Html::script('/assets/js/sweet-alert.js') !!}
    <script>
        Swal.fire({
            icon: 'info',
            title: 'Panduan Input Logical Frame',
            footer: `<a href="${window.location.origin}/assets/manual/manual-logical-frame.pdf" target="_blank">Klik disini melihat panduan input</a>`,
            showConfirmButton: false,
            showCloseButton: true,
        })

        const Toast = Swal.mixin({
            toast: true,
            position: 'top-end',
            showConfirmButton: false,
            timer: 1113000
        });
        const swalWithBootstrapButtons = Swal.mixin({
            customClass: {
                confirmButton: 'btn btn-success',
                cancelButton: 'btn btn-danger'
            },
            buttonsStyling: false,
        })

        let select_id = null;

        function view_data(types, filterPeriode, filterTahun) {
            axios.post(window.location.origin + '/v2/adminKab/logical-frame/get-data', {
                periode: filterPeriode,
                tahun: filterTahun,
            })
                    .then(r => {
                        $('.js-treeview').replaceWith('<div class="treeview js-treeview pr-4">' + r.data + '</div>');
                        functionTreeview();
                        if(types === 'add') {
                            $('#addLogicalFrame').modal('hide')
                        }
                        if(types === 'edit') {
                            $('#editLogicalFrame').modal('hide')
                        }
                    })
                    .catch(e => {
                        $('.settings-sidebar').show();
                        $('.js-treeview').replaceWith(`
                        <div class="treeview js-treeview">
                            <div class="alert alert-warning mb-0" role="alert">
                                <strong>Informasi!</strong> Data tidak dapat ditampilkan.
                            </div>
                        </div>
                    `);
                    })
        }

        function store(parent = null) {
            return axios.post(window.location.origin + '/v2/adminKab/logical-frame/store', {
                type: 'kabupaten',
                master_periode_id: $('#filterPeriode').val(),
                tahun: $('#filterTahun').val(),
                logical_frame: $('#fieldAddLogicalFrame').val(),
                indicator: $('#fieldAddIndicator').val(),
                parent: parent
            })
                    .then(r => {
                        const data = r.data.data
                        view_data('add', $('#filterPeriode').val(), $('#filterTahun').val())
                        select_id = null;

                        return r.data
                    })
                    .catch(e => {
                        select_id = null;
                        const response = e?.response;
                        const resData = response?.data;
                        const msgError = resData?.errors;
                        if (response) {
                            // The request was made and the server responded with a status code
                            // that falls out of the range of 2xx
                            console.log(e.response.data);
                            console.log(e.response.status);
                            console.log(e.response.headers);
                            if (e.response.status === 422) {
                                $('#fieldAddLogicalFrame').addClass('is-invalid').next().html(msgError?.logical_frame)
                                $('#fieldAddIndicator').addClass('is-invalid').next().html(msgError?.indicator)
                            }
                        } else if (e.request) {
                            // The request was made but no response was received
                            // `e.request` is an instance of XMLHttpRequest in the browser and an instance of
                            // http.ClientRequest in node.js
                            console.log(e.request);
                        } else {
                            // Something happened in setting up the request that triggered an Error
                            console.log('Error', e.message);
                        }
                        return false
                    })
        }

        function update(id) {
            return axios.put(window.location.origin + '/v2/adminKab/logical-frame/update/' + id, {
                type: 'kabupaten',
                logical_frame: $('#fieldEditLogicalFrame').val(),
                indicator: $('#fieldEditIndicator').val(),
            })
                    .then(r => {
                        const data = r.data.data
                        view_data('edit', $('#filterPeriode').val(), $('#filterTahun').val())
                        swalWithBootstrapButtons.fire(
                                'Berhasil',
                                'Data berhasil diperbaharui dari pangkalan data',
                                'success'
                        )
                        select_id = null;

                        return r.data
                    })
                    .catch(e => {
                        const response = e?.response;
                        const resData = response?.data;
                        const msgError = resData?.errors;
                        swalWithBootstrapButtons.fire(
                                'Gagal',
                                'Data tidak berhasil diperbaharui dari pangkalan data',
                                'error'
                        )
                        if (response) {
                            // The request was made and the server responded with a status code
                            // that falls out of the range of 2xx
                            console.log(e.response.data);
                            console.log(e.response.status);
                            console.log(e.response.headers);
                            if (e.response.status === 422) {
                                $('#fieldEditLogicalFrame').addClass('is-invalid').next().html(msgError?.logical_frame)
                                $('#fieldEditIndicator').addClass('is-invalid').next().html(msgError?.indicator)
                            }
                        } else if (e.request) {
                            // The request was made but no response was received
                            // `e.request` is an instance of XMLHttpRequest in the browser and an instance of
                            // http.ClientRequest in node.js
                            console.log(e.request);
                        } else {
                            // Something happened in setting up the request that triggered an Error
                            console.log('Error', e.message);
                        }
                        return false
                    })
        }

        function add(self) {
            $('#addLogicalFrame').modal('show')
                    .on('hidden.bs.modal', function () {
                        select_id = null;
                        $('#formAddLogicalFrame').trigger('reset');
                    });
            $('#saveLogicalFrame').on('click', function (e) {
                store(select_id);
                e.stopImmediatePropagation();
            })
        }

        function edit(self) {
            const title = $(self).closest('li').children('div').children('div.level-title').text();
            const indicator = $(self).closest('li').children('div').children('div.level-indicator').text();
            $('#fieldEditLogicalFrame').val(title);
            $('#fieldEditIndicator').val(indicator.split('IK: ')[1]);
            $('#editLogicalFrame').modal('show')
                    .on('hidden.bs.modal', function () {
                        select_id = null;
                        $('#formEditLogicalFrame').trigger('reset');
                    });
            $('#updateLogicalFrame').on('click', function (e) {
                update(select_id);
                e.stopImmediatePropagation();
            })
        }

        function functionTreeview() {
            let treeview = {
                resetBtnToggle: function () {
                    $(".js-treeview")
                            .find(".level-add")
                            .find("span")
                            .removeClass()
                            .addClass("fa fa-plus");
                    $(".js-treeview")
                            .find(".level-add")
                            .siblings()
                            .removeClass("in");
                },
                addSameLevel: function (target) {
                    let ulElm = target.closest("ul");
                    let sameLevelCodeASCII = target
                            .closest("[data-level]")
                            .attr("data-level")
                            .charCodeAt(0);
                    ulElm.append($("#levelMarkup").html());
                    ulElm
                            .children("li:last-child")
                            .find("[data-level]")
                            .attr("data-level", String.fromCharCode(sameLevelCodeASCII));
                },
                addSubLevel: function (target) {
                    let liElm = target.closest("li");
                    let nextLevelCodeASCII = liElm.find("[data-level]").attr("data-level").charCodeAt(0) + 1;
                    liElm.children("ul").append($("#levelMarkup").html());
                    liElm.children("ul").find("[data-level]")
                            .attr("data-level", String.fromCharCode(nextLevelCodeASCII));
                },
                removeLevel: function (target) {
                    target.closest("li").remove();

                }
            };

            $(".js-treeview").on("click", ".level-add", function () {
                $(this).find("span").toggleClass("fa-plus").toggleClass("fa-times text-danger");
                $(this).siblings().toggleClass("in");
            });

            // Edit level
            $(".js-treeview").on("click", ".level-edit", function () {
                select_id = $(this).closest('li').children('div').data('id');
                edit($(this))
            });

            // Add same level
            $(".js-treeview").on("click", ".level-same", function () {
                $('#addLogicalFrame').modal('show')
                        .on('hidden.bs.modal', function () {
                            select_id = null;
                            $('#formAddLogicalFrame').trigger('reset');
                        });
                treeview.addSameLevel($(this));
                treeview.resetBtnToggle();
            });

            // Add sub level
            $(".js-treeview").on("click", ".level-sub", function () {
                select_id = $(this).closest('li').children('div').data('id');
                add($(this))
                // treeview.addSubLevel($(this));
                // treeview.resetBtnToggle();
            });
            // Remove Level
            $(".js-treeview").on("click", ".level-remove", function () {
                select_id = $(this).closest('li').children('div').data('id');
                swalWithBootstrapButtons.fire({
                    title: 'Apakah kamu yakin?',
                    text: "Data akan dihapus dari pangkalan data secara permanen!",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonClass: 'ml-2',
                    confirmButtonText: 'Ya, Hapus!',
                    cancelButtonText: 'Tidak, Batalkan!',
                    reverseButtons: true
                }).then((result) => {
                    if (result.value) {
                        axios.delete(window.location.origin + '/v2/adminKab/logical-frame/destroy/' + select_id)
                                .then(r => {
                                    view_data(null, $('#filterPeriode').val(), $('#filterTahun').val())
                                    swalWithBootstrapButtons.fire(
                                            'Berhasil',
                                            'Data berhasil dihapus dari pangkalan data',
                                            'success'
                                    )
                                    select_id = null;
                                })
                                .catch(e => {
                                    swalWithBootstrapButtons.fire(
                                            'Gagal',
                                            'Data tidak berhasil dihapus',
                                            'error'
                                    )
                                })
                    } else if (result.dismiss === Swal.DismissReason.cancel) {
                        swalWithBootstrapButtons.fire(
                                'Dibatalkan',
                                'Data Anda aman sekarang :)',
                                'error'
                        )
                    }
                })
                // treeview.removeLevel($(this));
            });

            // Selected Level
            $(".js-treeview").on("click", ".level-title", function () {
                let isSelected = $(this).closest("[data-level]").hasClass("selected");
                !isSelected && $(this).closest(".js-treeview").find("[data-level]").removeClass("selected");
                $(this).closest("[data-level]").toggleClass("selected");
            });
        }

        $(function () {
            $('#filterPeriode').select2({
                placeholder: 'Pilih Periode'
            })
                    .on('change', function (e) {
                        $('#filterTahun').empty().append('<option></option>');
                        $('.js-treeview').replaceWith(`
                        <div class="treeview js-treeview">
                            <div class="alert alert-warning mb-0" role="alert">
                                <strong>Informasi!</strong> Data tidak dapat ditampilkan.
                            </div>
                        </div>
                    `);
                        let tahun = $('#filterPeriode').select2('data')[0].text.split('-')
                        for (let i = parseInt(tahun[0]); i <= parseInt(tahun[1]); i++) {
                            var filTahun = $('#filterTahun').prepend(new Option(i, i, false, i === new Date().getFullYear() ? true : false));
                            if (i === new Date().getFullYear()) {
                                filTahun.trigger('change')
                            }
                        }
                    });

            $('#filterTahun').select2({
                placeholder: 'Pilih Tahun'
            })
                    .on('change', function (e) {
                        view_data(null, $('#filterPeriode').val(), $('#filterTahun').val())
                    });


            if ($('#filterPeriode option').length > 1) {
                $('#filterPeriode').val($('#filterPeriode option:eq(1)').val()).trigger('change')
            }

            // Treeview Functions
            functionTreeview();
        });

    </script>
@endpush