@extends('layouts.app')

@section('content')
<div id="kt_app_toolbar" class="app-toolbar py-3 py-lg-6">
    <div id="kt_app_toolbar_container" class="app-container container-xxl d-flex flex-stack">
        <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
            <h1 class="page-heading d-flex text-gray-900 fw-bold fs-3 flex-column justify-content-center my-0">
                {{ __('billing.title') }}
            </h1>
            <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
                <li class="breadcrumb-item text-muted">
                    <a href="{{ url('/') }}" class="text-muted text-hover-primary">{{ __('common.home') }}</a>
                </li>
                <li class="breadcrumb-item">
                    <span class="bullet bg-gray-500 w-5px h-2px"></span>
                </li>
                <li class="breadcrumb-item text-muted">{{ __('billing.title') }}</li>
            </ul>
        </div>
    </div>
</div>

<div id="kt_app_content" class="app-content flex-column-fluid">
    <div id="kt_app_content_container" class="app-container container-xxl">



        <!--begin::Current Subscription & Usage Limits-->
        <div class="row g-5 g-xl-10 mb-10">
            <!--begin::Current Plan Card-->
            <div class="col-lg-4 mb-5">
                <div class="card card-flush h-100 border-0 shadow-sm" style="background-color: #1e1e2d; color: white;">
                    <div class="card-header pt-7">
                        <h3 class="card-title align-items-start flex-column">
                            <span class="card-label fw-bold text-white fs-3 mb-1">{{ __('billing.current_plan') }}</span>
                            <span class="text-muted fw-semibold fs-7">{{ __('billing.subtitle') }}</span>
                        </h3>
                    </div>
                    <div class="card-body pt-6 d-flex flex-column justify-content-between">
                        <div>
                            @if($activeSubscription)
                                <h1 class="text-white fw-bold fs-2tx mb-3">{{ Lang::has('billing.plans_names.' . $activeSubscription->plan->slug) ? __('billing.plans_names.' . $activeSubscription->plan->slug) : $activeSubscription->plan->name }}</h1>
                                <div class="d-flex align-items-center gap-2 mb-6">
                                    <span class="fw-semibold text-muted">{{ __('billing.status') }}:</span>
                                    @if($activeSubscription->status === 'active')
                                        <span class="badge badge-light-success fw-bold">{{ __('billing.active') }}</span>
                                    @elseif($activeSubscription->status === 'trialling')
                                        <span class="badge badge-light-warning fw-bold">{{ __('billing.trialling') }}</span>
                                    @elseif($activeSubscription->status === 'cancelled')
                                        <span class="badge badge-light-danger fw-bold">{{ __('billing.cancelled') }}</span>
                                    @else
                                        <span class="badge badge-light-secondary fw-bold">{{ __('billing.expired') }}</span>
                                    @endif
                                </div>
                                <div class="mb-8">
                                    @if($activeSubscription->status === 'trialling')
                                        <div class="fs-6 fw-semibold text-gray-400">{{ __('billing.trial_ends_at') }}</div>
                                        <div class="fs-4 fw-bold text-warning">{{ $activeSubscription->trial_ends_at ? $activeSubscription->trial_ends_at->translatedFormat('d F Y H:i') : '-' }}</div>
                                    @else
                                        <div class="fs-6 fw-semibold text-gray-400">{{ __('billing.ends_at') }}</div>
                                        <div class="fs-4 fw-bold text-success">{{ $activeSubscription->ends_at ? $activeSubscription->ends_at->translatedFormat('d F Y H:i') : '-' }}</div>
                                    @endif
                                </div>
                            @else
                                <h1 class="text-danger fw-bold fs-2tx mb-3">{{ __('billing.expired') }}</h1>
                                <div class="text-muted mb-8">{{ __('billing.no_active_subscription') }}</div>
                            @endif
                        </div>

                        @if($activeSubscription && in_array($activeSubscription->status, ['active', 'trialling']))
                            <form action="{{ route('billing.cancel', ['company' => app('current_company')->uuid]) }}" method="POST" onsubmit="return confirm('{{ __('billing.cancel_confirm') }}')">
                                @csrf
                                <button type="submit" class="btn btn-danger w-100 fw-bold">{{ __('billing.cancel_subscription') }}</button>
                            </form>
                        @endif
                    </div>
                </div>
            </div>
            <!--end::Current Plan Card-->

            <!--begin::Usage Progress-->
            <div class="col-lg-8 mb-5">
                <div class="card card-flush h-100 border-0 shadow-sm">
                    <div class="card-header pt-7">
                        <h3 class="card-title align-items-start flex-column">
                            <span class="card-label fw-bold text-gray-900 fs-3">{{ __('billing.usage_limits') }}</span>
                        </h3>
                    </div>
                    <div class="card-body pt-6">
                        <div class="row g-5">
                            @foreach(['customers' => 'customers_limit', 'orders' => 'orders_limit', 'measurements' => 'measurements_limit', 'emails' => 'emails_limit'] as $key => $transKey)
                                <div class="col-md-4">
                                    <div class="bg-light p-6 rounded-4 h-100 d-flex flex-column justify-content-between">
                                        <div>
                                            <div class="text-gray-500 fw-semibold fs-6 mb-2">{{ __('billing.' . $transKey) }}</div>
                                            <div class="d-flex align-items-baseline mb-4">
                                                <span class="fs-1hx fw-bold text-gray-900 me-2">{{ $usage[$key]['count'] }}</span>
                                                <span class="fs-6 text-gray-500">/ {{ $usage[$key]['limit'] ?? __('billing.unlimited') }}</span>
                                            </div>
                                        </div>
                                        @if($usage[$key]['limit'])
                                            @php
                                                $pct = min(100, round(($usage[$key]['count'] / $usage[$key]['limit']) * 100));
                                                $barClass = 'bg-primary';
                                                if($pct >= 90) { $barClass = 'bg-danger'; }
                                                elseif($pct >= 75) { $barClass = 'bg-warning'; }
                                            @endphp
                                            <div>
                                                <div class="progress h-8px w-100 bg-light-primary mb-2">
                                                    <div class="progress-bar {{ $barClass }}" role="progressbar" style="width: {{ $pct }}%" aria-valuenow="{{ $pct }}" aria-valuemin="0" aria-valuemax="100"></div>
                                                </div>
                                                <div class="d-flex justify-content-between fs-8 text-gray-500">
                                                    <span>{{ __('billing.usage_occupancy', ['pct' => $pct]) }}</span>
                                                </div>
                                            </div>
                                        @else
                                            <div>
                                                <div class="progress h-8px w-100 bg-light-success mb-2">
                                                    <div class="progress-bar bg-success" role="progressbar" style="width: 100%"></div>
                                                </div>
                                                <div class="fs-8 text-success fw-bold">{{ __('billing.unlimited_usage') }}</div>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
            <!--end::Usage Progress-->
        </div>
        <!--end::Current Subscription & Usage Limits-->

        <!--begin::Pricing Plans-->
        <div class="card card-flush border-0 shadow-sm mb-10">
            <div class="card-header pt-9 text-center d-block border-0">
                <h2 class="fs-2x fw-bold text-gray-900 mb-3">{{ __('billing.plans') }}</h2>
                <div class="text-muted fw-semibold fs-6">{{ __('billing.plans_subtitle') }}</div>
            </div>
            <div class="card-body pt-8 pb-10">
                <div class="row g-10 justify-content-center">
                    @foreach($plans as $plan)
                        @php
                            $isCurrentPlan = $activeSubscription && $activeSubscription->plan->id === $plan->id && $activeSubscription->isActive();
                            $colorClass = $plan->slug === 'yearly-premium' ? 'border-primary border-dashed' : 'border-gray-200';
                            $badgeText = $plan->slug === 'yearly-premium' ? __('billing.popular') : '';
                        @endphp
                        <div class="col-md-5">
                            <div class="card h-100 border rounded-4 shadow-xs {{ $colorClass }} p-8 position-relative">
                                @if($badgeText)
                                    <span class="position-absolute top-0 start-50 translate-middle badge badge-primary fs-7 fw-bold py-2 px-4 rounded-pill">{{ $badgeText }}</span>
                                @endif
                                <div class="text-center mb-8">
                                    <h3 class="fs-2 text-gray-900 fw-bold mb-3">{{ Lang::has('billing.plans_names.' . $plan->slug) ? __('billing.plans_names.' . $plan->slug) : $plan->name }}</h3>
                                    <p class="text-muted fs-6 min-h-40px">{{ Lang::has('billing.plans_descriptions.' . $plan->slug) ? __('billing.plans_descriptions.' . $plan->slug) : ($plan->description ?? __('billing.plan_default_description')) }}</p>
                                    <div class="d-flex align-items-center justify-content-center mt-5">
                                        <span class="fs-3x fw-bold text-gray-900 font-monospace">@money($plan->price)</span>
                                        <span class="fs-6 text-gray-500 ms-2">/ {{ $plan->billing_interval === 'month' ? __('billing.monthly') : __('billing.yearly') }}</span>
                                    </div>
                                </div>

                                <div class="separator separator-dashed my-6"></div>

                                <div class="mb-8">
                                    <ul class="list-unstyled">
                                        <li class="d-flex align-items-center mb-4">
                                            <i class="ki-duotone ki-check fs-2 text-success me-3"></i>
                                            <span class="text-gray-700 fw-semibold">{{ __('billing.unlimited') }} {{ __('common.customers') }}</span>
                                        </li>
                                        <li class="d-flex align-items-center mb-4">
                                            <i class="ki-duotone ki-check fs-2 text-success me-3"></i>
                                            <span class="text-gray-700 fw-semibold">{{ __('billing.unlimited') }} {{ __('common.orders') }}</span>
                                        </li>
                                        <li class="d-flex align-items-center mb-4">
                                            <i class="ki-duotone ki-check fs-2 text-success me-3"></i>
                                            <span class="text-gray-700 fw-semibold">{{ __('billing.unlimited') }} {{ __('common.measurements') }}</span>
                                        </li>
                                        <li class="d-flex align-items-center mb-4">
                                            <i class="ki-duotone ki-check fs-2 text-success me-3"></i>
                                            <span class="text-gray-700 fw-semibold">{{ __('billing.auto_renew_with_card') }}</span>
                                        </li>
                                    </ul>
                                </div>

                                @if($isCurrentPlan)
                                    <button class="btn btn-light-success w-100 fw-bold disabled cursor-not-allowed">{{ __('billing.active_plan') }}</button>
                                @else
                                    <a href="{{ route('billing.checkout', ['company' => app('current_company')->uuid, 'plan_uuid' => $plan->uuid]) }}" class="btn btn-primary w-100 fw-bold">{{ __('billing.subscribe') }}</a>
                                @endif
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
        <!--end::Pricing Plans-->

        <!--begin::Payment History-->
        <div class="card card-flush border-0 shadow-sm mb-10">
            <div class="card-header pt-7">
                <h3 class="card-title align-items-start flex-column">
                    <span class="card-label fw-bold text-gray-900 fs-3">{{ __('billing.payment_history') }}</span>
                    <span class="text-muted fw-semibold fs-7">{{ __('billing.payment_history_desc') }}</span>
                </h3>
            </div>
            <div class="card-body pt-6">
                <div class="table-responsive">
                    <table class="table align-middle table-row-dashed fs-6 gy-4">
                        <thead>
                            <tr class="text-start text-gray-500 fw-bold fs-7 text-uppercase gs-0">
                                <th class="min-w-150px">{{ __('billing.plan_name') }}</th>
                                <th class="min-w-150px">{{ __('billing.transaction_ref') }}</th>
                                <th class="min-w-120px text-end">{{ __('billing.amount') }}</th>
                                <th class="min-w-150px text-center">{{ __('billing.status') }}</th>
                                <th class="min-w-150px text-end">{{ __('billing.payment_date') }}</th>
                            </tr>
                        </thead>
                        <tbody class="fw-semibold text-gray-600">
                            @forelse($payments as $payment)
                                <tr>
                                    <td>
                                        <span class="text-gray-900 fw-bold fs-6">{{ Lang::has('billing.plans_names.' . $payment->subscription->plan->slug) ? __('billing.plans_names.' . $payment->subscription->plan->slug) : $payment->subscription->plan->name }}</span>
                                    </td>
                                    <td>
                                        <span class="font-monospace text-muted">{{ $payment->transaction_id ?? '-' }}</span>
                                    </td>
                                    <td class="text-end text-gray-900 fw-bold font-monospace">
                                        @money($payment->amount)
                                    </td>
                                    <td class="text-center">
                                        @if($payment->status === 'success')
                                            <span class="badge badge-light-success fw-bold">{{ __('billing.payment_success') }}</span>
                                        @else
                                            <span class="badge badge-light-danger fw-bold">{{ __('billing.payment_failed') }}</span>
                                        @endif
                                    </td>
                                    <td class="text-end">
                                        {{ $payment->payment_date ? $payment->payment_date->translatedFormat('d F Y H:i') : '-' }}
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="5" class="text-center text-muted py-8">{{ __('billing.no_payment_history') }}</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <!--end::Payment History-->

    </div>
</div>
@endsection