@extends('layouts.app')

@section('content')
    <div class="mb-6">
        <h1 class="text-title-md font-semibold text-gray-800 dark:text-white/90">{{ __('My Profile') }}</h1>
        <p class="text-sm text-gray-500 dark:text-gray-400">{{ __('Update your account and submit subscription payment requests.') }}</p>
    </div>

    @if (session('success'))
        <div class="mb-4 rounded-lg border border-green-200 bg-green-50 p-3 text-sm text-green-700">
            {{ session('success') }}
        </div>
    @endif

    @if (session('warning'))
        <div class="mb-4 rounded-lg border border-amber-200 bg-amber-50 p-3 text-sm text-amber-700">
            {{ session('warning') }}
        </div>
    @endif

    @if ($errors->any())
        <div class="mb-4 rounded-lg border border-red-200 bg-red-50 p-3 text-sm text-red-700">
            {{ $errors->first() }}
        </div>
    @endif

    <div class="grid grid-cols-1 gap-6 xl:grid-cols-2">
        <div class="rounded-2xl border border-gray-200 bg-white p-6 shadow-theme-xs dark:border-gray-800 dark:bg-gray-900">
            <h2 class="text-base font-semibold text-gray-800 dark:text-white/90">{{ __('Account Details') }}</h2>
            <form method="POST" action="{{ route('profile.update') }}" class="mt-4 space-y-4">
                @csrf
                @method('PATCH')
                <div>
                    <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">{{ __('Name') }}</label>
                    <input type="text" name="name" value="{{ old('name', $user->name) }}"
                        class="h-11 w-full rounded-lg border border-gray-200 bg-white px-4 text-sm text-gray-700 shadow-theme-xs dark:border-gray-800 dark:bg-gray-900 dark:text-white/90" />
                </div>
                <div>
                    <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">{{ __('Email') }}</label>
                    <input type="email" name="email" value="{{ old('email', $user->email) }}"
                        class="h-11 w-full rounded-lg border border-gray-200 bg-white px-4 text-sm text-gray-700 shadow-theme-xs dark:border-gray-800 dark:bg-gray-900 dark:text-white/90" />
                </div>
                <div>
                    <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">{{ __('Role') }}</label>
                    <input type="text" value="{{ __(ucfirst($user->role)) }}" readonly
                        class="h-11 w-full rounded-lg border border-gray-200 bg-gray-50 px-4 text-sm text-gray-500 shadow-theme-xs dark:border-gray-800 dark:bg-gray-800 dark:text-gray-300" />
                </div>
                <button class="rounded-lg bg-brand-500 px-4 py-2 text-sm font-medium text-white hover:bg-brand-600">
                    {{ __('Save Profile') }}
                </button>
            </form>
        </div>

        <div class="rounded-2xl border border-gray-200 bg-white p-6 shadow-theme-xs dark:border-gray-800 dark:bg-gray-900">
            <h2 class="text-base font-semibold text-gray-800 dark:text-white/90">{{ __('Subscription') }}</h2>
            @php
                $isPrivileged = $user->isOwner() || $user->isAdmin();
                $isValidSubscription = $user->hasValidSubscription();
            @endphp

            <div class="mt-4 space-y-2 text-sm text-gray-600 dark:text-gray-300">
                <p>
                    {{ __('Status') }}:
                    @if ($user->hasPanelAccess())
                        <span class="rounded-full bg-green-100 px-2 py-1 text-xs text-green-700">{{ __('Allowed') }}</span>
                    @elseif (!$isPrivileged && !$isValidSubscription)
                        <span class="rounded-full bg-amber-100 px-2 py-1 text-xs text-amber-700">{{ __('On Hold (Unpaid)') }}</span>
                    @else
                        <span class="rounded-full bg-red-100 px-2 py-1 text-xs text-red-700">{{ __('Blocked') }}</span>
                    @endif
                </p>
                <p>
                    {{ __('Paid Until') }}:
                    @if ($isPrivileged)
                        <span class="font-medium text-gray-800 dark:text-white/90">{{ __('Always active') }}</span>
                    @elseif ($user->subscription_expires_at)
                        <span class="font-medium text-gray-800 dark:text-white/90">{{ $user->subscription_expires_at->translatedFormat('M d, Y') }}</span>
                    @else
                        <span class="font-medium text-red-600">{{ __('Not set') }}</span>
                    @endif
                </p>
            </div>

            @php
                $subscriptionFormDisabled = $isPrivileged || (bool) $pendingRequest;
            @endphp

            @if ($pendingRequest && !$isPrivileged)
                <div class="mt-4 rounded-lg border border-amber-200 bg-amber-50 p-3 text-sm text-amber-700">
                    {{ __('Pending request sent on :date.', ['date' => $pendingRequest->requested_at?->translatedFormat('M d, Y H:i')]) }}
                    {{ __('Admin will validate it soon.') }}
                </div>
            @endif

            @if ($isPrivileged)
                <div class="mt-4 rounded-lg border border-blue-200 bg-blue-50 p-3 text-sm text-blue-700">
                    {{ __('This account does not require subscription payment requests.') }}
                </div>
            @endif

            <form method="POST" action="{{ route('profile.subscription-request') }}" enctype="multipart/form-data" class="mt-4 space-y-4">
                @csrf
                <div>
                    <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">{{ __('Subscription Type') }}</label>
                    <select name="period_type" id="request-period-type" @disabled($subscriptionFormDisabled)
                        class="h-11 w-full rounded-lg border border-gray-200 bg-white px-4 text-sm text-gray-700 shadow-theme-xs disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-gray-400 dark:border-gray-800 dark:bg-gray-900 dark:text-white/90 dark:disabled:bg-gray-800 dark:disabled:text-gray-500">
                        <option value="monthly" @selected(old('period_type', 'monthly') === 'monthly')>{{ __('Monthly') }}</option>
                        <option value="yearly" @selected(old('period_type') === 'yearly')>{{ __('Yearly') }}</option>
                    </select>
                </div>
                <div>
                    <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">{{ __('Periods Count') }}</label>
                    <input type="number" min="1" max="12" name="periods_count" value="{{ old('periods_count', 1) }}" @disabled($subscriptionFormDisabled)
                        class="h-11 w-full rounded-lg border border-gray-200 bg-white px-4 text-sm text-gray-700 shadow-theme-xs disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-gray-400 dark:border-gray-800 dark:bg-gray-900 dark:text-white/90 dark:disabled:bg-gray-800 dark:disabled:text-gray-500" />
                </div>
                <div>
                    <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">{{ __('Amount (:currency)', ['currency' => $currency]) }}</label>
                    <input type="number" step="0.01" name="amount" id="request-amount"
                        data-monthly-price="{{ number_format((float) ($subscriptionPricing['monthly'] ?? 0), 2, '.', '') }}"
                        data-yearly-price="{{ number_format((float) ($subscriptionPricing['yearly'] ?? 0), 2, '.', '') }}"
                        value="{{ old('amount', old('period_type', 'monthly') === 'yearly' ? ($subscriptionPricing['yearly'] ?? 0) : ($subscriptionPricing['monthly'] ?? 0)) }}"
                        @disabled($subscriptionFormDisabled)
                        class="h-11 w-full rounded-lg border border-gray-200 bg-white px-4 text-sm text-gray-700 shadow-theme-xs disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-gray-400 dark:border-gray-800 dark:bg-gray-900 dark:text-white/90 dark:disabled:bg-gray-800 dark:disabled:text-gray-500" />
                </div>
                <div>
                    <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">{{ __('Payment Reference (optional)') }}</label>
                    <input type="text" name="reference" value="{{ old('reference') }}" placeholder="{{ __('Transaction ID, note, etc.') }}" @disabled($subscriptionFormDisabled)
                        class="h-11 w-full rounded-lg border border-gray-200 bg-white px-4 text-sm text-gray-700 shadow-theme-xs disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-gray-400 dark:border-gray-800 dark:bg-gray-900 dark:text-white/90 dark:disabled:bg-gray-800 dark:disabled:text-gray-500" />
                </div>
                <div>
                    <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">{{ __('Payment Proof (optional)') }}</label>
                    <input type="file" name="proof" accept=".jpg,.jpeg,.png,.webp,.pdf" @disabled($subscriptionFormDisabled)
                        class="block w-full rounded-lg border border-gray-200 bg-white px-4 py-2.5 text-sm text-gray-700 shadow-theme-xs file:mr-3 file:rounded-md file:border-0 file:bg-gray-100 file:px-3 file:py-1.5 file:text-sm file:font-medium file:text-gray-700 hover:file:bg-gray-200 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-gray-400 dark:border-gray-800 dark:bg-gray-900 dark:text-white/90 dark:file:bg-gray-800 dark:file:text-gray-200 dark:disabled:bg-gray-800 dark:disabled:text-gray-500" />
                    <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">{{ __('Accepted: PDF, JPG, PNG, WEBP (max 5MB). You can submit without file.') }}</p>
                </div>
                <button type="submit" @disabled($subscriptionFormDisabled)
                    class="rounded-lg border border-indigo-700 px-4 py-2 text-sm font-semibold {{ $subscriptionFormDisabled ? 'cursor-not-allowed bg-gray-200 text-gray-600 border-gray-300' : 'bg-indigo-600 text-white hover:bg-indigo-700' }}">
                    @if ($isPrivileged)
                        {{ __('Send Payment Request (Not required)') }}
                    @elseif ($pendingRequest)
                        {{ __('Send Payment Request (Pending)') }}
                    @else
                        {{ __('Send Payment Request') }}
                    @endif
                </button>
            </form>

            @if ($pendingRequest && !$isPrivileged)
                <form method="POST" action="{{ route('profile.subscription-request.remind') }}" class="mt-3">
                    @csrf
                    <button type="submit"
                        class="rounded-lg bg-amber-600 px-4 py-2 text-sm font-medium text-white hover:bg-amber-700">
                        {{ __('Send Reminder to Admin') }}
                    </button>
                </form>
            @endif
        </div>
    </div>

    <div class="mt-6 overflow-x-auto rounded-2xl border border-gray-200 bg-white shadow-theme-xs dark:border-gray-800 dark:bg-gray-900">
        <div class="border-b border-gray-100 px-5 py-4 dark:border-gray-800">
            <h2 class="text-base font-semibold text-gray-800 dark:text-white/90">{{ __('My Subscription Requests') }}</h2>
        </div>
        <table class="w-full text-left text-sm text-gray-600 dark:text-gray-400">
            <thead class="text-xs uppercase text-gray-400 dark:text-gray-500">
                <tr>
                    <th class="px-5 py-4">{{ __('Requested At') }}</th>
                    <th class="px-5 py-4">{{ __('Period') }}</th>
                    <th class="px-5 py-4">{{ __('Amount') }}</th>
                    <th class="px-5 py-4">{{ __('Reference') }}</th>
                    <th class="px-5 py-4">{{ __('Proof') }}</th>
                    <th class="px-5 py-4">{{ __('Status') }}</th>
                    <th class="px-5 py-4">{{ __('Review') }}</th>
                </tr>
            </thead>
            <tbody>
                @forelse ($requests as $subscriptionRequest)
                    @php
                        $statusStyle = [
                            'pending' => 'bg-amber-100 text-amber-700',
                            'approved' => 'bg-green-100 text-green-700',
                            'rejected' => 'bg-red-100 text-red-700',
                        ][$subscriptionRequest->status] ?? 'bg-gray-100 text-gray-700';
                    @endphp
                    <tr class="border-t border-gray-100 dark:border-gray-800">
                        <td class="px-5 py-4">{{ $subscriptionRequest->requested_at?->translatedFormat('M d, Y H:i') }}</td>
                        <td class="px-5 py-4">
                            {{ __(\Illuminate\Support\Str::headline($subscriptionRequest->period_type)) }} x{{ $subscriptionRequest->periods_count }}
                        </td>
                        <td class="px-5 py-4">{{ number_format((float) $subscriptionRequest->amount, 2) }} {{ $subscriptionRequest->currency }}</td>
                        <td class="px-5 py-4">{{ $subscriptionRequest->reference ?: '—' }}</td>
                        <td class="px-5 py-4">
                            @if ($subscriptionRequest->proof_path)
                                <a href="{{ route('profile.subscription-request-proof', $subscriptionRequest) }}"
                                    class="text-xs text-brand-600 hover:text-brand-700">
                                    {{ __('Download') }}
                                </a>
                            @else
                                <span class="text-xs text-gray-400">—</span>
                            @endif
                        </td>
                        <td class="px-5 py-4">
                            <span class="rounded-full px-2 py-1 text-xs {{ $statusStyle }}">
                                {{ __(ucfirst($subscriptionRequest->status)) }}
                            </span>
                        </td>
                        <td class="px-5 py-4">
                            @if ($subscriptionRequest->reviewed_at)
                                <span class="text-xs text-gray-500">
                                    {{ $subscriptionRequest->reviewed_at->translatedFormat('M d, Y H:i') }}
                                    {{ __('by') }} {{ $subscriptionRequest->reviewer?->name ?? __('Admin') }}
                                </span>
                                @if ($subscriptionRequest->review_note)
                                    <p class="mt-1 text-xs text-red-600">{{ $subscriptionRequest->review_note }}</p>
                                @endif
                            @else
                                <span class="text-xs text-gray-500">{{ __('Waiting admin validation') }}</span>
                            @endif
                        </td>
                    </tr>
                @empty
                    <tr class="border-t border-gray-100 dark:border-gray-800">
                        <td colspan="7" class="px-5 py-6 text-center text-sm text-gray-500">{{ __('No requests yet.') }}</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
@endsection

@push('scripts')
    <script>
        (() => {
            const typeEl = document.getElementById('request-period-type');
            const amountEl = document.getElementById('request-amount');
            if (!typeEl || !amountEl) {
                return;
            }

            const monthly = amountEl.dataset.monthlyPrice ?? '0';
            const yearly = amountEl.dataset.yearlyPrice ?? '0';
            const initialValue = amountEl.value;

            typeEl.addEventListener('change', () => {
                if (amountEl.value !== initialValue && amountEl.value !== '' && amountEl.value !== monthly && amountEl.value !== yearly) {
                    return;
                }

                amountEl.value = typeEl.value === 'yearly' ? yearly : monthly;
            });
        })();
    </script>
@endpush