@extends('layouts.app')
@section('style')
<style>
    img {
        width: 100%;
        height: auto;
    }

    .item_bg {
        background-color: #fff !important;
        border-color: #000;
        border-radius: 8px;
        border: 1px solid #fff;
        box-shadow: 0px 0 16px 0 #333333;
    }

    .item_bg:hover {
        box-shadow: 0px 0 20px 4px #333333;
    }

    .item_bg .title {
        font-size: 12px;
        font-weight: 600;
        color: #000000;
    }

    .heading-1 {
        position: relative;
        text-align: center;
    }

    .heading-1:before {
        content: "";
        display: block;
        border-top: solid 1px #019FCD;
        width: 200px;
        position: absolute;
        margin-left: auto;
        margin-right: auto;
        left: 0;
        right: 0;
        top: 50%;
        z-index: 0;
    }

    .heading-1 span {
        background: #fff;
        padding: 0 10px;
        position: relative;
        z-index: 1;
    }
</style>
@endsection
@section('content')
<div>
    <section class="services" style="background-color: #019FCD;">
        <div class="container" data-aos="fade-up">
            <div class="section-title text-white">
                <h3>PSMTI {{$nama_cabang}}</h3>
                <p>Website PSMTI {{$nama_cabang}}</p>
            </div>
            <div class="row">
                <div class="col-xl-2 col-md-3 col-sm-4 col-6 mx-auto" data-aos="zoom-in" data-aos-delay="100">
                    <a href="{{$website_cabang}}" target="_blank">
                        <div class="item_bg p-3 mb-5 rounded text-center">
                            <div class="icon"><img style="width: 100px; height: auto" width="100" height="100" src="{{{ URL::asset(config('app.logo')) }}}" class="bx bxl-dribbble"></img></div>
                            <span class="title">{{strtoupper($nama_cabang)}}</span>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </section>

    <!-- SATDIK CABANG -->
    <section class="services">
        <div class="container" data-aos="fade-up">

            <div class="section-title">
                <h3>SATDIK PSMTI <span>{{$nama_cabang}}</span></h3>
                <p>Satuan Pendidikan di bawah naungan PSMTI {{$nama_cabang}}</p>
            </div>

            @if(count($satdik_paud)>0)
            <h4 class="heading-1 text-center"><span>KB</span></h4>
            <div class="row justify-content-md-center">
                @foreach($satdik_paud AS $value)
                <div class="col-lg-3 col-md-4 col-6 mb-2" data-aos="zoom-in" data-aos-delay="200">
                    <a href="{{($value->website!='')?$value->website:'#'}}" target="_blank">
                        <div class="icon-box py-4">
                            <div class="icon"><img style="width: 100%; height: 100%" width="100" height="100" src="{{{ URL::asset(config('app.logo')) }}}" class="bx bx-file"></img></div>
                            <span>{{$value->satdik_nama}}</span>
                        </div>
                    </a>
                </div>
                @endforeach
            </div>
            @endif

            @if(count($satdik_tk)>0)
            <h4 class="heading-1 text-center"><span>TK</span></h4>
            <div class="row justify-content-md-center">
                @foreach($satdik_tk AS $value)
                <div class="col-lg-3 col-md-4 col-6 mb-2" data-aos="zoom-in" data-aos-delay="200">
                    <a href="{{($value->website!='')?$value->website:'#'}}" target="_blank">
                        <div class="icon-box py-4">
                            <div class="icon"><img style="width: 100%; height: 100%" width="100" height="100" src="{{{ URL::asset(config('app.logo')) }}}" class="bx bx-file"></img></div>
                            <span>{{$value->satdik_nama}}</span>
                        </div>
                    </a>
                </div>
                @endforeach
            </div>
            @endif

            @if(count($satdik_sd)>0)
            <h4 class="heading-1 text-center"><span>SD</span></h4>
            <div class="row justify-content-md-center">
                @foreach($satdik_sd AS $value)
                <div class="col-lg-3 col-md-4 col-6 mb-2" data-aos="zoom-in" data-aos-delay="200">
                    <a href="{{($value->website!='')?$value->website:'#'}}" target="_blank">
                        <div class="icon-box py-4">
                            <div class="icon"><img style="width: 100%; height: 100%" width="100" height="100" src="{{{ URL::asset(config('app.logo')) }}}" class="bx bx-file"></img></div>
                            <span>{{$value->satdik_nama}}</span>
                        </div>
                    </a>
                </div>
                @endforeach
            </div>
            @endif

            @if(count($satdik_smp)>0)
            <h4 class="heading-1 text-center"><span>SMP</span></h4>
            <div class="row justify-content-md-center">
                @foreach($satdik_smp AS $value)
                <div class="col-lg-3 col-md-4 col-6 mb-2" data-aos="zoom-in" data-aos-delay="200">
                    <a href="{{($value->website!='')?$value->website:'#'}}" target="_blank">
                        <div class="icon-box py-4">
                            <div class="icon"><img style="width: 100%; height: 100%" width="100" height="100" src="{{{ URL::asset(config('app.logo')) }}}" class="bx bx-file"></img></div>
                            <span>{{$value->satdik_nama}}</span>
                        </div>
                    </a>
                </div>
                @endforeach
            </div>
            @endif

            @if(count($satdik_sma)>0)
            <h4 class="heading-1 text-center"><span>SMA</span></h4>
            <div class="row justify-content-md-center">
                @foreach($satdik_sma AS $value)
                <div class="col-lg-3 col-md-4 col-6 mb-2" data-aos="zoom-in" data-aos-delay="200">
                    <a href="{{($value->website!='')?$value->website:'#'}}" target="_blank">
                        <div class="icon-box py-4">
                            <div class="icon"><img style="width: 100%; height: 100%" width="100" height="100" src="{{{ URL::asset(config('app.logo')) }}}" class="bx bx-file"></img></div>
                            <span>{{$value->satdik_nama}}</span>
                        </div>
                    </a>
                </div>
                @endforeach
            </div>
            @endif

            @if(count($satdik_smk)>0)
            <h4 class="heading-1 text-center"><span>SMK</span></h4>
            <div class="row justify-content-md-center">
                @foreach($satdik_smk AS $value)
                <div class="col-lg-3 col-md-4 col-6 mb-2" data-aos="zoom-in" data-aos-delay="200">
                    <a href="{{($value->website!='')?$value->website:'#'}}" target="_blank">
                        <div class="icon-box py-4">
                            <div class="icon"><img style="width: 100%; height: 100%" width="100" height="100" src="{{{ URL::asset(config('app.logo')) }}}" class="bx bx-file"></img></div>
                            <span>{{$value->satdik_nama}}</span>
                        </div>
                    </a>
                </div>
                @endforeach
            </div>
            @endif

            @if(count($satdik_perwakilan)>0)
            <h4 class="heading-1 text-center"><span>PERWAKILAN</span></h4>
            <div class="row justify-content-md-center">
                @foreach($satdik_perwakilan AS $value)
                <div class="col-lg-3 col-md-4 col-6 mb-2" data-aos="zoom-in" data-aos-delay="200">
                    <a href="{{($value->website!='')?$value->website:'#'}}" target="_blank">
                        <div class="icon-box py-4">
                            <div class="icon"><img style="width: 100%; height: 100%" width="100" height="100" src="{{{ URL::asset(config('app.logo')) }}}" class="bx bx-file"></img></div>
                            <span>{{$value->satdik_nama}}</span>
                        </div>
                    </a>
                </div>
                @endforeach
            </div>
            @endif

        </div>
    </section>
</div>
@endsection