@extends('layouts.admin.base')

@section('page.title', isset($center) ? 'Édition d\'un centre' : 'Création d\'un centre')

@section('page.content')
    <div class="flex mb-4">
        <a href="{{ route('admin.settings.delivery.list') }}" class="px-3 py-1 text-sm bg-gray-600 text-white rounded shadow"><i class="bi bi-arrow-left"></i> Retour</a>

        @isset($center)
            <a href="{{ route('admin.settings.delivery.delete', ['center' => $center]) }}" class="px-3 py-1 text-sm bg-red-600 text-white rounded shadow ml-2">Supprimer</a>
        @endisset
    </div>

    <form action="{{ isset($center) ? route('admin.settings.delivery.update', ['center' => $center]) : route('admin.settings.delivery.store') }}" method="POST" class="grid md:grid-cols-3 gap-4">
        @csrf

        <div class="md:col-span-2 mb-auto grid gap-4">
            <div class="bg-slate-50 rounded shadow-sm border p-4">
                @include('components.forms.inputs.classic-light', [
                    'id' => 'title',
                    'label' => 'Nom',
                    'placeholder' => 'Nom',
                    'value' => $center->title ?? null,
                    'required' => true
                ])
            </div>

            <div class="bg-slate-50 rounded shadow-sm border p-4">
                <p class="text-lg font-serif mb-2">Adresse du centre</p>

                @include('components.forms.inputs.classic-light', [
                    'id' => 'address_street',
                    'old' => 'address.street',
                    'name' => 'address[street]',
                    'label' => 'Rue',
                    'placeholder' => 'Rue',
                    'required' => true,
                    'value' => $center->address->street ?? null
                ])

                <div class="grid md:grid-cols-3 md:gap-4">
                    @include('components.forms.inputs.classic-light', [
                        'id' => 'address_post_code',
                        'old' => 'address.post_code',
                        'name' => 'address[post_code]',
                        'label' => 'Code postal',
                        'placeholder' => 'Code postal',
                        'required' => true,
                        'value' => $center->address->post_code ?? null
                    ])

                    <div class="md:col-span-2">
                        @include('components.forms.inputs.classic-light', [
                            'id' => 'address_city',
                            'old' => 'address.city',
                            'name' => 'address[city]',
                            'label' => 'Ville',
                            'placeholder' => 'Ville',
                            'required' => true,
                            'value' => $center->address->city ?? null
                        ])
                    </div>
                </div>
            </div>
        </div>

        <div class="mb-auto grid gap-4">
            @isset($center->address->latitude)
                <div class="h-40 w-full rounded-xl">
                    <div class="w-full rounded-xl"><iframe width="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" class="rounded-xl" src="https://maps.google.com/maps?width=100%25&amp;hl=en&amp;q={{ $center->address->longitude }},{{ $center->address->latitude }}&amp;t=&amp;z=12&amp;ie=UTF8&amp;iwloc=B&amp;output=embed"></iframe></div>
                </div>
            @endisset
        </div>

        {{-- Bottom --}}
        <div class="md:col-span-3 border-t mt-4 pt-4 flex">
            <button type="submit" class="bg-green-500 text-white px-3 py-1 rounded shadow">Sauvegarder</button>
        </div>
    </form>
@endsection