@extends('client.layouts.main')

@section('title', 'Upgrade Hosting')

@section('content')
<div class="portlet light">
    <div class="portlet-title">
        <div class="caption"><span class="caption-subject theme-font bold uppercase">Upgrade / Downgrade Hosting</span></div>
    </div>
    <div class="portlet-body">
        <div class="alert alert-info">
            <strong>Current Package:</strong> {{ $hosting->product->name ?? $hosting->package_name ?? 'N/A' }}
            @if($hosting->billingCycle)
                ({{ $hosting->billingCycle->name }})
            @endif
            &mdash; {{ $hosting->domain }}
        </div>

        @if($products->isEmpty())
            <div class="alert alert-warning">No other packages are available for upgrade/downgrade.</div>
        @else
            <form action="{{ route('client.hosting.upgrade.process', $hosting) }}" method="POST">
                @csrf
                <div class="row">
                    @foreach($products as $product)
                    <div class="col-md-4" style="margin-bottom:15px;">
                        <label style="display:block; padding:15px; border:2px solid {{ $loop->first ? '#3598dc' : '#e0e0e0' }}; border-radius:6px; cursor:pointer; background:{{ $loop->first ? '#f5faff' : '#fff' }}; text-align:center;" onclick="this.parentNode.parentNode.querySelectorAll('label').forEach(function(l){l.style.border='2px solid #e0e0e0';l.style.background='#fff';}); this.style.border='2px solid #3598dc'; this.style.background='#f5faff';">
                            <input type="radio" name="product_id" value="{{ $product->id }}" {{ $loop->first ? 'checked' : '' }} style="display:none;">
                            <strong style="display:block; font-size:16px; margin-bottom:5px;">{{ $product->name }}</strong>
                            @if($product->description)
                                <span style="display:block; font-size:12px; color:#888; margin-bottom:8px;">{{ Str::limit($product->description, 80) }}</span>
                            @endif
                            @if($product->pricing->isNotEmpty())
                                @php $firstPrice = $product->pricing->first(); @endphp
                                <span style="display:block; font-size:18px; font-weight:bold; color:#3598dc;">
                                    {{ number_format($firstPrice->price, 2) }}
                                </span>
                                <span style="font-size:11px; color:#999;">/ {{ $firstPrice->billingCycle->name ?? 'cycle' }}</span>
                            @endif
                        </label>
                    </div>
                    @endforeach
                </div>

                @if($errors->has('product_id'))
                    <span class="help-block text-danger">{{ $errors->first('product_id') }}</span>
                @endif

                <div style="margin-top:15px;">
                    <a href="{{ route('client.hosting.show', $hosting) }}" class="btn btn-default"><i class="fa fa-arrow-left"></i> Back</a>
                    <button type="submit" class="btn btn-success pull-right" onclick="return confirm('Change your hosting package? This will take effect immediately.')">
                        <i class="fa fa-exchange"></i> Confirm Upgrade
                    </button>
                </div>
            </form>
        @endif
    </div>
</div>
@endsection