@extends('master')

@push('after-style')
<!-- Add the evo-calendar.css for styling -->
<!-- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/evo-calendar@1.1.2/evo-calendar/css/evo-calendar.min.css" /> -->
<style>
    /* body {
        margin-top: 20px;
    } */

    .timeline {
        border-left: 3px solid #727cf5;
        border-bottom-right-radius: 4px;
        border-top-right-radius: 4px;
        background: rgba(114, 124, 245, 0.09);
        margin: 0 0 0 auto;
        letter-spacing: 0.2px;
        position: relative;
        line-height: 1.4em;
        font-size: 1.03em;
        padding: 50px;
        list-style: none;
        text-align: left;
        max-width: 70%;
    }

    @media (max-width: 767px) {
        .timeline {
            max-width: 98%;
            padding: 25px;
        }
    }

    .timeline h1 {
        font-weight: 300;
        font-size: 1.4em;
    }

    .timeline h2,
    .timeline h3 {
        font-weight: 600;
        font-size: 1rem;
        margin-bottom: 10px;
    }

    .timeline .event {
        border-bottom: 1px dashed #e8ebf1;
        /* padding-bottom: 25px;
        margin-bottom: 25px; */
        position: relative;
    }

    @media (max-width: 767px) {
        .timeline .event {
            padding-top: 30px;
        }
    }

    .timeline .event:last-of-type {
        padding-bottom: 0;
        margin-bottom: 0;
        border: none;
    }

    .timeline .event:before,
    .timeline .event:after {
        position: absolute;
        display: block;
        top: 0;
    }

    .timeline .event:before {
        left: -207px;
        content: attr(data-date);
        text-align: right;
        font-weight: 100;
        font-size: 0.9em;
        min-width: 120px;
    }

    @media (max-width: 767px) {
        .timeline .event:before {
            left: 0px;
            text-align: left;
        }
    }

    .timeline .event:after {
        -webkit-box-shadow: 0 0 0 3px #727cf5;
        box-shadow: 0 0 0 3px #727cf5;
        left: -55.8px;
        background: #fff;
        border-radius: 50%;
        height: 9px;
        width: 9px;
        content: "";
        top: 5px;
    }

    @media (max-width: 767px) {
        .timeline .event:after {
            left: -31.8px;
        }
    }

    .rtl .timeline {
        border-left: 0;
        text-align: right;
        border-bottom-right-radius: 0;
        border-top-right-radius: 0;
        border-bottom-left-radius: 4px;
        border-top-left-radius: 4px;
        border-right: 3px solid #727cf5;
    }

    .rtl .timeline .event::before {
        left: 0;
        right: -170px;
    }

    .rtl .timeline .event::after {
        left: 0;
        right: -55.8px;
    }
</style>
@endpush

@section('content')

<section>
    <div class="container">
        <section id="ABdev_main_slider">
            <!-- START REVOLUTION SLIDER 4.6.0 fullwidth mode -->

            <div id="rev_slider_1_1_wrapper" class="rev_slider_wrapper fullwidthbanner-container" style="margin:0px auto;background-color:#E9E9E9;padding:0px;margin-top:0px;margin-bottom:0px;max-height:520px;">

                <div id="rev_slider_1_1" class="rev_slider fullwidthabanner" style="display:none;max-height:520px;height:520px;">
                    <ul>
                                            </ul>
                    <div class="tp-bannertimer tp-bottom" style="visibility: hidden !important;"></div>

                </div>



            </div><!-- END REVOLUTION SLIDER -->
        </section>
    </div>
</section>

<!-- <section class="dnd_section_dd no_padding">

        <div class="dnd_section_content">
            <div class="dnd_container">
                <div class="dnd_column_dd_span12 ">
                    <div class="dnd-callout_box dnd-callout_box_style_3 "><span class="dnd-callout_box_title">ARE YOU READY FOR AWESOMENESS? THIS IS CALL TO ACTION</span>
                        <p></p><a href="#" target="_self" class="dnd-button1 dnd-button_blue dnd-button_rounded dnd-button_large">PURCHASE NOW</a>
                    </div>
                </div>
            </div>
        </div>


    </section> -->

<!-- bagian about page -->
<section class="dnd_section_dd " style="background-color:#ffffff;padding-top:0px;">
    <div class="dnd_section_content">
        <div class="dnd_container">
            <div class="dnd_column_dd_span6 ">
                <div class="dnd-animo " data-animation="fadeInLeft" data-duration="1000" data-delay="0">
                    <img src="{{ asset('assets/images/about-us/'.$about_us->about_us_image) }}" alt="">
                </div>
                <span class="clear spacer_responsive_hide_tablet" style="height:20px;display:block;"></span>
            </div>

            <div class="dnd_column_dd_span6 ">
                <h5><span>Tentang Kami</span></h5>
                {!! $about_us->about_us_content !!}
            </div>
        </div>
