@extends('layouts.app')

@section('title', 'Contactez-nous')

@section('content')
    @php
        $company = \App\Models\User::getCompanyProfile();
    @endphp
    <!-- Page Header Start -->
    <div class="container-fluid page-header py-5 mb-5 wow fadeIn" data-wow-delay="0.1s">
        <div class="container py-5">
            <h1 class="display-3 text-white animated slideInRight">Contactez-nous</h1>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb animated slideInRight mb-0">
                    <li class="breadcrumb-item"><a href="{{ route('home') }}">Accueil</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Contact</li>
                </ol>
            </nav>
        </div>
    </div>
    <!-- Page Header End -->

    <!-- Contact Start -->
    <div class="container-xxl py-5">
        <div class="container">
            <div class="text-center mx-auto wow fadeInUp" data-wow-delay="0.1s" style="max-width: 700px;">
                <h1 class="display-5 mb-4">Si vous avez des questions, n'hésitez pas à nous contacter</h1>
            </div>
            <div class="row g-5">
                <div class="col-lg-6 wow fadeInUp" data-wow-delay="0.1s">
                    <div class="h-100">
                        <h3 class="text-primary text-uppercase mb-4">Contactez-nous</h3>
                        <p class="mb-4">{{ $company->company_description }}</p>
                        <div class="d-flex align-items-center mb-4">
                            <div class="d-flex align-items-center justify-content-center flex-shrink-0 bg-primary"
                                style="width: 50px; height: 50px;">
                                <i class="fa fa-map-marker-alt text-white"></i>
                            </div>
                            <div class="ms-4">
                                <h5 class="mb-2">Notre bureau</h5>
                                <p class="mb-0">{{ $company->company_address }}</p>
                            </div>
                        </div>
                        <div class="d-flex align-items-center mb-4">
                            <div class="d-flex align-items-center justify-content-center flex-shrink-0 bg-primary"
                                style="width: 50px; height: 50px;">
                                <i class="fa fa-phone-alt text-white"></i>
                            </div>
                            <div class="ms-4">
                                <h5 class="mb-2">Appelez-nous</h5>
                                <p class="mb-0">{{ $company->company_phone }}</p>
                            </div>
                        </div>
                        <div class="d-flex align-items-center">
                            <div class="d-flex align-items-center justify-content-center flex-shrink-0 bg-primary"
                                style="width: 50px; height: 50px;">
                                <i class="fa fa-envelope-open text-white"></i>
                            </div>
                            <div class="ms-4">
                                <h5 class="mb-2">Email</h5>
                                <p class="mb-0">{{ $company->company_email }}</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 wow fadeInUp" data-wow-delay="0.5s">
                    <div class="bg-light text-center h-100 p-5">
                        <h4 class="mb-3">Nous contacter par message</h4>
                        <div aria-live="polite" aria-atomic="true" class="position-fixed top-0 end-0 p-3"
                            style="z-index: 2000; min-width: 300px;">
                            <div id="contact-success-toast" class="toast align-items-center text-bg-success border-0"
                                role="alert" aria-live="assertive" aria-atomic="true">
                                <div class="d-flex">
                                    <div class="toast-body" id="contact-success-toast-body">
                                        <!-- Message JS -->
                                    </div>
                                    <button type="button" class="btn-close btn-close-white me-2 m-auto"
                                        data-bs-dismiss="toast" aria-label="Fermer"></button>
                                </div>
                            </div>
                        </div>
                        <form id="contact-form-contact" action="{{ route('contact.store') }}" method="POST">
                            @csrf
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <div class="form-floating">
                                        <input type="text"
                                            class="form-control border border-primary @error('name') is-invalid @enderror"
                                            name="name" id="name" placeholder="Votre nom"
                                            value="{{ old('name') }}" required>
                                        <label for="name">Votre nom</label>
                                        @error('name')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-floating">
                                        <input type="email"
                                            class="form-control border border-primary @error('email') is-invalid @enderror"
                                            name="email" id="email" placeholder="Votre email"
                                            value="{{ old('email') }}" required>
                                        <label for="email">Votre email</label>
                                        @error('email')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-12">
                                    <div class="form-floating">
                                        <input type="text"
                                            class="form-control border border-primary @error('phone') is-invalid @enderror"
                                            name="phone" id="phone" placeholder="Numéro de téléphone"
                                            value="{{ old('phone') }}" required>
                                        <label for="phone">Numéro de téléphone</label>
                                        @error('phone')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-12">
                                    <div class="form-floating">
                                        <input type="text"
                                            class="form-control border border-primary @error('subject') is-invalid @enderror"
                                            name="subject" id="subject" placeholder="Sujet"
                                            value="{{ old('subject') }}" required>
                                        <label for="subject">Sujet</label>
                                        @error('subject')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-12">
                                    <div class="form-floating">
                                        <textarea class="form-control border border-primary @error('message') is-invalid @enderror" name="message"
                                            placeholder="Laissez votre message ici" id="message" style="height: 150px" required>{{ old('message') }}</textarea>
                                        <label for="message">Message</label>
                                        @error('message')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-12">
                                    <button class="btn btn-primary py-3 px-5" type="submit">Envoyer le message</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Contact End -->
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const form = document.getElementById('contact-form-contact');
            if (form) {
                form.addEventListener('submit', function(e) {
                    e.preventDefault();
                    const formData = new FormData(form);
                    fetch(form.action, {
                            method: 'POST',
                            headers: {
                                'X-Requested-With': 'XMLHttpRequest',
                                'X-CSRF-TOKEN': formData.get('_token'),
                            },
                            body: formData
                        })
                        .then(response => response.json())
                        .then(data => {
                            if (data.success) {
                                const toastBody = document.getElementById('contact-success-toast-body');
                                toastBody.textContent = data.message;
                                const toastEl = document.getElementById('contact-success-toast');
                                const toast = new bootstrap.Toast(toastEl, {
                                    delay: 4000
                                });
                                toast.show();
                                form.reset();
                            }
                        });
                });
            }
        });
    </script>
@endpush