@extends('layouts.admin.main')

@push('styles')
<link rel="stylesheet" href="https://cdn.datatables.net/2.3.8/css/dataTables.bootstrap5.min.css" />
@endpush

@section('content')
<div class="mb-3">
    <h1 class="h3 d-inline align-middle">Taxonomy</h1>
</div>

@if (session('success'))
<div class="alert alert-success alert-dismissible fade show" role="alert">
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    <strong>{{ session('success') }}</strong>
</div>
@endif

<div class="row">
    <div class="col-xl-2 col-12">
        <div class="card">
            <ul class="nav nav-pills flex-column">
                @foreach(\App\Enums\TaxonomyType::cases() as $t)
                <li class="nav-item">
                    <a class="nav-link {{ $type->value() == $t->value() ? 'active' : '' }}"
                    href="{{ route('admin.settings.taxonomies.index', ['type' => $t->value()]) }}">
                        {{ $t->label() }}
                    </a>
                </li>
                @endforeach
            </ul>
        </div>
    </div>
    <div class="col-xl-10 col-12">
        <div class="card">
            <div class="card-header pb-0">
                <div class="card-actions float-end">
                    <a href="{{ route('admin.settings.taxonomies.create', ['type' => $type->value()]) }}" class="btn btn-sm btn-secondary"><i class="align-middle me-2" data-feather="plus"></i>Tambah</a>
                </div>
                <h4 class="card-title mb-0">Daftar {{ $type->label() }}</h4>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table id="table-taxonomy" class="table table-hover">
                        <thead>
                            <tr>
                                <th>No</th>
                                <th>Nama</th>
                                <th>Slug</th>
                                <th class="text-end">Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($taxonomies as $taxonomy)
                            <tr>
                                <td>{{ $loop->iteration }}</td>
                                <td>{{ $taxonomy->name }}</td>
                                <td>{{ $taxonomy->slug }}</td>
                                <td class="text-end">
                                    <a href="{{ route('admin.settings.taxonomies.show', [$taxonomy->id, 'type' => $type->value()]) }}" class="btn btn-sm btn-info">
                                        <i class="align-middle me-2" data-feather="eye"></i>Lihat
                                    </a>
                                    <a href="{{ route('admin.settings.taxonomies.edit', [$taxonomy->id, 'type' => $type->value()]) }}" class="btn btn-sm btn-primary">
                                        <i class="align-middle me-2" data-feather="edit"></i>Edit
                                    </a>
                                    <button type="button" class="btn btn-sm btn-danger delete" 
                                        data-id="{{ $taxonomy->id }}" data-name="{{ $taxonomy->name }}""> 
                                        <i class="align-middle me-2" data-feather="trash"></i>Hapus
                                    </button>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="delete-modal" tabindex="-1" aria-labelledby="delete-modal-label" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="delete-modal-label">Hapus {{ $type->label() }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                Apakah anda yakin ingin menghapus {{ $type->label() }}: <b><span id="taxonomy-name"></span></b> ini?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">
                    <i class="align-middle me-2" data-feather="x"></i>Batal
                </button>
                <form id="form-delete" action="" method="POST">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn btn-sm btn-danger">
                        <i class="align-middle me-2" data-feather="trash"></i>Hapus
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.datatables.net/2.3.8/js/dataTables.js"></script>
<script src="https://cdn.datatables.net/2.3.8/js/dataTables.bootstrap5.min.js"></script>
<script>
    $(function() {
        $('#table-taxonomy').DataTable({
            paging: true,
            ordering: true,
            info: true,
            searching: true,
            lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "Semua"]],
        });
        $('.delete').click(function() {
            let id = $(this).data('id');
            let name = $(this).data('name');
            $('#taxonomy-name').text(name);

            let url = "{{ route('admin.settings.taxonomies.destroy', ['type' => $type->value(), ':id']) }}";
            url = url.replace(':id', id);
            $('#form-delete').attr('action', url);
            $('#delete-modal').modal('show');
        });
    });
</script>
@endpush