@extends('backend.layout')

@push('backend_css')
    <style>
        .countdown {
            font-size: 0.85rem;
            font-weight: 600;
        }

        .countdown-badge {
            display: inline-block;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 0.4rem 0.8rem;
            border-radius: 0.25rem;
            margin-top: 0.3rem;
        }

        .countdown-expired {
            color: #dc3545;
        }
    </style>
@endpush

@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">{{ $product->product_title }}</h4>
                <small class="text-muted">{{ $shop->name }}</small>
            </div>
            <div class="d-flex gap-2">
                <a href="{{ route('admin.shops.products.edit', [$shop, $product]) }}" class="btn btn-warning">
                    <i class="bx bx-edit"></i> Edit
                </a>
                <form action="{{ route('admin.shops.products.destroy', [$shop, $product]) }}" method="POST"
                    style="display: inline;" id="deleteProductForm">
                    @csrf
                    @method('DELETE')
                    <button type="button" class="btn btn-danger"
                        onclick="openDeleteProductModal('deleteProductForm', '{{ addslashes($product->product_title) }}')">
                        <i class="bx bx-trash"></i> Delete
                    </button>

                </form>
                <a href="{{ route('admin.shops.products.index', $shop) }}" class="btn btn-light">
                    <i class="bx bx-arrow-back"></i> Back
                </a>
            </div>
        </div>

        <div class="row">
            {{-- ══ Product Images ══ --}}
            <div class="col-md-6">
                <div class="card border-0 shadow-sm mb-3">
                    <div class="card-body">
                        <h6 class="card-title fw-semibold mb-3">Product Images</h6>

                        {{-- Feature Image --}}
                        @if ($product->feature_image)
                            <div class="mb-3">
                                <small class="text-muted d-block mb-2">Feature Image:</small>
                                <img src="{{ asset('storage/' . $product->feature_image) }}"
                                    alt="{{ $product->product_title }}" class="img-fluid rounded" style="max-width: 100%;">
                            </div>
                        @endif

                        {{-- Gallery Images --}}
                        @if ($product->images->count() > 0)
                            <div>
                                <small class="text-muted d-block mb-2">Gallery:</small>
                                <div class="row g-2">
                                    @foreach ($product->images as $image)
                                        <div class="col-md-4">
                                            <img src="{{ asset('storage/' . $image->image_path) }}" alt="Gallery"
                                                class="img-fluid rounded">
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            </div>

            {{-- ══ Product Details ══ --}}
            <div class="col-md-6">
                <div class="card border-0 shadow-sm mb-3">
                    <div class="card-body">
                        <h6 class="card-title fw-semibold mb-3">Product Details</h6>

                        <div class="mb-3">
                            <small class="text-muted">Price</small>
                            <h5 class="mb-0">${{ number_format($product->price, 2) }}</h5>
                        </div>

                        <div class="mb-3">
                            <small class="text-muted">Offer Price</small>
                            @if ($product->offer_price)
                                <h5 class="mb-1 text-success">${{ number_format($product->offer_price, 2) }}</h5>
                                @if ($product->offer_expiry_date)
                                    <div class="countdown-badge" id="offerCountdown"
                                        data-expiry="{{ $product->offer_expiry_date->toIso8601String() }}">
                                        <i class="bx bx-time"></i> <span id="countdownText">Loading...</span>
                                    </div>
                                @else
                                    <small class="text-success">Offer active all time</small>
                                @endif
                            @else
                                <p class="mb-0 text-muted">-</p>
                            @endif
                        </div>

                        <div class="mb-3">
                            <small class="text-muted">Stock</small>
                            <div>
                                @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
                            </div>
                        </div>

                        <div class="mb-3">
                            <small class="text-muted">Created By</small>
                            <p class="mb-0">{{ $product->creator->name }}</p>
                        </div>

                        <div class="mb-3">
                            <small class="text-muted">Created At</small>
                            <p class="mb-0">{{ $product->created_at->format('M d, Y · H:i A') }}</p>
                        </div>

                        <div>
                            <small class="text-muted">Last Updated</small>
                            <p class="mb-0">{{ $product->updated_at->format('M d, Y · H:i A') }}</p>
                        </div>
                    </div>
                </div>

                {{-- Variant Availability --}}
                @if ($product->hasVariantInventory())
                    <div class="card border-0 shadow-sm mb-3">
                        <div class="card-body">
                            <h6 class="card-title fw-semibold mb-3">Variant Availability</h6>

                            <div class="d-flex flex-wrap gap-2">
                                @foreach ($product->variantInventory() as $variant)
                                    <span class="badge {{ $variant['stock'] > 0 ? 'bg-success' : 'bg-danger' }}">
                                        {{ $variant['label'] }}: {{ $variant['stock'] }}
                                    </span>
                                @endforeach
                            </div>
                        </div>
                    </div>
                @endif

                {{-- Dynamic Attributes --}}
                @if (count($product->displayAttributes()) > 0)
                    <div class="card border-0 shadow-sm">
                        <div class="card-body">
                            <h6 class="card-title fw-semibold mb-3">Product Variations / Attributes</h6>

                            <div class="d-flex flex-column gap-3">
                                @foreach ($product->displayAttributes() as $attributeKey => $attributeValues)
                                    <div>
                                        <small class="text-muted d-block mb-2">
                                            {{ \Illuminate\Support\Str::headline(str_replace('_', ' ', (string) $attributeKey)) }}
                                        </small>

                                        <div class="d-flex flex-wrap gap-2">
                                            @php
                                                $values = is_array($attributeValues)
                                                    ? $attributeValues
                                                    : [$attributeValues];
                                            @endphp

                                            @foreach ($values as $value)
                                                @php
                                                    $displayValue = $value;

                                                    if (is_array($value)) {
                                                        $displayValue =
                                                            $value['name'] ??
                                                            ($value['value'] ?? ($value['code'] ?? null));
                                                    }
                                                @endphp

                                                @if (!is_null($displayValue) && $displayValue !== '')
                                                    <span class="badge bg-secondary">{{ $displayValue }}</span>
                                                @endif
                                            @endforeach
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                @endif
            </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();
            }
        });

        (function() {
            const countdownContainer = document.getElementById('offerCountdown');
            const countdownText = document.getElementById('countdownText');

            if (!countdownContainer || !countdownText) {
                return;
            }

            const expiry = new Date(countdownContainer.dataset.expiry).getTime();

            if (Number.isNaN(expiry)) {
                countdownText.textContent = 'Invalid expiry date';
                countdownContainer.classList.add('countdown-expired');
                return;
            }

            const updateCountdown = () => {
                const now = Date.now();
                const difference = expiry - now;

                if (difference <= 0) {
                    countdownText.textContent = 'Offer expired';
                    countdownContainer.classList.add('countdown-expired');
                    return false;
                }

                const days = Math.floor(difference / (1000 * 60 * 60 * 24));
                const hours = Math.floor((difference / (1000 * 60 * 60)) % 24);
                const minutes = Math.floor((difference / (1000 * 60)) % 60);
                const seconds = Math.floor((difference / 1000) % 60);

                countdownText.textContent = `${days}d ${hours}h ${minutes}m ${seconds}s left`;
                return true;
            };

            if (!updateCountdown()) {
                return;
            }

            const timer = setInterval(() => {
                if (!updateCountdown()) {
                    clearInterval(timer);
                }
            }, 1000);
        })();
    </script>
@endpush