@extends('layouts.account')

@section('title', __('Public profile'))
@section('heading', __('Public profile'))
@section('subheading', __('Everything on this page is shown to buyers.'))

@section('actions')
    <x-button variant="outline" :href="route('sellers.show', $profile)" arrow>{{ __('View it') }}</x-button>
@endsection

@section('account')
    <form action="{{ route('account.seller.update') }}" method="POST" enctype="multipart/form-data"
          class="space-y-6" x-data="submitGuard" @submit="submit()">
        @csrf @method('PUT')

        <section class="rounded-xl border border-border bg-surface p-6" aria-labelledby="identity">
            <h2 id="identity" class="font-display text-title font-bold text-text">{{ __('Who you are') }}</h2>

            <div class="mt-6 grid gap-5 sm:grid-cols-2">
                <x-form.select name="type" :label="__('You are a')" :options="$sellerTypes"
                               :value="$profile->type->value" required :placeholder="false" />

                <x-form.input name="display_name" :label="__('Name buyers see')" :value="$profile->display_name" required />

                <x-form.input name="headline" :label="__('One-line introduction')" :value="$profile->headline"
                              class="sm:col-span-2"
                              :hint="__('The line under your name. Say what you focus on.')" />

                <x-form.textarea name="bio" :label="__('About you')" :value="$profile->bio" rows="6"
                                 class="sm:col-span-2" />
            </div>
        </section>

        <section class="rounded-xl border border-border bg-surface p-6" aria-labelledby="imagery">
            <h2 id="imagery" class="font-display text-title font-bold text-text">{{ __('Imagery') }}</h2>

            <div class="mt-6 grid gap-5 sm:grid-cols-2">
                <x-form.file name="logo" :label="__('Logo or photograph')" accept="image/*" :existing="$profile->logo" />
                <x-form.file name="cover_image" :label="__('Cover image')" accept="image/*" :existing="$profile->cover_image" />
            </div>
        </section>

        <section class="rounded-xl border border-border bg-surface p-6" aria-labelledby="contact">
            <h2 id="contact" class="font-display text-title font-bold text-text">{{ __('How buyers reach you') }}</h2>

            <div class="mt-6 grid gap-5 sm:grid-cols-2">
                <x-form.input name="contact_phone" type="tel" :label="__('Phone')" :value="$profile->contact_phone" />
                <x-form.input name="contact_email" type="email" :label="__('Email')" :value="$profile->contact_email" />
                <x-form.input name="whatsapp" :label="__('WhatsApp')" :value="$profile->whatsapp" />
                <x-form.input name="viber" :label="__('Viber')" :value="$profile->viber" />
                <x-form.input name="website" type="url" :label="__('Website')" :value="$profile->website" class="sm:col-span-2" />
            </div>
        </section>

        <section class="rounded-xl border border-border bg-surface p-6" aria-labelledby="where">
            <h2 id="where" class="font-display text-title font-bold text-text">{{ __('Where you work') }}</h2>

            <div class="mt-6 grid gap-5 sm:grid-cols-2">
                <x-form.input name="address" :label="__('Office address')" :value="$profile->address" class="sm:col-span-2" />
                <x-form.input name="city" :label="__('City')" :value="$profile->city" />
                <x-form.input name="district" :label="__('District')" :value="$profile->district" />
                <x-form.input name="province" :label="__('Province')" :value="$profile->province" />
                <x-form.input name="established_year" type="number" :label="__('Established')"
                              :value="$profile->established_year" min="1800" max="{{ now()->year }}" />

                <x-form.repeater name="areas_served" :label="__('Areas served')" :values="$profile->areas_served ?? []"
                                 class="sm:col-span-2" />

                <x-form.repeater name="specializations" :label="__('Specialises in')"
                                 :values="$profile->specializations ?? []" class="sm:col-span-2" />

                <x-form.input name="license_number" :label="__('Licence or registration number')"
                              :value="$profile->license_number" class="sm:col-span-2" />
            </div>
        </section>

        <div class="flex flex-wrap items-center justify-between gap-3">
            <x-button variant="ghost" :href="route('account.verification.create')">
                {{ $profile->isVerified() ? __('Verification') : __('Get verified') }}
            </x-button>

            <button type="submit" class="btn btn-primary" :disabled="submitting">
                <span x-show="!submitting">{{ __('Save profile') }}</span>
                <span x-show="submitting" x-cloak>{{ __('Saving…') }}</span>
            </button>
        </div>
    </form>
@endsection