@extends('layouts.app')

@section('content')

<div class="container py-4">

    <div class="d-flex justify-content-between align-items-center mb-4">
        <h3>📱 Gadgets</h3>

        <a href="{{ route('admin.gadgets.create') }}" class="btn btn-primary">
            + Add Gadget
        </a>
    </div>

    <div class="card shadow-sm">
        <div class="card-body">

            <table class="table table-hover align-middle">
                <thead class="table-dark">
                    <tr>
                        <th>#</th>
                        <th>Image</th>
                        <th>Title</th>
                        <th>Brand</th>
                        <th>Price</th>
                        <th>Featured</th>
                        <th width="180">Actions</th>
                    </tr>
                </thead>

                <tbody>
                    @foreach($gadgets as $key => $item)
                    <tr>
                        <td>{{ $gadgets->firstItem() + $key }}</td>

                        <td>
                            <img src="{{ asset($item->image) }}"
                                 width="60"
                                 height="60"
                                 style="object-fit:cover;border-radius:8px;">
                        </td>

                        <td>{{ $item->title }}</td>
                        <td>{{ $item->brand }}</td>

                        <td>${{ number_format($item->price) }}</td>

                        <td>
                            @if($item->is_featured)
                                <span class="badge bg-success">Yes</span>
                            @else
                                <span class="badge bg-secondary">No</span>
                            @endif
                        </td>

                        <td>
                            <a href="{{ route('admin.gadgets.edit', $item->id) }}"
                               class="btn btn-sm btn-warning">
                                Edit
                            </a>

                            <form action="{{ route('admin.gadgets.destroy', $item->id) }}"
                                  method="POST"
                                  style="display:inline-block;">
                                @csrf
                                @method('DELETE')

                                <button class="btn btn-sm btn-danger"
                                        onclick="return confirm('Delete this gadget?')">
                                    Delete
                                </button>
                            </form>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>

            <div class="mt-3">
                {{ $gadgets->links() }}
            </div>

        </div>
    </div>

</div>

@endsection