@extends('layouts.app')

@section('content')
@php
// Live Uber snapshot (authoritative) with the last applied payload as fallback.
$contact = data_get($store, 'contact') ?? [];
$location = data_get($store, 'location') ?? [];
$orderability = data_get($store, 'orderability') ?? [];
$prepTimes = data_get($store, 'prep_times') ?? [];

$infoPayload = data_get($settings, 'store_information.payload') ?? [];
$statusPayload = data_get($settings, 'store_status.payload') ?? [];
$prepPayload = data_get($settings, 'prep_time.payload') ?? [];
$syncedAt = data_get($settings, 'synced_at');

$hasStore = filled($integration->account_id);

// Prefill helpers: old() (after a validation error) wins, then the live Uber
// value, then the last payload we applied.
$pick = fn ($field, $live, $applied) => old($field, filled($live) ? $live : (filled($applied) ? $applied : ''));

$currentStatus = strtoupper((string) (data_get($orderability, 'status') ?: data_get($statusPayload, 'status')));
$currentPrep = data_get($prepTimes, 'default_value') ?? data_get($prepPayload, 'default_prep_time');

$input = 'block w-full px-3 py-2 text-sm text-stone-800 bg-white border border-stone-300 rounded-lg focus:outline-none
focus:ring-2 focus:ring-stone-400 disabled:bg-stone-100 disabled:text-stone-400';
$label = 'block text-xs font-medium text-stone-500';
$disabled = $hasStore ? '' : 'disabled';
@endphp

