@extends('frontend.layout.dashboard-master')
@section('site_title', __('Buy Connects'))

@section('style')
<style>
.package-card { cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.package-card:hover { border-color: var(--main-color-one); box-shadow: 0 0 0 3px rgba(var(--main-color-one-rgb),.08); }
/* hide all gateway extra fields by default; JS shows the right one on click */
.payment_gateway_extra_field_information_wrap > div { display: none; }
</style>
@endsection

@section('content')
@php
    $feeType   = get_static_option('transaction_fee_type') ?? '';
    $feeCharge = get_static_option('transaction_fee_charge') ?? 0;
    $feeLabel  = $feeType === 'percentage' ? $feeCharge . '%' : float_amount_with_currency_symbol($feeCharge);
@endphp

{{-- Page Header --}}
<div class="mb-6 flex flex-wrap items-center justify-between gap-3">
    <div>
        <h1 class="text-[18px] sm:text-[20px] font-semibold leading-7 text-[#242B36]">{{ __('Buy Connects') }}</h1>
        <p class="mt-1 text-[14px] text-[#637381]">{{ __('Purchase additional connects for your active subscription') }}</p>
    </div>
    <a href="{{ route('freelancer.subscriptions.all') }}"
       class="inline-flex items-center gap-2 rounded-xl border border-[#D0D5DD] bg-white px-4 py-2 text-[14px] font-medium text-[#637381] hover:bg-[#F9FBFC]">
        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
        </svg>
        {{ __('Subscriptions') }}
    </a>
</div>

<x-validation.error />

{{-- Active Plan Summary --}}
<div class="mb-6 rounded-xl border border-[#E9EBF0] bg-white p-4 sm:p-6">
    <h2 class="mb-4 text-[15px] font-semibold text-[#242B36]">{{ __('Your Active Plan') }}</h2>
    <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
        <div class="rounded-lg border border-[#E9EBF0] bg-[#F9FBFC] p-4">
            <p class="text-[12px] font-medium uppercase tracking-wide text-[#637381]">{{ __('Current Connects') }}</p>
            <p class="mt-1 text-[22px] font-bold text-primary">{{ $total_limit }}</p>
        </div>
        <div class="rounded-lg border border-[#E9EBF0] bg-[#F9FBFC] p-4">
            <p class="text-[12px] font-medium uppercase tracking-wide text-[#637381]">{{ __('Active Plan') }}</p>
            <p class="mt-1 text-[16px] font-semibold text-[#242B36]">{{ $active_subscription->subscription->title ?? __('None') }}</p>
        </div>
        <div class="rounded-lg border border-[#E9EBF0] bg-[#F9FBFC] p-4">
            <p class="text-[12px] font-medium uppercase tracking-wide text-[#637381]">{{ __('Expires') }}</p>
            <p class="mt-1 text-[16px] font-semibold text-[#242B36]">
                {{ $active_subscription ? \Carbon\Carbon::parse($active_subscription->expire_date)->format('M d, Y') : '—' }}
            </p>
        </div>
    </div>
</div>

{{-- Connect Packages --}}
@if(count($packages) > 0)
<div class="mb-6 rounded-xl border border-[#E9EBF0] bg-white p-4 sm:p-6">
    <h2 class="mb-4 text-[15px] font-semibold text-[#242B36]">{{ __('Buy Connect Packages') }}</h2>
    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
        @foreach($packages as $package)
            @php
                $base  = $package->price;
                $fee   = $feeType === 'percentage' ? $base * $feeCharge / 100 : ($feeCharge > 0 ? $feeCharge : 0);
                $total = $base + $fee;
            @endphp
            <div class="package-card flex flex-col items-center rounded-xl border-2 border-[#E9EBF0] p-6 text-center">
                <div class="mb-1 text-[36px] font-bold text-primary">{{ $package->connects }}</div>
                <div class="mb-3 text-[13px] text-[#637381]">{{ __('Connects') }}</div>
                <div class="mb-1 text-[20px] font-semibold text-[#242B36]">{{ float_amount_with_currency_symbol($total) }}</div>
                @if($feeCharge > 0)
                    <div class="mb-4 text-[12px] text-[#637381]">{{ float_amount_with_currency_symbol($base) }} + {{ $feeLabel }} {{ __('fee') }}</div>
                @else
                    <div class="mb-4"></div>
                @endif
                <button type="button"
                        class="buy-package-btn mt-auto w-full rounded-lg bg-primary px-4 py-2 text-[14px] font-semibold text-white hover:bg-secondary"
                        data-package-id="{{ $package->id }}"
                        data-package-connects="{{ $package->connects }}"
                        data-package-price="{{ float_amount_with_currency_symbol($total) }}">
                    {{ __('Buy Now') }}
                </button>
            </div>
        @endforeach
    </div>
</div>
@endif

{{-- Purchase History --}}
<div class="rounded-xl border border-[#E9EBF0] bg-white">
    <div class="flex items-center justify-between border-b border-[#E9EBF0] px-6 py-4">
        <h2 class="text-[15px] font-semibold text-[#242B36]">{{ __('Connect Purchase History') }}</h2>
    </div>
    <div class="overflow-x-auto">
        @if(count($purchases) > 0)
        <table class="w-full text-[14px] min-w-[500px]">
            <thead>
                <tr class="border-b border-[#E9EBF0] bg-[#F9FBFC]">
                    <th class="px-5 py-3 text-left text-[12px] font-semibold uppercase tracking-wide text-[#637381]">{{ __('Date') }}</th>
                    <th class="px-5 py-3 text-left text-[12px] font-semibold uppercase tracking-wide text-[#637381]">{{ __('Connects') }}</th>
                    <th class="px-5 py-3 text-left text-[12px] font-semibold uppercase tracking-wide text-[#637381]">{{ __('Amount') }}</th>
                    <th class="px-5 py-3 text-left text-[12px] font-semibold uppercase tracking-wide text-[#637381]">{{ __('Gateway') }}</th>
                    <th class="px-5 py-3 text-left text-[12px] font-semibold uppercase tracking-wide text-[#637381]">{{ __('Status') }}</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-[#F1F5F9]">
                @foreach($purchases as $purchase)
                <tr class="hover:bg-[#F9FBFC]">
                    <td class="px-5 py-3 text-[#344054]">{{ $purchase->created_at->format('M d, Y H:i') }}</td>
                    <td class="px-5 py-3 font-medium text-[#344054]">{{ $purchase->connects }}</td>
                    <td class="px-5 py-3 text-[#344054]">{{ float_amount_with_currency_symbol($purchase->total) }}</td>
                    <td class="px-5 py-3 capitalize text-[#344054]">{{ str_replace('_', ' ', $purchase->payment_gateway) }}</td>
                    <td class="px-5 py-3">
                        @if($purchase->payment_status === 'complete')
                            <span class="inline-flex items-center rounded-full bg-[#ECFDF5] px-2.5 py-0.5 text-[12px] font-medium text-primary">{{ __('Complete') }}</span>
                        @else
                            <span class="inline-flex items-center rounded-full bg-[#FFFBEB] px-2.5 py-0.5 text-[12px] font-medium text-[#B45309]">{{ __('Pending') }}</span>
                        @endif
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
        <div class="border-t border-[#E9EBF0] px-5 py-4">
            <x-pagination.laravel-paginate-tw :allData="$purchases" />
        </div>
        @else
        <div class="py-12 text-center text-[14px] text-[#637381]">{{ __('No connect purchases yet.') }}</div>
        @endif
    </div>
</div>

{{-- Buy Connects Modal (vanilla JS) --}}
<div id="buyConnectsModal" class="fixed inset-0 z-[100010] hidden items-start sm:items-center justify-center overflow-y-auto bg-black/50 px-4 py-4">
    <div class="w-full max-w-lg rounded-xl bg-white shadow-xl flex flex-col max-h-[calc(100vh-2rem)] sm:max-h-[90vh] my-auto">
        <form action="{{ route('freelancer.buy.connects') }}" method="post" enctype="multipart/form-data" class="flex flex-col flex-1 overflow-hidden min-h-0">
            @csrf
            <input type="hidden" name="package_id" id="modalPackageId" value="">

            {{-- Header --}}
            <div class="flex shrink-0 items-center justify-between border-b border-[#E9EBF0] px-4 sm:px-6 py-4">
                <h3 class="text-[16px] font-semibold text-[#242B36]">{{ __('Confirm Purchase') }}</h3>
                <button type="button" onclick="closeBuyConnectsModal()"
                        class="text-[#637381] hover:text-[#344054]">
                    <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
                    </svg>
                </button>
            </div>

            {{-- Body --}}
            <div class="flex-1 min-h-0 overflow-y-auto px-4 sm:px-6 py-4 sm:py-5 space-y-4">
                <div class="rounded-lg border border-[#E9EBF0] bg-[#F9FBFC] p-4">
                    <p class="text-[13px] text-[#637381]">{{ __('You are buying:') }}</p>
                    <p class="mt-1 text-[15px] font-semibold text-[#242B36]" id="modalPackageLabel">—</p>
                    <p class="mt-0.5 text-[18px] font-bold text-primary" id="modalPackagePrice">—</p>
                </div>

                <div class="rounded-lg border border-[#A7F3D0] bg-[#ECFDF5] px-4 py-3 text-[13px] text-[#065F46]">
                    {{ __('Connects will be added to your active subscription plan immediately after successful payment.') }}
                </div>

                <div>
                    <p class="mb-3 text-[14px] font-semibold text-[#242B36]">{{ __('Select Payment Method') }}</p>
                    {!! \App\Helper\PaymentGatewayList::renderPaymentGatewayForForm(false) !!}

                    <div class="mt-3 flex items-center gap-2">
                        <input type="checkbox" class="wallet_selected_payment_gateway h-4 w-4 rounded border-[#D0D5DD] text-primary"
                               id="wallet_selected_payment_gateway">
                        <label class="text-[14px] text-[#344054]" for="wallet_selected_payment_gateway">{{ __('Pay from Wallet') }}</label>
                    </div>

                </div>
            </div>

            {{-- Footer --}}
            <div class="flex shrink-0 flex-wrap justify-end gap-3 border-t border-[#E9EBF0] px-4 sm:px-6 py-4">
                <button type="button" onclick="closeBuyConnectsModal()"
                        class="rounded-lg border border-[#D0D5DD] px-4 py-2 text-[14px] font-medium text-[#637381] hover:bg-[#F1F5F9]">
                    {{ __('Cancel') }}
                </button>
                <button type="submit" id="confirmBuyConnects"
                        class="inline-flex items-center gap-2 rounded-lg bg-primary px-5 py-2 text-[14px] font-semibold text-white hover:bg-secondary">
                    {{ __('Confirm Purchase') }}
                    <span id="buy_connects_load_spinner"></span>
                </button>
            </div>
        </form>
    </div>
</div>

@endsection

@section('script')
<x-frontend.payment-gateway.gateway-select-js />
<script>
function openBuyConnectsModal() {
    var m = document.getElementById('buyConnectsModal');
    m.classList.remove('hidden');
    m.classList.add('flex');
}
function closeBuyConnectsModal() {
    var m = document.getElementById('buyConnectsModal');
    m.classList.add('hidden');
    m.classList.remove('flex');
}
document.getElementById('buyConnectsModal').addEventListener('click', function(e) {
    if (e.target === this) closeBuyConnectsModal();
});
document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') closeBuyConnectsModal();
});

(function ($) {
    "use strict";
    $(document).on('click', '.buy-package-btn', function () {
        $('#modalPackageId').val($(this).data('package-id'));
        $('#modalPackageLabel').text($(this).data('package-connects') + ' {{ __('Connects') }}');
        $('#modalPackagePrice').text($(this).data('package-price'));
        openBuyConnectsModal();
    });

    // Show manual payment extra field only when manual_payment gateway is selected
    $(document).on('click', '.payment_getway_image ul li', function () {
        var gateway = $(this).data('gateway');
        if (gateway === 'manual_payment') {
            $('.manual_payment_gateway_extra_field').show();
        } else {
            $('.manual_payment_gateway_extra_field').hide();
        }
    });

    $('#confirmBuyConnects').on('click', function () {
        $('#buy_connects_load_spinner').html('<i class="fas fa-spinner fa-pulse ms-2"></i>');
        setTimeout(function () { $('#buy_connects_load_spinner').html(''); }, 10000);
    });
}(jQuery));
</script>
@endsection