{{--
=====================================================
Etebarit - by Gisoo Web Solutions
------------------------------------------------------
Gisoo.net
------------------------------------------------------
Copyright (c) 2026 Gisoo Web Solutions
=====================================================
This code is protected by copyright
=====================================================
File: pay.blade.php
------------------------------------------------------
Use: The public, shop-branded landing that stands in for a
     merchant's checkout. Top: logo, name, support phone.
     Middle: an amount to enter (open) or a fixed amount from
     a payment link. Bottom: the shop's social links. Submits
     to open a real gateway order and forward to the payment
     page -- it is never itself a payment page.
=====================================================
--}}

@extends('layouts.gateway')

@section('title', __('front.shop_pay.title', ['shop' => $shop->name]))

@php
    use App\Support\Format;

    $socials = $shop->socialLinks();
    $socialIcons = [
        'instagram' => '<rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="0.5" fill="currentColor"/>',
        'telegram' => '<path d="M21 4 3 11l5 2 2 6 3-4 5 4z"/><path d="M8 13l9-6"/>',
        'whatsapp' => '<path d="M4 20l1.5-4.2A7.5 7.5 0 1 1 9 19.2z"/><path d="M9 9.5c.3 2 2.5 4.2 4.5 4.5.6.1 1.3-.6 1.5-1.2l-1.8-.9-.9.9c-.8-.4-1.6-1.2-2-2l.9-.9-.9-1.8c-.6.2-1.3.9-1.3 1.4z"/>',
        'bale' => '<circle cx="12" cy="12" r="9"/><path d="M8 12.5l2.5 2.5L16 9"/>',
    ];
    // Fixed-amount links may be disabled or used up.
    $unavailable = $link !== null && ! $link->isUsable();
    $amount = $link?->amount;
@endphp

