{{--
=====================================================
Etebarit - by Gisoo Web Solutions
------------------------------------------------------
Gisoo.net
------------------------------------------------------
Copyright (c) 2026 Gisoo Web Solutions
=====================================================
This code is protected by copyright
=====================================================
File: switcher.blade.php
------------------------------------------------------
Use: The two-wallet switcher shown to merchants only. It
     lays the personal wallet and the shop wallet side by
     side so the two are never confused: the one you are on
     is highlighted, the other is a shortcut to it.
=====================================================
--}}

@props([
    'active',            // 'personal' | 'shop'
    'personalUrl',
    'shopUrl',
    'personalAmount',
    'shopAmount',
])

<div class="mb-6 grid gap-4 sm:grid-cols-2">
    {{-- Personal wallet (violet) --}}
    @php $p = $active === 'personal'; @endphp
    <a href="{{ $personalUrl }}" @class([
        'group relative flex items-center gap-4 overflow-hidden rounded-2xl p-5 transition',
        'bg-gradient-to-bl from-[#5e42be] to-[#3f2a8f] text-white shadow-lg shadow-primary-600/25' => $p,
        'border border-line bg-white hover:-translate-y-0.5 hover:border-primary-600/40 hover:shadow-md' => ! $p,
    ])>
        <span @class(['flex size-12 shrink-0 items-center justify-center rounded-xl', 'bg-white/15 text-white' => $p, 'bg-[#efeafb] text-primary-600' => ! $p])>
            <svg class="size-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="2.5" y="5.5" width="19" height="13" rx="2.5"/><line x1="2.5" y1="9.5" x2="21.5" y2="9.5"/><path d="M6 14.5h4"/></svg>
        </span>
        <div class="min-w-0 flex-1">
            <div class="flex items-center gap-2">
                <span @class(['text-[14.5px] font-bold', 'text-white' => $p, 'text-ink' => ! $p])>{{ __('front.wallet_switch.personal_title') }}</span>
                @if ($p)<span class="rounded-full bg-white/20 px-2 py-0.5 text-[10px] font-bold">{{ __('front.wallet_switch.here') }}</span>@endif
            </div>
            <div @class(['mt-0.5 text-[11.5px] leading-5', 'text-white/75' => $p, 'text-ink-faint' => ! $p])>{{ __('front.wallet_switch.personal_desc') }}</div>
            <div @class(['mt-1.5 text-[17px] font-black', 'text-white' => $p, 'text-ink' => ! $p])><span dir="ltr">@toman($personalAmount)</span> <span class="text-[11px] font-normal opacity-80">{{ __('front.wallet.toman') }}</span></div>
        </div>
        @unless ($p)
            <svg class="size-5 shrink-0 text-ink-faint transition group-hover:text-primary-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 6l-6 6 6 6"/></svg>
        @endunless
    </a>

    {{-- Shop wallet (Iranian red) --}}
    @php $s = $active === 'shop'; @endphp
    <a href="{{ $shopUrl }}" @class([
        'group relative flex items-center gap-4 overflow-hidden rounded-2xl p-5 transition',
        'bg-gradient-to-bl from-secondary-500 to-[#b3242f] text-white shadow-lg shadow-secondary-500/25' => $s,
        'border border-line bg-white hover:-translate-y-0.5 hover:border-secondary-500/40 hover:shadow-md' => ! $s,
    ])>
        <span @class(['flex size-12 shrink-0 items-center justify-center rounded-xl', 'bg-white/15 text-white' => $s, 'bg-secondary-50 text-secondary-500' => ! $s])>
            <svg class="size-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 9.5 5.2 4h13.6L20 9.5"/><path d="M5.5 12v8h13v-8"/><path d="M4 9.5c0 1.5 1.3 2.5 2.7 2.5S9.3 11 9.3 9.5c0 1.5 1.2 2.5 2.7 2.5S14.7 11 14.7 9.5c0 1.5 1.2 2.5 2.7 2.5S20 11 20 9.5"/></svg>
        </span>
        <div class="min-w-0 flex-1">
            <div class="flex items-center gap-2">
                <span @class(['text-[14.5px] font-bold', 'text-white' => $s, 'text-ink' => ! $s])>{{ __('front.wallet_switch.shop_title') }}</span>
                @if ($s)<span class="rounded-full bg-white/20 px-2 py-0.5 text-[10px] font-bold">{{ __('front.wallet_switch.here') }}</span>@endif
            </div>
            <div @class(['mt-0.5 text-[11.5px] leading-5', 'text-white/75' => $s, 'text-ink-faint' => ! $s])>{{ __('front.wallet_switch.shop_desc') }}</div>
            <div @class(['mt-1.5 text-[17px] font-black', 'text-white' => $s, 'text-ink' => ! $s])><span dir="ltr">@toman($shopAmount)</span> <span class="text-[11px] font-normal opacity-80">{{ __('front.wallet.toman') }}</span></div>
        </div>
        @unless ($s)
            <svg class="size-5 shrink-0 text-ink-faint transition group-hover:text-secondary-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 6l-6 6 6 6"/></svg>
        @endunless
    </a>
</div>