@extends('frontend.layout.dashboard-master')
@section('site_title', __('My Subscriptions'))

@section('content')
<div class="p-4 sm:p-6 max-w-7xl mx-auto">

    {{-- ── Header ────────────────────────────────────────────────────── --}}
    <div class="flex items-center justify-between flex-wrap gap-4 mb-8">
        <h3 class="text-xl font-semibold text-[#242B36]">{{ __('My Subscriptions') }}</h3>
        <a href="{{ route('subscriptions.all') }}"
           class="inline-flex items-center gap-2 px-4 py-2.5 text-sm font-medium text-white bg-primary hover:bg-secondary rounded-xl transition-colors">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
            </svg>
            {{ __('Buy Subscription') }}
        </a>
    </div>

    {{-- ── Stat cards ─────────────────────────────────────────────────── --}}
    <div class="grid grid-cols-1 sm:grid-cols-3 gap-5 mb-8">
        <div class="bg-white border border-[#C4C8CE] rounded-2xl p-4 sm:p-6">
            <p class="text-sm font-normal text-[#414E62] mb-4">{{ __('Available Connects') }}</p>
            <p class="text-3xl font-semibold text-[#242B36]">{{ $total_limit }}</p>
        </div>
        <div class="bg-white border border-[#C4C8CE] rounded-2xl p-4 sm:p-6">
            <p class="text-sm font-normal text-[#414E62] mb-4">{{ __('Active Plans') }}</p>
            <p class="text-3xl font-semibold text-[#242B36]">{{ $active_count }}</p>
        </div>
        <div class="bg-white border border-[#C4C8CE] rounded-2xl p-4 sm:p-6">
            <p class="text-sm font-normal text-[#414E62] mb-4">{{ __('Total Purchased') }}</p>
            <p class="text-3xl font-semibold text-[#242B36]">{{ $total_count }}</p>
        </div>
    </div>

    {{-- ── Notice ──────────────────────────────────────────────────────── --}}
    @if(get_static_option('limit_settings'))
    <div class="bg-[#FFF9F0] border border-[#FDDBA8] rounded-2xl px-5 py-4 flex gap-3 items-start mb-8">
        <svg class="w-5 h-5 text-[#FA8C00] mt-0.5 shrink-0" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
        </svg>
        <p class="text-sm text-[#3B4759] leading-relaxed">
            {{ __('Notice: If your free connect ends or expired, Each time') }}
            <strong class="font-semibold text-[#FA8C00]">{{ get_static_option('limit_settings') ?? 1 }}</strong>
            {{ __('connect will be reduce from your total connect while you bid or send job proposal.') }}
        </p>
    </div>
    @endif

    {{-- ── Subscription history table ──────────────────────────────────── --}}
    <div class="w-full bg-white rounded-2xl border border-[#E9EBF0] overflow-hidden">

        {{-- Card header --}}
        <div class="flex items-center justify-between gap-4 px-6 py-4 border-b border-[#E9EBF0] flex-wrap">
            <h4 class="text-sm font-semibold text-[#242B36]">{{ __('Subscription History') }}</h4>
            <div class="relative">
                <input type="text" id="string_search"
                       placeholder="{{ __('Search...') }}"
                       class="w-full sm:w-[220px] pl-9 pr-4 py-2 text-sm text-[#3B4759] bg-[#F8F9FB] border border-[#E9EBF0] rounded-xl focus:outline-none focus:border-primary transition-colors">
                <span class="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-[#C4C8CE]">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0"/>
                    </svg>
                </span>
            </div>
        </div>

        {{-- AJAX result container --}}
        <div class="search_result">
            @include('subscription::frontend.freelancer.subscription.search-result')
        </div>

    </div>

</div>
@endsection

@section('script')
    @include('subscription::frontend.freelancer.subscription.subscription-js')
@endsection