@section('content')
    {{-- Width matches the layout's brand bar (logo + theme toggle) so they line up. --}}
    <div class="w-full max-w-[480px]">
        <div class="overflow-hidden rounded-[22px] border border-[var(--pay-border)] bg-[var(--pay-card)] shadow-xl">

            {{-- ===== Header: logo + name + support ===== --}}
            <div class="flex items-center gap-3.5 border-b border-[var(--pay-border)] px-6 py-5">
                <span class="flex size-14 shrink-0 items-center justify-center overflow-hidden rounded-[15px] border border-[var(--pay-border)] bg-[var(--pay-bg)]">
                    @if ($shop->logo_path)
                        <img src="{{ route('media.shop-logo', $shop) }}" alt="{{ $shop->name }}" class="size-full object-cover">
                    @else
                        <svg class="size-7 text-[var(--pay-muted)]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M4 9.5 5.2 4h13.6L20 9.5"/><path d="M5.5 12v8h13v-8"/></svg>
                    @endif
                </span>
                <div class="min-w-0 flex-1">
                    <h1 class="truncate text-[17px] font-bold">{{ $shop->name }}</h1>
                    @if ($shop->support_phone)
                        <a href="tel:{{ $shop->support_phone }}" class="mt-0.5 inline-flex items-center gap-1.5 text-[12px] text-[var(--pay-muted)] transition hover:text-primary-500">
                            <svg class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h4l2 5-2.5 1.5a11 11 0 0 0 6 6L15 14l5 2v4a1 1 0 0 1-1 1A16 16 0 0 1 3 5a1 1 0 0 1 1-1z"/></svg>
                            <span dir="ltr">{{ Format::persianDigits($shop->support_phone) }}</span>
                        </a>
                    @endif
                </div>
            </div>

            @if ($unavailable)
                {{-- ===== Unavailable link ===== --}}
                <div class="px-6 py-10 text-center">
                    <span class="mx-auto mb-4 flex size-14 items-center justify-center rounded-2xl bg-secondary-50 text-secondary-500">
                        <svg class="size-7" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><line x1="8" y1="8" x2="16" y2="16"/></svg>
                    </span>
                    <h2 class="mb-1.5 text-[15px] font-bold">{{ __('front.shop_pay.unavailable_title') }}</h2>
                    <p class="mx-auto max-w-[300px] text-[12.5px] leading-6 text-[var(--pay-muted)]">{{ __('front.shop_pay.unavailable_body') }}</p>
                </div>
            @else
                <form method="POST" action="{{ $action }}" class="px-6 py-6"
                      x-data="{{ $link === null ? 'payOpenForm()' : '{ busy: false }' }}"
                      x-on:submit="busy = true">
                    @csrf

                    @if ($link !== null)
                        {{-- ===== Fixed amount ===== --}}
                        @if ($link->title)
                            <div class="mb-4 rounded-xl bg-[var(--pay-bg)] px-4 py-3 text-center text-[13.5px] font-bold">{{ $link->title }}</div>
                        @endif
                        <div class="mb-5 text-center">
                            <div class="text-[12px] text-[var(--pay-muted)]">{{ __('front.shop_pay.amount_label') }}</div>
                            <div class="mt-1 text-[26px] font-black tracking-tight"><span dir="ltr">{{ Format::persianDigits(number_format($amount)) }}</span> <span class="text-[13px] font-normal text-[var(--pay-muted)]">{{ __('front.shop.toman') }}</span></div>
                        </div>
                    @else
                        {{-- ===== Open amount ===== --}}
                        <div class="mb-5">
                            <label for="pay-amount" class="mb-1.5 block text-[13px] font-bold">{{ __('front.shop_pay.amount_label') }}</label>
                            <div class="relative">
                                <input id="pay-amount" type="text" inputmode="numeric" dir="ltr" required x-bind:value="grouped" x-on:input="onInput($event)"
                                       placeholder="{{ __('front.shop_pay.amount_placeholder') }}"
                                       class="w-full rounded-xl border-[1.5px] border-[var(--pay-border)] bg-[var(--pay-bg)] py-3.5 pl-16 pr-4 text-right text-[15px] font-bold outline-none transition focus:border-primary-500" style="direction:rtl">
                                <input type="hidden" name="amount" x-bind:value="raw">
                                <span class="pointer-events-none absolute left-4 top-1/2 -translate-y-1/2 text-[12px] font-bold text-[var(--pay-muted)]">{{ __('front.shop.toman') }}</span>
                            </div>
                            @error('amount')
                                <p class="mt-1.5 text-[11.5px] text-secondary-500">{{ $message }}</p>
                            @else
                                <p class="mt-1.5 text-[11.5px] text-[var(--pay-muted)]">{{ __('front.shop_pay.min_hint') }}</p>
                            @enderror
                        </div>
                    @endif

                    {{-- Optional buyer note (shown to the merchant on the order). --}}
                    <div class="mb-5" x-data="{ len: {{ strlen((string) old('description')) }} }">
                        <label for="pay-desc" class="mb-1.5 flex items-center justify-between text-[13px] font-bold">
                            <span>{{ __('front.shop_pay.description_label') }} <span class="font-normal text-[var(--pay-muted)]">{{ __('front.shop.info.optional') }}</span></span>
                            <span class="font-mono text-[11px] font-normal text-[var(--pay-muted)]" dir="ltr"><span x-text="len">0</span>/300</span>
                        </label>
                        <textarea id="pay-desc" name="description" rows="2" maxlength="300" x-on:input="len = $el.value.length"
                                  placeholder="{{ __('front.shop_pay.description_placeholder') }}"
                                  class="w-full rounded-xl border-[1.5px] border-[var(--pay-border)] bg-[var(--pay-bg)] px-4 py-3 text-[13.5px] outline-none transition focus:border-primary-500">{{ old('description') }}</textarea>
                        @error('description')<p class="mt-1.5 text-[11.5px] text-secondary-500">{{ $message }}</p>@enderror
                    </div>

                    <button type="submit" x-bind:disabled="busy"
                            class="inline-flex w-full items-center justify-center gap-2 rounded-xl bg-gradient-to-bl from-[#563bb1] to-[#7a5de0] py-3.5 text-[15px] font-bold text-white shadow-lg shadow-primary-600/25 transition hover:opacity-95 disabled:cursor-not-allowed disabled:opacity-70">
                        <span x-show="busy" x-cloak class="size-4 animate-spin rounded-full border-2 border-white/30 border-t-white"></span>
                        {{ __('front.shop_pay.pay_button') }}
                    </button>

                    <p class="mt-3 flex items-center justify-center gap-1.5 text-center text-[11px] text-[var(--pay-muted)]">
                        <svg class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="10" width="16" height="11" rx="2"/><path d="M8 10V7a4 4 0 0 1 8 0v3"/></svg>
                        {{ __('front.shop_pay.secure_note') }}
                    </p>
                </form>
            @endif

            {{-- ===== Social links ===== --}}
            @if ($socials !== [])
                <div class="flex items-center justify-center gap-2.5 border-t border-[var(--pay-border)] px-6 py-4">
                    @foreach ($socials as $platform => $url)
                        <a href="{{ $url }}" target="_blank" rel="noopener" aria-label="{{ __("front.shop.info.social.$platform.label") }}"
                           class="flex size-9 items-center justify-center rounded-full border border-[var(--pay-border)] bg-[var(--pay-bg)] text-[var(--pay-muted)] transition hover:text-primary-500">
                            <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">{!! $socialIcons[$platform] ?? '' !!}</svg>
                        </a>
                    @endforeach
                </div>
            @endif
        </div>

        <p class="mt-4 text-center text-[11px] text-[var(--pay-muted)]">{{ __('front.shop_pay.powered_by') }}
            <a href="{{ url('/') }}" class="font-bold text-primary-500 transition hover:text-primary-600">{{ __('front.app.name') }}</a>
        </p>
    </div>
@endsection