@extends('storefront.layouts.main')

@section('title', $groups->count() === 1 ? $groups->first()->name : 'Our Store')

@section('content')
<!-- Hero -->
<div class="row">
    <div class="col-md-12">
        <div class="portlet box blue">
            <div class="portlet-title">
                <div class="caption"><h2 class="no-margin">{{ $groups->count() === 1 ? $groups->first()->name : 'Our Store' }}</h2></div>
            </div>
            <div class="portlet-body" style="padding: 30px;">
                <h4 class="text-center">Reliable, fast, and secure hosting for your website.</h4>
            </div>
        </div>
    </div>
</div>

<!-- Content -->
<div class="row">
    {{-- Left Sidebar --}}
    <div class="col-md-3">
        <div class="portlet light">
            <div class="portlet-title">
                <div class="caption"><span class="caption-subject theme-font bold uppercase">Categories</span></div>
            </div>
            <div class="portlet-body" style="padding:0;">
                <ul class="list-group" style="margin-bottom:0;">
                    <li class="list-group-item {{ !request('group') ? 'active' : '' }}" style="{{ !request('group') ? 'background-color:#2a5298; border-color:#2a5298;' : '' }}">
                        <a href="{{ route('storefront.products') }}" style="display:block; color:{{ !request('group') ? '#fff' : '#333' }}; text-decoration:none; font-weight:{{ !request('group') ? '600' : 'normal' }};">
                            <i class="fa fa-th-large" style="width:20px;"></i> All Products
                        </a>
                    </li>
                    @foreach($allGroups as $ag)
                    <li class="list-group-item {{ request('group') == $ag->slug ? 'active' : '' }}" style="{{ request('group') == $ag->slug ? 'background-color:#2a5298; border-color:#2a5298;' : '' }}">
                        <a href="{{ route('storefront.products', ['group' => $ag->slug]) }}" style="display:block; color:{{ request('group') == $ag->slug ? '#fff' : '#333' }}; text-decoration:none; font-weight:{{ request('group') == $ag->slug ? '600' : 'normal' }};">
                            <i class="fa fa-server" style="width:20px;"></i> {{ $ag->name }}
                        </a>
                    </li>
                    @endforeach
                </ul>
            </div>
        </div>

        <div class="portlet light">
            <div class="portlet-title">
                <div class="caption"><span class="caption-subject theme-font bold uppercase">Quick Links</span></div>
            </div>
            <div class="portlet-body" style="padding:0;">
                <ul class="list-group" style="margin-bottom:0;">
                    <li class="list-group-item"><a href="{{ route('storefront.domains') }}" style="display:block; color:#333; text-decoration:none;"><i class="fa fa-globe" style="width:20px; color:#2a5298;"></i> Domain Registration</a></li>
                    <li class="list-group-item"><a href="{{ route('storefront.domain-transfer') }}" style="display:block; color:#333; text-decoration:none;"><i class="fa fa-exchange" style="width:20px; color:#2a5298;"></i> Domain Transfer</a></li>
                    <li class="list-group-item"><a href="{{ route('storefront.tld-pricing') }}" style="display:block; color:#333; text-decoration:none;"><i class="fa fa-tag" style="width:20px; color:#2a5298;"></i> Domain Pricing</a></li>
                </ul>
            </div>
        </div>
    </div>

    {{-- Products --}}
    <div class="col-md-9">
        @forelse($groups as $group)
            <div style="margin-bottom: 15px; {{ !$loop->first ? 'margin-top: 30px;' : '' }}">
                <h2>{{ $group->name }}</h2>
                @if($group->description)
                    <p class="font-grey-mint">{{ $group->description }}</p>
                @endif
            </div>

            <div class="row">
                @foreach($group->products as $product)
            @php $firstPricing = $product->pricing->first(); @endphp
            <div class="col-md-4" style="margin-bottom: 20px;">
                <div class="product-card {{ $product->is_featured ? 'product-featured' : '' }}">
                    @if($product->is_featured)
                        <div class="product-badge">Most Popular</div>
                    @endif

                    <div class="product-header">
                        <h3 class="product-name">{{ $product->name }}</h3>
                        @if($product->short_description)
                            <p class="product-desc">{{ $product->short_description }}</p>
                        @endif
                    </div>

                    <div class="product-price-block">
                        @if($firstPricing)
                            <span class="product-price">{{ $selectedCurrency->symbol ?? '৳' }}{{ number_format($firstPricing->price, 2) }}</span>
                            <span class="product-cycle">/{{ $firstPricing->billingCycle?->name ?? 'month' }}</span>
                        @endif
                    </div>

                    @if($product->features && is_array($product->features))
                        <ul class="product-features">
                            @foreach($product->features as $feature)
                                <li><i class="fa fa-check-circle"></i> {{ $feature }}</li>
                            @endforeach
                        </ul>
                    @endif

                    @if($product->pricing->count() > 1)
                        <div class="product-pricing-table">
                            @foreach($product->pricing as $pricing)
                                @if($pricing->billingCycle)
                                    <div class="pricing-row">
                                        <span>{{ $pricing->billingCycle->name }}</span>
                                        <span class="pricing-amount">{{ $selectedCurrency->symbol ?? '৳' }}{{ number_format($pricing->price, 2) }}</span>
                                    </div>
                                @endif
                            @endforeach
                        </div>
                    @endif

                    <div class="product-action">
                        @if($product->requires_domain)
                            @if($product->pricing->count() > 1)
                                <select id="cycle_{{ $product->id }}" class="form-control" style="margin-bottom:10px;">
                                    @foreach($product->pricing as $pricing)
                                        @if($pricing->billingCycle)
                                            <option value="{{ $pricing->billing_cycle_id }}">{{ $pricing->billingCycle->name }} - {{ $selectedCurrency->symbol ?? '৳' }}{{ number_format($pricing->price, 2) }}</option>
                                        @endif
                                    @endforeach
                                </select>
                                <a href="#" onclick="window.location='{{ route('storefront.choose-domain') }}?product_id={{ $product->id }}&billing_cycle_id='+document.getElementById('cycle_{{ $product->id }}').value; return false;"
                                   class="btn btn-block {{ $product->is_featured ? 'product-btn-featured' : 'product-btn' }}">
                                    <i class="fa fa-shopping-cart"></i> Order Now
                                </a>
                            @elseif($product->pricing->isNotEmpty())
                                <a href="{{ route('storefront.choose-domain', ['product_id' => $product->id, 'billing_cycle_id' => $firstPricing->billing_cycle_id]) }}"
                                   class="btn btn-block {{ $product->is_featured ? 'product-btn-featured' : 'product-btn' }}">
                                    <i class="fa fa-shopping-cart"></i> Order Now
                                </a>
                            @endif
                        @else
                            <form action="{{ auth()->check() ? route('client.cart.add') : route('cart.add.guest') }}" method="POST">
                                @csrf
                                <input type="hidden" name="item_type" value="{{ $product->type }}">
                                <input type="hidden" name="product_id" value="{{ $product->id }}">
                                @if($product->pricing->count() > 1)
                                    <select name="billing_cycle_id" class="form-control" style="margin-bottom:10px;">
                                        @foreach($product->pricing as $pricing)
                                            @if($pricing->billingCycle)
                                                <option value="{{ $pricing->billing_cycle_id }}">{{ $pricing->billingCycle->name }} - {{ $selectedCurrency->symbol ?? '৳' }}{{ number_format($pricing->price, 2) }}</option>
                                            @endif
                                        @endforeach
                                    </select>
                                @elseif($product->pricing->isNotEmpty())
                                    <input type="hidden" name="billing_cycle_id" value="{{ $firstPricing->billing_cycle_id }}">
                                @endif
                                <button type="submit" class="btn btn-block {{ $product->is_featured ? 'product-btn-featured' : 'product-btn' }}">
                                    <i class="fa fa-shopping-cart"></i> Order Now
                                </button>
                            </form>
                        @endif
                    </div>
                </div>
            </div>
        @endforeach
    </div>
        @empty
            <div class="text-center" style="padding: 50px 0;">
                <p class="font-grey-mint" style="font-size: 16px;">No products available at this time.</p>
            </div>
        @endforelse
    </div>
</div>
@endsection