@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 Post</strong>
                        </div>
                        <div class="card-body">
                            <table id="bootstrap-data-table" class="table table-striped table-bordered">
                                <thead class="text-center">
                                    <tr>
                                        <th>No</th>
                                        <th>User</th>
                                        <th>Title</th>
                                        {{-- <th>Category</th> --}}
                                        {{-- <th>Description</th> --}}
                                        <th>Published</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody class="text-center">
                                    @foreach ($posts as $item)
                                        <tr>
                                            <td>{{ $loop->iteration }}</td>
                                            <td>{{ $item->user->name }}</td>
                                            <td>{{ $item->title }}</td>
                                            {{-- <td>
                                                <ul class="list-unstyled">
                                                    @foreach ($item->categories as $categoryPost)
                                                        <li>{{ $categoryPost->name }}</li>
                                                    @endforeach
                                                </ul>
                                            </td> --}}
                                            {{-- <td>{{ $item->description }}</td> --}}
                                            <td>
                                                @if ($item->status_published == 'active')
                                                    <span class="badge badge-success">{{ $item->status_published }}</span>
                                                @else
                                                    <span class="badge badge-danger">{{ $item->status_published }}</span>
                                                @endif
                                            </td>
                                            <td>
                                                <div class="justify-content-center">
                                                    <a href="#" data-toggle="modal" data-target="#updateModal"
                                                        class="btn btn-warning btn-sm"
                                                        onclick="updateData({{ $item }})">
                                                        <i class="fa fa-edit"></i>
                                                    </a>
                                                    <a href="#" data-toggle="modal" data-target="#deleteModal"
                                                        class="btn btn-danger btn-sm"
                                                        onclick="deleteData({{ $item->id }})">
                                                        <i class="fa fa-trash"></i>
                                                    </a>
                                                    <a href="#" data-toggle="modal" data-target="#detailModal"
                                                        class="btn btn-info btn-sm"
                                                        onclick="detailData({{ $item }})"><i
                                                            class="fa fa-info"></i></a>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>


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

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

    <!-- detail Modal-->
    <div class="modal fade" id="detailModal" 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">Detail Post</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="" method="POST" id="detailForm">
                        @csrf
                        <div class="form-group">
                            <label for="exampleCategory" class="form-label">Category</label>
                            <input type="text" name="category" id="category" class="form-control" readonly>
                        </div>
                        <div class="form-group">
                            <label for="exampleDescription" class="form-label">Description</label>
                            <input type="text" name="description" id="description" class="form-control" readonly>
                        </div>
                        <div class="form-group">
                            <label for="exampleDate" class="form-label">Date</label>
                            <input type="date" name="date" id="date" class="form-control" readonly>
                        </div>

                    </form>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
                </div>
            </div>
        </div>
    </div>

    {{-- function detail --}}
    <script>
        function detailData(data) {
            console.log(data);

            let date = new Date(data.updated_at);

            // Format tanggal menjadi YYYY-MM-DD
            let year = date.getFullYear();
            let month = ('0' + (date.getMonth() + 1)).slice(-2);
            let day = ('0' + date.getDate()).slice(-2);
            let formattedDate = `${year}-${month}-${day}`;
            const form = document.getElementById('detailForm');

            // form.querySelector('#users').value = data.user.name;
            form.querySelector('#date').value = formattedDate

            let categoryNames = data.categories.map(category => category.name).join(', ');
            form.querySelector('#category').value = categoryNames;
            form.querySelector('#description').value = data.description


        }
    </script>
@endsection