$(document).ready(function () {
    //

    function autoSetColor(btn, set, bg = true) {
        $(btn).change(function (e) {
            e.preventDefault();

            let color = $(this).val();
            if (bg != true) {
                $(set).css("color", color);
            } else {
                $(set).css("background-color", color);
            }
        });
    }

    //
    autoSetColor("input[name=solutions_text_color]", "#services h2", false);
    autoSetColor("input[name=solutions_bg]", "#services", true);
    autoSetColor("input[name=maps_bg]", "#map", true);
    autoSetColor("input[name=solutions_card_bg]", ".service-box", true);

    $("input[name=solutions_card_color]").change(function (e) {
        e.preventDefault();
        let color = $(this).val();
        $(".serv-title").attr("style", "color: " + color + " !important");
    });

    autoSetColor("input[name=partners_bg]", "#partners", true);
    autoSetColor("input[name=partners_text_color]", "#partners h2", false);
    autoSetColor("input[name=partners_card_bg]", ".partner-box", true);
    autoSetColor("input[name=industries_bg]", "#industries", true);

    autoSetColor("input[name=industries_text_color]", "#industries h2", false);

    autoSetColor("input[name=industries_card_bg]", ".industries-box", true);

    $("input[name=industries_card_color]").change(function (e) {
        e.preventDefault();
        let color = $(this).val();
        $("#industries .title ").attr(
            "style",
            "color: " + color + " !important"
        );
        $("#industries p ").attr("style", "color: " + color + " !important");
    });

    $("input[name=solutions_text_title_ar]").keyup(function (e) {
        $("#services h2").text($(this).val());
    });

    $("input[name=partners_text_title_ar]").keyup(function (e) {
        $("#partners h2").text($(this).val());
    });

    $("input[name=industries_text_title_ar]").keyup(function (e) {
        $("#industries h2").text($(this).val());
    });
    $("input[name=maps_text_title_ar]").keyup(function (e) {
        $("#map h2").text($(this).val());
    });

    $("input[name=maps_text_color]").change(function (e) {
        e.preventDefault();
        let color = $(this).val();
        $("#map h2").attr("style", "color: " + color + " !important");
    });

    $("input[name=partners_text_color]").change(function (e) {
        e.preventDefault();
        let color = $(this).val();
        $(".serv-title").attr("style", "color: " + color + " !important");
    });

    $("#logo_size").change(function (e) {
        e.preventDefault();
        $("#navbar-brand-logo").css("width", $(this).val() + "px");
    });

    $("#fat_logo_size").change(function (e) {
        e.preventDefault();
        $("#fat-barnd-logo").css("width", $(this).val() + "px");
    });




    /**
     * Font Size
     */
    $("#solutions_text_title_size").change(function (e) {
        e.preventDefault();
        $("#services h2").css("font-size", $(this).val() + "px");
    });


    /**
     * Font Size
     */
    $("#partners_text_title_size").change(function (e) {
        e.preventDefault();
        $("#partners h2").css("font-size", $(this).val() + "px");
    });




    /**
     * Font Size
     */
    $("#industries_text_title_size").change(function (e) {
        e.preventDefault();
        $("#industries h2").css("font-size", $(this).val() + "px");
    });

      /**
     * Font Size
     */
      $("#maps_text_title_size").change(function (e) {
        e.preventDefault();
        $("#map h2").css("font-size", $(this).val() + "px");
    });





    //

    $("#radio-maps-image").click(function (e) {
        $(".bg-type-choose-result").empty();
        $(".bg-type-choose-result").append(
            `<div class="form-group"><input type="file" name="maps_bg" data-name="maps_bg" data-laravel-translatable="maps_bg--lara-trans-error" required="" accept="image/*"></div>`
        );
    });

    $("#radio-maps-color").click(function (e) {
        $(".bg-type-choose-result").empty();
        $(".bg-type-choose-result").append(
            `<div class="form-group"><input type="color" name="maps_bg" data-name="maps_bg" data-laravel-translatable="maps_bg--lara-trans-error" required></div>`
        );
    });

    $("#radio-solutions-image").click(function (e) {
        $(".bg-type-choose-result").empty();
        $(".bg-type-choose-result").append(
            `<div class="form-group"><input type="file" name="solutions_bg" data-name="solutions_bg" data-laravel-translatable="solutions_bg--lara-trans-error" required="" accept="image/*"></div>`
        );
    });

    $("#radio-solutions-color").click(function (e) {
        $(".bg-type-choose-result").empty();
        $(".bg-type-choose-result").append(
            `<div class="form-group"><input type="color" name="solutions_bg" data-name="solutions_bg" data-laravel-translatable="solutions_bg--lara-trans-error" required></div>`
        );
    });

    $("#input_solutions_card_radius").change(function (e) {
        e.preventDefault();
        $("#services .service-box").css("border-radius", $(this).val() + "px");
    });

    $("#radio-partners-image").click(function (e) {
        $(".bg-type-choose-result").empty();
        $(".bg-type-choose-result").append(
            `<div class="form-group"><input type="file" name="partners_bg" data-name="partners_bg" data-laravel-translatable="partners_bg--lara-trans-error" required="" accept="image/*"></div>`
        );
    });

    $("#radio-partners-color").click(function (e) {
        $(".bg-type-choose-result").empty();
        $(".bg-type-choose-result").append(
            `<div class="form-group"><input type="color" name="partners_bg" data-name="partners_bg" data-laravel-translatable="partners_bg--lara-trans-error" required></div>`
        );
    });

    $("#input_partners_card_radius").change(function (e) {
        e.preventDefault();
        $(".partner-box").css("border-radius", $(this).val() + "px");
    });

    $("#radio-industries-image").click(function (e) {
        $(".bg-type-choose-result").empty();
        $(".bg-type-choose-result").append(
            `<div class="form-group"><input type="file" name="industries_bg" data-name="industries_bg" data-laravel-translatable="industries_bg--lara-trans-error" required="" accept="image/*"></div>`
        );
    });

    $("#radio-industries-color").click(function (e) {
        $(".bg-type-choose-result").empty();
        $(".bg-type-choose-result").append(
            `<div class="form-group"><input type="color" name="industries_bg" data-name="industries_bg" data-laravel-translatable="industries_bg--lara-trans-error" required></div>`
        );
    });

    $("#input_industries_card_radius").change(function (e) {
        e.preventDefault();
        $(".industries-box").css("border-radius", $(this).val() + "px");
    });

    /**
     * Slide Tabs
     */
    $(".aside-main-section-names").click(function (e) {
        e.preventDefault();
        let btn = $(this),
            targetSection = btn.attr("data-target-section");

        $(targetSection).fadeToggle(100);
        btn.toggleClass("aside-main-section-names-active");
    });
    $(".aside-sub-section-names").click(function (e) {
        e.preventDefault();
        let btn = $(this),
            targetSection = btn.attr("data-target-section");

        $(targetSection).fadeToggle(100);
    });

    $("#btn-add-new-slider-title-desc").click(function (e) {
        e.preventDefault();
        $("#form-store-title-desc .itmes").append(
            `<div class="row parent-slider-title-desc-row"><div class="col-12 pb-3"><hr style="border-color:#000;"></div><div class="col-10 pl-0"><div class="form-group"><select required name="header_title_desc_lang[]" id="header_title_desc_lang[]" data-name="header_title_desc_lang" class="font-14" placeholder="اختر اللغه"><option value="" selected="" disabled="">اختر اللغه</option><option value="العربية">العربية</option><option value="English">English</option></select></div></div><div class="col-1"><button type="submit" class="btn-remove-slider-title-desc text-danger mt-2 text-left"><i class="fa fa-trash-alt"></i></button></div><div class="col-10 pl-0"><div class="form-group"><input type="text" name="header_title[]" value="" data-name="header_title" data-laravel-translatable="header_title--lara-trans-error" class="font-14" required="" placeholder="العنوان"></div><div class="form-group"><textarea rows="7" name="header_desc[]" id="header_desc[]" data-name="header_desc" data-laravel-translatable="header_desc--lara-trans-error" class="font-14" required="" placeholder="الوصف كل وصف سوف يظهر مع العنوان الخاص به"></textarea></div></div></div>`
        );
        removeTitleDescSection();
    });

    function removeTitleDescSection() {
        $(".btn-remove-slider-title-desc").click(function (e) {
            e.preventDefault();
            let target = $(this);
            target.parents(".parent-slider-title-desc-row").slideUp(250);
            setTimeout(function () {
                target.parents(".parent-slider-title-desc-row").remove();
            }, 250);
        });
    }
    removeTitleDescSection();

    /**
     *
     *
     *
     *
     *
     *
     *
     *
     *
     *
     *
     *
     *
     *
     *
     *
     *
     */

    /*|||||||||||||||||||||||| Default js ||||||||||||||||||||||||||||*/
    $(".owl-carousel").owlCarousel({
        loop: true,
        autoplay: true,
        autoplayTimeout: 2000, // 5 seconds
        autoplaySpeed: 1000, // 1 second
        smartSpeed: 1000, // 1 second
        autoplayHoverPause: true,
        margin: 10,
        nav: false,
        responsive: {
            0: {
                items: 2,
            },
            600: {
                items: 3,
            },
            1000: {
                items: 5,
            },
        },
    });

    // Get First Element Conetent
    let content = document.querySelectorAll("#home-header .content"),
        currentIndex = 0;
    setInterval(function () {
        $(content[currentIndex]).removeClass("active");
        ++currentIndex;

        // Check IF Not Exist This Section Conetnt
        if (content[currentIndex] == undefined) {
            currentIndex = 0;
        }
        $(content[currentIndex]).addClass("active");
    }, 5000);
});














