@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 Surat Desa</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>
                   <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 style="border: 2px dashed white; border-radius: 45px" class="my-2 mx--1">
                <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; justify-items: start; justify-content: start;">
                        <div class="ronded"
                            >
                            <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> --}}
               </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