{{--
=====================================================
Etebarit - by Gisoo Web Solutions
------------------------------------------------------
Gisoo.net
------------------------------------------------------
Copyright (c) 2026 Gisoo Web Solutions
=====================================================
This code is protected by copyright
=====================================================
File: payment-links.blade.php
------------------------------------------------------
Use: The merchant's payment-links page: the always-on
     open-amount shop link, plus a table of fixed-amount
     links to create, edit, enable/disable, copy and delete.
=====================================================
--}}

@extends('layouts.merchant')

@section('title', __('front.shop_links.title'))

@php use App\Support\Format; @endphp

@section('breadcrumb')
    <x-ui.breadcrumb :items="[
        ['label' => __('admin.breadcrumb.home'), 'url' => route('account.shop.index')],
        ['label' => __('front.shop_links.breadcrumb')],
    ]" />
@endsection

@section('page')
    @php $openUrl = route('shop.pay', $shop->slug); @endphp
    <div x-data="paymentLinksPage({ storeUrl: @js(route('account.shop.links.store')) })">
        <div class="mb-5 flex flex-wrap items-end justify-between gap-3">
            <div>
                <h1 class="mb-1 text-2xl font-bold tracking-tight">{{ __('front.shop_links.title') }}</h1>
                <p class="text-sm text-ink-muted">{{ __('front.shop_links.subtitle') }}</p>
            </div>
            <button type="button" x-on:click="openCreate()"
                    class="inline-flex items-center gap-2 rounded-xl bg-secondary-500 px-5 py-2.5 text-sm font-bold text-white shadow-lg shadow-secondary-500/25 transition hover:bg-secondary-600">
                <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
                {{ __('front.shop_links.create_button') }}
            </button>
        </div>

        <x-ui.info-box class="mb-5">{{ __('front.shop_links.info') }}</x-ui.info-box>

        {{-- The always-on open-amount link (the shop's public page). --}}
        <div class="mb-5 rounded-2xl border border-secondary-500/20 bg-secondary-50/60 p-5">
            <div class="mb-2 flex items-center gap-2">
                <span class="flex size-8 items-center justify-center rounded-lg bg-white text-secondary-500 shadow-sm">
                    <svg class="size-4.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M9 15l6-6"/><path d="M11 6l.5-.5a4 4 0 0 1 5.7 5.7l-1.5 1.5"/><path d="M13 18l-.5.5a4 4 0 0 1-5.7-5.7l1.5-1.5"/></svg>
                </span>
                <h2 class="text-[15px] font-bold text-secondary-600">{{ __('front.shop_links.open_title') }}</h2>
            </div>
            <p class="mb-3 text-[12.5px] leading-6 text-secondary-600/90">{{ __('front.shop_links.open_hint') }}</p>
            <div class="flex flex-wrap items-center gap-2">
                <code class="min-w-0 flex-1 truncate rounded-xl border border-secondary-500/20 bg-white px-3.5 py-2.5 font-mono text-[12.5px] text-ink-soft" dir="ltr">{{ $openUrl }}</code>
                <button type="button" x-on:click="copy(@js($openUrl), 'open')"
                        class="inline-flex shrink-0 items-center gap-1.5 rounded-xl bg-white px-3.5 py-2.5 text-[12.5px] font-bold text-secondary-500 shadow-sm transition hover:bg-secondary-100">
                    <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="12" height="12" rx="2"/><path d="M5 15V5a2 2 0 0 1 2-2h10"/></svg>
                    <span x-text="copiedId === 'open' ? @js(__('front.shop_links.copied')) : @js(__('front.shop_links.copy'))"></span>
                </button>
                <a href="{{ $openUrl }}" target="_blank" rel="noopener"
                   class="inline-flex shrink-0 items-center gap-1.5 rounded-xl bg-white px-3.5 py-2.5 text-[12.5px] font-bold text-ink-soft shadow-sm transition hover:text-secondary-500">
                    <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><path d="M15 3h6v6"/><path d="M10 14 21 3"/></svg>
                    {{ __('front.shop_links.open_page') }}
                </a>
            </div>
        </div>

        {{-- Fixed-amount links --}}
        <div class="rounded-2xl border border-line bg-white p-5">
            <div class="overflow-x-auto rounded-[14px] border border-[#f0eff5]">
                <table class="w-full min-w-[820px] border-collapse text-right text-[13.5px]">
                    <thead>
                        <tr class="bg-[#faf9fd] text-ink-muted">
                            <th class="px-4 py-3.5 font-bold">{{ __('front.shop_links.columns.title') }}</th>
                            <th class="px-4 py-3.5 font-bold">{{ __('front.shop_links.columns.amount') }}</th>
                            <th class="px-4 py-3.5 font-bold">{{ __('front.shop_links.columns.link') }}</th>
                            <th class="px-4 py-3.5 font-bold">{{ __('front.shop_links.columns.uses') }}</th>
                            <th class="px-4 py-3.5 font-bold">{{ __('front.shop_links.columns.status') }}</th>
                            <th class="px-4 py-3.5 text-center font-bold">{{ __('front.shop_links.columns.actions') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($links as $link)
                            @php
                                $linkUrl = route('shop.pay.link', [$shop->slug, $link->token]);
                                $payload = [
                                    'title' => $link->title,
                                    'amount' => $link->amount,
                                    'maxUses' => $link->max_uses,
                                    'updateUrl' => route('account.shop.links.update', $link),
                                ];
                            @endphp
                            <tr class="border-t border-[#f0eff5]">
                                <td class="px-4 py-3.5 font-bold">{{ $link->title ?: __('front.shop_links.untitled') }}</td>
                                <td class="px-4 py-3.5 font-bold"><span dir="ltr">@toman($link->amount)</span> <span class="text-[11px] font-normal text-ink-faint">{{ __('front.shop_links.toman') }}</span></td>
                                <td class="px-4 py-3.5">
                                    <div class="flex items-center gap-1.5">
                                        <code class="max-w-[220px] truncate rounded-lg bg-[#faf9fd] px-2.5 py-1.5 font-mono text-[12px] text-ink-soft" dir="ltr">{{ $linkUrl }}</code>
                                        <button type="button" x-on:click="copy(@js($linkUrl), {{ $link->id }})" class="relative shrink-0 rounded-lg bg-[#f2f0fa] p-1.5 text-primary-600 transition hover:bg-[#e8e3f8]" title="{{ __('front.shop_links.copy') }}">
                                            <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="9" y="9" width="12" height="12" rx="2"/><path d="M5 15V5a2 2 0 0 1 2-2h10"/></svg>
                                            <span x-show="copiedId === {{ $link->id }}" x-cloak class="absolute -top-7 left-1/2 -translate-x-1/2 rounded-lg bg-ink px-2 py-1 text-[10px] text-white">{{ __('front.shop_links.copied') }}</span>
                                        </button>
                                    </div>
                                </td>
                                <td class="px-4 py-3.5 text-ink-soft">
                                    @if ($link->max_uses === null)
                                        {{ __('front.shop_links.uses_unlimited') }}
                                    @else
                                        {{ __('front.shop_links.uses_of', ['used' => Format::persianDigits((string) $link->used_count), 'max' => Format::persianDigits((string) $link->max_uses)]) }}
                                    @endif
                                </td>
                                <td class="px-4 py-3.5">
                                    <span @class([
                                        'inline-block rounded-2xl px-2.5 py-1 text-[11px] font-bold',
                                        'bg-[#e7f7ee] text-green-600' => $link->is_active,
                                        'bg-[#f2f0f5] text-ink-muted' => ! $link->is_active,
                                    ])>{{ $link->is_active ? __('front.shop_links.status_active') : __('front.shop_links.status_inactive') }}</span>
                                </td>
                                <td class="px-4 py-3.5">
                                    <div x-data class="flex items-center justify-center gap-1.5">
                                        <form method="POST" action="{{ route('account.shop.links.toggle', $link) }}" x-ref="toggleForm" class="hidden">@csrf</form>
                                        <form method="POST" action="{{ route('account.shop.links.destroy', $link) }}" x-ref="deleteForm" class="hidden">@csrf @method('DELETE')</form>

                                        <button type="button" x-on:click='openEdit(@json($payload))' class="rounded-[9px] bg-[#f2f0fa] px-3 py-1.5 text-[12px] font-bold text-primary-600 transition hover:bg-[#e8e3f8]">{{ __('front.shop_links.edit') }}</button>
                                        <button type="button"
                                                x-on:click="$store.confirm.ask({ message: @js($link->is_active ? __('front.shop_links.confirm_disable') : __('front.shop_links.confirm_enable')), onConfirm: () => $refs.toggleForm.submit() })"
                                                class="rounded-[9px] bg-[#faf9fd] px-3 py-1.5 text-[12px] font-bold text-ink-soft transition hover:text-secondary-500">{{ $link->is_active ? __('front.shop_links.disable') : __('front.shop_links.enable') }}</button>
                                        <button type="button"
                                                x-on:click="$store.confirm.ask({ message: @js(__('front.shop_links.confirm_delete')), onConfirm: () => $refs.deleteForm.submit() })"
                                                class="rounded-[9px] bg-secondary-50 px-3 py-1.5 text-[12px] font-bold text-secondary-500 transition hover:bg-secondary-100">{{ __('front.shop_links.delete') }}</button>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr class="border-t border-[#f0eff5]">
                                <td colspan="6" class="px-4 py-10 text-center text-sm text-ink-muted">{{ __('front.shop_links.empty') }}</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            @if ($links->hasPages())
                <div class="mt-4">{{ $links->links() }}</div>
            @endif
        </div>

        {{-- ===== Create / edit modal ===== --}}
        <template x-teleport="body">
            <div x-cloak x-show="show" x-transition.opacity x-on:keydown.escape.window="close()"
                 class="fixed inset-0 z-modal flex items-center justify-center bg-ink/60 p-4" x-on:click.self="close()">
                <div class="w-full max-w-[460px] overflow-hidden rounded-[22px] bg-white shadow-2xl" x-show="show" x-transition.scale.origin.center>
                    <div class="flex items-center justify-between gap-3 border-b border-line px-6 py-5">
                        <h3 class="text-[17px] font-bold" x-text="mode === 'edit' ? @js(__('front.shop_links.modal.edit_title')) : @js(__('front.shop_links.modal.create_title'))"></h3>
                        <button type="button" class="flex size-8 items-center justify-center rounded-[9px] bg-[#f2f0fa] text-ink-soft transition hover:bg-[#e8e3f8]" x-on:click="close()" aria-label="{{ __('front.shop_links.modal.cancel') }}">
                            <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><line x1="6" y1="6" x2="18" y2="18"/><line x1="18" y1="6" x2="6" y2="18"/></svg>
                        </button>
                    </div>

                    <form method="POST" x-ref="linkForm" x-bind:action="action"
                          x-on:submit.prevent="$store.confirm.ask({ message: mode === 'edit' ? @js(__('front.shop_links.confirm_update')) : @js(__('front.shop_links.confirm_create')), onConfirm: () => { busy = true; $refs.linkForm.submit(); } })">
                        @csrf
                        <input type="hidden" name="_method" x-bind:value="mode === 'edit' ? 'PUT' : 'POST'">

                        <div class="flex flex-col gap-4 px-6 py-5">
                            <div>
                                <label for="link-title" class="mb-1.5 block text-[13px] font-bold">{{ __('front.shop_links.fields.title') }}</label>
                                <input id="link-title" name="title" x-model="title" maxlength="120"
                                       placeholder="{{ __('front.shop_links.fields.title_placeholder') }}"
                                       class="w-full rounded-xl border-[1.5px] border-[#e3e1ec] bg-[#fbfbfd] px-3.5 py-3 text-sm outline-none transition focus:border-secondary-500 focus:bg-white">
                            </div>
                            <div>
                                <label for="link-amount" class="mb-1.5 block text-[13px] font-bold">{{ __('front.shop_links.fields.amount') }}</label>
                                <div class="relative">
                                    <input id="link-amount" type="text" inputmode="numeric" dir="ltr" x-bind:value="amountGrouped" x-on:input="onAmountInput($event)"
                                           class="w-full rounded-xl border-[1.5px] border-[#e3e1ec] bg-[#fbfbfd] py-3 pl-16 pr-3.5 text-right text-sm outline-none transition focus:border-secondary-500 focus:bg-white" style="direction:rtl">
                                    <input type="hidden" name="amount" x-bind:value="amountRaw">
                                    <span class="pointer-events-none absolute left-3.5 top-1/2 -translate-y-1/2 text-[12px] font-bold text-ink-faint">{{ __('front.shop_links.toman') }}</span>
                                </div>
                            </div>
                            <div>
                                <label for="link-max" class="mb-1.5 block text-[13px] font-bold">{{ __('front.shop_links.fields.max_uses') }}</label>
                                <input id="link-max" name="max_uses" type="text" inputmode="numeric" dir="ltr" x-bind:value="maxUses" x-on:input="onMaxInput($event)"
                                       placeholder="{{ __('front.shop_links.fields.max_uses_placeholder') }}"
                                       class="w-full rounded-xl border-[1.5px] border-[#e3e1ec] bg-[#fbfbfd] px-3.5 py-3 text-left text-sm outline-none transition focus:border-secondary-500 focus:bg-white placeholder:text-ink-faint">
                                <p class="mt-1.5 text-[11.5px] text-ink-faint">{{ __('front.shop_links.fields.max_uses_hint') }}</p>
                            </div>
                        </div>

                        <div class="flex gap-2.5 border-t border-line px-6 py-4">
                            <button type="button" x-on:click="close()" class="flex-1 rounded-xl bg-[#f2f0fa] py-3 text-sm font-bold text-ink-soft transition hover:bg-[#e8e3f8]">{{ __('front.shop_links.modal.cancel') }}</button>
                            <button type="submit" x-bind:disabled="busy"
                                    class="inline-flex flex-1 items-center justify-center gap-2 rounded-xl bg-secondary-500 py-3 text-sm font-bold text-white shadow-lg shadow-secondary-500/25 transition hover:bg-secondary-600 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_links.modal.save') }}
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </template>
    </div>
@endsection