@extends('backoffice.template.app')
@section('script')
<script>
    $(document).ready(function () {
        $('#table-category').DataTable();
        $('#table-ebook').DataTable();
    });

    function handleDelete(url) {
        console.log(url)
        $("#form-delete").attr('action', url);
    }

    function handleEditCateg(category, url) {
        $('#form-edit-c').attr('action', url);
        console.log(category);
        $('#Cnama-edit').val(category.nama);
    }

    function handleDeleteCateg(url) {
        $('#form-delete-c').attr('action', url);
    }

</script>
@if (session('success'))
<script>
    Swal.fire({
        icon: 'success',
        title: 'Sukses',
        text: "{{ session('success') }}",
    })

</script>
@endif
@endsection
@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <h4 class="fw-bold py-0 mb-0 ">
        <span class="text-muted fw-light">Ebook /</span> Index
    </h4>
</div>
<div class="card mb-3">
    <div class="card-header d-flex justify-content-between">
        <h4>Kategori Ebook</h4>
        <button class="btn btn-primary" data-bs-toggle="modal"
            data-bs-target="#modal-create-ebook-category">Tambah</button>
    </div>
    <div class="card-body">
        <table class="table table-bordered table-striped" id="table-category">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Nama</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($categories as $i => $c)
                <tr>
                    <td style="width: 9px; white-space: nowrap">{{ $i + 1 }}</td>
                    <td>{{ $c->nama }}</td>
                    <td style="width: 9px; white-space: nowrap;">
                        <button class="btn btn-warning"
                            onclick="handleEditCateg({{ $c }}, '{{ route('backoffice.ebook.category.update', $c->id) }}')"
                            data-bs-toggle="modal" data-bs-target="#modal-edit-ebook-category"> <i
                                class='bx bxs-edit-alt align-text-bottom'></i>Edit</button>
                        <button class="btn btn-danger"
                            onclick="handleDeleteCateg('{{ route('backoffice.ebook.category.delete', $c->id) }}')"
                            data-bs-toggle="modal" data-bs-target="#modal-delete-ebook-category"><i
                                class='bx bx-trash align-text-bottom'></i>Delete</button>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
<div class="card">
    <div class="card-header d-flex justify-content-between">
        <h4>Ebook</h4>
        <div>
            <a class="btn btn-primary" href="{{ route('backoffice.ebook.create') }}">Tambah</a>
        </div>
    </div>
    <div class="card-body">
        <table class="table table-bordered table-striped" id="table-ebook">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Cover</th>
                    <th>Judul</th>
                    <th>Deskripsi</th>
                    <th>Dibuat pada</th>
                    <th>Diubah pada</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($ebooks as $i => $e)
                <tr>
                    <td>{{ $i + 1 }}</td>
                    <td> <img width="100" src="{{ asset('storage/' . $e->cover) }}" alt="foto"></td>
                    <td>{{ $e->judul }}</td>
                    <td>{!! substr($e->deskripsi, 0, 49) . '...' !!}</td>
                    <td>{{ $e->created_at->diffForHumans() }}</td>
                    <td>{{ $e->updated_at->diffForHumans() }}</td>
                    <td class="text-nowrap">
                        <a href="{{ route('backoffice.ebook.edit', $e->id) }}" class="btn btn-warning me-1">
                            <i class='bx bxs-edit-alt align-text-bottom'></i>
                        </a>

                        <button class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#modal-ebook-delete"
                            onclick="handleDelete('{{ route('backoffice.ebook.delete', $e->id) }}')">
                            <i class='bx bx-trash align-text-bottom'></i>
                        </button>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>

{{-- MODAL SECTION --}}

<!-- MODAL CREATE CATEGORY -->
<div class="modal fade" id="modal-create-ebook-category" tabindex="-1"
    aria-labelledby="modal-create-ebook-categoryLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="modal-create-ebook-categoryLabel">Tambah Kategori</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form action="{{ route('backoffice.ebook.category.store') }}" method="post" id="form-store-c">
                    @csrf
                    <div class="mb-3">
                        <label for="nama" class="form-label">Nama</label>
                        <input type="text" name="nama" class="form-control" id="nama" required>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-primary" form="form-store-c">Tambah</button>
            </div>
        </div>
    </div>
</div>
{{-- modal edit category --}}
<div class="modal fade" id="modal-edit-ebook-category" tabindex="-1" aria-labelledby="modal-edit-ebook-categoryLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="modal-edit-ebook-categoryLabel">Edit Kategori</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form method="post" id="form-edit-c">
                    @csrf
                    @method('put')
                    <div class="mb-3">
                        <label for="nama" class="form-label">Nama</label>
                        <input type="text" name="nama" class="form-control" id="Cnama-edit" required>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-primary" form="form-edit-c">Update</button>
            </div>
        </div>
    </div>
</div>
{{-- modal delete category --}}
<div class="modal fade" id="modal-delete-ebook-category" tabindex="-1"
    aria-labelledby="modal-delete-ebook-categoryLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="modal-delete-ebook-categoryLabel">Hapus Kategori</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form method="post" id="form-delete-c">
                    @csrf
                    @method('delete')
                    <p>Apa Anda Yakin Untuk Menghapus Kategori Ini ?</p>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-danger" form="form-delete-c">Hapus</button>
            </div>
        </div>
    </div>
</div>

{{-- MODAL DELETE PELATIHAN --}}
<div class="modal fade" id="modal-ebook-delete" tabindex="-1" aria-labelledby="modal-deleteLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="modal-deleteLabel">Ebook</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="form-delete" method="POST">
                    @csrf
                    @method('delete')
                    <p>Apa anda yakin ingin menghapus ebook ini ini ?</p>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-danger" form="form-delete">Delete</button>
            </div>
        </div>
    </div>
</div>
@endsection