@extends('layouts.portal')

@section('title', 'Pay for Edit Access')
@section('page_title', 'Pay for Edit Access')
@section('page_subtitle', 'Complete payment to enable editing')

@section('sidebar')
    @include('client.partials.sidebar', ['active' => 'profile'])
@endsection

@php
    // Get selected sections
    $selectedSections = [];
    if ($editRequest->section_type === 'multi' && $editRequest->sections_json) {
        $selectedSections = is_array($editRequest->sections_json)
            ? $editRequest->sections_json
            : (json_decode($editRequest->sections_json, true) ?? []);
    } elseif ($editRequest->section_type !== 'multi') {
        $selectedSections = [$editRequest->section_type];
    }

    // Map section to details
    $sectionDetails = [
        'beneficiaries' => [
            'name' => 'Beneficiaries',
            'icon' => 'heart',
            'color' => 'orange',
            'package_code' => 'UPDATE_BENEFICIARIES',
            'price' => 150,
        ],
        'assets' => [
            'name' => 'Assets & Allocations',
            'icon' => 'briefcase',
            'color' => 'cyan',
            'package_code' => 'UPDATE_ASSETS',
            'price' => 150,
        ],
        'liabilities' => [
            'name' => 'Liabilities',
            'icon' => 'credit-card',
            'color' => 'rose',
            'package_code' => 'UPDATE_LIABILITIES',
            'price' => 150,
        ],
        'executors' => [
            'name' => 'Executors',
            'icon' => 'user-tie',
            'color' => 'teal',
            'package_code' => 'UPDATE_EXECUTORS',
            'price' => 150,
        ],
        'allowances' => [
            'name' => 'Allowances',
            'icon' => 'receipt',
            'color' => 'amber',
            'package_code' => 'UPDATE_ALLOWANCES',
            'price' => 150,
        ],
        'gifts' => [
            'name' => 'Gifts & Donations',
            'icon' => 'gift',
            'color' => 'pink',
            'package_code' => 'UPDATE_GIFTS',
            'price' => 150,
        ],
    ];

    // Get packages for each selected section
    $packagesToPay = collect();
    foreach ($selectedSections as $section) {
        if (isset($sectionDetails[$section])) {
            $details = $sectionDetails[$section];
            $pkg = \App\Models\Package::where('is_active', true)
                ->where('code', $details['package_code'])
                ->first();
            if ($pkg) {
                $packagesToPay->push($pkg);
            }
        }
    }

    $totalPrice = $packagesToPay->sum('price');
    $primaryColor = isset($sectionDetails[$selectedSections[0]]) ? $sectionDetails[$selectedSections[0]]['color'] : 'blue';
@endphp

@section('content')

