@extends('layouts/page')
@section('page-styles')
    <link rel="stylesheet" href="{{ asset(mix('assets/css/dropify.css')) }}" />
    <link rel="stylesheet" href="{{ asset('assets/css/scroll.css') }}" />
@endsection
@section('content')
    <div class="content-wrapper">
        <div class="container-xxl flex-grow-1 container-p-y bg-grey">
            <div class="bs-stepper wizard-numbered mt-2">
                <div class="bs-stepper-header" style="overflow-x: scroll; white-space: nowrap;">
                    <div class="step" data-target="#account-details">
                        <button type="button" class="step-trigger" disabled>
                            <span class="bs-stepper-circle" id="btn_step_1">1</span>
                            <span class="bs-stepper-label">
                                <span class="bs-stepper-title">Create <br>Domain</span>
                            </span>
                        </button>
                    </div>
                    <div class="line">
                        <i class="ti ti-chevron-right"></i>
                    </div>
                    <div class="step" data-target="#personal-info">
                        <button type="button" class="step-trigger" disabled>
                            <span class="bs-stepper-circle">2</span>
                            <span class="bs-stepper-label">
                                <span class="bs-stepper-title">Site <br>Information</span>
                            </span>
                        </button>
                    </div>
                    @if (!strpos(Request::url(), '/non') !== false)
                        <div class="line">
                            <i class="ti ti-chevron-right"></i>
                        </div>
                        <div class="step" data-target="#tab-section">
                            <button type="button" class="step-trigger" disabled>
                                <span class="bs-stepper-circle">3</span>
                                <span class="bs-stepper-label">
                                    <span class="bs-stepper-title">Section & <br> Appearance</span>
                                </span>
                            </button>
                        </div>
                        <div class="line">
                            <i class="ti ti-chevron-right"></i>
                        </div>
                        <div class="step" data-target="#tab-preview">
                            <button type="button" class="step-trigger" disabled>
                                <span class="bs-stepper-circle">4</span>
                                <span class="bs-stepper-label">
                                    <span class="bs-stepper-title"> Preview</span>
                                </span>
                            </button>
                        </div>
                        <div class="line">
                            <i class="ti ti-chevron-right"></i>
                        </div>
                        <div class="step" data-target="#create-account">
                            <button type="button" class="step-trigger" disabled>
                                <span class="bs-stepper-circle">5</span>
                                <span class="bs-stepper-label">
                                    <span class="bs-stepper-title"> Account</span>
                                </span>
                            </button>
                        </div>
                    @endif
                    <div class="line">
                        <i class="ti ti-chevron-right"></i>
                    </div>
                    <div class="step" data-target="#tab-finish">
                        <button type="button" class="step-trigger" disabled>
                            <span class="bs-stepper-circle">{{ !strpos(Request::url(), '/non') !== false ? 6 : 3 }}</span>
                            <span class="bs-stepper-label">
                                <span class="bs-stepper-title"> Finish</span>
                            </span>
                        </button>
                    </div>
                </div>
                @include('page/site/add-step/step_1')
            </div>
        </div>
        @include('page/site/add-step/step_2')
        @include('page/site/add-step/step_3')
        @include('page/site/add-step/step_4')
        @include('page/site/add-step/step_5')
        @include('page/site/add-step/step_6')
    </div>
    </div>
    </div>
    </div>
