@extends('backend.layout')

@section('backend_content')
    <div class="container-fluid">
        {{-- ══ Header ══ --}}
        <div class="d-flex justify-content-between align-items-center mb-4">
            <div>
                <h4 class="fw-bold mb-1">Products - {{ $shop->name }}</h4>
                <small class="text-muted">Manage your shop's products</small>
            </div>
            <div class="d-flex gap-2">
                <a href="{{ route('admin.shops.products.create', $shop) }}" class="btn btn-primary">
                    <i class="bx bx-plus"></i> Add Product
                </a>
                <a href="{{ route('admin.shops.index') }}" class="btn btn-light">
                    <i class="bx bx-arrow-back"></i> Back
                </a>
            </div>
        </div>

        {{-- ══ Products Table ══ --}}
        <div class="card border-0 shadow-sm">
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead class="table-light">
                        <tr>
                            <th>Image</th>
                            <th>Product Title</th>
                            <th>Price</th>
                            <th>Offer Price</th>
                            <th>Stock</th>
                            <th>Created By</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($products as $product)
                            <tr>
                                <td>
                                    @if ($product->feature_image)
                                        <img src="{{ asset('storage/' . $product->feature_image) }}"
                                            alt="{{ $product->product_title }}" class="img-thumbnail"
                                            style="max-width: 50px; max-height: 50px;">
                                    @else
                                        <span class="badge bg-secondary">No Image</span>
                                    @endif
                                </td>
                                <td>
                                    <strong>{{ $product->product_title }}</strong>
                                </td>
                                <td>${{ number_format($product->price, 2) }}</td>
                                <td>{{ $product->offer_price ? '$' . number_format($product->offer_price, 2) : '-' }}</td>
                                <td>
                                    @if ($product->stock > 0)
                                        <span class="badge bg-success">{{ $product->stock }} in stock</span>
                                    @else
                                        <span class="badge bg-danger">Out of stock</span>
                                    @endif

                                    @if ($product->hasVariantInventory())
                                        <div class="small text-muted mt-1">
                                            {{ count($product->variantInventory()) }} tracked variants
                                        </div>
                                    @endif
                                </td>
                                <td>{{ $product->creator->name }}</td>
                                <td>
                                    <div class="btn-group" role="group">
                                        <a href="{{ route('admin.shops.products.show', [$shop, $product]) }}"
                                            class="btn btn-sm btn-info">
                                            <i class="bx bx-show"></i>
                                        </a>
                                        <a href="{{ route('admin.shops.products.edit', [$shop, $product]) }}"
                                            class="btn btn-sm btn-warning">
                                            <i class="bx bx-edit"></i>
                                        </a>
                                        <form action="{{ route('admin.shops.products.destroy', [$shop, $product]) }}"
                                            method="POST" style="display: inline;"
                                            id="deleteProductForm-{{ $product->id }}">
                                            @csrf
                                            @method('DELETE')
                                            <button type="button" class="btn btn-sm btn-danger"
                                                onclick="openDeleteProductModal('deleteProductForm-{{ $product->id }}', '{{ addslashes($product->product_title) }}')">
                                                <i class="bx bx-trash"></i>
                                            </button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="7" class="text-center py-5">
                                    <p class="text-muted mb-0">No products found</p>
                                    <small class="text-muted">
                                        <a href="{{ route('admin.shops.products.create', $shop) }}">Add your first
                                            product</a>
                                    </small>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="modal fade" id="deleteProductModal" tabindex="-1" aria-labelledby="deleteProductModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteProductModalLabel">Delete Product</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p class="mb-2">Are you sure you want to delete this product?</p>
                    <p class="mb-0 text-muted" id="deleteProductName"></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-danger" id="confirmDeleteProductBtn">Delete</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('backend_js')
    <script>
        let selectedDeleteProductFormId = null;

        function openDeleteProductModal(formId, productTitle) {
            selectedDeleteProductFormId = formId;
            document.getElementById('deleteProductName').textContent = productTitle ? `Product: ${productTitle}` : '';
            const modal = new bootstrap.Modal(document.getElementById('deleteProductModal'));
            modal.show();
        }

        document.getElementById('confirmDeleteProductBtn').addEventListener('click', function() {
            if (!selectedDeleteProductFormId) {
                return;
            }

            const form = document.getElementById(selectedDeleteProductFormId);
            if (form) {
                form.submit();
            }
        });
    </script>
@endpush