<div class="w-full px-4 pb-60">
    <div class="grid max-w-4xl mx-auto gap-y-6">

        {{-- HEADER --}}
        <div class="pt-8">
            <a href="{{ route('integrations.index') }}"
                class="inline-flex items-center gap-1 text-sm text-stone-500 hover:text-stone-700">
                <span class="text-base material-symbols-rounded">arrow_back</span>
                {{ __('Integrations') }}
            </a>
            <div class="flex flex-wrap items-center gap-3 mt-1">
                <h1 class="text-2xl font-semibold text-stone-800">{{ __('Uber Eats Store Settings') }}</h1>
                @if ($currentStatus !== '')
                <span
                    class="px-2.5 py-0.5 text-xs font-semibold rounded-full {{ $currentStatus === 'ONLINE' ? 'bg-green-100 text-green-700' : 'bg-stone-200 text-stone-600' }}">
                    {{ $currentStatus === 'ONLINE' ? __('Online') : __('Offline') }}
                </span>
                @endif
            </div>
            <p class="mt-1 text-sm text-stone-500">
                {{ __('Selected business:') }}
                <span class="font-semibold">{{ session('selected_pos_note') ?: __('None') }}</span>
                @if ($hasStore)
                &middot; {{ __('Store') }}: <span class="font-mono text-xs">{{ $integration->account_id }}</span>
                @endif
            </p>
            @if ($syncedAt)
            <p class="mt-0.5 text-xs text-stone-400">
                {{ __('Last synced from Uber: :time', ['time' =>
                \Illuminate\Support\Carbon::parse($syncedAt)->format('d.m.Y H:i')]) }}
            </p>
            @endif
        </div>

        {{-- FLASH / ERRORS --}}
        @if (isset($errors) && $errors->any())
        <div class="p-3 text-sm text-red-800 rounded-lg bg-red-50 ring-1 ring-red-200">
            {{ $errors->first() }}
        </div>
        @endif

        @if (! $hasStore)
        <div class="flex items-start gap-2 p-4 text-sm rounded-lg text-amber-700 bg-amber-50 ring-1 ring-amber-200">
            <span class="mt-0.5 text-base material-symbols-rounded">warning</span>
            <span>{{ __('No Uber Eats store is bound to this business yet. Reconnect to bind a store, then manage its
                settings here.') }}</span>
        </div>
        @elseif ($storeError)
        <div class="flex items-start gap-2 p-4 text-sm rounded-lg text-amber-700 bg-amber-50 ring-1 ring-amber-200">
            <span class="mt-0.5 text-base material-symbols-rounded">cloud_off</span>
            <span>
                {{ __('Could not read the live store details from Uber; showing the last saved values.') }}
                <span class="block mt-0.5 text-xs text-amber-600">{{ $storeError }}</span>
            </span>
        </div>
        @endif

        {{-- STORE INFORMATION --}}
        <div class="p-6 bg-white rounded-lg shadow ring-1 ring-stone-300">
            <div class="flex items-center gap-2">
                <span class="text-stone-400 material-symbols-rounded">storefront</span>
                <h2 class="text-lg font-medium text-stone-700">{{ __('Store Information') }}</h2>
            </div>
            <p class="mt-1 text-sm text-stone-500">
                {{ __('Contact, location and pickup instructions. Only filled fields are sent to Uber.') }}
            </p>

            <form method="POST" action="{{ route('uber-eats.settings.update') }}" class="mt-5 space-y-5">
                @csrf
                <input type="hidden" name="section" value="store_information">

                <div>
                    <p class="text-xs font-semibold tracking-wide text-stone-400 uppercase">{{ __('Contact') }}</p>
                    <div class="grid gap-4 mt-2 sm:grid-cols-3">
                        <div>
                            <label class="{{ $label }}">{{ __('Contact name') }}</label>
                            <input type="text" name="contact_name" {{ $disabled }}
                                value="{{ $pick('contact_name', data_get($contact, 'name'), data_get($infoPayload, 'contact.name')) }}"
                                class="{{ $input }}">
                        </div>
                        <div>
                            <label class="{{ $label }}">{{ __('Contact email') }}</label>
                            <input type="email" name="contact_email" {{ $disabled }}
                                value="{{ $pick('contact_email', data_get($contact, 'email'), data_get($infoPayload, 'contact.email')) }}"
                                class="{{ $input }}">
                        </div>
                        <div>
                            <label class="{{ $label }}">{{ __('Contact phone') }}</label>
                            <input type="text" name="contact_phone" {{ $disabled }}
                                value="{{ $pick('contact_phone', data_get($contact, 'phone_number'), data_get($infoPayload, 'contact.phone_number')) }}"
                                class="{{ $input }}">
                        </div>
                    </div>
                </div>

                <div>
                    <p class="text-xs font-semibold tracking-wide text-stone-400 uppercase">{{ __('Location') }}</p>
                    <div class="grid gap-4 mt-2 sm:grid-cols-2">
                        <div>
                            <label class="{{ $label }}">{{ __('Street address (line one)') }}</label>
                            <input type="text" name="street_address_line_one" {{ $disabled }}
                                value="{{ $pick('street_address_line_one', data_get($location, 'street_address_line_one'), data_get($infoPayload, 'location.street_address_line_one')) }}"
                                class="{{ $input }}">
                        </div>
                        <div>
                            <label class="{{ $label }}">{{ __('Street address (line two)') }}</label>
                            <input type="text" name="street_address_line_two" {{ $disabled }}
                                value="{{ $pick('street_address_line_two', data_get($location, 'street_address_line_two'), data_get($infoPayload, 'location.street_address_line_two')) }}"
                                class="{{ $input }}">
                        </div>
                        <div>
                            <label class="{{ $label }}">{{ __('City') }}</label>
                            <input type="text" name="city" {{ $disabled }}
                                value="{{ $pick('city', data_get($location, 'city'), data_get($infoPayload, 'location.city')) }}"
                                class="{{ $input }}">
                        </div>
                        <div>
                            <label class="{{ $label }}">{{ __('Postal code') }}</label>
                            <input type="text" name="postal_code" {{ $disabled }}
                                value="{{ $pick('postal_code', data_get($location, 'postal_code'), data_get($infoPayload, 'location.postal_code')) }}"
                                class="{{ $input }}">
                        </div>
                        <div>
                            <label class="{{ $label }}">{{ __('Country') }}</label>
                            <input type="text" name="country" {{ $disabled }}
                                value="{{ $pick('country', data_get($location, 'country'), data_get($infoPayload, 'location.country')) }}"
                                class="{{ $input }}">
                        </div>
                        <div>
                            <label class="{{ $label }}">{{ __('Unit number') }}</label>
                            <input type="text" name="unit_number" {{ $disabled }}
                                value="{{ $pick('unit_number', data_get($location, 'unit_number'), data_get($infoPayload, 'location.unit_number')) }}"
                                class="{{ $input }}">
                        </div>
                        <div>
                            <label class="{{ $label }}">{{ __('Business name') }}</label>
                            <input type="text" name="business_name" {{ $disabled }}
                                value="{{ $pick('business_name', data_get($location, 'business_name'), data_get($infoPayload, 'location.business_name')) }}"
                                class="{{ $input }}">
                        </div>
                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <label class="{{ $label }}">{{ __('Latitude') }}</label>
                                <input type="text" name="latitude" {{ $disabled }}
                                    value="{{ $pick('latitude', data_get($location, 'latitude'), data_get($infoPayload, 'location.latitude')) }}"
                                    class="{{ $input }}">
                            </div>
                            <div>
                                <label class="{{ $label }}">{{ __('Longitude') }}</label>
                                <input type="text" name="longitude" {{ $disabled }}
                                    value="{{ $pick('longitude', data_get($location, 'longitude'), data_get($infoPayload, 'location.longitude')) }}"
                                    class="{{ $input }}">
                            </div>
                        </div>
                    </div>
                </div>

                <div>
                    <label class="{{ $label }}">{{ __('Pickup instructions') }}</label>
                    <textarea name="pickup_instructions" rows="2" {{ $disabled }}
                        class="{{ $input }}">{{ $pick('pickup_instructions', data_get($store, 'pickup_instructions'), data_get($infoPayload, 'pickup_instructions')) }}</textarea>
                </div>

                <div class="flex justify-end">
                    <button type="submit" @disabled(! $hasStore)
                        class="inline-flex items-center gap-1.5 px-4 py-2 text-sm font-medium text-white transition-colors rounded-lg bg-stone-800 hover:bg-stone-700 disabled:opacity-50 disabled:cursor-not-allowed">
                        <span class="text-base material-symbols-rounded">save</span>
                        {{ __('Save Store Information') }}
                    </button>
                </div>
            </form>
        </div>

        {{-- STORE STATUS --}}
        <div class="p-6 bg-white rounded-lg shadow ring-1 ring-stone-300">
            <div class="flex items-center gap-2">
                <span class="text-stone-400 material-symbols-rounded">power_settings_new</span>
                <h2 class="text-lg font-medium text-stone-700">{{ __('Store Status') }}</h2>
            </div>
            <p class="mt-1 text-sm text-stone-500">
                {{ __('Bring the store online or take it offline on Uber Eats.') }}
            </p>

            <form method="POST" action="{{ route('uber-eats.settings.update') }}" class="mt-5 space-y-4"
                x-data="{ status: '{{ old('status', $currentStatus ?: 'ONLINE') }}' }">
                @csrf
                <input type="hidden" name="section" value="store_status">

                <div class="flex flex-wrap gap-3">
                    <label class="flex items-center gap-2 px-4 py-2 text-sm rounded-lg ring-1 cursor-pointer"
                        :class="status === 'ONLINE' ? 'bg-green-50 ring-green-300 text-green-700' : 'ring-stone-300 text-stone-600'">
                        <input type="radio" name="status" value="ONLINE" x-model="status" {{ $disabled }}
                            class="sr-only">
                        <span class="material-symbols-rounded text-base">check_circle</span>
                        {{ __('Online') }}
                    </label>
                    <label class="flex items-center gap-2 px-4 py-2 text-sm rounded-lg ring-1 cursor-pointer"
                        :class="status === 'OFFLINE' ? 'bg-stone-100 ring-stone-400 text-stone-700' : 'ring-stone-300 text-stone-600'">
                        <input type="radio" name="status" value="OFFLINE" x-model="status" {{ $disabled }}
                            class="sr-only">
                        <span class="material-symbols-rounded text-base">pause_circle</span>
                        {{ __('Offline') }}
                    </label>
                </div>

                <div x-show="status === 'OFFLINE'" x-cloak class="grid gap-4 sm:grid-cols-2">
                    <div>
                        <label class="{{ $label }}">{{ __('Offline until') }}</label>
                        <input type="datetime-local" name="is_offline_until" {{ $disabled }}
                            value="{{ old('is_offline_until', data_get($statusPayload, 'is_offline_until') ? \Illuminate\Support\Carbon::parse(data_get($statusPayload, 'is_offline_until'))->format('Y-m-d\TH:i') : '') }}"
                            class="{{ $input }}">
                        <p class="mt-1 text-xs text-stone-400">{{ __('Leave empty to stay offline indefinitely.') }}</p>
                    </div>
                    <div>
                        <label class="{{ $label }}">{{ __('Reason') }}</label>
                        <input type="text" name="reason" {{ $disabled }}
                            value="{{ old('reason', data_get($statusPayload, 'reason')) }}" class="{{ $input }}"
                            placeholder="{{ __('e.g. Scheduled maintenance') }}">
                    </div>
                </div>

                <div class="flex justify-end">
                    <button type="submit" @disabled(! $hasStore)
                        class="inline-flex items-center gap-1.5 px-4 py-2 text-sm font-medium text-white transition-colors rounded-lg bg-stone-800 hover:bg-stone-700 disabled:opacity-50 disabled:cursor-not-allowed">
                        <span class="text-base material-symbols-rounded">save</span>
                        {{ __('Save Store Status') }}
                    </button>
                </div>
            </form>
        </div>

        {{-- PREP TIME --}}
        <div class="p-6 bg-white rounded-lg shadow ring-1 ring-stone-300">
            <div class="flex items-center gap-2">
                <span class="text-stone-400 material-symbols-rounded">timer</span>
                <h2 class="text-lg font-medium text-stone-700">{{ __('Preparation Time') }}</h2>
            </div>
            <p class="mt-1 text-sm text-stone-500">
                {{ __('Default time Uber shows customers before an order is ready.') }}
            </p>

            <form method="POST" action="{{ route('uber-eats.settings.update') }}" class="mt-5"
                x-data="{ secs: {{ old('default_prep_time', $currentPrep !== null ? (int) $currentPrep : 0) }} }">
                @csrf
                <input type="hidden" name="section" value="prep_time">

                <div class="max-w-xs">
                    <label class="{{ $label }}">{{ __('Default preparation time (seconds)') }}</label>
                    <input type="number" name="default_prep_time" min="0" max="10800" step="30" {{ $disabled }}
                        x-model="secs" class="{{ $input }}">
                    <p class="mt-1 text-xs text-stone-400">
                        <span x-text="Math.floor(secs / 60)"></span> {{ __('min') }}
                        &middot; {{ __('Maximum 10800 seconds (3 hours).') }}
                    </p>
                </div>

                <div class="flex justify-end mt-4">
                    <button type="submit" @disabled(! $hasStore)
                        class="inline-flex items-center gap-1.5 px-4 py-2 text-sm font-medium text-white transition-colors rounded-lg bg-stone-800 hover:bg-stone-700 disabled:opacity-50 disabled:cursor-not-allowed">
                        <span class="text-base material-symbols-rounded">save</span>
                        {{ __('Save Preparation Time') }}
                    </button>
                </div>
            </form>
        </div>

    </div>
</div>
@endsection