@extends('theme::layouts.app', ['title' => $pageHeader['title'] ?? __('account.Manage License')])

@section('content')
    <main class="flex-grow w-full max-w-[1440px] mx-auto px-6 lg:px-10 py-10">
        <div class="flex flex-col lg:flex-row gap-10">
            {{-- Account Navigation Sidebar --}}
            @include('theme::partials.account.nav')

            {{-- Main Content --}}
            <section class="flex-grow">
                @if(isset($pageHeader))
                <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-6 mb-8">
                    <div>
                        <div class="flex items-center gap-2 mb-2">
                            <a href="{{ route('frontend.account.licenses') }}" class="text-primary hover:underline text-sm font-medium flex items-center gap-1">
                                <span class="material-symbols-outlined text-[16px]">arrow_back</span>
                                {{ __('account.Back to Licenses') }}
                            </a>
                        </div>
                        <h1 class="text-2xl font-bold text-text-main dark:text-white">{{ $pageHeader['title'] }}</h1>
                        <p class="text-text-muted dark:text-gray-400 mt-1">{!! $pageHeader['subtitle'] !!}</p>
                    </div>
                </div>
                @endif

                <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
                    {{-- Left Area: Form --}}
                    <div class="lg:col-span-2 space-y-6">
                        @include('flash::message')

                        @if($errors->any())
                            <div class="bg-red-50 dark:bg-red-900/20 text-red-600 border border-red-200 dark:border-red-800 rounded-xl p-4 mb-6">
                                <ul class="list-disc pl-5 space-y-1">
                                    @foreach($errors->all() as $error)
                                        <li class="text-sm font-medium">{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif

                        <form action="{{ route('frontend.account.licenses.update', $license->id) }}" method="POST" class="bg-white dark:bg-surface-dark rounded-xl border border-gray-100 dark:border-gray-800 p-6 shadow-soft">
                            @csrf
                            @method('PUT')

                            <div class="mb-6 pb-6 border-b border-gray-100 dark:border-gray-800 flex items-center justify-between flex-wrap gap-4">
                                <div>
                                    <h2 class="text-lg font-bold text-text-main dark:text-white">{{ __('account.License Configuration') }}</h2>
                                    <p class="text-sm text-text-muted mt-1">{{ __('account.Set security boundaries for where this license can be used.') }}</p>
                                </div>
                                <div class="bg-gray-50 dark:bg-gray-800/50 px-4 py-2 rounded-lg border border-gray-100 dark:border-gray-800 text-center">
                                    <span class="block text-[11px] font-bold text-text-muted uppercase tracking-wider">{{ __('account.Activations') }}</span>
                                    <span class="text-lg font-mono font-bold text-text-main dark:text-white">
                                        <span class="{{ $license->max_activations > 0 && $license->activation_count >= $license->max_activations ? 'text-red-500' : 'text-primary' }}">{{ $license->activation_count ?? 0 }}</span>
                                        / 
                                        {{ $license->max_activations > 0 ? $license->max_activations : '∞' }}
                                    </span>
                                </div>
                            </div>

                            <div class="space-y-6">
                                {{-- Allowed Domains --}}
                                <div>
                                    <label for="allowed_domains" class="block text-sm font-semibold text-text-main dark:text-white mb-2">
                                        {{ __('account.Allowed Domains') }}
                                        <span class="text-xs font-normal text-text-muted ml-2">({{ __('account.Max 10') }})</span>
                                    </label>
                                    @php
                                        $domains = is_array($license->allowed_domains) ? implode(', ', $license->allowed_domains) : '';
                                    @endphp
                                    <textarea name="allowed_domains" id="allowed_domains" rows="3" 
                                              placeholder="example.com, mysite.net"
                                              class="w-full bg-gray-50 dark:bg-[#1C1F26] border border-gray-200 dark:border-gray-700 text-text-main dark:text-white text-sm rounded-lg focus:ring-primary focus:border-primary block p-3 transition-colors custom-scrollbar">{{ old('allowed_domains', $domains) }}</textarea>
                                    <p class="text-xs text-text-muted mt-2 flex items-start gap-1">
                                        <span class="material-symbols-outlined text-[14px]">info</span>
                                        {{ __('account.Separate multiple domains with commas. Leave blank to allow any domain.') }}
                                    </p>
                                </div>

                                {{-- Allowed IPs --}}
                                <div>
                                    <label for="allowed_ips" class="block text-sm font-semibold text-text-main dark:text-white mb-2">
                                        {{ __('account.Allowed IP Addresses') }}
                                        <span class="text-xs font-normal text-text-muted ml-2">({{ __('account.Max 10') }})</span>
                                    </label>
                                    @php
                                        $ips = is_array($license->allowed_ips) ? implode(', ', $license->allowed_ips) : '';
                                    @endphp
                                    <textarea name="allowed_ips" id="allowed_ips" rows="3" 
                                              placeholder="192.168.1.1, 10.0.0.1"
                                              class="w-full bg-gray-50 dark:bg-[#1C1F26] border border-gray-200 dark:border-gray-700 text-text-main dark:text-white text-sm rounded-lg focus:ring-primary focus:border-primary block p-3 transition-colors custom-scrollbar">{{ old('allowed_ips', $ips) }}</textarea>
                                    <p class="text-xs text-text-muted mt-2 flex items-start gap-1">
                                        <span class="material-symbols-outlined text-[14px]">info</span>
                                        {{ __('account.Separate multiple IPs with commas. Leave blank to allow any IP address.') }}
                                    </p>
                                </div>
                            </div>

                            <div class="mt-8 pt-6 border-t border-gray-100 dark:border-gray-800 flex justify-end">
                                @if ($license->is_revoked || (!is_null($license->expiry_date) && $license->expiry_date < now()))
                                    <button type="button" disabled class="px-6 py-2.5 bg-gray-300 dark:bg-gray-700 text-gray-500 rounded-lg font-semibold flex items-center gap-2 cursor-not-allowed">
                                        <span class="material-symbols-outlined text-[20px]">block</span>
                                        {{ __('account.License Inactive') }}
                                    </button>
                                @else
                                    <button type="submit" class="px-6 py-2.5 bg-primary hover:bg-primary-dark text-white rounded-lg font-semibold transition-all shadow-sm flex items-center gap-2">
                                        <span class="material-symbols-outlined text-[20px]">save</span>
                                        {{ __('account.Save Settings') }}
                                    </button>
                                @endif
                            </div>
                        </form>
                    </div>

                    {{-- Right Sidebar: Status & Info --}}
                    <div class="space-y-6">
                        <div class="bg-white dark:bg-surface-dark rounded-xl border border-gray-100 dark:border-gray-800 p-6 shadow-soft">
                            <h3 class="text-sm font-bold text-text-main dark:text-white mb-4 uppercase tracking-wider flex items-center gap-2 pb-4 border-b border-gray-100 dark:border-gray-800">
                                <span class="material-symbols-outlined text-primary text-[20px]">info</span>
                                {{ __('account.License Info') }}
                            </h3>
                            
                            <div class="space-y-4">
                                <div>
                                    <span class="block text-[11px] font-bold text-text-muted uppercase tracking-wider mb-1">{{ __('account.Status') }}</span>
                                    @if (is_null($license->expiry_date) || $license->expiry_date > now())
                                        @if($license->is_revoked)
                                            <span class="px-3 py-1 bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 text-sm font-bold rounded-lg inline-flex items-center gap-1.5">
                                                <span class="w-1.5 h-1.5 rounded-full bg-red-600"></span>{{ __('account.Revoked') }}
                                            </span>
                                        @else
                                            <span class="px-3 py-1 bg-green-50 dark:bg-green-900/20 text-green-600 dark:text-green-400 text-sm font-bold rounded-lg inline-flex items-center gap-1.5">
                                                <span class="w-1.5 h-1.5 rounded-full bg-green-600"></span>{{ __('account.Active') }}
                                            </span>
                                        @endif
                                    @else
                                        <span class="px-3 py-1 bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 text-sm font-bold rounded-lg inline-flex items-center gap-1.5">
                                            <span class="w-1.5 h-1.5 rounded-full bg-gray-500"></span>{{ __('account.Expired') }}
                                        </span>
                                    @endif
                                </div>

                                <div>
                                    <span class="block text-[11px] font-bold text-text-muted uppercase tracking-wider mb-1">{{ __('account.License Key') }}</span>
                                    <div class="flex items-center gap-2">
                                        <span class="font-mono text-sm font-medium bg-gray-50 dark:bg-[#1C1F26] px-3 py-2 rounded-lg border border-gray-100 dark:border-gray-800 flex-grow break-all">{{ $license->license_key }}</span>
                                        <button onclick="navigator.clipboard.writeText('{{ $license->license_key }}'); let btn=this; let original=btn.innerHTML; btn.innerHTML='<span class=\'material-symbols-outlined text-[16px]\'>check</span>'; setTimeout(()=>{ btn.innerHTML=original; }, 2000);" 
                                                class="flex-shrink-0 w-8 h-8 flex items-center justify-center bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 text-text-muted rounded-lg transition-colors" title="{{ __('account.Copy Key') }}">
                                            <span class="material-symbols-outlined text-[16px]">content_copy</span>
                                        </button>
                                    </div>
                                </div>

                                <div>
                                    <span class="block text-[11px] font-bold text-text-muted uppercase tracking-wider mb-1">{{ __('account.Expiry Date') }}</span>
                                    <div class="text-sm font-medium text-text-main dark:text-white flex items-center gap-2">
                                        <span class="material-symbols-outlined text-[18px] text-text-muted">event</span>
                                        {{ $license->expiry_date ? \Carbon\Carbon::parse($license->expiry_date)->format('F d, Y') : __('account.Lifetime Validity') }}
                                    </div>
                                </div>

                                @if($license->order)
                                <div>
                                    <span class="block text-[11px] font-bold text-text-muted uppercase tracking-wider mb-1">{{ __('account.Purchase Reference') }}</span>
                                    <a href="{{ route('ch_order_view', $license->order->encrypted_id) }}" class="text-sm font-medium text-primary hover:text-primary-dark transition-colors flex items-center gap-2">
                                        <span class="material-symbols-outlined text-[18px]">receipt_long</span>
                                        #{{ $license->order->order_reference }}
                                    </a>
                                </div>
                                @endif
                                
                                <div>
                                    <span class="block text-[11px] font-bold text-text-muted uppercase tracking-wider mb-1">{{ __('account.Issue Date') }}</span>
                                    <div class="text-sm text-text-muted flex items-center gap-2">
                                        <span class="material-symbols-outlined text-[18px]">calendar_today</span>
                                        {{ $license->created_at->format('M d, Y') }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </main>
@endsection