@extends('layouts.app')

@section('content')

<div class="card">

    <div class="card-header bg-primary text-white">

        <div class="d-flex justify-content-between">

            <h4>

                <i class="fas fa-tags"></i>

                Data Kategori

            </h4>

            <a href="{{ route('kategori.create') }}"
               class="btn btn-light">

                <i class="fas fa-plus"></i>

                Tambah

            </a>

        </div>

    </div>

    <div class="card-body">

        <table class="table table-bordered table-striped"
               id="tableKategori">

            <thead>

                <tr>

                    <th>No</th>
                    <th>Nama Kategori</th>
                    <th>Aksi</th>

                </tr>

            </thead>

            <tbody>

                @foreach($kategori as $item)

                    <tr>

                        <td>{{ $loop->iteration }}</td>

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

                        <td>

                            <a href="{{ route('kategori.edit',$item->id) }}"
                               class="btn btn-warning btn-sm">

                                <i class="fas fa-edit"></i>

                            </a>

                            <form action="{{ route('kategori.destroy',$item->id) }}"
                                  method="POST"
                                  class="d-inline">

                                @csrf
                                @method('DELETE')

                                <button type="submit"
                                        class="btn btn-danger btn-sm btn-delete">

                                    <i class="fas fa-trash"></i>

                                </button>

                            </form>

                        </td>

                    </tr>

                @endforeach

            </tbody>

        </table>

    </div>

</div>

@endsection

@push('js')

<script>

    $('#tableKategori').DataTable();

    $('.btn-delete').click(function(e){

        e.preventDefault();

        let form = $(this).closest('form');

        Swal.fire({
            title: 'Hapus?',
            text: "Data akan dihapus!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            confirmButtonText: 'Ya Hapus'
        }).then((result) => {

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

        });

    });

</script>

@endpush