@extends('layouts.admin')
@section('title', 'Markets')
@section('content')
<x-admin.page title="Markets" subtitle="Currencies, country routing, FX, and price lists for multi-market checkout.">
    <x-slot:actions>
        <a href="{{ route('admin.shipping.index') }}" class="admin-btn">Shipping</a>
        <a href="{{ route('admin.online-store.overview') }}" class="admin-btn">Overview</a>
    </x-slot:actions>

    @if(session('status'))
        <div class="mb-4 rounded-lg border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-900">{{ session('status') }}</div>
    @endif
    @if($errors->any())
        <div class="mb-4 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-800">{{ $errors->first() }}</div>
    @endif

    @if(empty($markets_enabled))
        <div class="mb-5 rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-950">
            Markets are disabled (<code class="font-mono text-xs">markets_enabled</code>). Enable the flag in Settings to activate storefront market routing.
        </div>
    @endif

    <div class="order-ops-stat-rail mb-5">
        <div class="order-ops-stat"><span class="order-ops-stat-label">Markets</span><span class="order-ops-stat-value">{{ number_format($markets->count()) }}</span></div>
        <div class="order-ops-stat"><span class="order-ops-stat-label">Active</span><span class="order-ops-stat-value">{{ number_format($markets->where('active', true)->count()) }}</span></div>
        <div class="order-ops-stat"><span class="order-ops-stat-label">Price lists</span><span class="order-ops-stat-value">{{ number_format($priceLists->count()) }}</span></div>
    </div>

    <div class="grid gap-5 xl:grid-cols-[1.4fr_1fr]">
        <div class="space-y-4">
            @forelse($markets as $market)
                <article class="rounded-2xl border border-[var(--color-admin-border)] bg-white p-5 shadow-[var(--admin-shadow)]">
                    <div class="mb-4 flex flex-wrap items-start justify-between gap-3">
                        <div>
                            <h2 class="text-base font-semibold">{{ $market->name }}</h2>
                            <p class="mt-1 font-mono text-xs text-[#6d7175]">{{ $market->handle }} · {{ $market->currency }} · FX {{ $market->fx_rate }} ({{ $market->fx_strategy }})</p>
                            <p class="mt-2 text-xs text-[#6d7175]">
                                Countries: {{ $market->countries->pluck('country')->implode(', ') ?: '—' }}
                                · {{ $market->priceLists->count() }} price list(s)
                            </p>
                        </div>
                        <x-admin.badge :tone="$market->active ? 'success' : 'muted'">{{ $market->active ? 'active' : 'inactive' }}</x-admin.badge>
                    </div>

                    @if(auth()->user()?->hasPermission('settings.edit'))
                        <form method="post" action="{{ route('admin.markets.update', $market) }}" class="grid gap-3 md:grid-cols-2">
                            @csrf @method('PUT')
                            <label class="block text-sm"><span class="admin-label">Name</span><input class="admin-input" name="name" value="{{ old('name', $market->name) }}" required></label>
                            <label class="block text-sm"><span class="admin-label">Handle</span><input class="admin-input font-mono text-xs" name="handle" value="{{ old('handle', $market->handle) }}" required></label>
                            <label class="block text-sm"><span class="admin-label">Currency</span><input class="admin-input uppercase" name="currency" maxlength="3" value="{{ old('currency', $market->currency) }}" required></label>
                            <label class="block text-sm"><span class="admin-label">FX rate</span><input class="admin-input" type="number" step="0.000001" min="0" name="fx_rate" value="{{ old('fx_rate', $market->fx_rate) }}"></label>
                            <label class="block text-sm"><span class="admin-label">FX strategy</span>
                                <select class="admin-input" name="fx_strategy">
                                    @foreach(['manual', 'live'] as $strategy)
                                        <option value="{{ $strategy }}" @selected(old('fx_strategy', $market->fx_strategy) === $strategy)>{{ $strategy }}</option>
                                    @endforeach
                                </select>
                            </label>
                            <label class="block text-sm"><span class="admin-label">Countries (ISO2 CSV)</span><input class="admin-input font-mono text-xs" name="countries" value="{{ old('countries', $market->countries->pluck('country')->implode(', ')) }}" placeholder="AU, NZ"></label>
                            <label class="inline-flex items-center gap-2 text-sm md:col-span-2"><input type="checkbox" name="active" value="1" @checked(old('active', $market->active))> Active</label>
                            <div class="flex flex-wrap gap-2 md:col-span-2">
                                <button class="admin-btn admin-btn-primary" type="submit">Save market</button>
                            </div>
                        </form>
                        @if($market->handle !== 'australia')
                            <form method="post" action="{{ route('admin.markets.destroy', $market) }}" class="mt-3" onsubmit="return confirm('Delete this market?')">
                                @csrf @method('DELETE')
                                <button class="admin-btn" type="submit">Delete</button>
                            </form>
                        @endif
                    @endif
                </article>
            @empty
                <x-admin.empty title="No markets" description="Create a market to start multi-currency routing." />
            @endforelse
        </div>

        <div class="space-y-5">
            @if(auth()->user()?->hasPermission('settings.edit'))
                <section class="rounded-2xl border border-[var(--color-admin-border)] bg-white p-5 shadow-[var(--admin-shadow)]">
                    <h2 class="text-sm font-semibold">Create market</h2>
                    <form method="post" action="{{ route('admin.markets.store') }}" class="mt-4 grid gap-3">
                        @csrf
                        <label class="block text-sm"><span class="admin-label">Name</span><input class="admin-input" name="name" value="{{ old('name') }}" required></label>
                        <label class="block text-sm"><span class="admin-label">Handle</span><input class="admin-input font-mono text-xs" name="handle" value="{{ old('handle') }}" placeholder="auto from name"></label>
                        <label class="block text-sm"><span class="admin-label">Currency</span><input class="admin-input uppercase" name="currency" maxlength="3" value="{{ old('currency', 'AUD') }}" required></label>
                        <label class="block text-sm"><span class="admin-label">FX rate</span><input class="admin-input" type="number" step="0.000001" min="0" name="fx_rate" value="{{ old('fx_rate', '1') }}"></label>
                        <label class="block text-sm"><span class="admin-label">Countries</span><input class="admin-input font-mono text-xs" name="countries" value="{{ old('countries') }}" placeholder="AU, NZ"></label>
                        <label class="inline-flex items-center gap-2 text-sm"><input type="checkbox" name="active" value="1" @checked(old('active', true))> Active</label>
                        <button class="admin-btn admin-btn-primary" type="submit">Create market</button>
                    </form>
                </section>
            @endif

            <section class="rounded-2xl border border-[var(--color-admin-border)] bg-white p-5 shadow-[var(--admin-shadow)]">
                <h2 class="text-sm font-semibold">Price lists</h2>
                <ul class="mt-3 space-y-2 text-sm">
                    @forelse($priceLists as $list)
                        <li class="flex justify-between gap-3 rounded-lg border border-[var(--color-admin-border)] px-3 py-2">
                            <span>{{ $list->name }} <span class="text-xs text-[#6d7175]">· {{ $list->market?->name ?? 'unassigned' }}</span></span>
                            <span class="font-mono text-xs">{{ $list->currency }}</span>
                        </li>
                    @empty
                        <li class="text-xs text-[#6d7175]">No price lists yet.</li>
                    @endforelse
                </ul>
            </section>
        </div>
    </div>
</x-admin.page>
@endsection