@extends('layouts.layout')
@section('title','Layanan Surat')
<link rel="stylesheet" href="{{ asset("css/style.css") }}">
@section('content')
@include('sweetalert::alert')

<section class="pt-5">
    <div class="row">
        <div class="col-md">
            <div class="header-body text-center">
                <div class="row justify-content-center">
                    <div class="col-lg-auto col-md-6">
                        <h1 class="text-white" style="font-weight: 700;">Tersedia {{ $surat->count() }} Daftar Layanan Surat</h1>
                        {{-- <h3 class="text-white" >dari Desa {{ $village->nama_desa }}</h3> --}}
                    </div>
                </div>
            </div>
        </div>
    </div>
    <form>
        <div class="row justify-content-center mt-4">
            <div class="col-xl-10 m-3">
                <div class="input-group mb-3">
                    <input type="text" class="form-control" placeholder="Cari nama surat disini..." type="text" name="cari" id="cari" value="{{ request('cari') }}" style="
                        padding: 30px;font-size: 16px;
                        border-top-left-radius: 10px; border-bottom-left-radius: 10px;
                    ">
                    <div class="input-group-append">
                        <span class="input-group-text" style="
                            border-top-right-radius: 10px; border-bottom-right-radius: 10px;
                        "><i class="fas fa-search" style="font-size: 15px; margin-right: 10px;"></i>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </form>
</section>

<section>
    <div class="mt-4" style="display: flex; flex-wrap: wrap;  justify-content: center">
        @forelse ($surat as $item)
        <a class="text-center" href="{{ route('buat-surat', ['id' => $item->id,'slug' => Str::slug($item->nama)]) }}">
            <div class="col-lg-3 col-md-5 card m-3 surats" style="
                border-radius: 20px;
                background: linear-gradient(135deg, #32263E 0%, #231E22 100%); color:#ced4da;
                margin: 5px 10px 10px;
            ">
                <img src="{{ asset('img/email.icon.svg') }}" style="width: 160px;
                    height: 170px;
                    margin: auto;
                ">
                <a href="{{ route('buat-surat', ['id' => $item->id,'slug' => Str::slug($item->nama)]) }}">
                    <h4 class="text-center" style="font-weight: 700; color:#ced4da; font-size: 20px; text-transform: capitalize;">{{ $item->nama }}</h4>
                </a>
                {{-- <p style="font-weight: 500; font-size: 12px; line-clamp: 1;" class="text-center">{{ $item->deskripsi }}</p> --}}
            </div>
        </a>
        @empty
        <div class="col m-4 surats" style="
            background: linear-gradient(135deg, #32263E 0%, #231E22 100%); color:#ced4da;
            border-radius: 32px
        ">
            <h2 class="text-center mt-5 px-1 text-white" style="
                font-size: 23px; font-weight: 700;
            ">Desa Anda Belum Memberikan Layanan Surat</h2>
            <p class="text-center mb-5">Silahkan Hubungi Admin Desa</p>
            {{-- <div class="text-center mb-5">
                <div class="row justify-content-center">
                    <div class="col">
                        <a class="btn" href="#" style="
                            color: #404040; background-color: #F7A4A4;
                        ">Coba Lagi</a>
                    </div>
                </div>
            </div> --}}
        </div>
        @endforelse
        {{-- card untuk hasil pencarian saat hasilnya kosong --}}
        <div class="col m-3" id="not-found" style="
            background: linear-gradient(135deg, #32263E 0%, #231E22 100%); color:#ced4da;
            border-radius: 32px; display: none;
        ">
            <h2 class="text-center my-5 px-1 text-white" style="
                font-size: 23px; font-weight: 700;
            ">Layanan Surat Tidak Ditemukan</h2>
        </div>
    </div>
</section>
@endsection


@push('scripts')
<script>
    $(document).ready(function () {
        $("#cari").on("keyup", function() {
            var value = $(this).val().toLowerCase();
            var matches = false;
            $(".surats").filter(function() {
                var match = $(this).text().toLowerCase().indexOf(value) > -1;
                $(this).toggle(match);
                if(match){
                    matches = true;
                }
            });
        if(!matches){
            $("#not-found").show();
            }else{
                $("#not-found").hide();
            }
        });
    });
</script>
@endpush