@extends('layouts.app')
@section('title', __('checkout.title'))

@section('content')
    <div class="shell py-stack-lg">
        <h1 class="text-headline-lg-mobile md:text-headline-lg">{{ __('checkout.title') }}</h1>

        @if ($errors->any())
            <div class="mt-stack-md rounded border border-error/40 bg-error-container/50 p-4">
                <ul class="list-leaf text-body-md text-on-error-container">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form action="{{ route('checkout.store') }}" method="post"
              class="mt-stack-md grid gap-stack-lg lg:grid-cols-[1fr_360px]">
            @csrf

            <div class="space-y-stack-lg">

                {{-- ------------------------------------------------- contact --}}
                <fieldset>
                    <legend class="u-label text-secondary">{{ __('checkout.contact') }}</legend>
                    <div class="mt-stack-sm grid gap-stack-sm sm:grid-cols-2">
                        <label class="block">
                            <span class="u-label-sm text-on-surface-variant">{{ __('checkout.customer_name') }}</span>
                            <input name="customer_name" value="{{ old('customer_name') }}" required class="field">
                        </label>
                        <label class="block">
                            <span class="u-label-sm text-on-surface-variant">{{ __('checkout.phone') }}</span>
                            <input name="phone" type="tel" inputmode="tel" value="{{ old('phone') }}" required
                                   class="field num" placeholder="5537 1195">
                            <span class="mt-1 block text-label-sm text-outline">{{ __('checkout.phone_hint') }}</span>
                        </label>
                        <label class="block sm:col-span-2">
                            <span class="u-label-sm text-on-surface-variant">{{ __('checkout.email') }}</span>
                            <input name="email" type="email" value="{{ old('email') }}" class="field">
                        </label>
                    </div>
                </fieldset>

                {{-- --------------------------------------------- fulfilment --}}
                <fieldset>
                    <legend class="u-label text-secondary">{{ __('checkout.fulfilment') }}</legend>
                    <div class="mt-stack-sm grid gap-2 sm:grid-cols-2">
                        @foreach (['delivery', 'pickup'] as $mode)
                            <label class="flex cursor-pointer items-center gap-3 rounded border border-outline-variant
                                          px-4 py-3 transition-colors hover:border-secondary
                                          has-[:checked]:border-secondary has-[:checked]:bg-secondary-container/25">
                                <input type="radio" name="fulfilment" value="{{ $mode }}"
                                       @checked(old('fulfilment', 'delivery') === $mode)
                                       class="h-4 w-4 text-primary focus:ring-secondary">
                                <span class="text-body-md">{{ __("checkout.{$mode}") }}</span>
                            </label>
                        @endforeach
                    </div>

                    <label class="mt-stack-sm block">
                        <span class="u-label-sm text-on-surface-variant">{{ __('checkout.branch') }}</span>
                        <select name="branch_id" class="field">
                            <option value="">—</option>
                            @foreach ($branches as $branch)
                                <option value="{{ $branch->id }}" @selected(old('branch_id') == $branch->id)>
                                    {{ $branch->name }}
                                </option>
                            @endforeach
                        </select>
                    </label>
                </fieldset>

                {{-- ------------------------------------------------- address --}}
                <fieldset>
                    <legend class="u-label text-secondary">{{ __('checkout.address') }}</legend>
                    <div class="mt-stack-sm grid gap-stack-sm sm:grid-cols-2">
                        {{-- Zone pickers rather than free text: the delivery fee is
                             derived from the selection, and the data is reportable.
                             The area list is filtered client-side by governorate;
                             the server re-checks that the pair actually matches. --}}
                        <label class="block">
                            <span class="u-label-sm text-on-surface-variant">{{ __('checkout.governorate') }}</span>
                            <select name="governorate_id" data-governorate class="field">
                                <option value="">—</option>
                                @foreach ($governorates as $governorate)
                                    <option value="{{ $governorate->id }}"
                                            @selected(old('governorate_id') == $governorate->id)>
                                        {{ $governorate->name }}
                                    </option>
                                @endforeach
                            </select>
                        </label>
                        <label class="block">
                            <span class="u-label-sm text-on-surface-variant">{{ __('checkout.area') }}</span>
                            <select name="area_id" data-area class="field">
                                <option value="">—</option>
                                @foreach ($governorates as $governorate)
                                    @foreach ($governorate->areas->where('is_active', true) as $area)
                                        <option value="{{ $area->id }}"
                                                data-governorate-id="{{ $governorate->id }}"
                                                @selected(old('area_id') == $area->id)>
                                            {{ $area->name }}
                                        </option>
                                    @endforeach
                                @endforeach
                            </select>
                        </label>

                        {{-- Kuwaiti addressing: block, street, house — in that order. --}}
                        <label class="block">
                            <span class="u-label-sm text-on-surface-variant">{{ __('checkout.block') }}</span>
                            <input name="block" value="{{ old('block') }}" class="field num">
                        </label>
                        <label class="block">
                            <span class="u-label-sm text-on-surface-variant">{{ __('checkout.street') }}</span>
                            <input name="street" value="{{ old('street') }}" class="field">
                        </label>
                        <label class="block">
                            <span class="u-label-sm text-on-surface-variant">{{ __('checkout.building') }}</span>
                            <input name="building" value="{{ old('building') }}" class="field">
                        </label>
                        <label class="block">
                            <span class="u-label-sm text-on-surface-variant">{{ __('checkout.schedule') }}</span>
                            <input name="scheduled_for" type="datetime-local" value="{{ old('scheduled_for') }}" class="field">
                        </label>

                        <label class="block sm:col-span-2">
                            <span class="u-label-sm text-on-surface-variant">{{ __('checkout.notes') }}</span>
                            <textarea name="notes" rows="3" class="field"
                                      placeholder="{{ __('checkout.notes_placeholder') }}">{{ old('notes') }}</textarea>
                        </label>
                    </div>
                </fieldset>

                {{-- ------------------------------------------------- payment --}}
                <fieldset>
                    <legend class="u-label text-secondary">{{ __('checkout.payment') }}</legend>
                    <div class="mt-stack-sm grid gap-2 sm:grid-cols-2">
                        @foreach (config('shop.payment_methods') as $method)
                            <label class="flex cursor-pointer items-center gap-3 rounded border border-outline-variant
                                          px-4 py-3 transition-colors hover:border-secondary
                                          has-[:checked]:border-secondary has-[:checked]:bg-secondary-container/25">
                                <input type="radio" name="payment_method" value="{{ $method }}"
                                       @checked(old('payment_method', 'knet') === $method)
                                       class="h-4 w-4 text-primary focus:ring-secondary">
                                <span class="text-body-md">{{ __("checkout.payment_methods.{$method}") }}</span>
                            </label>
                        @endforeach
                    </div>
                </fieldset>
            </div>

            {{-- ------------------------------------------------------ summary --}}
            <aside class="h-fit rounded-lg border border-outline-variant/70 p-stack-md lg:sticky lg:top-32">
                <h2 class="u-label text-secondary">{{ __('checkout.summary') }}</h2>

                <ul class="mt-stack-sm divide-y divide-outline-variant/50">
                    @foreach ($lines as $line)
                        <li class="flex justify-between gap-3 py-2.5 text-body-md">
                            <span>
                                {{ $line['product']->name }}
                                @if ($line['option'])
                                    <span class="block text-label-sm text-on-surface-variant">{{ $line['option']->label }}</span>
                                @endif
                                <span class="text-label-sm text-outline num">&times;{{ $line['quantity'] }}</span>
                            </span>
                            <span class="num shrink-0">{{ money($line['line_total'], false) }}</span>
                        </li>
                    @endforeach
                </ul>

                <div class="mt-stack-sm flex justify-between border-t border-outline-variant/60 pt-stack-sm">
                    <span class="u-label text-primary">{{ __('cart.grand_total') }}</span>
                    <span class="font-label text-label-lg text-secondary num">{{ money($subtotal) }}</span>
                </div>
                <p class="mt-1 text-label-sm text-outline">{{ __('cart.delivery_fee') }} — {{ __('cart.fee_at_checkout') }}</p>

                <button type="submit" class="btn-primary mt-stack-md w-full">{{ __('checkout.place_order') }}</button>
            </aside>
        </form>
    </div>
@endsection