@extends('layouts.layout')
@section('title', 'Layanan Surat Desa '. $desa->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-keputusan.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" style="font-weight: 700; "> Daftar Template Layanan Surat
                    Keputusan Yang
                    Telah Dibuat Desa {{ $desa->nama_desa }}</h1>
            </div>
        </div>
    </div>
</section>


<section>
    <div id="card" 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 " style="border-radius: 20px;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-sk.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 dibuat
                    sebanyak {{ $item->cetakSurat->count() }}x</p>
                @endif
                <div class="row p-1">
                    <div class="col text-center">
                        @if ($item->tampilkan == 0)
                        <a href="{{ route('buat-surat-keputusan', ['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="Buat Surat"><i class="fas fa-print"></i> Buat 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 Membuat Layanan Surat Keputusan</h2>
            <p class="text-center mb-5">Silahkan Buat 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