<div class="max-w-4xl mx-auto p-6">

    @if(session('error'))
        <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
            {{ session('error') }}
        </div>
    @endif

    @if(session('success'))
        <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-4">
            {{ session('success') }}
        </div>
    @endif

    <div class="bg-white rounded-xl shadow-lg border border-gray-200 p-8 mb-6">

        <!-- Header -->
        <div class="mb-6">
            <h1 class="text-2xl font-bold text-gray-900 mb-2">
                Complete Payment for Edit Access
            </h1>
            <p class="text-gray-600">
                You have selected {{ count($selectedSections) }} section(s) to edit. Complete the payment to unlock editing.
            </p>
        </div>

        {{-- UNPAID --}}
        @if($editRequest->payment_status === 'unpaid')

            <form action="{{ route('client.edit.pay.process', $editRequest) }}" method="POST">

                @csrf

                <!-- Selected Sections Summary -->
                <div class="mb-8">
                    <h3 class="text-lg font-semibold text-gray-900 mb-4">Selected Sections</h3>
                    
                    <div class="space-y-3">
                        @foreach($selectedSections as $section)
                            @php
                                $details = $sectionDetails[$section] ?? [];
                                $color = $details['color'] ?? 'gray';
                                $icon = $details['icon'] ?? 'box';
                                $name = $details['name'] ?? ucfirst($section);
                                $price = $details['price'] ?? 0;
                            @endphp
                            <div class="border border-gray-200 rounded-xl p-4 bg-{{ $color }}-50">
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center">
                                        <i class="fas fa-{{ $icon }} text-{{ $color }}-600 text-lg mr-3"></i>
                                        <div>
                                            <p class="font-semibold text-gray-900">{{ $name }}</p>
                                            <p class="text-sm text-gray-600">Edit access for {{ strtolower($name) }}</p>
                                        </div>
                                    </div>
                                    <div class="text-right">
                                        <p class="font-bold text-lg text-{{ $color }}-700">RM {{ number_format($price, 2) }}</p>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>

                <!-- Total Summary -->
                <div class="bg-gradient-to-r from-{{ $primaryColor }}-50 to-{{ $primaryColor }}-100 rounded-xl p-6 mb-8 border border-{{ $primaryColor }}-200">
                    <div class="flex justify-between items-center mb-4">
                        <span class="text-lg font-semibold text-gray-900">Total Amount:</span>
                        <span class="text-3xl font-bold text-{{ $primaryColor }}-700">RM {{ number_format($totalPrice, 2) }}</span>
                    </div>
                    
                    <div class="border-t border-{{ $primaryColor }}-300 pt-4">
                        <p class="text-sm text-gray-700">
                            <i class="fas fa-clock mr-2 text-{{ $primaryColor }}-600"></i>
                            After payment, you'll have <strong>7 days</strong> of editing access for all selected sections.
                        </p>
                    </div>
                </div>

                <!-- Payment Method -->
                <div class="mb-6">
                    <label class="block text-sm font-semibold text-gray-700 mb-3">
                        Payment Method <span class="text-red-600">*</span>
                    </label>

                    <select name="payment_method"
                            required
                            class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-{{ $primaryColor }}-500">

                        <option value="">Select payment method</option>
                        <option value="credit_card">Credit Card</option>
                        <option value="debit_card">Debit Card</option>
                        <option value="online_banking">Online Banking</option>
                        <option value="e_wallet">E-Wallet</option>

                    </select>
                </div>

                <!-- Submit -->
                <button type="submit"
                        class="w-full bg-gradient-to-r from-{{ $primaryColor }}-600 to-{{ $primaryColor }}-700 text-white py-4 rounded-xl font-semibold hover:from-{{ $primaryColor }}-700 hover:to-{{ $primaryColor }}-800 transition-all shadow-md">

                    <i class="fas fa-lock-open mr-2"></i>
                    Pay RM {{ number_format($totalPrice, 2) }} Now

                </button>

                <p class="text-xs text-gray-500 text-center mt-4">
                    <i class="fas fa-shield-alt mr-1"></i>
                    Your payment is secure and encrypted. No payment information is stored on our servers.
                </p>

            </form>

        @else

            <!-- Purchased - Show Success Message -->
            <div class="bg-green-50 border border-green-200 rounded-xl p-6 text-center">
                <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
                    <i class="fas fa-check text-2xl text-green-600"></i>
                </div>
                <h2 class="text-2xl font-bold text-green-900 mb-2">Payment Successful!</h2>
                <p class="text-green-700 mb-4">Your edit access is now active for the following sections:</p>
                
                <div class="space-y-2 mb-6">
                    @foreach($selectedSections as $section)
                        @php
                            $details = $sectionDetails[$section] ?? [];
                            $name = $details['name'] ?? ucfirst($section);
                        @endphp
                        <p class="text-green-900 font-medium"><i class="fas fa-check-circle mr-2"></i>{{ $name }}</p>
                    @endforeach
                </div>

                <a href="{{ route('client.personal.details') }}" class="inline-block px-6 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 font-medium transition-colors">
                    <i class="fas fa-arrow-left mr-2"></i>Go Back to Profile
                </a>
            </div>

        @endif

    </div>

</div>

@endsection