@extends('layout.app')
@section('content')
    <div class="content">
        <div class="animated fadeIn">
            <div class="row">

                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header">
                            <strong class="card-title">Data Kategori</strong>
                        </div>
                        <div class="card-body">
                            <a class="btn btn-primary mb-3" href="#" data-toggle="modal" data-target="#addModal">
                                <i class="fa fa-plus fa-sm fa-fw mr-1 text-gray-400"></i>
                                Tambah Kategori
                            </a>
                            <table id="bootstrap-data-table" class="table table-striped table-bordered">
                                <thead>
                                    <tr>
                                        <th style="width: 5%;" class="text-center">No</th>
                                        <th style="width: 50%;">Nama Kategori</th>
                                        <th style="width: 30%;">Opsi</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($categories as $index => $item)
                                        <tr>
                                            <td class="text-center">{{ $index + 1 }}</td>
                                            <td>{{ $item->name }}</td>
                                            <td class="text-center">
                                                <a class="btn btn-warning mb-3" href="#" data-toggle="modal"
                                                    data-target="#editModal" onclick="updateData({{ $item }})">
                                                    <i class="fa fa-edit"></i>
                                                </a>
                                                <a class="btn btn-danger mb-3" href="#" data-toggle="modal"
                                                    data-target="#deleteModal" onclick="deleteData({{ $item->id }})">
                                                    <i class="fa fa-trash"></i>
                                                </a>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>


            </div>
        </div><!-- .animated -->

    </div><!-- .content -->

    {{-- tambah modal --}}
    <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Tambah Kategori</h5>
                    <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form action="{{ route('categories.store') }}" method="POST" id="formTambah">
                        @csrf
                        <div class="form-group">
                            <label for="name" class="form-label">Nama Kategori</label>
                            <input type="text" name="name" id="name" class="form-control" required>
                        </div>
                        {{-- <button type="submit" class="btn btn-primary">Tambah</button> --}}
                    </form>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary" form="formTambah">Tambah</button>
                </div>
            </div>
        </div>
    </div>

    {{-- modal edit --}}
    <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Edit Kategori</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form action="{{ route('categories.update', $item->id) }}" method="POST" id="formEdit">
                        @csrf
                        @method('PUT')
                        <div class="form-group">
                            <label for="nama" class="form-label">Nama Kategori</label>
                            <input type="text" name="nama" id="nama" class="form-control"
                                value="{{ $item->name }}" required>
                        </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Edit</button>
                </div>
                </form>
            </div>
        </div>
    </div>

    <script>
        function updateCategory(data) {
            console.log(data);
            const form = document.getElementById('formEdit');
            form.action = "{{ route('categories.update', ':id') }}".replace(':id', data.id);
            form.querySelector('#nama').value = data.name;
        }
    </script>




    <!-- Modal Hapus -->
    <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Hapus Kategori</h5>
                    <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    Apakah anda yakin mau menghapus data ini?
                </div>
                <div class="modal-footer">
                    <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
                    <form action="" method="POST" id="deleteForm">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="btn btn-danger">Ya! Hapus</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <script>
        function deleteData(id) {
            console.log(id);
            const form = document.getElementById('deleteForm');
            form.action = "{{ route('categories.destroy', ':id') }}".replace(':id', id);
        }
    </script>
@endsection