@extends('layouts.app')

@section('title', 'Daftar Produk - Admin')

@section('content')
<div class="container-fluid">
    <!-- Page Heading -->
    <div class="d-sm-flex align-items-center justify-content-between mb-4">
        <h1 class="h3 mb-0 text-gray-800">Daftar Produk</h1>
        <a href="{{ route('admin.products.create') }}" class="btn btn-primary btn-sm shadow-sm">
            <i class="fas fa-plus fa-sm text-white-50"></i> Tambah Produk
        </a>
    </div>

    <!-- Success Message -->
    @if (session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            {{ session('success') }}
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">×</span>
            </button>
        </div>
    @endif
    @if (session('error'))
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            {{ session('error') }}
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">×</span>
            </button>
        </div>
    @endif

    <!-- Category Filter -->
    <div class="mb-4">
        <form action="{{ route('admin.products.index') }}" method="GET" class="row">
            <div class="form-group col-md-3 col-sm-6">
                <label for="category" class="sr-only">Filter Kategori</label>
                <select name="category" id="category" class="form-control" onchange="this.form.submit()">
                    <option value="">Semua Kategori</option>
                    <option value="Meja" {{ request('category') == 'Meja' ? 'selected' : '' }}>Meja</option>
                    <option value="Kursi" {{ request('category') == 'Kursi' ? 'selected' : '' }}>Kursi</option>
                    <option value="Lemari" {{ request('category') == 'Lemari' ? 'selected' : '' }}>Lemari</option>
                </select>
            </div>
        </form>
    </div>

    <!-- Products Table -->
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">Daftar Produk</h6>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered table-hover" id="dataTable">
                    <thead class="thead-light">
                        <tr>
                            <th class="text-center">Nama</th>
                            <th class="text-center">Kategori</th>
                            <th class="text-center">Harga</th>
                            <th class="text-center">Deskripsi</th>
                            <th class="text-center">Gambar</th>
                            <th class="text-center">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($products as $product)
                            <tr>
                                <td class="align-middle">{{ $product->name }}</td>
                                <td class="align-middle text-center">{{ $product->category }}</td>
                                <td class="align-middle text-center">Rp {{ number_format($product->price, 0, ',', '.') }}</td>
                                <td class="align-middle">{{ Str::limit($product->description, 50) }}</td>
                                <td class="align-middle text-center">
                                    @if ($product->image)
                                        <img class="img-fluid img-thumbnail" src="{{ asset($product->image) }}" alt="{{ $product->name }}" style="max-width: 100px; height: auto;">
                                    @else
                                        <img class="img-fluid img-thumbnail" src="{{ asset('assets/img/portfolio/furniture-placeholder.jpg') }}" alt="Placeholder" style="max-width: 100px; height: auto;">
                                    @endif
                                </td>
                                <td class="align-middle text-center">
                                    <div class="btn-group" role="group">
                                        <a href="{{ route('admin.products.edit', $product->id) }}" class="btn btn-warning btn-sm mr-1">
                                            <i class="fas fa-edit"></i>
                                        </a>
                                        <form action="{{ route('admin.products.destroy', $product->id) }}" method="POST" style="display:inline-block;">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="btn btn-danger btn-sm" onclick="return confirm('Apakah Anda yakin?')">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6" class="text-center">Tidak ada produk yang tersedia.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    $(document).ready(function() {
        // Initialize DataTable with responsive design
        $('#dataTable').DataTable({
            responsive: true,
            autoWidth: false,
            order: [[0, "asc"]],
            pageLength: 10,
            lengthMenu: [5, 10, 25, 50],
            language: {
                emptyTable: "Tidak ada data yang tersedia.",
                info: "Menampilkan _START_ sampai _END_ dari _TOTAL_ entri",
                infoEmpty: "Menampilkan 0 sampai 0 dari 0 entri",
                infoFiltered: "(difilter dari _MAX_ total entri)",
                lengthMenu: "Tampilkan _MENU_ entri",
                loadingRecords: "Memuat...",
                processing: "Proses...",
                search: "Cari:",
                zeroRecords: "Tidak ada data yang cocok ditemukan.",
                paginate: {
                    first: "Pertama",
                    last: "Terakhir",
                    next: "Selanjutnya",
                    previous: "Sebelumnya"
                }
            }
        });

        // Auto-hide alerts after 2 seconds
        setTimeout(function() {
            $('.alert').alert('close');
        }, 2000);
    });
</script>
@endsection