</section>

<section class="dnd_section_dd section_with_header" style="background-color:#f5f6f8;">
    <header>
        <div class="dnd_container">
            <h3>TIM LAB TERPADU</h3>
            <!-- <p>
                We possess within us two minds. So far I have written only of the conscious mind. I would now like to introduce you to your second mind, the hidden and mysterious subconscious. Our subconscious mind contains such power and complexity that it literally staggers the imagination.
            </p> -->
        </div>
    </header>
    <div class="dnd_section_content">
        <div class="dnd_container">
                    </div>
    </div>

</section>

<!-- <section class="dnd_section_dd " style="background-color:#ffffff;padding-top:0px;">
    <div class="dnd_section_content">
        <div class="dnd_container">
            <div id="calendar"></div>
        </div>
</section> -->


<section class="dnd_section_dd">
    <header>
        <div class="dnd_container">
            <h3>Pengumuman</h3>
        </div>
    </header>

    <div class="dnd_section_content">
        <div class="dnd_container">
                        <div style="width: 100%;text-align:center;">
                <a href="{{ url('/announcement')}}" class="btn btn-primary btn-sm btn-rounded">Lihat Semua Pengumuman</a>
            </div>
        </div>
    </div>
</section>

<section class="dnd_section_dd" style="padding-top: 0px !important;">

    <div class="dnd_section_content">
        <div class="dnd_container">

            <div class="dnd_column_dd_span6 ">
                <h3 class="column_title_left"><span>Berita</span></h3>
                                <a href="{{ url('news') }}" class="btn btn-primary btn-sm btn-rounded">Lihat Berita Lainnya</a>
            </div>

            <div class="dnd_column_dd_span6 left_column">

                <h3 class="column_title_left"><span>Event</span></h3>

                <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-body">
                                <h6 class="card-title" style="margin-right: 0px !important;max-width:70% !important;">Timeline</h6>
                                <div id="content">
                                    <ul class="timeline">
                                                                            </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


</section>
<!-- End Featured Portfolio -->
@endsection

@push('after-script')
<!-- Add jQuery library (required) -->
<!-- <script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"></script> -->

<!-- Add the evo-calendar.js for.. obviously, functionality! -->
<!-- <script src="https://cdn.jsdelivr.net/npm/evo-calendar@1.1.2/evo-calendar/js/evo-calendar.min.js"></script> -->

<script>
    // $("#calendar").evoCalendar();
    // jQuery('#calendar').evoCalendar({
    //     calendarEvents: [{
    //             id: 'bHay68s', // Event's ID (required)
    //             name: "New Year", // Event name (required)
    //             date: "November/15/2022", // Event date (required)
    //             type: "holiday", // Event type (required)
    //             everyYear: true // Same event every year (optional)
    //         },
    //         {
    //             name: "Vacation Leave",
    //             badge: "02/13 - 02/15", // Event badge (optional)
    //             date: ["November/11/2022", "November/14/2022"], // Date range
    //             description: "Vacation leave for 3 days.", // Event description (optional)
    //             type: "event",
    //             color: "#63d867" // Event custom color (optional)
    //         }
    //     ]
    // });
</script>

