@extends('layouts.cthemes.main')

@section('content')
<style>
    .content-wrapper::before {
        display: none!important;
    }
    img.image_logo {
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
    }
    .customer-menu>li>a .text_desc {
        text-transform: none;
        color: #4d5156;
        font-family: arial,sans-serif;
        font-size: 14px;
        font-weight: normal;
    }
    @media(max-width:991.98px){
        .customer-menu>li , .customer-menu.customer-menu-lite>li {
            width: 100%!important;
        }
        .section--hero__splash {
            /* margin-bottom: 60px; */
        }
    }
    @media (min-width: 992px){
        .section--hero__splash {
            position: absolute;
            top: 200px;
            right: 120px;
            overflow: hidden;
            width:60%
        }
    }
</style>
<main class="main">
    <div class="section--hero__splash ">
        <img class="image_logo" src="{{ asset('global_assets/images/tsi_cloud.jpg') }}?v={{ config('view.app_versi', '@c4k_7ud') }}"
            sizes="(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 800px, 100vw" style="max-width: 100%;">               
    </div>
    <div class="container container-welcome">
        <div class="row">
            <div class="col-lg-7 col-md-12 col-sm-12 col-xs-12 pl-lg-5">
                <div class="pl-0 content-wrapper" style="min-height: 500px;">
                    <div class="page-header _d-none _d-sm-block">
                        <h1 class="text-primary title">Amazing<br>Teknologi Sistem Informasi </h1>
                    </div>
                    <div class="content text-justify">
                        <h1>Our mission is to <br><span class="text-primary">organize</span> <span class="text-danger">information</span> <br>and make it <br><span class="text-success">universally accessible</span> <bR>and <span class="text-warning">useful</span>.</h1>
                        <!-- <div>Bagian Teknologi Sistem Informasi (TSI) telah berkomitmen untuk memberikan layanan Teknologi Informasi yang prima dan 
                        optimal dalam rangka memacu bisnis Perusahaan , 
                        dengan bertransformasi menjadi penyedia layanan Teknologi Informasi yang profesional dengan 
                        mengimplementasikan standar.</div> -->
                    </div>
                </div>
            </div>
            <div class="my-5 col-lg-5 col-md-12 col-sm-12 pr-lg-0 pt-lg-5 _d-flex _align-items-center">
                <!-- <img class="image_logo" src="{{ asset('global_assets/images/tsi.jpg') }}?v={{ config('view.app_versi', '@c4k_7ud') }}"
                sizes="(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 800px, 100vw" style="max-width: 100%;"> -->
            </div>
        </div>
    </div>
    
    <section class="mb-3 mb-sm-1 pt-2 pb-sm-5">
        <div class="container">
            <div class="row">
                <div class="col-xl-12 col-lg-12 order-1 order-lg-2 mb-3 pr-xl-0">
                    <div class="bg-light-blue px-3 py-4 rounded-lg">
                        <ul class="customer-menu customer-menu-lite d-block d-md-flex flex-wrap justify-content-between">
                            <li class="px-2">
                                <a href="javascript:void(0);">
                                    <img class="medium-tile--icon" src="{{ asset('global_assets/images/icon/box_96.png') }}" alt="mobile"> 
                                    <!-- <span class="icon_ customer-service"></span> -->
                                    <span class="mb-2 text_">Information System</span>                                    
                                    <span class="text_desc">Software Aplikasi</span>
                                </a>
                            </li>
                            <li class="px-2">
                                <a href="javascript:void(0);">
                                    <img class="medium-tile--icon" src="{{ asset('global_assets/images/icon/wifi_96.png') }}" alt="mobile"> 
                                    <!-- <span class="icon_ customer-service"></span> -->
                                    <span class="mb-2 text_">Infrastructure</span>                                    
                                    <span class="text_desc">Infrastuktur, Jaringan &amp; Hardware</span>
                                </a>
                            </li>
                            <li class="px-2">
                                <a href="javascript:void(0);">
                                    <img class="medium-tile--icon" src="{{ asset('global_assets/images/icon/designer_96.png') }}" alt="mobile"> 
                                    <!-- <span class="icon_ customer-service"></span> -->
                                    <span class="mb-2 text_">Development</span>                                    
                                    <span class="text_desc">Pengembangan Teknologi Informasi</span>
                                </a>
                            </li>
                            <li class="px-2 d-none">
                                <a href="javascript:void(0);">
                                    <img class="medium-tile--icon" src="{{ asset('global_assets/images/icon/scan_96.png') }}" alt="mobile"> 
                                    <!-- <span class="icon_ customer-service"></span> -->
                                    <span class="mb-2 text_">Instrument</span>                                    
                                    <span class="text_desc">Instrumentasi dan Kontrol Digital</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>
       
</main>
@endsection

@section('other_javascripts')

<script type="text/javascript" src="{{ asset('/') }}global_assets/themes/cthemes/vendors/clamp.min.js"></script>

@if (count($data) > 0)
<div class="modal fade" id="poster" aria-hidden="true" data-keyboard="false" style="z-index: 9999999;">
    <div class="modal-dialog">
        <div class="modal-content card-gtheme border-0 p-0">
            <div class="modal-header">
                <h5 class="modal-title" id="myModalLabel"></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div id="carouselK3" class="carousel slide" data-ride="carousel" data-interval="3500">
                    <div class="carousel-inner">
                        @foreach ($data as $key => $row)
                        <div class="carousel-item {{ $key == 0 ? 'active' : '' }}">
                            <img src="{{ asset($row) }}" class="d-block w-100" height="650">
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    $(window).on('load', function() {
        $('#poster').modal('show');
    });
</script>
@endif

@endsection