@extends('master')

@section('css')
    @include('welcome.style')
@endsection

@section('script')
    @include('welcome.script')
@endsection

@section('content')
    @include('umum.navbar')
    <div class="main-container" id="top">
        {{-- awal layerslider --}}
        <section id="layerslider" style="width:100%;height:100vh;z-index:0;">
            {{-- slide 1 --}}
            <div class="ls-slide" data-ls="slidedelay:8000;transition3d:all">
                <img src="assets/images/slide/bg1.jpg" class="ls-bg" alt="Slide background"/>
                <img src="assets/images/slide/welcomeSiperkasa.png" id="img_selamat_datang" class="ls-l img-fluid" data-ls="offsetxin:0;durationin:4000;rotateyin:450;transformoriginin:right 50% 0;" alt="Responsive image">
            </div>
            {{-- slide 2 --}}
            <div class="ls-slide" data-ls="slidedelay: 8000; transition3d: all;">
                <img src="{{ URL::asset('assets/images/slide/bg2.jpg') }}" class="ls-bg" alt="Slide background" />
                <img src="assets/images/slide/kebutuhanInformasi.png" id="slide2_1" class="ls-l" data-ls="offsetxin:0;durationin:2500;delayin:500;rotateyin:90;skewxin:60;transformoriginin:25% 50% 0;offsetxout:100;durationout:750;skewxout:60;" alt="Image layer">

                <img src="assets/images/slide/standarisasi.png" id="slide2_2" class="ls-l" data-ls="offsetxin:0;durationin:2500;delayin:1500;rotateyin:90;skewxin:60;transformoriginin:25% 50% 0;offsetxout:100;durationout:750;skewxout:60;" alt="Image layer">

                <img src="assets/images/slide/Terkoneksi.png" id="slide2_3" class="ls-l" data-ls="offsetxin:0;durationin:2500;delayin:2000;rotateyin:90;skewxin:60;transformoriginin:25% 50% 0;offsetxout:100;durationout:750;skewxout:60;" alt="Image layer">

                <img src="assets/images/slide/Partisipasi.png" id="slide2_4" class="ls-l" data-ls="offsetxin:0;durationin:2500;delayin:2500;rotateyin:90;skewxin:60;transformoriginin:25% 50% 0;offsetxout:100;durationout:750;skewxout:60;" alt="Image layer">

                <img src="assets/images/slide/memujudkan.png" id="slide2_5" class="ls-l" data-ls="offsetxin:0;durationin:2500;delayin:3000;rotateyin:90;skewxin:60;transformoriginin:25% 50% 0;offsetxout:100;durationout:750;skewxout:60;" alt="Image layer">
            </div>
            {{-- slide 3 --}}
            <div class="ls-slide" data-ls="slidedelay: 8000; transition3d: all;">
                <img src="{{ URL::asset('assets/images/slide/bg3.jpg') }}" class="ls-bg" alt="Slide background" />
                <div class="ls-l"
                    id="slide3_1"
                    
                    data-ls="
                            offsetxin:0;durationin:3500;delayin:500;easingin:easeOutElastic;rotateyin:90;transformoriginin:left 50% 0;">
                    Kabupaten Malang
                </div>
                <div class="ls-l"
                    id="slide3_2"
                    data-ls="
                            offsetxin:0;durationin:1500;delayin:1500;rotateyin:90;skewxin:60;transformoriginin:25% 50% 0;">
                    Madep
                </div>
                <div class="ls-l"
                    id="slide3_3"
                    data-ls="
                            offsetxin:0;durationin:1500;delayin:2000;rotateyin:90;skewxin:60;transformoriginin:25% 50% 0;">
                    Mantep
                </div>
                <div class="ls-l"
                    id="slide3_4"
                    data-ls="
                            offsetxin:0;durationin:1500;delayin:2500;rotateyin:90;skewxin:60;transformoriginin:25% 50% 0;">
                    Manatep
                </div>
            </div>
        </section>
        {{-- akhir layerslider --}}

        {{-- awal Grafik/Chart --}}
        <section id="chart" class="section section-grey">
            <div class="container">
                <div class="row" >
                    <div class="col-lg-12 col-sm-12" data-aos="fade-left" data-aos-duration="1000" data-aos-delay="100">
                        <h2 class="text-primary">Grafik Data</h2>
                        <div class="hr"></div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-12 col-sm-6" data-aos="zoom-in" data-aos-duration="1000" data-aos-delay="400">
                        <div class="widget-box widget-color-blue2">
                            <div class="widget-header widget-header-small">
                                <h6 class="widget-title">
                                    Jumlah Perumahan
                                </h6>
                            </div>
                            <div class="widget-body">
                                <div class="widget-main">
                                    <div id="chartJmlPerumahan" style="height: 440px">
                                        
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="col-xs-12 col-sm-6" data-aos="zoom-in" data-aos-duration="1000" data-aos-delay="800">
                        <div class="widget-box widget-color-blue2">
                            <div class="widget-header widget-header-small">
                                <h6 class="widget-title">
                                    Jumlah Rumah
                                </h6>
                            </div>
                            <div class="widget-body">
                                <div class="widget-main">
                                    <div id="chartJmlRumah" style="height: 440px">
                                        
                                    </div>
                                </div>
                            </div>
                        </div>
                </div>
            </div>
        </section> 
        {{-- akhir Grafik/Chart--}}

        {{-- awal Profil --}}
		<section class="section" id="profil">
			<div class="container">
                <div class="row">
                    <div class="col-lg-12 col-sm-12" data-aos="fade-right" data-aos-duration="1000" data-aos-delay="100">
                        <h2 class="text-primary">Data Perumahan & Lokasi</h2>
                        <div class="hr"></div>
                    </div>
                </div>
                {{-- awal tabel lokasi perumahan --}}
				<div class="row">
                    <div class="col-xs-12 col-sm-12" data-aos="zoom-in" data-aos-duration="1000" data-aos-delay="400" style="margin-bottom: 15px">
                        <div class="widget-box widget-color-blue2">
                            <div class="widget-header widget-header-small">
                                <h6 class="widget-title">
                                    Lokasi Perumahan
                                </h6>
                            </div>
                            <div class="widget-body">
                                <div class="widget-main">
                                    <div id="tabelPerumahan" >
                                        
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
				</div>
                {{-- akhir tabel lokasi perumahan --}}

                {{-- awal peta dan informasi --}}
                <div class="row" data-aos="fade-right" data-aos-duration="1000" data-aos-delay="100">
                    {{-- widget informasi --}}
                    <div class="col-xs-12 col-sm-3" data-aos="zoom-in" data-aos-duration="1000" data-aos-delay="800" style="padding-right: 0px">
                        <div class="widget-box widget-color-blue2" style="height: 400px">
                            <div class="widget-header widget-header-small">
                                <h6 class="widget-title">
                                    Informasi
                                </h6>
                            </div>
                            <div class="widget-body">
                                <div class="widget-main">
                                    <div id="foto" style="height: 300px">
                                        Informasi
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- widget peta --}}
                    <div class="col-xs-12 col-sm-9" data-aos="zoom-in" data-aos-duration="1000" data-aos-delay="1200" style="padding-left: 5px">
                        <div class="widget-box widget-color-blue2" style="height: 400px">
                            <div class="widget-header widget-header-small">
                                <h6 class="widget-title">
                                    Data Lokasi
                                </h6>
                            </div>
                            <div class="widget-body">
                                <div id="map" style="height: 366px">
                                </div>
                            </div>
                        </div>
                    </div>
				</div>
                {{-- akhir peta dan informasi --}}

                {{-- awal Foto --}}
                <div class="row" data-aos="fade-right" data-aos-duration="1000" data-aos-delay="100">
                    <div class="col-xs-12 col-sm-12" data-aos="zoom-in" data-aos-duration="1000" data-aos-delay="1600">
                        <div class="widget-box widget-color-blue2" style="height: 150px">
                            <div class="widget-header widget-header-small">
                                <h6 class="widget-title">
                                    Foto
                                </h6>
                            </div>
                            <div class="widget-body">
                                foto disini
                            </div>
                        </div>
    
                    </div>
                </div>
                {{-- akhir foto --}}
			</div>
            
		</section> 
        {{--akhir RTRW--}}

    </div>
@endsection