<script type="text/javascript">
    /******************************************
					-	PREPARE PLACEHOLDER FOR SLIDER	-
				******************************************/


    var setREVStartSize = function() {
        var tpopt = new Object();
        tpopt.startwidth = 1170;
        tpopt.startheight = 520;
        tpopt.container = jQuery('#rev_slider_1_1');
        tpopt.fullScreen = "off";
        tpopt.forceFullWidth = "off";

        tpopt.container.closest(".rev_slider_wrapper").css({
            height: tpopt.container.height()
        });
        tpopt.width = parseInt(tpopt.container.width(), 0);
        tpopt.height = parseInt(tpopt.container.height(), 0);
        tpopt.bw = tpopt.width / tpopt.startwidth;
        tpopt.bh = tpopt.height / tpopt.startheight;
        if (tpopt.bh > tpopt.bw) tpopt.bh = tpopt.bw;
        if (tpopt.bh < tpopt.bw) tpopt.bw = tpopt.bh;
        if (tpopt.bw < tpopt.bh) tpopt.bh = tpopt.bw;
        if (tpopt.bh > 1) {
            tpopt.bw = 1;
            tpopt.bh = 1
        }
        if (tpopt.bw > 1) {
            tpopt.bw = 1;
            tpopt.bh = 1
        }
        tpopt.height = Math.round(tpopt.startheight * (tpopt.width / tpopt.startwidth));
        if (tpopt.height > tpopt.startheight && tpopt.autoHeight != "on") tpopt.height = tpopt.startheight;
        if (tpopt.fullScreen == "on") {
            tpopt.height = tpopt.bw * tpopt.startheight;
            var cow = tpopt.container.parent().width();
            var coh = jQuery(window).height();
            if (tpopt.fullScreenOffsetContainer != undefined) {
                try {
                    var offcontainers = tpopt.fullScreenOffsetContainer.split(",");
                    jQuery.each(offcontainers, function(e, t) {
                        coh = coh - jQuery(t).outerHeight(true);
                        if (coh < tpopt.minFullScreenHeight) coh = tpopt.minFullScreenHeight
                    })
                } catch (e) {}
            }
            tpopt.container.parent().height(coh);
            tpopt.container.height(coh);
            tpopt.container.closest(".rev_slider_wrapper").height(coh);
            tpopt.container.closest(".forcefullwidth_wrapper_tp_banner").find(".tp-fullwidth-forcer").height(coh);
            tpopt.container.css({
                height: "100%"
            });
            tpopt.height = coh;
        } else {
            tpopt.container.height(tpopt.height);
            tpopt.container.closest(".rev_slider_wrapper").height(tpopt.height);
            tpopt.container.closest(".forcefullwidth_wrapper_tp_banner").find(".tp-fullwidth-forcer").height(tpopt.height);
        }
    };

    /* CALL PLACEHOLDER */
    setREVStartSize();


    var tpj = jQuery;
    tpj.noConflict();
    var revapi1;

    tpj(document).ready(function() {

        if (tpj('#rev_slider_1_1').revolution == undefined)
            revslider_showDoubleJqueryError('#rev_slider_1_1');
        else
            revapi1 = tpj('#rev_slider_1_1').show().revolution({
                dottedOverlay: "none",
                delay: 5000,
                startwidth: 1170,
                startheight: 520,
                hideThumbs: 200,

                thumbWidth: 100,
                thumbHeight: 50,
                thumbAmount: 3,


                simplifyAll: "off",

                navigationType: "bullet",
                navigationArrows: "none",
                navigationStyle: "round",

                touchenabled: "on",
                onHoverStop: "on",
                nextSlideOnWindowFocus: "off",

                swipe_threshold: 0.7,
                swipe_min_touches: 1,
                drag_block_vertical: false,

                parallax: "scroll",
                parallaxBgFreeze: "on",
                parallaxLevels: [5, 10, 15, 20, 25, 30, 35, 40, 45, 50],
                parallaxDisableOnMobile: "on",


                keyboardNavigation: "off",

                navigationHAlign: "center",
                navigationVAlign: "bottom",
                navigationHOffset: 0,
                navigationVOffset: 40,

                soloArrowLeftHalign: "left",
                soloArrowLeftValign: "center",
                soloArrowLeftHOffset: 20,
                soloArrowLeftVOffset: 0,

                soloArrowRightHalign: "right",
                soloArrowRightValign: "center",
                soloArrowRightHOffset: 20,
                soloArrowRightVOffset: 0,

                shadow: 0,
                fullWidth: "on",
                fullScreen: "off",

                spinner: "spinner0",

                stopLoop: "off",
                stopAfterLoops: -1,
                stopAtSlide: -1,

                shuffle: "off",

                autoHeight: "off",
                forceFullWidth: "off",


                hideTimerBar: "on",
                hideThumbsOnMobile: "off",
                hideNavDelayOnMobile: 1500,
                hideBulletsOnMobile: "off",
                hideArrowsOnMobile: "off",
                hideThumbsUnderResolution: 0,

                hideSliderAtLimit: 0,
                hideCaptionAtLimit: 601,
                hideAllCaptionAtLilmit: 0,
                startWithSlide: 0
            });




    }); /*ready*/
</script>

