{{--
=====================================================
Etebarit - by Gisoo Web Solutions
------------------------------------------------------
Gisoo.net
------------------------------------------------------
Copyright (c) 2026 Gisoo Web Solutions
=====================================================
This code is protected by copyright
=====================================================
File: index.blade.php
------------------------------------------------------
Use: The user's physical-card page: the delivery form
     (province/city, address, postal code, phone, an
     optional Leaflet map pin) that files a request and
     charges the fee, plus the history of past requests.
=====================================================
--}}

@extends('layouts.user')

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

@php use App\Support\Format; @endphp

@section('breadcrumb')
    <x-ui.breadcrumb :items="[
        ['label' => __('front.dashboard.breadcrumb'), 'url' => route('account.dashboard')],
        ['label' => __('front.physical_card.breadcrumb')],
    ]" />
@endsection

@section('page')
    @php
        $canAfford = $pending === null && $cashBalance >= $fee;
        $expiry = Format::persianDigits(\Morilog\Jalali\Jalalian::fromDateTime($card->expires_at)->format('Y/m'));
    @endphp

    <div x-data="physicalCard({
        divisions: @js(\App\Support\IranDivisions::all()),
        provinceCenters: @js(\App\Support\IranDivisions::centers()),
        province: @js(old('province')),
        city: @js(old('city')),
        phone: @js(old('phone', $phone)),
        canAfford: @js($canAfford),
        center: { lat: 35.6892, lng: 51.3890 },
        strings: {
            selected: @js(__('front.physical_card.map_selected')),
            choose: @js(__('front.physical_card.map_choose')),
            confirm: @js(__('front.physical_card.confirm_submit')),
        },
    })">
        {{-- Header + tabs --}}
        <div class="mb-5 flex flex-wrap items-end justify-between gap-4">
            <div>
                <h1 class="mb-1 text-2xl font-bold tracking-tight">{{ __('front.physical_card.title') }}</h1>
                <p class="text-sm text-ink-muted">{{ __('front.physical_card.subtitle') }}</p>
            </div>
            <div class="inline-flex rounded-xl bg-[#eeedf3] p-1">
                <button type="button" x-on:click="goTab('new')" x-bind:class="tab === 'new' ? 'bg-white text-primary-600 shadow-sm' : 'text-ink-muted'" class="rounded-[9px] px-4 py-2 text-[13px] font-bold transition">{{ __('front.physical_card.tab_new') }}</button>
                <button type="button" x-on:click="goTab('history')" x-bind:class="tab === 'history' ? 'bg-white text-primary-600 shadow-sm' : 'text-ink-muted'" class="rounded-[9px] px-4 py-2 text-[13px] font-bold transition">{{ __('front.physical_card.tab_history') }}</button>
            </div>
        </div>

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

        {{-- ============ NEW REQUEST ============ --}}
        <div x-show="tab === 'new'" class="grid grid-cols-1 gap-5 lg:grid-cols-[1fr_360px]">
            {{-- Left: form or pending banner --}}
            <div class="min-w-0">
                @if ($pending)
                    <div class="flex items-start gap-3.5 rounded-2xl border border-[#dfe2fb] bg-[#eef2ff] p-5">
                        <span class="flex size-10 shrink-0 items-center justify-center rounded-xl bg-indigo-600/10 text-indigo-600">
                            <svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 7.5v5l3 2"/></svg>
                        </span>
                        <div>
                            <div class="mb-1 text-[15px] font-bold text-indigo-800">{{ __('front.physical_card.pending_title') }}</div>
                            <p class="text-[13px] leading-7 text-indigo-700">{{ __('front.physical_card.pending_body', ['code' => Format::persianDigits($pending->code)]) }}</p>
                        </div>
                    </div>
                @else
                    <div class="rounded-2xl border border-line bg-white p-6">
                        <div class="mb-5 text-base font-bold">{{ __('front.physical_card.delivery_title') }}</div>

                        <form method="POST" action="{{ route('account.physical-card.store') }}" x-ref="form" class="flex flex-col gap-4">
                            @csrf

                            {{-- Province / city (bound to this component so submit-gating works) --}}
                            <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                                <div>
                                    <label class="mb-1.5 block text-[13px] font-bold">{{ __('front.address.province') }}<span class="text-secondary-500"> *</span></label>
                                    <div class="relative">
                                        <select name="province" x-model="province" required class="w-full appearance-none rounded-xl border-[1.5px] border-[#e3e1ec] bg-[#fbfbfd] px-3.5 py-3 text-sm outline-none transition focus:border-primary-600 focus:bg-white">
                                            <option value="">{{ __('front.address.choose_province') }}</option>
                                            <template x-for="p in provinces" :key="p"><option :value="p" x-text="p" :selected="p === province"></option></template>
                                        </select>
                                        <svg class="pointer-events-none absolute left-3.5 top-1/2 size-4 -translate-y-1/2 text-ink-faint" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>
                                    </div>
                                </div>
                                <div>
                                    <label class="mb-1.5 block text-[13px] font-bold">{{ __('front.address.city') }}<span class="text-secondary-500"> *</span></label>
                                    <div class="relative">
                                        <select name="city" x-model="city" x-bind:disabled="cities.length === 0" required class="w-full appearance-none rounded-xl border-[1.5px] border-[#e3e1ec] bg-[#fbfbfd] px-3.5 py-3 text-sm outline-none transition focus:border-primary-600 focus:bg-white disabled:cursor-not-allowed disabled:opacity-60">
                                            <option value="">{{ __('front.address.choose_city') }}</option>
                                            <template x-for="c in cities" :key="c"><option :value="c" x-text="c" :selected="c === city"></option></template>
                                        </select>
                                        <svg class="pointer-events-none absolute left-3.5 top-1/2 size-4 -translate-y-1/2 text-ink-faint" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>
                                    </div>
                                </div>
                            </div>

                            {{-- Full address --}}
                            <div>
                                <label class="mb-1.5 block text-[13px] font-bold">{{ __('front.physical_card.address_label') }}<span class="text-secondary-500"> *</span></label>
                                <textarea name="address" x-ref="address" rows="3" required placeholder="{{ __('front.physical_card.address_placeholder') }}" class="w-full resize-y rounded-xl border-[1.5px] border-[#e3e1ec] bg-[#fbfbfd] px-3.5 py-3 text-sm outline-none transition focus:border-primary-600 focus:bg-white">{{ old('address') }}</textarea>
                            </div>

                            {{-- Postal code + phone --}}
                            <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                                <div>
                                    <label class="mb-1.5 block text-[13px] font-bold">{{ __('front.physical_card.postal_label') }}<span class="text-secondary-500"> *</span></label>
                                    <input type="text" inputmode="numeric" x-on:input="onPostal($event)" placeholder="{{ __('front.physical_card.postal_placeholder') }}"
                                           x-bind:class="postalError ? 'border-secondary-500 bg-[#fef6f7]' : 'border-[#e3e1ec] bg-[#fbfbfd] focus:border-primary-600 focus:bg-white'"
                                           class="w-full rounded-xl border-[1.5px] px-3.5 py-3 text-left text-sm outline-none transition" dir="ltr">
                                    <input type="hidden" name="postal_code" x-bind:value="postal">
                                    <p x-show="postalError" x-cloak class="mt-1.5 flex items-center gap-1 text-[12px] text-secondary-500">
                                        <svg class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><circle cx="12" cy="12" r="9"/><line x1="12" y1="7.5" x2="12" y2="13"/><circle cx="12" cy="16.5" r="0.4"/></svg>
                                        {{ __('front.physical_card.postal_invalid') }}
                                    </p>
                                </div>
                                <div>
                                    <label class="mb-1.5 block text-[13px] font-bold">{{ __('front.physical_card.phone_label') }}<span class="text-secondary-500"> *</span></label>
                                    <input type="text" inputmode="numeric" x-on:input="onPhone($event)" value="{{ Format::persianDigits(old('phone', $phone)) }}"
                                           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-primary-600 focus:bg-white" dir="ltr">
                                    <input type="hidden" name="phone" x-bind:value="phone">
                                </div>
                            </div>

                            {{-- Map pin (Leaflet / OpenStreetMap) --}}
                            <div>
                                <label class="mb-1.5 block text-[13px] font-bold">{{ __('front.physical_card.map_label') }}</label>
                                <div class="etb-map relative h-[220px] overflow-hidden rounded-2xl border-[1.5px] border-[#e3e1ec]">
                                    <div class="absolute inset-0" x-ref="map"></div>
                                    {{-- Fixed centre marker: the user drags the map under it. --}}
                                    <div class="pointer-events-none absolute left-1/2 top-1/2 z-[500] -translate-x-1/2 -translate-y-full" aria-hidden="true">
                                        <svg class="size-9 drop-shadow-md" viewBox="0 0 24 24" fill="#563bb1" stroke="#fff" stroke-width="1.5" stroke-linejoin="round"><path d="M12 22s-7-5.2-7-11a7 7 0 0 1 14 0c0 5.8-7 11-7 11z"/><circle cx="12" cy="11" r="2.5" fill="#fff"/></svg>
                                    </div>
                                </div>
                                <input type="hidden" name="lat" x-bind:value="lat">
                                <input type="hidden" name="lng" x-bind:value="lng">
                                <div class="mt-2 flex items-center gap-2 text-[12px] text-ink-faint">
                                    <svg class="size-3.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 9l4-4 4 4M9 5v14M19 15l-4 4-4-4M15 19V5"/></svg>
                                    <span>{{ __('front.physical_card.map_drag_hint') }}</span>
                                </div>
                            </div>

                            {{-- Submit --}}
                            <button type="button" x-on:click="submit()" x-bind:disabled="! formValid || busy"
                                    class="mt-1 inline-flex items-center justify-center gap-2.5 rounded-xl bg-primary-600 py-3.5 text-[15px] font-bold text-white shadow-lg shadow-primary-600/25 transition hover:bg-primary-700 disabled:cursor-not-allowed disabled:opacity-60">
                                <span x-show="busy" x-cloak class="size-4 animate-spin rounded-full border-2 border-white/30 border-t-white" aria-hidden="true"></span>
                                {{ __('front.physical_card.submit') }}
                            </button>

                            @unless ($canAfford)
                                <p class="flex items-center gap-1.5 text-[12.5px] font-bold text-secondary-500">
                                    <svg class="size-4 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><line x1="12" y1="8" x2="12" y2="13"/><circle cx="12" cy="16.5" r="0.4"/></svg>
                                    {{ __('front.physical_card.insufficient_hint') }}
                                </p>
                            @endunless
                        </form>
                    </div>
                @endif
            </div>

            {{-- Right: card preview, fee, info --}}
            <div class="flex flex-col gap-4">
                {{-- Card preview --}}
                <div x-data="tiltCard" x-on:mousemove="move($event)" x-on:mouseleave="reset()" class="[perspective:1000px]">
                    <div x-ref="card" class="relative overflow-hidden rounded-2xl bg-gradient-to-bl from-[#5e42be] via-primary-600 to-[#3f2a8f] p-5 text-white shadow-xl shadow-primary-600/30 transition-transform">
                        <span class="pointer-events-none absolute -left-8 -top-10 size-36 rounded-full bg-white/[.08]"></span>
                        <span class="pointer-events-none absolute -bottom-12 -right-6 size-32 rounded-full bg-secondary-500/[.16]"></span>
                        <div class="relative mb-6 flex items-center justify-between">
                            <span class="text-[13px] font-bold">{{ __('front.physical_card.card_title') }}</span>
                            <svg class="size-6 opacity-80" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,.85)" stroke-width="1.5"><path d="M6 9a4 4 0 0 1 0 6M9 6a8 8 0 0 1 0 12" stroke-linecap="round"/></svg>
                        </div>
                        <div class="relative mb-4 h-8 w-11 rounded-md bg-gradient-to-bl from-[#f7d774] to-[#e6b840]"></div>
                        <div class="relative mb-3.5 text-[17px] tracking-[2.5px]" dir="ltr">{{ Format::persianDigits($card->formattedNumber()) }}</div>
                        <div class="relative flex items-end justify-between">
                            <div>
                                <div class="text-[9px] opacity-70">{{ __('front.physical_card.card_holder') }}</div>
                                <div class="text-[12.5px] font-bold">{{ auth()->user()->fullName() }}</div>
                            </div>
                            <div class="text-[11px] opacity-80" dir="ltr">{{ $expiry }}</div>
                        </div>
                    </div>
                </div>

                {{-- Fee --}}
                <div class="rounded-2xl border border-line bg-white p-4">
                    <div class="flex items-center justify-between">
                        <span class="text-[13px] text-ink-muted">{{ __('front.physical_card.fee_label') }}</span>
                        <span class="text-[15px] font-bold text-primary-700" dir="ltr">@toman($fee) <span class="text-[12px] font-normal text-ink-muted">{{ __('front.dashboard.toman') }}</span></span>
                    </div>
                    <div class="mt-1.5 flex items-center justify-between border-t border-[#f0eff5] pt-2.5">
                        <span class="text-[12px] text-ink-faint">{{ __('front.physical_card.balance_label') }}</span>
                        <span class="text-[13px] font-bold" dir="ltr">@toman($cashBalance) <span class="text-[11px] font-normal text-ink-faint">{{ __('front.dashboard.toman') }}</span></span>
                    </div>
                    <p class="mt-2 text-[11.5px] leading-6 text-ink-faint">{{ __('front.physical_card.fee_from_cash') }}</p>
                </div>

                {{-- Info --}}
                <div class="rounded-2xl border border-line bg-white p-4">
                    <div class="mb-3.5 flex items-center gap-2.5">
                        <span class="flex size-9 shrink-0 items-center justify-center rounded-xl bg-[#efeafb] text-primary-600"><svg class="size-4.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><rect x="1" y="3" width="15" height="13"/><path d="M16 8h4l3 3v5h-7"/><circle cx="5.5" cy="18.5" r="2.5"/><circle cx="18.5" cy="18.5" r="2.5"/></svg></span>
                        <div><div class="text-[13px] font-bold">{{ __('front.physical_card.shipping_title') }}</div><div class="text-[12px] text-ink-faint">{{ __('front.physical_card.shipping_body') }}</div></div>
                    </div>
                    <div class="flex items-center gap-2.5">
                        <span class="flex size-9 shrink-0 items-center justify-center rounded-xl bg-[#e7f7ee] text-green-600"><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="M12 3l7 3v5c0 4.5-3 8-7 10-4-2-7-5.5-7-10V6z"/><path d="M9 12l2 2 4-4"/></svg></span>
                        <div><div class="text-[13px] font-bold">{{ __('front.physical_card.secure_title') }}</div><div class="text-[12px] text-ink-faint">{{ __('front.physical_card.secure_body') }}</div></div>
                    </div>
                </div>
            </div>
        </div>

        {{-- ============ HISTORY ============ --}}
        <div x-show="tab === 'history'" x-cloak class="rounded-2xl border border-line bg-white p-5">
            <div class="mb-4 text-base font-bold">{{ __('front.physical_card.history_title') }}</div>
            @if ($requests->isEmpty())
                <div class="px-4 py-12 text-center text-sm text-ink-muted">{{ __('front.physical_card.history_empty') }}</div>
            @else
                <div class="overflow-x-auto rounded-[14px] border border-[#f0eff5]">
                    <table class="w-full min-w-[620px] border-collapse text-right text-[13.5px]">
                        <thead>
                            <tr class="bg-[#faf9fd] text-ink-muted">
                                <th class="px-4.5 py-3.5 font-bold">{{ __('front.physical_card.col_code') }}</th>
                                <th class="px-4.5 py-3.5 font-bold">{{ __('front.physical_card.col_destination') }}</th>
                                <th class="px-4.5 py-3.5 font-bold">{{ __('front.physical_card.col_fee') }}</th>
                                <th class="px-4.5 py-3.5 font-bold">{{ __('front.physical_card.col_date') }}</th>
                                <th class="px-4.5 py-3.5 font-bold">{{ __('front.physical_card.col_status') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($requests as $req)
                                <tr class="border-t border-[#f0eff5]">
                                    <td class="px-4.5 py-3.5 text-right! text-ink-soft" dir="ltr">{{ $req->code }}</td>
                                    <td class="px-4.5 py-3.5">{{ $req->destination() }}</td>
                                    <td class="px-4.5 py-3.5" dir="ltr">@toman($req->fee_amount)</td>
                                    <td class="px-4.5 py-3.5 text-ink-soft">@jalali($req->created_at)</td>
                                    <td class="px-4.5 py-3.5">
                                        <span @class([
                                            'rounded-2xl px-2.5 py-1.5 text-xs font-bold',
                                            'bg-[#fff5e6] text-amber-600' => $req->status === \App\Models\PhysicalCardRequest::STATUS_PENDING,
                                            'bg-[#e7f7ee] text-green-600' => $req->status === \App\Models\PhysicalCardRequest::STATUS_ISSUED,
                                            'bg-secondary-50 text-secondary-500' => $req->status === \App\Models\PhysicalCardRequest::STATUS_REJECTED,
                                        ])>{{ __('front.physical_card.statuses.'.$req->status) }}</span>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @endif
        </div>
    </div>
@endsection