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

@section('content')

    {{-- Page Header --}}
    <div class="mb-6 flex flex-col gap-4 rounded-xl border border-[#C4C8CE] bg-white p-6 sm:flex-row sm:items-center sm:justify-between">
        <div class="space-y-1">
            <h1 class="text-[20px] font-semibold leading-7 text-[#242B36]">{{ __('Subscriptions') }}</h1>
            <p class="text-[14px] font-normal text-[#3B4759]">{{ __('Manage your subscription plans and view history') }}</p>
        </div>
        <div class="flex items-center gap-3">
            <div class="flex items-center gap-2 rounded-lg border border-[#C4C8CE] bg-[#F8FAFC] px-4 py-2">
                <svg class="h-4 w-4 shrink-0 text-[#007456]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
                    <path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"></path>
                    <path d="M21 3v5h-5"></path>
                </svg>
                <span class="text-[13px] font-medium text-[#3B4759]">{{ __('Total Connect:') }}</span>
                <span class="text-[13px] font-semibold text-[#242B36]">{{ $total_limit }}</span>
            </div>
            <a href="{{ route('subscriptions.all') }}"
               class="inline-flex items-center gap-2 rounded-lg bg-[#007456] px-5 py-2.5 text-[13px] font-semibold text-white transition hover:bg-[#005f44]">
                <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M12 5v14M5 12h14"></path>
                </svg>
                {{ __('Buy Subscription') }}
            </a>
        </div>
    </div>

    {{-- Notice --}}
    <div class="mb-6 flex items-start gap-3 rounded-xl border border-[#FDE68A] bg-[#FFFBEB] px-5 py-4">
        <svg class="mt-0.5 h-4 w-4 shrink-0 text-[#D97706]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <circle cx="12" cy="12" r="10"></circle>
            <line x1="12" y1="8" x2="12" y2="12"></line>
            <line x1="12" y1="16" x2="12.01" y2="16"></line>
        </svg>
        <p class="text-[13px] font-medium text-[#92400E]">
            {{ __('Notice: If your monthly free limit ends, each time') }}
            {{ ' '.(get_static_option('limit_settings') ?? 1).' ' }}
            {{ __('limit will be reduced from your total limit while you create a job post.') }}
        </p>
    </div>

    {{-- Table Card --}}
    <div class="rounded-xl border border-[#C4C8CE] bg-white">

        {{-- Card Header --}}
        <div class="flex flex-col gap-3 px-6 py-5 sm:flex-row sm:items-center sm:justify-between">
            <h2 class="text-[16px] font-semibold text-[#242B36]">{{ __('Subscription History') }}</h2>
            <div class="flex items-center gap-2 rounded-lg border border-[#C4C8CE] px-4 py-2.5 focus-within:border-[#007456]">
                <svg class="h-4 w-4 shrink-0 text-[#677181]" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5">
                    <circle cx="8.5" cy="8.5" r="5.5"/><path d="m14 14 3.5 3.5" stroke-linecap="round"/>
                </svg>
                <input id="string_search" type="text" placeholder="{{ __('Search by date…') }}"
                       class="w-44 bg-transparent text-[13px] text-[#677181] placeholder-[#677181] outline-none">
            </div>
        </div>

        <x-validation.error />

        {{-- Table --}}
        <div class="overflow-x-auto search_result">
            @include('subscription::frontend.client.subscription.search-result')
        </div>

    </div>

@endsection

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