<script type="text/javascript">
    /******************************************
					-	PREPARE PLACEHOLDER FOR SLIDER	-
				******************************************/
    var setREVStartSize = function() {
        var tpopt = new Object();
        tpopt.startwidth = 570;
        tpopt.startheight = 338;
        tpopt.container = jQuery('#rev_slider_2_1');
        tpopt.fullScreen = "off";
        tpopt.forceFullWidth = "off";
        tpopt.container.closest(".rev_slider_wrapper").css({
            height: tpopt.container.height()
        });
        tpopt.width = parseInt(tpopt.container.width(), 0);
        tpopt.height = parseInt(tpopt.container.height(), 0);
        tpopt.bw = tpopt.width / tpopt.startwidth;
        tpopt.bh = tpopt.height / tpopt.startheight;
        if (tpopt.bh > tpopt.bw) tpopt.bh = tpopt.bw;
        if (tpopt.bh < tpopt.bw) tpopt.bw = tpopt.bh;
        if (tpopt.bw < tpopt.bh) tpopt.bh = tpopt.bw;
        if (tpopt.bh > 1) {
            tpopt.bw = 1;
            tpopt.bh = 1
        }
        if (tpopt.bw > 1) {
            tpopt.bw = 1;
            tpopt.bh = 1
        }
        tpopt.height = Math.round(tpopt.startheight * (tpopt.width / tpopt.startwidth));
        if (tpopt.height > tpopt.startheight && tpopt.autoHeight != "on") tpopt.height = tpopt.startheight;
        if (tpopt.fullScreen == "on") {
            tpopt.height = tpopt.bw * tpopt.startheight;
            var cow = tpopt.container.parent().width();
            var coh = jQuery(window).height();
            if (tpopt.fullScreenOffsetContainer != undefined) {
                try {
                    var offcontainers = tpopt.fullScreenOffsetContainer.split(",");
                    jQuery.each(offcontainers, function(e, t) {
                        coh = coh - jQuery(t).outerHeight(true);
                        if (coh < tpopt.minFullScreenHeight) coh = tpopt.minFullScreenHeight
                    })
                } catch (e) {}
            }
            tpopt.container.parent().height(coh);
            tpopt.container.height(coh);
            tpopt.container.closest(".rev_slider_wrapper").height(coh);
            tpopt.container.closest(".forcefullwidth_wrapper_tp_banner").find(".tp-fullwidth-forcer").height(coh);
            tpopt.container.css({
                height: "100%"
            });
            tpopt.height = coh;
        } else {
            tpopt.container.height(tpopt.height);
            tpopt.container.closest(".rev_slider_wrapper").height(tpopt.height);
            tpopt.container.closest(".forcefullwidth_wrapper_tp_banner").find(".tp-fullwidth-forcer").height(tpopt.height);
        }
    };
    /* CALL PLACEHOLDER */
    setREVStartSize();
    var tpj = jQuery;
    tpj.noConflict();
    var revapi2;
    tpj(document).ready(function() {
        if (tpj('#rev_slider_2_1').revolution == undefined)
            revslider_showDoubleJqueryError('#rev_slider_2_1');
        else
            revapi2 = tpj('#rev_slider_2_1').show().revolution({
                dottedOverlay: "none",
                delay: 9000,
                startwidth: 570,
                startheight: 338,
                hideThumbs: 200,
                thumbWidth: 100,
                thumbHeight: 50,
                thumbAmount: 1,
                simplifyAll: "off",
                navigationType: "none",
                navigationArrows: "solo",
                navigationStyle: "round",
                touchenabled: "on",
                onHoverStop: "on",
                nextSlideOnWindowFocus: "off",
                swipe_threshold: 0.7,
                swipe_min_touches: 1,
                drag_block_vertical: false,
                keyboardNavigation: "off",
                navigationHAlign: "center",
                navigationVAlign: "bottom",
                navigationHOffset: 0,
                navigationVOffset: 20,
                soloArrowLeftHalign: "left",
                soloArrowLeftValign: "center",
                soloArrowLeftHOffset: 20,
                soloArrowLeftVOffset: 20,
                soloArrowRightHalign: "right",
                soloArrowRightValign: "center",
                soloArrowRightHOffset: 20,
                soloArrowRightVOffset: 20,
                shadow: 0,
                fullWidth: "on",
                fullScreen: "off",
                spinner: "spinner0",
                stopLoop: "off",
                stopAfterLoops: -1,
                stopAtSlide: -1,
                shuffle: "off",
                autoHeight: "off",
                forceFullWidth: "off",
                hideTimerBar: "on",
                hideThumbsOnMobile: "off",
                hideNavDelayOnMobile: 1500,
                hideBulletsOnMobile: "off",
                hideArrowsOnMobile: "off",
                hideThumbsUnderResolution: 0,
                hideSliderAtLimit: 0,
                hideCaptionAtLimit: 0,
                hideAllCaptionAtLilmit: 0,
                startWithSlide: 0
            });
    }); /*ready*/
</script>
@endpush