<div>
    <!-- using bootstrap 4 -->
    @livewire('components.admin-sidebar')

	 <!-- Main Content-->
    <div class="main-content side-content pt-0">

        <div class="container-fluid">
            <div class="inner-body">

                <h3 class="mt-3">All Listings</h3>

                <div>
                    <!-- Flash messages for success and error -->
                    @if (session()->has('message'))
                        <div class="alert alert-success">{{ session('message') }}</div>
                    @elseif (session()->has('error'))
                        <div class="alert alert-danger">{{ session('error') }}</div>
                    @endif

                    <div class="table-responsive">
                        <table class="table table-bordered table-striped">
                            <thead>
                                <tr>
                                    <th>Title</th>
                                    <th>Make</th>
                                    <th>Category</th>
                                    <th>Price</th>
                                    <th>Vehicle ID</th>
                                    <th>Image</th>
                                    <th>Created At</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($listing as $car)
                                    <tr>
                                        <td>{{ $car->title }}</td>
                                        <td>{{ $car->make->name }}</td>
                                        <td>{{ $car->category->name }}</td>
                                        <td>{{ $car->price }}</td>

                                        <!-- Vehicle ID from related CarDetails model -->
                                        <td>
                                            @if($car->car_general)
                                                {{ $car->car_general->vehicle_id }}
                                            @else
                                                <span>No detail available</span>
                                            @endif
                                        </td>

                                        <!-- Car Image -->
                                        <td>
                                            @if(!empty($car->images) && is_array($car->images))
                                                <img src="{{ asset($car->images[0]) }}" alt="Car Image" width="100">
                                            @else
                                                <span>No image available</span>
                                            @endif
                                        </td>

                                        <!-- Created At Date -->
                                        <td>{{ $car->created_at->format('Y-m-d H:i') }}</td>

                                        <td>
                                            <!-- Edit button -->
                                            <a href="{{ route('admin.upload', $car->id) }}" class="btn btn-primary btn-sm">Edit</a>

                                            <!-- Delete button -->
                                            <button type="button" class="btn btn-danger btn-sm"
                                                onclick="confirmDelete({{ $car->id }})">Delete</button>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>

                    <!-- Pagination links -->
                    <div class="p-2">
                        {{ $listing->links('pagination::bootstrap-4') }}
                    </div>
                </div>

			</div>
		</div>
	</div>

    <!-- Confirmation dialog for deleting a car -->
    <script>
        function confirmDelete(carId) {
            if (confirm("Are you sure you want to delete this car?")) {
                @this.deleteCar(carId); // Call the Livewire delete method
            }
        }
    </script>
</div>