@extends('dashboard.layouts.master')
@section('title', 'Product Details')

@section('content')
    <div class="row">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h2 class="card-title mb-0">{{ $product->title }} Details</h2>
                <div class="d-flex align-items-center gap-2">
                     <div class="bg-light border rounded px-3 py-2 text-center">
                        <small class="text-muted">Total Stock</small><br>
                        <span class="fw-bold fs-5 text-success">{{ $totalStock }}</span>
                    </div> 
                     <a href="{{ route('dashboard.stocks.create') }}?product_id={{ $product->id }}"
                        class="btn btn-sm btn-primary me-2">
                        <i class="bi bi-plus-circle"></i> Add Stock
                    </a>
                    <a href="{{ route('dashboard.stocks.index', ['product_id' => $product->id]) }}"
                        class="btn btn-sm btn-info">
                        <i class="bi bi-clock-history"></i> View Stock History
                    </a>
                    <a href="{{ route('dashboard.productReviews.index', ['product_id' => $product->id]) }}"
                        class="btn btn-sm btn-warning">
                        <i class="bi bi-star"></i> View Product Reviews
                    </a> 
                    <a href="{{ route('dashboard.products.index') }}" class="btn btn-sm btn-secondary">
                        <i class="bi bi-arrow-left"></i> Back to List
                    </a>
                </div>
            </div>

            <div class="card-body">
                <div class="row">
                    <div class="col-md-4 mb-3">
                        <img src="{{ asset('storage/' . $product->thumbnail) }}" alt="Product Thumbnail"
                            class="img-fluid rounded object-fit-cover" style="width: 80%; margin-left: 10%;">
                        <hr>
                        @if ($product->banner_image)
                            <h4>Banner Image</h4>
                            <img src="{{ asset('storage/' . $product->banner_image) }}" alt="Banner Image"
                                class="img-fluid rounded object-fit-cover">
                        @endif
                    </div>
                    <div class="col-md-8">
                        <p><strong>Product Name:</strong> {{ $product->title }}</p>
                        <p><strong>Sub Title:</strong> {{ $product->sub_title ?? 'N/A' }}</p>
                        <p><strong>Categories:</strong>
                            @if ($product->categories->count())
                                @foreach ($product->categories as $category)
                                    {{ $category->name }}@if (!$loop->last)
                                        ,
                                    @endif
                                @endforeach
                            @else
                                N/A
                            @endif
                        </p>
                        <p><strong>Slug:</strong> {{ $product->slug ?? 'N/A' }}</p>
                        <p><strong>Display Price:</strong> Rs. {{ $product->display_price ?? 'N/A' }}</p>
                        <p><strong>Selling Price:</strong> Rs. {{ $product->selling_price ?? 'N/A' }}</p>
                        <p><strong>Cost Price:</strong> Rs. {{ $product->cost_price ?? 'N/A' }}</p>
                        <p><strong>Weight:</strong> {{ $product->weight ?? 'N/A' }}</p>
                        <p><strong>Status:</strong>
                            <span class="badge bg-{{ $product->status ? 'success' : 'danger' }}">
                                {{ $product->status ? 'Active' : 'Inactive' }}
                            </span>
                        </p>                        
                        <p><strong>Description:</strong>
                            {!! $product->description ?? 'N/A' !!}
                        </p>
                        <p><strong>Summary:</strong> {{ $product->summary ?? 'N/A' }}</p>
                        <p><strong>Meta Title:</strong> {{ $product->meta_title ?? 'N/A' }}</p>
                        <p><strong>Meta Description:</strong> {{ $product->meta_description ?? 'N/A' }}</p>
                        <p><strong>Meta Keywords:</strong>
                            @if (is_array($product->meta_keywords))
                                {{ implode(', ', $product->meta_keywords) }}
                            @else
                                {{ $product->meta_keywords ?? 'N/A' }}
                            @endif
                        </p>
                        <p><strong>Created At:</strong> {{ $product->created_at->format('d M, Y h:i A') }}</p>
                    </div>
                </div>

                <hr>

                @if ($product->designs->count() > 0)
                    <div class="row mt-4">
                        <div class="col-12">
                            <h4 class="mb-3">Product Designs ({{ $product->designs->count() }})</h4>

                            <div id="designCarousel" class="carousel slide" data-bs-ride="carousel">
                                <div class="carousel-inner">
                                    @foreach ($product->designs->chunk(4) as $chunkIndex => $designChunk)
                                        <div class="carousel-item {{ $chunkIndex === 0 ? 'active' : '' }}">
                                            <div class="row">
                                                @foreach ($designChunk as $design)
                                                    <div class="col-md-3">
                                                        <div class="card h-100 shadow-sm">
                                                            <img src="{{ asset('storage/' . $design->image) }}"
                                                                alt="{{ $design->name }}" class="card-img-top"
                                                                style="height: 150px; object-fit: cover;">
                                                            <div class="card-body text-center">
                                                                <h6 class="card-title">{{ $design->name }}</h6>
                                                                <p class="text-primary fw-bold">Rs. {{ $design->price }}
                                                                </p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>
                                    @endforeach
                                </div>

                                @if ($product->designs->count() > 4)
                                    <button class="carousel-control-prev" type="button" data-bs-target="#designCarousel"
                                        data-bs-slide="prev">
                                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                        <span class="visually-hidden">Previous</span>
                                    </button>
                                    <button class="carousel-control-next" type="button" data-bs-target="#designCarousel"
                                        data-bs-slide="next">
                                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                        <span class="visually-hidden">Next</span>
                                    </button>
                                @endif
                            </div>
                        </div>
                    </div>
                    <hr>
                @endif

                <!-- Product Variants Section -->
                @if ($resolvedVariants->count() > 0)
                    <div class="row mt-4">
                        <div class="col-12">
                            <h4 class="mb-3">Product Variants ({{ $resolvedVariants->count() }})</h4>
                            <div class="table-responsive">
                                <table class="table table-bordered table-hover">
                                    <thead class="table-light">
                                        <tr>
                                            <th>#</th>
                                            @foreach (array_keys($variants) as $attribute)
                                                <th>{{ str_replace('Select ', '', $attribute) }}</th>
                                            @endforeach
                                            <th>Stock</th>
                                            <th>Price</th>
                                            <th>Status</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($resolvedVariants as $index => $variant)
                                            <tr>
                                                <td>{{ $index + 1 }}</td>

                                                @foreach (array_keys($variants) as $attribute)
                                                    <td>
                                                        {{ $variant['attributes'][$attribute]->values ?? 'N/A' }}
                                                    </td>
                                                @endforeach

                                                <td>
                                                    <span class="badge bg-{{ $variant['stock'] > 0 ? 'success' : 'danger' }}">
                                                        {{ $variant['stock'] }}
                                                    </span>
                                                </td>

                                                <td>Rs. {{ $variant['price'] }}</td>

                                                <td>
                                                    <span class="badge bg-{{ $variant['stock'] > 0 ? 'success' : 'secondary' }}">
                                                        {{ $variant['stock'] > 0 ? 'Available' : 'Out of Stock' }}
                                                    </span>
                                                </td>

                                                <td>
                                                    <button class="btn btn-sm btn-primary" data-bs-toggle="modal"
                                                        data-bs-target="#addStockModal" data-id="{{ $variant['id'] }}"
                                                        data-stock="{{ $variant['stock'] }}">
                                                        Add Stock
                                                    </button>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <hr>
                @endif



                <div class="modal fade" id="addStockModal" tabindex="-1" aria-labelledby="addStockLabel"
                    aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="addStockLabel">Add Stock to Variant</h5>
                            </div>
                            <form method="POST" action="{{ route('dashboard.productVariants.addStock') }}">
                                @csrf
                                <input type="hidden" name="variant_id" id="variant_id">
                                <div class="modal-body">
                                    <div class="mb-3">
                                        <label for="stock" class="form-label">Add Stock Quantity</label>
                                        <input type="number" class="form-control" name="stock" id="stock"
                                            min="1" required>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary"
                                        data-bs-dismiss="modal">Cancel</button>
                                    <button type="submit" class="btn btn-primary">Update Stock</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>


                <!-- Product Images Section -->
                <div class="row mt-4">
                    <div class="col-12">
                        <h4 class="mb-3">Product Images ({{ $product->images->count() }})</h4>
                        <div class="row">
                            @livewire('product-image', ['product' => $product])
                        </div>
                    </div>
                </div>
            </div>

            <div class="card-footer">
                @can('update-products')
                    <a href="{{ route('dashboard.products.edit', $product->id) }}" class="btn btn-warning me-2">
                        <i class="bi bi-pencil"></i> Edit
                    </a>
                @endcan
                @can('delete-products')
                    <form action="{{ route('dashboard.products.destroy', $product->id) }}" method="POST"
                        class="d-inline-block">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="btn btn-danger delete_confirmation">
                            <i class="bi bi-trash"></i> Delete
                        </button>
                    </form>
                @endcan
                @can('view-products')
                    <a href="{{ route('dashboard.products.index') }}" class="btn btn-info ms-2">
                        <i class="bi bi-list"></i> View All Products
                    </a>
                @endcan
            </div>
        </div>
    </div>
@endsection

@push('styles')
    <style>
        .card {
            box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
            border: 1px solid rgba(0, 0, 0, 0.125);
        }

        .card-header {
            background: linear-gradient(45deg, #f8f9fa, #e9ecef);
        }

        .table th {
            background-color: #f8f9fa;
            border-color: #dee2e6;
        }

        .badge {
            font-size: 0.75em;
        }

        .object-fit-cover {
            object-fit: cover;
        }
    </style>
@endpush
@push('scripts')
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const addStockModal = document.getElementById("addStockModal");
            addStockModal.addEventListener("show.bs.modal", function(event) {
                const button = event.relatedTarget;
                const variantId = button.getAttribute("data-id");
                const currentStock = button.getAttribute("data-stock");
                document.getElementById("variant_id").value = variantId;
                document.getElementById("stock").value = currentStock;
            });
        });
    </script>
@endpush