{{--
    Health Marketor Dashboard — Institution Renewal
    Authenticated page with <x-app-layout> + <x-module-hero>
    Requirements: 8.1, 8.4
--}}
<x-app-layout>

    <x-module-hero
        title="Renew Institution Listing"
        description="{{ $institution->name }}"
        icon="fa-sync-alt"
    >
        <x-slot name="backButton">
            <a href="{{ route('dashboard.institutions.index') }}"
               class="inline-flex items-center gap-2 text-white/80 hover:text-white text-sm transition">
                <i class="fas fa-arrow-left"></i> Back to My Institutions
            </a>
        </x-slot>
        <x-slot name="tabs">
            @can('view institutions')
                <a href="{{ route('dashboard.institutions.index') }}" class="module-hero-tab">
                    <i class="fas fa-hospital"></i> My Institutions
                </a>
            @endcan
            @can('view machines')
                <a href="{{ route('dashboard.machines.index') }}" class="module-hero-tab">
                    <i class="fas fa-cogs"></i> My Machines
                </a>
            @endcan
            @can('view payments')
                <a href="{{ route('dashboard.payments.index') }}" class="module-hero-tab">
                    <i class="fas fa-credit-card"></i> Payment History
                </a>
            @endcan
        </x-slot>
    </x-module-hero>

    <div class="p-6">
        <div class="max-w-5xl">
            
            {{-- Warning Banner --}}
            @if($institution->listing_status === 'expired')
                <div class="mb-6 p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg flex items-center">
                    <i class="fas fa-exclamation-triangle mr-3 text-xl"></i>
                    <div>
                        <strong>{{ __('Your listing has expired!') }}</strong>
                        <p class="text-sm">{{ __('Renew now to make it visible to the public again.') }}</p>
                    </div>
                </div>
            @elseif($institution->expires_at && $institution->expires_at->diffInDays(now()) < 7)
                <div class="mb-6 p-4 bg-yellow-100 border border-yellow-400 text-yellow-700 rounded-lg flex items-center">
                    <i class="fas fa-clock mr-3 text-xl"></i>
                    <div>
                        <strong>{{ __('Listing expiring soon!') }}</strong>
                        <p class="text-sm">{{ __('Your listing will expire in') }} {{ $institution->expires_at->diffForHumans() }}</p>
                    </div>
                </div>
            @endif

            {{-- Institution Summary --}}
            <div class="theme-card rounded-lg shadow-md overflow-hidden mb-6">
                <div class="p-6">
                    <div class="flex items-center gap-4">
                        <div class="w-16 h-16 rounded-lg bg-green-100 flex items-center justify-center">
                            @if($institution->logo)
                                <img src="{{ asset('storage/' . $institution->logo) }}" 
                                     alt="{{ $institution->name }}"
                                     class="w-12 h-12 object-contain">
                            @else
                                <i class="fas fa-hospital text-2xl text-green-500"></i>
                            @endif
                        </div>
                        <div class="flex-1">
                            <h3 class="font-semibold text-theme-heading">{{ $institution->name }}</h3>
                            <p class="text-sm text-theme-body">
                                <i class="fas fa-map-marker-alt mr-1"></i>
                                {{ $institution->city }}, {{ $institution->country }}
                            </p>
                        </div>
                    </div>

                    {{-- Coverage Info --}}
                    <div class="mt-4 pt-4 border-t theme-divider">
                        @if($lastPayment)
                            <div class="grid grid-cols-2 gap-4 text-sm">
                                <div>
                                    <span class="text-theme-body">{{ __('Last Payment') }}</span>
                                    <p class="font-semibold text-theme-heading">{{ $lastPayment->formatted_amount }}</p>
                                </div>
                                <div>
                                    <span class="text-theme-body">{{ __('Coverage End') }}</span>
                                    <p class="font-semibold text-theme-heading">
                                        @if($institution->expires_at)
                                            {{ $institution->expires_at->format('M j, Y') }}
                                        @else
                                            {{ __('N/A') }}
                                        @endif
                                    </p>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            </div>

            {{-- Renewal Form --}}
            <form action="{{ route('payments.institution', $institution) }}" method="POST">
                @csrf

                {{-- Select Frequency --}}
                <div class="theme-card rounded-lg shadow-md p-6 mb-6">
                    <h3 class="text-lg font-semibold text-theme-heading mb-4">
                        <i class="fas fa-calendar-alt mr-2 text-green-500"></i>
                        {{ __('Select Renewal Period') }}
                    </h3>

                    <div class="space-y-3">
                        @php
                            $frequencies = [
                                'monthly' => ['label' => 'Monthly', 'multiplier' => 1],
                                'quarterly' => ['label' => 'Quarterly (3 months)', 'multiplier' => 3],
                                'biannual' => ['label' => 'Biannual (6 months)', 'multiplier' => 6],
                                'yearly' => ['label' => 'Yearly (12 months)', 'multiplier' => 12],
                            ];
                        @endphp
                        
                        @foreach($frequencies as $freq => $info)
                            <label class="cursor-pointer block">
                                <input type="radio" 
                                       name="payment_frequency" 
                                       value="{{ $freq }}" 
                                       class="sr-only peer"
                                       {{ $freq === 'yearly' ? 'checked' : '' }}>
                                <div class="p-4 border-2 theme-divider rounded-lg flex items-center justify-between peer-checked:border-green-500 peer-checked:bg-green-50 transition">
                                    <div>
                                        <span class="font-medium text-theme-heading">{{ $info['label'] }}</span>
                                    </div>
                                    <div class="text-right">
                                        @php
                                            $price = ($paymentConfig->amount_ssp ?? 0) * $info['multiplier'];
                                            if($freq !== 'monthly') {
                                                $price = $price * 0.9; // 10% discount for longer periods
                                            }
                                        @endphp
                                        <span class="font-bold text-green-600">{{ number_format($price) }} SSP</span>
                                        @if($freq !== 'monthly')
                                            <span class="text-xs text-green-500 block">{{ __('10% discount applied!') }}</span>
                                        @endif
                                    </div>
                                </div>
                            </label>
                        @endforeach
                    </div>

                    <input type="hidden" name="currency" value="SSP">
                    <input type="hidden" name="amount" value="{{ $paymentConfig->amount_ssp ?? 0 }}">
                </div>

                {{-- Payment Method --}}
                <div class="theme-card rounded-lg shadow-md p-6 mb-6">
                    <h3 class="text-lg font-semibold text-theme-heading mb-4">
                        <i class="fas fa-credit-card mr-2 text-yellow-500"></i>
                        {{ __('Payment Method') }}
                    </h3>
                    <x-payment-method-toggle />
                </div>

                {{-- Submit --}}
                <button type="submit" 
                        class="w-full py-4 bg-gradient-to-r from-yellow-500 to-yellow-600 text-white font-semibold rounded-lg hover:from-yellow-600 hover:to-yellow-700 transition">
                    <i class="fas fa-sync-alt mr-2"></i>
                    {{ __('Renew Listing') }}
                </button>
            </form>
        </div>
    </div>

</x-app-layout>