@endsection
@section('page-scripts')
    @include('page/site/site_main_js')
    <script>
        function delete_section(e) {
            $(`#${e}`).remove()
        }

        function select_layout_section(t, e) {
            $.ajax({
                url: "{{ url('site/_appearance_layout') }}",
                method: "POST",
                data: {
                    "content_id": $(t).data("content-id")
                },
                beforeSend: function() {
                    $('#settingSectionLayout').attr("data-keyboard", "false")
                    $('#settingSectionLayout').attr("data-backdrop", "static")
                    $("#selected-layout").html(`<div class="spinnerloader">
                                                    <div class="sk-wave sk-primary">
                                                        <div class="sk-wave-rect"></div>
                                                        <div class="sk-wave-rect"></div>
                                                        <div class="sk-wave-rect"></div>
                                                        <div class="sk-wave-rect"></div>
                                                        <div class="sk-wave-rect"></div>
                                                    </div>
                                                </div>
                    `)
                },
                success: function(d) {
                    $('#settingSectionLayout').attr("data-keyboard", "true")
                    $('#settingSectionLayout').attr("data-backdrop", "static")
                    let data = JSON.parse(d)
                    let img = ``
                    for (let i = 0; i < data.length; i++) {
                        if (data[i].LayoutContentId == $(t).val()) {
                            img += `
                                <img src="{{ asset('') }}/${data[i].ImageLayout}" alt="" style="height: 100%; width: 100%; object-fit: contain;">
                                            `
                        }
                    }
                    $(`#${e}`).find(".img-sec").html(img)
                    $("#selected-layout").html(img)
                }
            });
        }

        function addLayoutSection(t, x) {
            let layoutcontentid = $(t).parent().parent().find(`input[name="layout_content"]:checked`).val()
            $(`#section-content-body${x}`).find(`input[name="section_layout_content_id[]"]`).val(layoutcontentid)
        }

        function preAddLayoutSection(t) {
            $.ajax({
                url: "{{ url('site/_appearance_layout') }}",
                method: "POST",
                data: {
                    "content_id": $(t).parent().parent().find(`input[name="section_content_site_id[]"]`).val()
                },
                beforeSend: function() {
                    $(".spinnerloader").show()
                },
                success: function(d) {
                    $(".spinnerloader").hide()
                    let data = JSON.parse(d)
                    let mid = ``
                    for (let i = 0; i < data.length; i++) {
                        mid += `
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" value="${data[i].LayoutContentId}" id="layout_content${i}" name="layout_content" data-content-id="${$(t).parent().parent().find(`input[name="section_content_site_id[]"]`).val()}" onchange="select_layout_section(this,'${$(t).parent().parent().parent().prop("id")}')">
                                    <label class="form-check-label" for="layout_content${i}">Tema ${i + 1}</label>
                                </div>
                                            `
                    }
                    $("#layout-content-list").parent().find("h4").html(
                        `${$(t).parent().parent().find("#name-section-and-content").text()}`)
                    $("#settingSectionLayout").find("#layout-content-list").html(mid)
                    $("#settingSectionLayout").find('#add-layout-section').attr("onclick",
                        `addLayoutSection(this  ,${$(t).parent().parent().find(`input[name="order_of_sections"]`).val()})`
                    );
                    $("#selected-layout").html(
                        `<img src="{{ asset('') }}${data[0].ImageLayout}" alt="" width="100%">`)
                    $("#settingSectionLayout").modal("show")
                },
                error: function(xhr, status, errorThrown) {
                    Swal.fire({
                        title: "Perhatian",
                        icon: "warning",
                        text: `${xhr.responseJSON.message}`,
                        showClass: {
                            popup: 'animate__animated animate__bounceIn'
                        },
                        customClass: {
                            confirmButton: 'btn btn-primary'
                        },
                        allowOutsideClick: false,
                        buttonsStyling: false
                    }).then((result) => {
                        $(".spinnerloader").hide()
                    })
                }
            });
        }

        function pageMenu(type, t) {
            let parent = $(t).parent().parent().parent().parent().parent()
            let submenu = $(t).parent().parent().parent().parent().parent()
            if (type == 'parent') {
                $(parent).find("#input-parent").addClass("col-sm-5")
                $(parent).find("#input-parent").removeClass("col-sm-3")
                $(parent).find("#input-parent").removeClass("col-sm-10")
                $(parent).find("#tipe-link").addClass("d-none")
                $(parent).find("#tipe-sub-menu").addClass("d-none")
                $(parent).find("#barrier-parent").addClass("d-none")
                $(parent).find("#tipe-page").removeClass("d-none")
                $(parent).find("#menu_type").val("page")
            } else if (type == 'children') {
                $(submenu).find("#child_menu_type").val("page")
                $(submenu).find("#child-tipe-link").addClass("d-none")
                $(submenu).find("#child-tipe-page").removeClass("d-none")
            }
        }

        function subMenu(type, t) {
            let parent = $(t).parent().parent().parent().parent().parent()
            if (type == 'parent') {
                $(parent).find("#input-parent").addClass("col-sm-3")
                $(parent).find("#input-parent").removeClass("col-sm-5")
                $(parent).find("#input-parent").removeClass("col-sm-10")
                $(parent).find("#tipe-page").addClass("d-none")
                $(parent).find("#barrier-parent").addClass("d-none")
                $(parent).find("#tipe-link").addClass("d-none")
                $(parent).find("#tipe-sub-menu").removeClass("d-none")
                $(parent).find("#menu_type").val("submenu")
                $(parent).find("#child_menu_type").val("page")
            }
        }

        function linkMenu(type, t) {
            let parent = $(t).parent().parent().parent().parent().parent()
            let submenu = $(t).parent().parent().parent().parent().parent()
            if (type == 'parent') {
                $(parent).find("#input-parent").addClass("col-sm-5")
                $(parent).find("#input-parent").removeClass("col-sm-3")
                $(parent).find("#input-parent").removeClass("col-sm-10")
                $(parent).find("#tipe-page").addClass("d-none")
                $(parent).find("#tipe-sub-menu").addClass("d-none")
                $(parent).find("#barrier-parent").addClass("d-none")
                $(parent).find("#tipe-link").removeClass("d-none")
                $(parent).find("#menu_type").val("link")
            } else if (type == 'children') {
                $(submenu).find("#child_menu_type").val("link")
                $(submenu).find("#child-tipe-link").removeClass("d-none")
                $(submenu).find("#child-tipe-page").addClass("d-none")
            }
        }

        $('.repeater').repeater({
            isFirstItemUndeletable: true,
            initEmpty: false,
            repeaters: [{
                selector: '.inner-repeater',
                show: function() {
                    $(this).slideDown();
                    let select = $(this).find('select[name*="[child_page]"]')
                    $('input[id^="input_section_content"]').each(function(key) {
                        select.append(
                            `<option value="${$(this).val()}">${$(this).val()}</option>`)
                    });
                },
                hide: function(deleteElement) {
                    $(this).slideUp(deleteElement);
                }
            }],

            show: function() {
                $(this).slideDown();
            },

            hide: function(deleteElement) {
                $(this).slideUp(deleteElement);
            }
        });

        function deleteInputSection(t) {
            let item = $(t).parent().parent().parent().parent().parent().parent().parent()
            $(item).hide('slow', function() {
                $(item).remove();
            });
        }

        function addInputSectionToSection() {
            $('input[id^="input_section_content"]').each(function(key) {

                $('select[name*="parent_page"]').append(
                    `<option value="${$(this).val()}">${$(this).val()}</option>`)
                $('select[name*="child_page"]').append(
                    `<option value="${$(this).val()}">${$(this).val()}</option>`)

                $("#section-website").append(`
                <div class="col-md-12 shadow-lg" id="section-content-body${key}">
                <div class="border rounded p-3 mb-4">
                    <label class="switch switch-primary mb-3">
                        <input type="hidden" name="order_of_sections" value="${key}"/>
                        <input type="hidden" name="section_content_site_id[]" value="${$(this).data("input-content-site-id")}"/>
                        <input type="hidden" name="section_name[]" value="${$(this).val()}"/>
                        <input type="hidden" name="section_layout_content_id[]" value=""/>
                        <input type="hidden" id="type-section-${key}" name="type_section[]" value="landing"/>
                        <input type="checkbox" class="switch-input" onchange="(!$(this).is(':checked')?$('#type-section-${key}').val('redirect'):$('#type-section-${key}').val('landing'))" checked/>
                            <span class="switch-toggle-slider">
                                    <span class="switch-on">
                                        <i class="ti ti-check"></i>
                                    </span>
                                    <span class="switch-off">
                                        <i class="ti ti-x"></i>
                                    </span>
                                </span>
                            <span class="switch-label" id="name-section-and-content">${$(this).data("input-content-name")} | ${$(this).val()}</span>
                    </label>
                    <div class="img-sec rounded" style="width: 100%; height: 250px; overflow: hidden;">
                        <img src="{{ url('assets/img/temp/features.svg') }}" alt="" class="" style="height: 100%; width: 100%; object-fit: cover;">
                    </div>
                        <div class="d-flex justify-content-end mt-2">
                        <button type="button" class="btn rounded-pill btn-icon btn-outline-primary waves-effect" onclick="preAddLayoutSection(this)" style="margin-right: 8px;">
                        <span class="ti ti-palette"></span></button>
                        <button type="button" onclick="confirm('Apakah anda yakin?') && delete_section('section-content-body${key}')" class="btn rounded-pill btn-icon btn-outline-danger waves-effect">
                        <span class="ti ti-trash"></span></button>
                    </div>
                </div>
                </div>
            `)
            });
        }

        $(document).ready(function() {
            let kd_kota = "{{ Config::get('app.kd_kota') }}";
            kecamatan(kd_kota);
            $('#kecamatan').change(function() {
                let selected_kecamatan = $(this).val();

                if (selected_kecamatan !== '') {
                    kelurahan(selected_kecamatan);
                    $('#kelurahan').prop("disabled", false);
                } else {
                    $('#kelurahan').prop("disabled", true);
                }
            });

            $("#card-color").on("click", "input[name='color']", function() {
                localStorage.setItem("color_id", $("input[name='color']:checked").val());
            })
            $("#card-font").on("click", "input[name='font']", function() {
                localStorage.setItem("font_id", $("input[name='font']:checked").val());
            })
            $("#desain").on("click", function() {
                $.ajax({
                    url: "{{ url('site/_appearance') }}",
                    method: "POST",
                    data: {
                        "template_id": "1"
                    },
                    beforeSend: function() {
                        $(".spinnerloader").show()
                    },
                    success: function(d) {
                        console.log(d);

                        let color = ``,
                            font = ``
                        d.color.map(function(data, i) {
                            color += `
                                <div class="col-sm-6 col-lg-6 col-md-12 mb-3">
                                    <div class="form-check custom-option custom-option-basic">
                                        <label class="form-check-label custom-option-content" for="color${i}">
                                            <input name="color" id="color${i}" class="form-check-input" type="radio" value="${data.ColorId}" ${data.ColorId==localStorage.getItem("color_id")?"checked":(i==0?"checked":"")}>
                                            <span class="custom-option-header">
                                                <span class="h6 mb-0"></span>
                                            </span>
                                            <div class="img-temp img-content" style="width: 100%; height: 100%; overflow: hidden;">
                                                <img src="{{ asset('assets/img/temp/color1.svg') }}" style="width: 100%; height: 100%;object-fit: cover;">
                                            </div>
                                        </label>
                                    </div>
                                </div> 
                                `
                        })
                        d.font.map(function(data, i) {
                            font += `
                                <div class="col-sm-6 col-lg-6 col-md-12 mb-3">
                                    <div class="form-check custom-option custom-option-basic">
                                        <label class="form-check-label custom-option-content" for="font${i}">
                                            <input name="font" id="font${i}" class="form-check-input" type="radio" value="${data.FontId}" ${data.FontId==localStorage.getItem("font_id")?"checked":(i==0?"checked":"")}>
                                            <span class="custom-option-header">
                                                <span class="h6 mb-0"></span>
                                            </span>
                                            <div class="img-temp img-content" style="width: 100%; height: 100%; overflow: hidden;">
                                                <img src="{{ asset('assets/img/temp/font-style1.svg') }}" style="width: 100%; height: 100%;object-fit: cover;">
                                            </div>
                                        </label>
                                    </div>
                                </div>
                                `
                        })
                        $("#card-color").html(color)
                        $("#card-font").html(font)
                        $("#pengaturanDesain").modal("show")
                        $(".spinnerloader").hide()
                    },
                    error: function(xhr, status, errorThrown) {}
                });
            })
            $("#input-section").sortable();
            $("#section-website").sortable();
            $("#add-section").click(function() {
                let siteid = `{{ !empty($siteid) ? $siteid : '' }}`
                $.ajax({
                    url: "{{ url('site/_post_section') }}",
                    method: "POST",
                    data: {
                        "siteid": `{{ !empty($siteid) ? $siteid : '' }}`,
                        "layout_content_id_header": $(
                                "input[name='layout_content_id_header']:checked")
                            .val(),
                        "layout_content_id_footer": $(
                                "input[name='layout_content_id_footer']:checked")
                            .val(),
                        "section_content_site_id": $("input[name='section_content_site_id[]']")
                            .map(function() {
                                return $(this).val();
                            }).get(),
                        "section_name": $("input[name='section_name[]']")
                            .map(function() {
                                return $(this).val();
                            }).get(),
                        "section_layout_content_id": $("input[name='section_layout_content_id[]']")
                            .map(function() {
                                return $(this).val();
                            }).get(),
                        "type_section": $("input[name='type_section[]']")
                            .map(function() {
                                return $(this).val();
                            }).get(),
                        "header_menu": Object.keys($(".repeater").repeaterVal()).map(function(key) {
                            return $(".repeater").repeaterVal()[key];
                        }),
                        "color_id": localStorage.getItem("color_id"),
                        "font_id": localStorage.getItem("font_id"),
                    },
                    beforeSend: function() {
                        $(".spinnerloader").show()
                    },
                    success: function(d) {
                        let data = JSON.parse(d)
                        $(".spinnerloader").hide()
                        $("#preview-frame").attr("src",
                            `{{ url('') }}/site/web/${siteid}`)
                        $("#next-to-preview").trigger("click")
                    },
                    error: function(xhr, status, errorThrown) {
                        Swal.fire({
                            title: "Perhatian",
                            icon: "warning",
                            text: `${xhr.responseJSON.message}`,
                            showClass: {
                                popup: 'animate__animated animate__bounceIn'
                            },
                            customClass: {
                                confirmButton: 'btn btn-primary'
                            },
                            allowOutsideClick: false,
                            buttonsStyling: false
                        }).then((result) => {
                            $(".spinnerloader").hide()
                        })
                    }
                });
            })
            $("#add-header").click(function() {})

            $("#add-menu-header").click(function() {
                $('.label-menu').show()
                $('select[name*="parent_page"]').html(`<option value="">Pilih tujuan</option>`)
                $('select[name*="child_page"]').html(`<option value="">Pilih tujuan</option>`)
                $("#event-add-menu-header").trigger("click")
                $('input[id^="input_section_content"]').each(function(key) {
                    $('select[name*="parent_page"]').append(
                        `<option value="${$(this).val()}">${$(this).val()}</option>`)
                    $('select[name*="child_page"]').append(
                        `<option value="${$(this).val()}">${$(this).val()}</option>`)
                });
            })

            $("#button-tambah-section").click(function() {
                $('input:checkbox[id^="checkbox_content_site_id"]:checked').each(function() {
                    $("#input-section").append(`
                    <div class="row mb-3" style="cursor:pointer;">
                        <div class="col-12">
                            <div class="card">
                                <div class="row pt-3 pb-0 px-3 d-flex justify-content-between">
                                    <div class="col-3" style="width:fit-content;">
                                        <div class="row">
                                            <div class="col-sm-1">                                   
                                                <i class="ti ti-grip-vertical ti-sm me-2"></i>
                                            </div>
                                            <div class="col-sm-10"> 
                                                <h5><span class="badge bg-primary text-white">${$(this).data("checkbox-content-site-name")}</span></h5>
                                            </div> 
                                        </div>
                                    </div>
                                    <div class="col-7">
                                        <div class="row">
                                            <div class="col-sm-10">
                                                <input type="text" id="input_section_content${$(this).val()}" name="input_section_content${$(this).val()}" class="form-control form-control-sm mb-2" placeholder="Nama Section Website" data-input-content-site-id="${$(this).val()}" data-input-content-name="${$(this).data("checkbox-content-site-name")}" value="${$(this).data("checkbox-content-site-name")}" />
                                            </div>
                                            <div class="col-sm-2">
                                                <button class="btn btn-xs btn-outline-danger" onclick="deleteInputSection(this)" type="button"><i class="ti ti-trash ti-sm"></i></button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    `)
                    $(this).prop('checked', false);
                });
            })


        })

        $('#modal-tambah-section').on('hidden.bs.modal', function() {
            $("#section-website").html('')
            $('select[name*="parent_page"]').html(`<option value="">Pilih tujuan</option>`)
            $('select[name*="child_page"]').html(`<option value="">Pilih tujuan</option>`)
            addInputSectionToSection()
        })

        $('#settingSectionLayout').on('hidden.bs.modal', function() {
            $("#add-layout-section").trigger("click")
        })

        $("#submit_setup").on("click", function() {
            localStorage.removeItem("color_id");
            localStorage.removeItem("font_id");
            localStorage.removeItem("name_site");
            localStorage.removeItem("code_site");
            localStorage.removeItem("kelurahan");
            localStorage.removeItem("kecamatan");
        })

        let isPasswordValidated = false;

        $('#password').on('keyup', function(event) {
            event.preventDefault();
            let password = $("#password").val();

            let isLengthValid = password.length >= 8;
            let hasUpperCase = /[A-Z]/.test(password);
            let hasLowerCase = /[a-z]/.test(password);
            let hasSymbol = /[\W_]/.test(password);
            let hasNumber = /\d/.test(password);
            let hasSymbolAndNumber = hasSymbol && hasNumber;

            $('#delapan-karakter').toggleClass('text-success', isLengthValid);
            $('#huruf-besar').toggleClass('text-success', hasUpperCase);
            $('#huruf-kecil').toggleClass('text-success', hasLowerCase);
            $('#simbol-angka').toggleClass('text-success', hasSymbolAndNumber);

            isPasswordValidated = isLengthValid && hasUpperCase && hasLowerCase && hasSymbolAndNumber;
        });

        function togglePassword(inputId, iconId) {
            var passwordInput = document.getElementById(inputId);
            var passwordToggleIcon = document.getElementById(iconId);

            if (passwordInput.type === 'password') {
                passwordInput.type = 'text';
                passwordToggleIcon.classList.remove('bx-show');
                passwordToggleIcon.classList.add('bx-hide');
            } else {
                passwordInput.type = 'password';
                passwordToggleIcon.classList.remove('bx-hide');
                passwordToggleIcon.classList.add('bx-show');
            }
        }
    </script>
@endsection