@extends('layouts.account')

@section('title', 'Пункты выдачи')

@section('content')
<h1 class="text-[22px] font-extrabold tracking-[-0.5px] text-[var(--color-ink)] sm:text-[24px]">Пункты выдачи</h1>
<p class="mt-1 max-w-2xl text-sm text-[var(--color-muted)]">
    Выберите по одному удобному пункту в каждой службе доставки и расставьте приоритет. При заказе продавец выберет службу из отмеченных вами и укажет стоимость доставки.
</p>

@if ($errors->any())
    <div class="mt-4 rounded-[var(--radius-md)] bg-[var(--color-sale-soft)] px-4 py-3 text-sm font-semibold text-[var(--color-sale)]">
        @foreach ($errors->all() as $e) <div>{{ $e }}</div> @endforeach
    </div>
@endif

@if ($carriers->isEmpty())
    <div class="mt-6 rounded-[var(--radius-lg)] border border-[var(--color-line)] p-10 text-center text-[13.5px] text-[var(--color-muted)]">
        Службы доставки пока не подключены. Загляните позже.
    </div>
@else
<div class="mt-6 grid gap-6 lg:grid-cols-[1fr_360px]"
     x-data="pickupPointsMap({
        mapUrl: '{{ route('account.pickup-points.map') }}',
        carriers: @js($carriers->map(fn ($c) => ['code' => $c->code, 'name' => $c->name, 'color' => $c->color, 'type' => $c->type])->values()),
        center: @js($center),
     })">

    {{-- Map + carrier tabs --}}
    <div class="rounded-[var(--radius-lg)] border border-[var(--color-line)] bg-white p-4">
        <div class="mb-3 flex flex-wrap gap-2">
            @foreach ($carriers as $c)
                <button type="button" @click="setCarrier('{{ $c->code }}')"
                        class="inline-flex items-center gap-1.5 rounded-[20px] border px-[11px] py-[5px] text-[12.5px] font-semibold transition"
                        :class="carrier === '{{ $c->code }}' ? 'border-[var(--color-primary)] bg-[var(--color-primary-soft)] text-[var(--color-primary)]' : 'border-[var(--color-line)] text-[var(--color-slate)] hover:bg-[var(--color-canvas)]'">
                    <span class="h-2.5 w-2.5 rounded-full" style="background: {{ $c->color }}"></span>
                    {{ $c->name }}
                    @if ($points->has($c->code))<i data-lucide="check" class="h-3.5 w-3.5 text-[var(--color-success)]"></i>@endif
                </button>
            @endforeach
        </div>

        <div class="relative">
            <div x-ref="map" :class="expanded ? 'h-[620px]' : 'h-80'"
                 class="w-full overflow-hidden rounded-[var(--radius-md)] border border-[var(--color-line)] transition-[height] duration-200"></div>
        <button type="button" @click="toggleSize()"
                class="absolute right-3 top-3 z-[400] inline-flex items-center gap-1.5 rounded-[var(--radius-sm)] border border-[var(--color-line)] bg-white/95 px-2.5 py-1.5 text-xs font-bold text-[var(--color-ink)] shadow-sm hover:text-[var(--color-primary)]">
            <i data-lucide="maximize-2" class="h-3.5 w-3.5" x-show="!expanded"></i>
            <i data-lucide="minimize-2" class="h-3.5 w-3.5" x-cloak x-show="expanded"></i>
            <span x-text="expanded ? 'Свернуть' : 'Развернуть'"></span>
        </button>
        <span class="pointer-events-none absolute bottom-3 left-3 z-[400] rounded-[var(--radius-sm)] bg-white/90 px-2 py-1 text-[11px] font-semibold text-[var(--color-muted)]">Ctrl + колесо — масштаб</span>
        </div>
        <div class="mt-2 flex items-center gap-3 text-sm text-[var(--color-muted)]">
            <span x-show="loading" x-cloak>Загружаю точки…</span>
            <span x-show="!loading" x-cloak x-text="count ? ('Точек в видимой области: ' + count) : 'Приблизьте карту к своему городу, чтобы увидеть точки'"></span>
        </div>

        {{-- Скрытая форма выбора точки (сабмитится из попапа маркера). --}}
        <form x-ref="chooseForm" method="POST" action="{{ route('account.pickup-points.store') }}" class="hidden">
            @csrf
            <input type="hidden" name="carrier_code" x-ref="carrierField">
            <input type="hidden" name="external_code" x-ref="codeField">
        </form>
    </div>

    {{-- Selected points (priority order) --}}
    <div>
        <h2 class="text-sm font-extrabold uppercase tracking-wide text-[var(--color-muted)]">Мои пункты по приоритету</h2>

        @if ($points->isEmpty())
            <div class="mt-3 rounded-[var(--radius-lg)] border border-dashed border-[var(--color-line)] bg-white p-6 text-center text-sm text-[var(--color-muted)]">
                Пока не выбрано ни одного пункта. Кликните точку на карте и нажмите «Выбрать».
            </div>
        @else
            @php($ordered = $points->sortBy('priority')->values())
            <div class="mt-3 space-y-2"
                 x-data="{ codes: @js($ordered->pluck('carrier_code')->values()),
                    move(i, d) { const j = i + d; if (j < 0 || j >= this.codes.length) return; [this.codes[i], this.codes[j]] = [this.codes[j], this.codes[i]]; this.$nextTick(() => this.$refs.orderForm.submit()); } }">
                <form x-ref="orderForm" method="POST" action="{{ route('account.pickup-points.reorder') }}" class="hidden">
                    @csrf
                    <template x-for="c in codes" :key="c"><input type="hidden" name="order[]" :value="c"></template>
                </form>

                @foreach ($ordered as $i => $point)
                    @php($carrier = $carriers->firstWhere('code', $point->carrier_code))
                    <div class="rounded-[var(--radius-lg)] border border-[var(--color-line)] bg-white p-3">
                        <div class="flex items-start gap-2">
                            <span class="mt-0.5 grid h-6 w-6 shrink-0 place-items-center rounded-full text-xs font-extrabold text-white" style="background: {{ $carrier?->color ?? '#1877FF' }}">{{ $i + 1 }}</span>
                            <div class="min-w-0 flex-1">
                                <div class="text-sm font-bold text-[var(--color-ink)]">{{ $carrier?->name ?? $point->carrier_code }}</div>
                                <div class="truncate text-xs text-[var(--color-slate)]" title="{{ $point->address }}">{{ $point->name ?: 'Пункт выдачи' }}</div>
                                <div class="mt-0.5 line-clamp-2 text-xs text-[var(--color-muted)]">{{ $point->address }}</div>
                            </div>
                            <div class="flex shrink-0 flex-col items-center gap-1">
                                <button type="button" @click="move({{ $i }}, -1)" @disabled($i === 0)
                                        class="grid h-6 w-6 place-items-center rounded text-[var(--color-muted)] hover:bg-[var(--color-canvas)] hover:text-[var(--color-primary)] disabled:opacity-30" aria-label="Выше">
                                    <i data-lucide="chevron-up" class="h-4 w-4"></i>
                                </button>
                                <button type="button" @click="move({{ $i }}, 1)" @disabled($i === $ordered->count() - 1)
                                        class="grid h-6 w-6 place-items-center rounded text-[var(--color-muted)] hover:bg-[var(--color-canvas)] hover:text-[var(--color-primary)] disabled:opacity-30" aria-label="Ниже">
                                    <i data-lucide="chevron-down" class="h-4 w-4"></i>
                                </button>
                            </div>
                        </div>
                        <form method="POST" action="{{ route('account.pickup-points.destroy', $point->carrier_code) }}" class="mt-2 text-right">
                            @csrf @method('DELETE')
                            <button class="text-xs font-semibold text-[var(--color-sale)] hover:opacity-70">Убрать</button>
                        </form>
                    </div>
                @endforeach
            </div>
        @endif
    </div>
</div>
@endif
@endsection