@extends('backoffice.layouts.main')

@section('title', 'Edukasi')

@section('content')
<div>
    <!-- Content -->
    <h4 class="fw-bold py-3 mb-4"><span class="text-muted fw-light">Master /</span> Edukasi</h4>

    <!-- Basic Bootstrap Table -->
        <div class="nav-align-top mb-4">
            <ul class="nav nav-tabs" role="tablist">
                <li class="nav-item">
                    <button type="button" class="nav-link active" role="tab" data-bs-toggle="tab"
                        data-bs-target="#navs-top-home" aria-controls="navs-top-home" aria-selected="true">
                        Edukasi
                    </button>
                </li>
                <li class="nav-item">
                    <button type="button" class="nav-link" role="tab" data-bs-toggle="tab"
                        data-bs-target="#navs-top-profile" aria-controls="navs-top-profile" aria-selected="false">
                        Kategori
                    </button>
                </li>

            </ul>
            <div class="tab-content">
                <div class="tab-pane fade show active" id="navs-top-home" role="tabpanel">
                    <div class="d-flex justify-content-between mb-4">
                    <h5>Daftar Edukasi</h5>
                    <a href="{{route('bo.edukasi.create')}}" class="btn btn-primary">
                        <i class="fa fa-plus"></i>
                        Tambah Edukasi
                    </a>
                    </div>
                    <table class="table data-table">
                        <thead>
                            <tr>
                                <th>Judul</th>
                                <th>Dibuat Pada</th>
                                <th>Diubah Pada</th>
                                <th>Aksi</th>
                            </tr>
                        </thead>
                        <tbody class="table-border-bottom-0">
                            @foreach ($data['edukasi'] as $item)
                            <tr>
                                <td>
                                    {{substr($item->judul, 0, 30)}} {{strlen($item->judul) > 30 ? '.....' : ''}}
                                </td>
                                <td>{{$item->created_at}}</td>
                                <td>{{$item->updated_at}}</td>
                                <td class="d-flex">
                                    <a href="{{route('client.edukasi.detail', $item->uuid)}}" class="btn btn-success">
                                        <i class="fas fa-eye"></i>
                                    </a>
                                    <a href="{{route('bo.edukasi.edit', $item->uuid)}}" class="btn btn-warning mx-2">
                                        <i class="fas fa-edit "></i>
                                    </a>
                                    <button class="btn btn-danger" data-bs-toggle="modal"
                                        data-bs-target="#deleteModal-{{$item->uuid}}">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </td>
                            </tr> <!-- Delete Modal -->
                            <div class="modal fade" id="deleteModal-{{$item->uuid}}" tabindex="-1"
                                aria-labelledby="deleteModalLabel-{{$item->uuid}}" aria-hidden="true">
                                <form action="{{route('bo.edukasi.delete')}}" method="POST">
                                    <div class="modal-dialog">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="deleteModalLabel-{{$item->uuid}}">
                                                    Konfirmasi Hapus
                                                    Edukasi</h5>
                                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                    aria-label="Close"></button>
                                            </div>
                                            <div class="modal-body text-center">
                                                Apakah Anda yakin ingin menghapus data edukasi?<br>
                                                {{$item->judul}}
                                                @csrf
                                                @method('DELETE')
                                                <input type="hidden" name="uuid" value="{{$item->uuid}}">
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-secondary"
                                                    data-bs-dismiss="modal">Batal</button>
                                                <button type="submit" class="btn btn-success">Ya</button>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                <div class="tab-pane fade" id="navs-top-profile" role="tabpanel">
                    <div class="d-flex justify-content-between mb-4">
                    <h5>Daftar Kategori</h5>
                    <button data-bs-toggle="modal" data-bs-target="#createModal" class="btn btn-primary">
                        <i class="fa fa-plus"></i>
                        Tambah Kategori
                    </button>
                </div>
                    <table class="table data-table">
                        <thead>
                            <tr>
                                <th>Nama</th>
                                <th>Dibuat Pada</th>
                                <th>Diubah Pada</th>
                                <th>Aksi</th>
                            </tr>
                        </thead>
                        <tbody class="table-border-bottom-0">
                            @foreach ($data['kategori'] as $item)
                            <tr>
                                <td>{{$item->nama}}</td>
                                <td>{{$item->created_at}}</td>
                                <td>{{$item->updated_at}}</td>
                                <td class="d-flex">
                                    <button data-bs-toggle="modal" data-bs-target="#editModal-{{$item->uuid}}"
                                        class="btn btn-warning mx-2">
                                        <i class="fas fa-edit"></i>
                                    </button>
                                    <button class="btn btn-danger" data-bs-toggle="modal"
                                        data-bs-target="#deleteModal-{{$item->uuid}}">
                                        <i class="fas fa-trash"></i>
                                    </button>

                                </td>
                            </tr>
                            <!-- Ubah Modal -->
                            <div class="modal fade" id="editModal-{{$item->uuid}}" tabindex="-1"
                                aria-labelledby="editModalLabel-{{$item->uuid}}" aria-hidden="true">
                                <form action="{{route('bo.kategori.update')}}" method="POST">
                                    @csrf
                                    @method('PUT')
                                    <div class="modal-dialog">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="editModalLabel-{{$item->uuid}}"> Ubah
                                                    Kategori</h5>
                                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                    aria-label="Close"></button>
                                            </div>
                                            <div class="modal-body">
                                                <input type="hidden" name="uuid" value="{{$item->uuid}}">
                                                <div class="form-group mb-3">
                                                    <label for="nama" class="form-label">Nama</label>
                                                    <input type="text" class="form-control" value="{{$item->nama}}"
                                                        id="nama" name="nama" required>
                                                </div>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-secondary"
                                                    data-bs-dismiss="modal">Batal</button>
                                                <button type="submit" class="btn btn-success">Ubah</button>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <!-- Delete Modal -->
                            <div class="modal fade" id="deleteModal-{{$item->uuid}}" tabindex="-1"
                                aria-labelledby="deleteModalLabel-{{$item->uuid}}" aria-hidden="true">
                                <form action="{{route('bo.kategori.delete')}}" method="POST">
                                    @csrf
                                    @method('DELETE')
                                    <div class="modal-dialog">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="deleteModalLabel-{{$item->uuid}}">
                                                    Konfirmasi Hapus
                                                    Kategori</h5>
                                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                    aria-label="Close"></button>
                                            </div>
                                            <div class="modal-body text-center">
                                                Apakah Anda yakin ingin mengahpus data kategori?<br>
                                                {{$item->nama}}
                                                <input type="hidden" name="uuid" value="{{$item->uuid}}">
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-secondary"
                                                    data-bs-dismiss="modal">Batal</button>
                                                <button type="submit" class="btn btn-success">Ya</button>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            @endforeach
                        </tbody>
                    </table>

                    <!-- Tambah Modal -->
                    <div class="modal fade" id="createModal" tabindex="-1" aria-labelledby="createModalLabel"
                        aria-hidden="true">
                        <form action="{{route('bo.kategori.store')}}" method="POST">
                            @csrf
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="createModalLabel">Tambah Kategori</h5>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                                            aria-label="Close"></button>
                                    </div>
                                    <div class="modal-body">
                                        <div class="form-group mb-3">
                                            <label for="nama" class="form-label">Nama</label>
                                            <input type="text" class="form-control" id="nama" name="nama" required>
                                        </div>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary"
                                            data-bs-dismiss="modal">Batal</button>
                                        <button type="submit" class="btn btn-success">Tambah</button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    <!--/ Basic Bootstrap Table -->

</div>
<!--/ Basic Bootstrap Table -->
@endsection
@push('scripts')
@if (session('success'))

<script>
    Swal.fire({
        title: '{{session("success")}}',
        icon: 'success',
        confirmButtonText: 'Tutup'
    })

</script>
@endif

<script>
    loading()

</script>

@if (session('error'))
<script>
    Swal.fire({
        title: 'Proses Gagal',
        text: '{{session("error")[1]}} | Line : {{session("error")[2]}}',
        icon: 'error',
        confirmButtonText: 'Tutup'
    })

</script>
@endif
@endpush