@extends('layouts.app')

@section('content')
    <!-- Page Title -->
    <div class="page-title accent-background">
        <div class="container d-lg-flex justify-content-between align-items-center">
            <h1 class="mb-2 mb-lg-0">Contatti</h1>
            <nav class="breadcrumbs">
                <ol>
                    <li><a href="{{ route('home') }}">Home</a></li>
                    <li class="current">Contatti</li>
                </ol>
            </nav>
        </div>
    </div>
    <!-- End Page Title -->

    <!-- Contact Section -->
    <section id="contact" class="contact section">

        <!-- MAPPA -->
        <div class="mb-5">
            <iframe style="width: 100%; height: 400px;"
                src="https://www.google.com/maps?q=Via+Fiume+2+Cavallermaggiore&output=embed" frameborder="0"
                allowfullscreen>
            </iframe>
        </div>
        <!-- End Google Maps -->

        <div class="container" data-aos="fade">

            <div class="row gy-5 gx-lg-5">

                <!-- COLONNA SINISTRA: CONTATTI -->
                <div class="col-lg-4">

                    <div class="info">
                        <h3>Restiamo in contatto</h3>
                        <p>
                            Per informazioni, assistenza o richieste commerciali,
                            contattaci tramite i riferimenti sottostanti.
                        </p>

                        <!-- EMAIL -->
                        <div class="info-item d-flex">
                            <i class="bi bi-envelope flex-shrink-0"></i>
                            <div>
                                <h4>Email</h4>
                                <p>
                                    <a href="mailto:assistenza@well-work.it">
                                        assistenza@well-work.it
                                    </a>
                                </p>
                            </div>
                        </div>

                        <!-- TELEFONO -->
                        <div class="info-item d-flex">
                            <i class="bi bi-telephone flex-shrink-0"></i>
                            <div>
                                <h4>Telefono</h4>
                                <p>
                                    <a href="tel:+390172389325">
                                        +39 0172 389 325
                                    </a>
                                </p>
                            </div>
                        </div>

                        <!-- PEC -->
                        <div class="info-item d-flex">
                            <i class="bi bi-shield-lock flex-shrink-0"></i>
                            <div>
                                <h4>PEC</h4>
                                <p>
                                    <a href="mailto:well-work@pec.it">
                                        well-work@pec.it
                                    </a>
                                </p>
                            </div>
                        </div>

                        <!-- SEDI -->
                        <div class="info-item d-flex">
                            <i class="bi bi-geo-alt flex-shrink-0"></i>
                            <div>
                                <h4>Dove ci trovi</h4>
                                <p class="mb-1"><strong>Sedi Commerciali</strong></p>
                                <p class="mb-1">Via Libero Temolo, 4 – Milano</p>
                                <p class="mb-1">Via XX Settembre, 4 – Roma</p>
                                <p class="mb-2">Via Fiume, 2 – 12030 Cavallermaggiore (CN)</p>

                                <p class="mb-1"><strong>Sede Operativa</strong></p>
                                <p>Via Fiume, 2 – Cavallermaggiore (CN)</p>
                            </div>
                        </div>

                    </div>

                </div>

                <!-- COLONNA DESTRA: FORM -->
                <div class="col-lg-8">
                    <form action="" method="POST" class="php-email-form">
                        @csrf

                        <div class="row">
                            <div class="col-md-6 form-group">
                                <input type="text" name="name" class="form-control" placeholder="Nome" required>
                            </div>

                            <div class="col-md-6 form-group mt-3 mt-md-0">
                                <input type="email" class="form-control" name="email" placeholder="Email" required>
                            </div>
                        </div>

                        <div class="form-group mt-3">
                            <input type="text" class="form-control" name="subject" placeholder="Oggetto" required>
                        </div>

                        <div class="form-group mt-3">
                            <textarea class="form-control" name="message" rows="6" placeholder="Messaggio" required></textarea>
                        </div>

                        <div class="my-3">
                            <div class="loading">Invio in corso...</div>
                            <div class="error-message"></div>
                            <div class="sent-message">
                                Il tuo messaggio è stato inviato con successo. Grazie!
                            </div>
                        </div>

                        <div class="text-center">
                            <button type="submit">Invia messaggio</button>
                        </div>
                    </form>
                </div>
                <!-- End Contact Form -->

            </div>

        </div>

    </section>
    <!-- /Contact Section -->
@endsection