@extends('layouts/page')
@section('page-styles')
    <link rel="stylesheet" href="{{ asset(mix('assets/css/dropify.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">
                    <div class="step" data-target="#tab-section">
                        <button type="button" class="step-trigger" disabled>
                            <span class="bs-stepper-circle">1</span>
                            <span class="bs-stepper-label">
                                <span class="bs-stepper-title">Section & 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">2</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="#tab-finish">
                        <button type="button" class="step-trigger" disabled>
                            <span class="bs-stepper-circle">3</span>
                            <span class="bs-stepper-label">
                                <span class="bs-stepper-title"> Finish</span>
                            </span>
                        </button>
                    </div>
                </div>
                <div class="bs-stepper-content">
                    <div id="account-details" class="content">
                        <div class="row g-3">
                            <div class="row mb-1 mt-3">
                            </div>
                        </div>
                    </div>
                    @include('page/site/edit-step/step_1')
                    @include('page/site/edit-step/step_2')
                    @include('page/site/edit-step/step_3')
                </div>
            </div>
        </div>
    </div>
@endsection
@section('page-scripts')
    @include('page/site/site_main_js')
    <script>
        function delete_section(t) {
            $(t).parent().parent().parent().remove()
        }

        function select_layout(t, type, e) {
            $.ajax({
                url: "{{ url('site/_appearance_layout') }}",
                method: "POST",
                data: {
                    "content_id": $(t).data("content-id")
                },
                beforeSend: function() {
                    $('#settingHeaderLayout').attr("data-keyboard", "false")
                    $('#settingHeaderLayout').attr("data-backdrop", "static")
                    $(`#selected-layout-${type}`).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) {
                    $('#settingHeaderLayout').attr("data-keyboard", "true")
                    $('#settingHeaderLayout').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-${type}`).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" ${i == 0 ?"checked":""} data-content-id="${$(t).parent().parent().find(`input[name="section_content_site_id[]"]`).val()}" onchange="select_layout(this,'section','${$(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-section").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()
                    })
                }
            });
        }

        $('.repeater').repeater({
            isFirstItemUndeletable: true,
            initEmpty: false,
            repeaters: [{
                selector: '.inner-repeater',
                show: function() {
                    $(this).find('input[name*="[child_menu_type]"]').val("page")
                    $(this).slideDown();
                },
                hide: function(deleteElement) {
                    $(this).slideUp(deleteElement);
                }
            }],

            show: function() {
                $(this).find('input[name*="[menu_type]"]').val("page")
                $(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="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="" 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()" class="btn rounded-pill btn-icon btn-outline-danger waves-effect">
                        <span class="ti ti-trash"></span></button>
                    </div>
                </div>
                </div>
            `)
            });
        }

        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")
            }
        }

        $(document).ready(function() {
            $("#input-section").sortable();
            $("#section-website").sortable();
            $("#add-header").click(function() {})

            $("#setting-header-layout").click(function() {
                select_layout($('input[name*="layout_content_id_header"]:checked'), "header")
            })
            $("#setting-footer-layout").click(function() {
                select_layout($('input[name*="layout_content_id_footer"]:checked'), "footer")
            })

            $("#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_edit"),
                        "font_id": localStorage.getItem("font_id_edit"),
                    },
                    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-9"> 
                                                <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")
            })

            $("#card-color").on("click", "input[name='color']", function() {
                localStorage.setItem("color_id_edit", $("input[name='color']:checked").val());
            })
            $("#card-font").on("click", "input[name='font']", function() {
                localStorage.setItem("font_id_edit", $("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) {
                        let color = ``,
                            font = ``,
                            colorId = `{{ !empty($site->ColorId) ? $site->ColorId : '' }}`,
                            fontId = `{{ !empty($site->FontId) ? $site->FontId : '' }} `

                        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}" ${localStorage.getItem("color_id_edit") ? (localStorage.getItem("color_id_edit") == data.ColorId ? "checked" : "") : (colorId == data.ColorId ? "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}" ${localStorage.getItem("font_id_edit") ? (localStorage.getItem("font_id_edit") == data.FontId ? "checked" : "") : (fontId == data.FontId ? "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) {}
                });
            })

            $("#submit_setup").on("click", function() {
                localStorage.removeItem("color_id_edit");
                localStorage.removeItem("font_id_edit");
            })
        })
    </script>
@endsection