@extends('layouts.admin')

@section('content')

<div class="container-fluid">

    {{-- Judul --}}
    <div class="d-flex justify-content-between align-items-center mb-4">

        <div>
            <h2 class="fw-bold text-success">
                Data Moment Budaya
            </h2>

            <p class="text-muted">
                Kelola dokumentasi kegiatan dan momen budaya Mandailing Natal
            </p>
        </div>


        <a href="{{ route('moment.create') }}" 
           class="btn btn-success">

            <i class="bi bi-plus-circle me-2"></i>
            Tambah Moment

        </a>

    </div>



    {{-- Notifikasi --}}
    @if(session('success'))

        <div class="alert alert-success">
            {{ session('success') }}
        </div>

    @endif




    {{-- Tabel Data --}}

    <div class="card shadow-sm">

        <div class="card-body">


            <div class="table-responsive">


                <table class="table table-bordered table-hover align-middle">


                    <thead class="table-success">

                        <tr>

                            <th width="5%">
                                No
                            </th>

                            <th width="15%">
                                Gambar
                            </th>

                            <th>
                                Judul Moment
                            </th>

                            <th>
                                Kategori
                            </th>

                            <th>
                                Tanggal
                            </th>

                            <th>
                                Lokasi
                            </th>

                            <th width="20%">
                                Aksi
                            </th>

                        </tr>

                    </thead>



                    <tbody>


                    @forelse($moments as $item)


                        <tr>


                            <td>
                                {{ $loop->iteration }}
                            </td>



                            <td>


                                @if($item->gambar)

                                    <img src="{{ asset('storage/'.$item->gambar) }}"
                                         width="100"
                                         height="70"
                                         class="rounded"
                                         style="object-fit:cover">

                            

                                @endif


                            </td>




                            <td>

                                <strong>
                                    {{ $item->judul_moment }}
                                </strong>

                            </td>



                            <td>
                                {{ $item->kategori }}
                            </td>




                            <td>

                                {{ $item->tanggal 
                                    ? date('d-m-Y', strtotime($item->tanggal)) 
                                    : '-' }}

                            </td>



                            <td>
                                {{ $item->lokasi ?? '-' }}
                            </td>





                            <td>


                                <a href="{{ route('moment.show',$item->id) }}"
                                   class="btn btn-info btn-sm">

                                    <i class="bi bi-eye"></i>

                                </a>



                                <a href="{{ route('moment.edit',$item->id) }}"
                                   class="btn btn-warning btn-sm">

                                    <i class="bi bi-pencil"></i>

                                </a>





                                <form action="{{ route('moment.destroy',$item->id) }}"
                                      method="POST"
                                      class="d-inline">


                                    @csrf

                                    @method('DELETE')



                                    <button type="submit"
                                            class="btn btn-danger btn-sm"
                                            onclick="return confirm('Yakin ingin menghapus data ini?')">


                                        <i class="bi bi-trash"></i>


                                    </button>


                                </form>


                            </td>


                        </tr>


                    @empty


                        <tr>

                            <td colspan="7"
                                class="text-center text-muted">

                                Belum ada data moment

                            </td>

                        </tr>


                    @endforelse


                    </tbody>


                </table>


            </div>


        </div>

    </div>


</div>


@endsection