@extends('layouts.layout')
@section('title', 'Website Resmi Pemerintah Desa '. $village->nama_desa  .' - Beranda')
<link rel="stylesheet" href="{{ asset("css/style.css") }}">
@section('content')
@include('sweetalert::alert')

<section>
    <div class="row my-5 mx-3">
        <div class="col-12 col-lg-7 order-2 order-lg-1" style="display: grid; align-content: center; align-items: center;">
            <h3 class="text-white" style="font-weight: 700; line-height: 32px; margin-left: 2px;">Selamat Datang di Layanan Klipaa Surat</h3>
            <h1 class="text-lead text-white" style="font-weight: 700; line-height: 1.2; font-size: 45px;">DESA
                {{ Str::upper($village->nama_desa) }}</h1>
            <h3 class="text-lead text-white" style="font-weight: 700; font-size:30px">KECAMATAN
                {{ Str::upper($village->nama_kecamatan) }}</h3>
            <h4 class="text-lead text-white" style="font-weight: 700; font-size: 20px;">
                {{ Str::upper($village->nama_kabupaten) }}</h4>
            <div style="border: 2px dashed white; border-radius: 45px" class="my-2 mx--3">
                <div class="m-1"
                    style="border-radius: 43px;  background: linear-gradient(135deg, #32263E 0%, #231E22 100%);">
                    <div class="card-body text-white" style="display: flex; gap:20px">
                        <div class="ronded" style="
                                border-radius: 100%;
                                margin: auto 20px; padding: 10px;
                                background: linear-gradient(135deg, #CE84CB 0%, #993F95 100%);
                            ">
                            <img src="{{ asset('img/info.svg') }}">
                        </div>
                        <p style="margin: 0;">Dengan menggunakan layanan surat website Desa {{ ucwords($village->nama_desa) }}, masyarakat dapat
                            dengan mudah membuat beberapa surat secara online.
                        </p>
                    </div>
                </div>
            </div>
                <h3 class="text-white">Sudah ada {{ count($surat) }} surat layanan keterangan desa yang dibuat di Desa {{ $village->nama_desa }}</h3>
                <a href="{{ route('layanan-surat') }}" class="btn btn-md" style="text-decoration: none;background:  #F7A4A4;color: white">Klik Disini Lihat Daftar Layanan Surat</a>
        </div>
        <div class="col-12 col-lg-5 order-1 order-lg-2">
            <img class="hero-img" src="{{ asset('img/beranda_img.svg') }}" alt="teamwork" style="
                max-width: 580px; max-height: 500px;
                background-position: center; background-size: cover;
                margin-top: -10px; margin-left: -70px;
            ">
        </div>
    </div>
</section>

@endsection

@push('scripts')
<script src="{{ asset('js/owl.carousel.min.js') }}"></script>
<script src="{{ asset('js/jquery.fancybox.js') }}"></script>
<script src="{{ asset('js/apbdes.js') }}"></script>
<script>
    $(document).ready(function () {
        $('#owl-one').owlCarousel({
            loop: true,
            autoplay: true,
            autoplayTimeout: 3000,
            autoplayHoverPause: true,
            smartSpeed:1000,
            responsive: {
                0: {
                    items: 1
                },
                600: {
                    items: 1
                },
                1000: {
                    items: 1
                }
            }
        });
    });

</script>
@endpush