@extends('frontend.layouts.app')

@section('title', $product->name)

@section('content')
<div class="container py-5">
    <!-- Breadcrumb -->
    <nav aria-label="breadcrumb" class="mb-4">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
            <li class="breadcrumb-item"><a href="{{ route('products.browse') }}">Products</a></li>
            <li class="breadcrumb-item active">{{ $product->name }}</li>
        </ol>
    </nav>

    <div class="row">
        <!-- Product Image -->
        <div class="col-lg-6 mb-4">
            <div class="card">
                <img src="{{ asset($product->image) }}" 
                     class="card-img-top img-fluid" 
                     alt="{{ $product->name }}">
                @if($product->gallery)
                <div class="card-body">
                    <div class="row">
                        @foreach(json_decode($product->gallery) as $image)
                        <div class="col-3">
                            <img src="{{ asset($image) }}" 
                                 class="img-thumbnail" 
                                 alt="Gallery Image">
                        </div>
                        @endforeach
                    </div>
                </div>
                @endif
            </div>
        </div>

        <!-- Product Details -->
        <div class="col-lg-6">
            <h1 class="mb-3">{{ $product->name }}</h1>
            
            <div class="mb-4">
                <span class="badge bg-primary">{{ $product->category->name ?? 'Uncategorized' }}</span>
                @if($product->is_featured)
                <span class="badge bg-warning">Featured</span>
                @endif
            </div>

            <!-- Short Description -->
            <div class="mb-4">
                <p class="lead">{{ $product->short_description }}</p>
            </div>

            <!-- Product Variation Selector -->
            <div class="card mb-4">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0">Select Your Package</h5>
                </div>
                <div class="card-body">
                    <form id="productVariationForm" method="GET" action="{{ route('checkout.show') }}">
                        @csrf
                        
                        <!-- Account Type Selection -->
                        <div class="mb-4">
                            <h6 class="mb-3">Select Account Type:</h6>
                            <div class="row">
                                @foreach($accountTypes as $type)
                                <div class="col-md-6 mb-3">
                                    <div class="variation-option card h-100 cursor-pointer 
                                                {{ $type->is_default ? 'border-primary' : '' }}"
                                         data-variation-id="{{ $type->id }}">
                                        <div class="card-body text-center">
                                            <div class="form-check">
                                                <input class="form-check-input" 
                                                       type="radio" 
                                                       name="account_type" 
                                                       id="accountType{{ $type->id }}"
                                                       value="{{ $type->id }}"
                                                       {{ $type->is_default ? 'checked' : '' }}>
                                                <label class="form-check-label fw-bold" 
                                                       for="accountType{{ $type->id }}">
                                                    {{ $type->name }}
                                                </label>
                                            </div>
                                            <small class="text-muted">{{ $type->description ?? '' }}</small>
                                        </div>
                                    </div>
                                </div>
                                @endforeach
                            </div>
                        </div>

                        <!-- Duration Selection -->
                        <div class="mb-4">
                            <h6 class="mb-3">Select Duration:</h6>
                            <div class="row" id="durationOptions">
                                <!-- Loaded via AJAX -->
                            </div>
                        </div>

                        <!-- Price Display -->
                        <div class="bg-light p-4 rounded mb-4">
                            <div class="row">
                                <div class="col">
                                    <h6 class="text-muted">Selected Package:</h6>
                                    <h5 id="selectedPackage">Personal Account - 1 Month</h5>
                                </div>
                                <div class="col text-end">
                                    <h6 class="text-muted">Total Price:</h6>
                                    <h2 class="text-primary" id="displayPrice">
                                        {{ setting('currency_symbol', '৳') }} 0.00
                                    </h2>
                                </div>
                            </div>
                            <input type="hidden" name="product_id" value="{{ $product->id }}">
                            <input type="hidden" name="variation_id" id="selectedVariationId">
                            <input type="hidden" name="duration" id="selectedDuration">
                        </div>

                        <!-- Action Buttons -->
                        <div class="d-grid gap-2">
                            <button type="submit" class="btn btn-primary btn-lg" id="buyNowBtn">
                                <i class="fas fa-shopping-cart me-2"></i> Buy Now
                            </button>
                            <button type="button" class="btn btn-outline-primary" id="addToCartBtn" disabled>
                                <i class="fas fa-plus me-2"></i> Add to Cart (Coming Soon)
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Product Tabs -->
    <div class="row mt-5">
        <div class="col">
            <ul class="nav nav-tabs" id="productTabs" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="description-tab" data-bs-toggle="tab" 
                            data-bs-target="#description" type="button">
                        Description
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="features-tab" data-bs-toggle="tab" 
                            data-bs-target="#features" type="button">
                        Features
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="policy-tab" data-bs-toggle="tab" 
                            data-bs-target="#policy" type="button">
                        Refund Policy
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="faq-tab" data-bs-toggle="tab" 
                            data-bs-target="#faq" type="button">
                        FAQ
                    </button>
                </li>
            </ul>
            
            <div class="tab-content p-4 border border-top-0" id="productTabsContent">
                <div class="tab-pane fade show active" id="description" role="tabpanel">
                    {!! $product->full_description !!}
                </div>
                <div class="tab-pane fade" id="features" role="tabpanel">
                    <ul class="list-unstyled">
                        <li><i class="fas fa-check text-success me-2"></i> Instant Delivery</li>
                        <li><i class="fas fa-check text-success me-2"></i> 24/7 Support</li>
                        <li><i class="fas fa-check text-success me-2"></i> Premium Quality</li>
                        <li><i class="fas fa-check text-success me-2"></i> Regular Updates</li>
                    </ul>
                </div>
                <div class="tab-pane fade" id="policy" role="tabpanel">
                    <div class="alert alert-warning">
                        <h5><i class="fas fa-exclamation-triangle me-2"></i> Refund Policy</h5>
                        <p class="mb-0">
                            Due to the digital nature of our products, we do not offer refunds after delivery. 
                            Please review your selection carefully before purchasing.
                        </p>
                    </div>
                </div>
                <div class="tab-pane fade" id="faq" role="tabpanel">
                    <div class="accordion" id="faqAccordion">
                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button" type="button" data-bs-toggle="collapse" 
                                        data-bs-target="#faq1">
                                    How long does delivery take?
                                </button>
                            </h2>
                            <div id="faq1" class="accordion-collapse collapse show" data-bs-parent="#faqAccordion">
                                <div class="accordion-body">
                                    Delivery is usually instant. You'll receive your product within 5-30 minutes 
                                    after successful payment.
                                </div>
                            </div>
                        </div>
                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" 
                                        data-bs-target="#faq2">
                                    Is this a shared account?
                                </button>
                            </h2>
                            <div id="faq2" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                                <div class="accordion-body">
                                    We offer both personal and shared accounts. Personal accounts are for 
                                    individual use only, while shared accounts can be used by multiple users.
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Related Products -->
    @if($relatedProducts->count() > 0)
    <div class="row mt-5">
        <div class="col">
            <h3 class="mb-4">Related Products</h3>
            <div class="row">
                @foreach($relatedProducts as $relatedProduct)
                <div class="col-md-3 mb-4">
                    <div class="card product-card h-100">
                        <img src="{{ asset($relatedProduct->image) }}" 
                             class="card-img-top" 
                             alt="{{ $relatedProduct->name }}">
                        <div class="card-body">
                            <h5 class="card-title">{{ Str::limit($relatedProduct->name, 40) }}</h5>
                            <p class="card-text text-muted small">
                                {{ Str::limit($relatedProduct->short_description, 60) }}
                            </p>
                            <div class="d-flex justify-content-between align-items-center">
                                <h6 class="text-primary mb-0">
                                    {{ setting('currency_symbol', '৳') }} {{ number_format($relatedProduct->base_price, 2) }}
                                </h6>
                                <a href="{{ route('product.detail', $relatedProduct->slug) }}" 
                                   class="btn btn-sm btn-outline-primary">
                                    View
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </div>
    @endif
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    // Global variables
    let selectedVariationId = null;
    let selectedDuration = null;
    let selectedPrice = 0;
    
    // Initialize variation selection
    function initializeVariations() {
        const defaultVariation = $('input[name="account_type"]:checked').first();
        if (defaultVariation.length) {
            selectedVariationId = defaultVariation.val();
            loadDurations(selectedVariationId);
        }
    }
    
    // Load durations for selected variation
    function loadDurations(variationId) {
        $.ajax({
            url: '{{ route("variation.prices") }}',
            type: 'GET',
            data: {
                variation_id: variationId,
                account_type_id: variationId
            },
            beforeSend: function() {
                $('#durationOptions').html(`
                    <div class="col-12 text-center py-4">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                    </div>
                `);
            },
            success: function(response) {
                if (response.success) {
                    renderDurations(response.prices);
                    if (response.prices.length > 0) {
                        selectDefaultDuration(response.prices[0]);
                    }
                }
            },
            error: function() {
                $('#durationOptions').html(`
                    <div class="col-12">
                        <div class="alert alert-danger">
                            Failed to load durations. Please try again.
                        </div>
                    </div>
                `);
            }
        });
    }
    
    // Render duration options
    function renderDurations(prices) {
        let html = '';
        
        prices.forEach(function(price) {
            html += `
                <div class="col-md-4 mb-3">
                    <div class="duration-option card h-100 cursor-pointer" 
                         data-duration="${price.duration}"
                         data-price-id="${price.id}"
                         data-price="${price.price}">
                        <div class="card-body text-center">
                            <div class="form-check">
                                <input class="form-check-input" 
                                       type="radio" 
                                       name="duration_radio" 
                                       id="duration${price.id}"
                                       value="${price.id}">
                                <label class="form-check-label fw-bold" 
                                       for="duration${price.id}">
                                    ${price.duration_label}
                                </label>
                            </div>
                            <h5 class="text-primary mt-2">
                                {{ setting('currency_symbol', '৳') }} ${parseFloat(price.price).toFixed(2)}
                            </h5>
                            <small class="text-muted">
                                {{ setting('currency_symbol', '৳') }}${
                                    parseFloat(price.price / 
                                    parseInt(price.duration_label.split(' ')[0])).toFixed(2)
                                }/month
                            </small>
                        </div>
                    </div>
                </div>
            `;
        });
        
        $('#durationOptions').html(html);
        
        // Add click event to duration options
        $('.duration-option').click(function() {
            selectDuration($(this));
        });
    }
    
    // Select default duration
    function selectDefaultDuration(price) {
        selectedDuration = price.duration;
        selectedPrice = price.price;
        
        // Update UI
        $(`#duration${price.id}`).prop('checked', true);
        $(`.duration-option[data-duration="${price.duration}"]`).addClass('border-primary');
        
        // Update hidden fields
        updateSelection(selectedVariationId, selectedDuration, selectedPrice);
    }
    
    // Select duration on click
    function selectDuration(element) {
        const duration = element.data('duration');
        const priceId = element.data('price-id');
        const price = element.data('price');
        
        // Remove active class from all duration options
        $('.duration-option').removeClass('border-primary');
        
        // Add active class to selected option
        element.addClass('border-primary');
        
        // Update radio button
        $(`#duration${priceId}`).prop('checked', true);
        
        // Update selection
        selectedDuration = duration;
        selectedPrice = price;
        
        updateSelection(selectedVariationId, selectedDuration, selectedPrice);
    }
    
    // Update selected package display
    function updateSelection(variationId, duration, price) {
        const variationName = $(`#accountType${variationId}`).next('label').text().trim();
        const durationLabel = $(`.duration-option[data-duration="${duration}"] .form-check-label`).text().trim();
        
        // Update display
        $('#selectedPackage').text(`${variationName} - ${durationLabel}`);
        $('#displayPrice').text(`{{ setting('currency_symbol', '৳') }} ${parseFloat(price).toFixed(2)}`);
        
        // Update hidden fields
        $('#selectedVariationId').val(variationId);
        $('#selectedDuration').val(duration);
        
        // Enable buy now button
        $('#buyNowBtn').prop('disabled', false);
    }
    
    // Account type change event
    $('input[name="account_type"]').change(function() {
        selectedVariationId = $(this).val();
        
        // Update variation option styling
        $('.variation-option').removeClass('border-primary');
        $(this).closest('.variation-option').addClass('border-primary');
        
        // Load durations for new variation
        loadDurations(selectedVariationId);
    });
    
    // Form submission validation
    $('#productVariationForm').submit(function(e) {
        if (!selectedVariationId || !selectedDuration) {
            e.preventDefault();
            alert('Please select both account type and duration.');
            return false;
        }
        
        // Add parameters to form action
        const form = $(this);
        const action = form.attr('action');
        const params = `?product_id={{ $product->id }}&variation_id=${selectedVariationId}&duration=${selectedDuration}`;
        form.attr('action', action + params);
        
        return true;
    });
    
    // Initialize
    initializeVariations();
});
</script>
@endpush