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

    <div class=" my-5" style="display: flex;align-items: center;flex-wrap: wrap;justify-content: space-around;gap: 10px;">
        <form class="col-lg-8 col-md-5 m-0 p-0">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="cari layanan surat..." 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>
        </form>
        <div class="">
            <a class="btn btn-md " href="{{ route('surat.create') }}"
                style=" border-radius: 10px;background: linear-gradient(135deg, #32263E 0%, #231E22 100%); color:#ced4da;padding:20px;
            ">
                <i class="fa fa-plus"></i>Tambah Template
            </a>
        </div>
    </div>

    <section>
        <div class="header-body text-center">
            <div class="row justify-content-center">
                <div class="col-lg-auto col-md-6">
                    <h1 class="text-white text-capitalize" style="font-weight: 700; "> Daftar Template Layanan Surat
                        Keterangan Yang
                        Telah Dibuat Desa {{ $village->nama_desa }}</h1>
                </div>
            </div>
        </div>
    </section>

    <section>
        <div class="p-0" style="display: flex;flex-wrap: wrap;justify-items: start;flex-direction: row;align-items: stretch;column-gap: 3rem;">
            @forelse ($surat as $item)
                <a href="{{ route('surat.show', $item) }}" style="text-decoration: none;" class="text-center ">
                    <div class="col-lg-3 col-md-5 card my-3 surats m-1"
                        style="border-radius: 15px;background: linear-gradient(135deg, #32263E 0%, #231E22 100%); color:#ced4da;
                        display: flex;flex-direction: column;flex-wrap: nowrap;justify-content: space-evenly;align-items: stretch;">
                        <img src="{{ asset('img/email.icon.svg') }}"
                            style=" width: 160px; height: 170px;  margin: auto; ">
                        <a href="{{ route('surat.show', $item) }}">
                            <h4 class="text-center"
                                style="font-weight: 700; color:#ced4da; font-size: 20.2px; text-transform: capitalize;">
                                {{ $item->nama }}</h4>
                        </a>
                        @if ($item->cetakSurat->count() > 0)
                            <p class="text-md text-muted text-center" style="font-weight: 500; margin-top: -8px;">Telah
                                diajukan sebanyak {{ $item->cetakSurat->count() }}x</p>
                        @endif
                        @if ($item->tampilkan == 0)
                            <p class="text-md text-muted text-center"
                                style="font-weight: 500; margin-top: -8px;font-size: 13.5px;">
                                (Surat Belum Ditampilkan Ke Warga)
                            </p>
                        @endif
                        <div class="row p-1">
                            <div class="col text-center">
                                @if ($item->tampilkan == 0)
                                    <a href="{{ route('buat-surat', ['id' => $item->id, 'slug' => Str::slug($item->nama)]) }}"
                                        class="badge text-dark"
                                        style="background-color: #F7A4A4; padding: 8px; font-size: 13px; margin-right: 10px; border-radius: 10px; text-transform: capitalize; font-weight: 400;"
                                        title="Cetak"><i class="fas fa-print"></i> Tes Surat</a>
                                @endif
                                <a href="{{ route('surat.edit', $item) }}" title="Edit" class="badge text-dark"
                                    style="background-color: #F7A4A4; padding: 8px; font-size: 13px; margin-right: 10px; border-radius: 10px; text-transform: capitalize; font-weight: 400;"><i
                                        class="fas fa-edit"></i> Edit</a>
                                <a data-nama="{{ $item->nama }}" data-action="{{ route('surat.destroy', $item) }}"
                                    data-toggle="modal" href="#modal-hapus" title="Hapus" class="badge hapus-data"
                                    style="color: #F7A4A4; padding: 8px; font-size: 13px; margin-right: 10px; text-transform: capitalize; font-weight: 400;"><i
                                        class="fas fa-trash"></i> Hapus</a>
                            </div>
                        </div>
                    </div>
                </a>
            @empty
                <div class="col m-4 surats"
                    style="
            background: linear-gradient(135deg, #32263E 0%, #231E22 100%); color:#ced4da;
            border-radius: 10px
        ">
                    <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 Tambah Template Surat</p>
                </div>
            @endforelse
            {{-- card untuk pencarian saat tidak ada hasil --}}
            <div class="col not-found m-3"
                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>

    <div class="modal fade" id="modal-hapus" tabindex="-1" role="dialog" aria-labelledby="modal-hapus" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content" style="background: linear-gradient(135deg, #32263E 0%, #231E22 100%);">
                <div class="modal-body">
                    <div class="py-3 text-center">
                        <h3 class="text-white">Apakah Anda ingin menghapus Surat ini?</h3>
                        <p class="text-sm text-white">Pastikan Cek Kembali Sebelum menghapus Surat.</p>
                    </div>
                </div>
                <div class="modal-footer justify-content-center mt--5">
                    <div class="row">
                        <div class="col-md">
                            <form id="form-hapus" action="" method="POST">
                                @csrf @method('delete')
                                <button type="submit" class="btn" style="background: #F7A4A4; border-radius: 10px;"><i
                                        class="fas fa-trash"></i> Hapus</button>
                                <button type="button" class="btn btn-link" style="color: #F7A4A4;"
                                    data-dismiss="modal"><i class="fas fa-times-circle"></i> Tidak</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        $('[name="cari"]').on("keyup", function() {
            var value = $(this).val().toLowerCase();
            var $surats = $("#card .surats").filter(function() {
                return $(this).text().toLowerCase().indexOf(value) > -1;
            });
            var $notFound = $(".not-found");
            if ($surats.length === 0) {
                $notFound.show();
            } else {
                $notFound.hide();
            }
            $surats.toggle(true);
            $("#card .surats").not($surats).toggle(false);
        });
    </script>
@endpush