@extends('admin.template')

@section('title', 'Data Kategori TPS')

@section('content')
<style>
    .deskripsi-truncate-div {
        max-width: 300px;
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    .table td {
        vertical-align: top;
    }
</style>

<div class="content-wrapper">
    <div class="row">
        <div class="col-lg-12 grid-margin stretch-card">
            <div class="card">

                <div class="card-body">

                    <div class="mb-3 d-flex justify-content-between">
                        <div>
                            <h4 class="mb-0 card-title">Data Kategori TPS</h4>
                            <p class="mb-0 card-description">
                                Daftar Kategori Tempat Pembuangan Sampah (TPS)
                            </p>
                        </div>

                        <div class="mb-3 d-flex align-items-center">

                            <!-- SEARCH -->
                            <form action="{{ route('admin.kategori.index') }}" method="GET"
                                style="width:300px; margin-right:20px;">
                                <input type="text"
                                    name="search"
                                    value="{{ request('search') }}"
                                    class="form-control"
                                    placeholder="Cari kategori TPS...">
                            </form>

                            <!-- BUTTON TAMBAH -->
                            <a href="{{ route('admin.kategori.create') }}" class="btn btn-primary">
                                <i class="bi bi-plus-lg"></i> Tambah
                            </a>

                        </div>
                    </div>

                    <div class="table-responsive">

                        <table class="table">

                            <thead>
                                <tr>
                                    <th>Nama Kategori</th>
                                    <th>Foto</th>
                                    <th>Deskripsi</th>
                                    <th class="text-center">Aksi</th>
                                </tr>
                            </thead>

                            <tbody>

                                @forelse ($kategori as $item)
                                <tr>

                                    <td>
                                        {{ $item->nama_kategori }}
                                    </td>

                                    <td>
                                        @if ($item->foto_kategori)

                                            <img
                                                src="{{ asset('storage/'.$item->foto_kategori) }}"
                                                alt="Foto Kategori"
                                                style="width:200px; height:auto; border-radius:4px;">

                                        @else
                                            <span class="text-muted">Tidak ada foto</span>
                                        @endif
                                    </td>

                                    <td>
                                        <div class="text-justify deskripsi-truncate-div">
                                            {{ $item->deskripsi ?? '-' }}
                                        </div>
                                    </td>

                                    <td class="text-center">

                                        <!-- EDIT -->
                                        <a href="{{ route('admin.kategori.edit',$item->id_kategori_tps) }}"
                                            class="btn btn-warning btn-sm me-1">
                                            <i class="bi bi-pencil-square"></i>
                                        </a>

                                        <!-- DELETE -->
                                        <form action="{{ route('admin.kategori.destroy',$item->id_kategori_tps) }}"
                                            method="POST"
                                            class="form-hapus"
                                            style="display:inline;">

                                            @csrf
                                            @method('DELETE')

                                            <button type="submit" class="btn btn-danger btn-sm">
                                                <i class="bi bi-trash"></i>
                                            </button>

                                        </form>

                                    </td>

                                </tr>

                                @empty

                                <tr>
                                    <td colspan="4" class="text-center">
                                        Data kategori belum tersedia
                                    </td>
                                </tr>

                                @endforelse

                            </tbody>

                        </table>

                    </div>

                    <!-- PAGINATION -->
                    <div class="mt-3">
                        {{ $kategori->links() }}
                    </div>

                </div>

            </div>
        </div>
    </div>
</div>


<script>

document.querySelectorAll('.form-hapus').forEach(form => {

    form.addEventListener('submit', function(e) {

        e.preventDefault();

        Swal.fire({
            title: 'Hapus Data Kategori TPS?',
            text: 'Data yang sudah dihapus tidak dapat dikembalikan!',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#6c757d',
            confirmButtonText: 'Ya, Hapus',
            cancelButtonText: 'Batal'
        }).then((result) => {

            if (result.isConfirmed) {
                form.submit();
            }

        });

    });

});

</script>


@if (session('success'))

<script>

Swal.fire({
    icon: 'success',
    title: 'Berhasil',
    text: '{{ session('success') }}',
    timer: 2000,
    showConfirmButton: false
})

</script>

@endif

@endsection
