@extends('layouts.app')

@section('content')
<div class="container">@include('partials.breadcrumb', ['current' => 'Contact'])</div>

<section class="section" style="padding-top:0">
    <div class="container split-right">
        <div class="panel">
            <h1 style="font-size:1.6rem">Nous contacter</h1>
            <p class="muted small" style="margin:8px 0 22px">Une question, une suggestion, un partenariat ? Écrivez-nous, nous répondons sous 24 h ouvrées.</p>

            <form method="post" action="{{ url('/contact') }}" class="stack">
                @csrf
                <div class="grid grid-2" style="gap:14px">
                    <div class="field-group">
                        <label class="label" for="nom">Nom et prénom</label>
                        <input class="input @error('nom') is-invalid @enderror" id="nom" name="nom"
                               value="{{ old('nom', auth()->user()?->name) }}" required>
                        @error('nom')<span class="field-error">{{ $message }}</span>@enderror
                    </div>
                    <div class="field-group">
                        <label class="label" for="email">E-mail</label>
                        <input class="input @error('email') is-invalid @enderror" id="email" type="email" name="email"
                               value="{{ old('email', auth()->user()?->email) }}" required>
                        @error('email')<span class="field-error">{{ $message }}</span>@enderror
                    </div>
                </div>
                <div class="field-group">
                    <label class="label" for="sujet">Sujet</label>
                    <select class="select" id="sujet" name="sujet">
                        @foreach(['Question générale', 'Problème technique', 'Signaler une annonce',
                                  'Revendication de fiche', 'Offre professionnelle', 'Régie publicitaire',
                                  'Presse'] as $sujet)
                            <option value="{{ $sujet }}" @selected(old('sujet', request('sujet')) === $sujet)>{{ $sujet }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="field-group">
                    <label class="label" for="message">Message</label>
                    <textarea class="textarea @error('message') is-invalid @enderror" id="message" name="message"
                              rows="6" required>{{ old('message', request('ref') ? 'Bonjour, je souhaite revendiquer la fiche '.request('ref').'. Voici les éléments justifiant que je gère cet établissement : ' : '') }}</textarea>
                    @error('message')<span class="field-error">{{ $message }}</span>@enderror
                </div>
                <label class="check">
                    <input type="checkbox" name="rgpd" value="1" @checked(old('rgpd')) required>
                    J'accepte que mes informations soient utilisées pour traiter ma demande.
                </label>
                @error('rgpd')<span class="field-error">{{ $message }}</span>@enderror
                <button class="btn btn-primary btn-lg" type="submit" style="align-self:flex-start">Envoyer le message</button>
            </form>
        </div>

        <aside class="stack">
            <div class="panel">
                <h3 style="font-size:1rem;margin-bottom:12px">Coordonnées</h3>
                <div class="stack small">
                    <div class="row" style="gap:10px">
                        <x-icon name="pin" style="color:var(--orange-600);flex:none"/>
                        <span>{{ config('citymag.raison_sociale') }}<br>{{ config('citymag.adresse') }}</span>
                    </div>
                    <div class="row" style="gap:10px">
                        <x-icon name="phone" style="color:var(--orange-600);flex:none"/>
                        <a href="tel:{{ preg_replace('/\s+/', '', config('citymag.telephone')) }}">{{ config('citymag.telephone') }}</a>
                    </div>
                    <div class="row" style="gap:10px">
                        <x-icon name="mail" style="color:var(--orange-600);flex:none"/>
                        <a href="mailto:{{ config('citymag.email') }}">{{ config('citymag.email') }}</a>
                    </div>
                    <div class="row" style="gap:10px"><x-icon name="clock" style="color:var(--orange-600);flex:none"/> <span>Lundi au vendredi, 9 h – 18 h</span></div>
                </div>
                <div style="margin-top:14px">
                    <x-carte ville="Lille" cp="59000" :adresse="config('citymag.adresse')" ratio="4/3"/>
                </div>
            </div>
            <div class="panel">
                <h3 style="font-size:1rem;margin-bottom:10px">Suivez-nous</h3>
                <div class="socials" style="margin:0">
                    @forelse(config('reseaux') as $reseau => $url)
                        <a href="{{ $url }}" rel="noopener nofollow" target="_blank"
                           style="background:var(--surface-2);color:var(--ink-700)" aria-label="{{ ucfirst($reseau) }}">
                            <x-icon :name="$reseau"/>
                        </a>
                    @empty
                        <p class="small muted" style="margin:0">Nos comptes sociaux arrivent bientôt.</p>
                    @endforelse
                </div>
            </div>
        </aside>
    </div>
</section>
@endsection