@extends('layout')

@section('title', 'Contact')
@section('description', 'Contact Us')

@section('content')

<!-- Breadcrumb -->
<div class="breadcrumb-area mb-50">
    <div class="container">
        <div class="row">
            <div class="col">
                <div class="breadcrumb-container">
                    <ul>
                        <li><a href="{{route('accueil')}}"><i class="fa fa-home"></i> {{ __('messages.acc') }}</a></li>
                        <li class="active">Contact</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<section id="down-section" class="overflow-hidden" style="padding-top:0; padding-bottom:50px;">
    <div class="container">
        <div class="row justify-content-center g-0">

            <!-- Colonne gauche (Image) -->
            <div class="col-lg-3 col-md-6">
                <div style="height:100%; background-size:cover; background-image:url('{{ asset('assets/images/contact.jpg') }}')"></div>
            </div>

            <!-- Coordonnées -->
            <div class="col-lg-4 col-md-6" style="background:#333; color:white; padding:20px; border-radius:8px;">
                <div class="single-contact d-flex align-items-start mb-50">
                    <div class="icon me-3">
                        <span class="icon_pin_alt" style="font-size: 3rem;"></span>
                    </div>
                    <div class="contact-info">
                        <p class="mb-0" style="font-size: 17px !important">{{ __('messages.adr') }}:<br><span>{{$adresse}}</span></p>
                    </div>
                </div>

                <div class="single-contact d-flex align-items-start mb-50">
                    <div class="icon me-3">
                        <span class="icon_mobile" style="font-size: 3rem;"></span>
                    </div>
                    <div class="contact-info">
                        <p class="mb-0" style="font-size: 17px !important">{{ __('messages.tel') }}:<br><span>{{$tel1}}</span></p>
                    </div>
                </div>

                <div class="single-contact d-flex align-items-start mb-50">
                    <div class="icon me-3">
                        <span class="icon_mail_alt" style="font-size:3rem;"></span>
                    </div>
                    <div class="contact-info">
                        <p class="mb-0" style="font-size: 17px !important">{{ __('messages.em') }}:<br><span>{{$email}}</span></p>
                    </div>
                </div>
            </div>

            <!-- Formulaire -->
            <div class="col-lg-5 col-md-6">
                <div class="card" style="border:1px solid #ccc; border-radius:8px; padding:20px;">
                    <img src="{{ asset('assets/images/cont2.jpg') }}" class="w-100" style="border-radius:6px;" alt="">

                    <form id="contactForm" action="{{ route('contactPost') }}" method="POST" style="margin-top:20px;">
                        @csrf

                        <div class="form-group mb-3">
                            <input type="text" name="name" class="form-control"  placeholder="{{ __('messages.yno') }} *">
                        </div>

                        <div class="form-group mb-3">
                            <input type="email" name="email" class="form-control"  placeholder="{{ __('messages.yem') }} *">
                        </div>

                        <div class="form-group mb-3">
                            <textarea name="comment" class="form-control" rows="4"  placeholder="{{ __('messages.ymes') }} *"></textarea>
                        </div>

                        <div class="text-center">
                            <button type="submit" class="btn" style="background:#333; color:white; padding:10px 20px; border:none;">
                                {{ __('messages.senm') }}
                            </button>
                            <div class="form-results mt-20px d-none"></div>
                        </div>
                    </form>
                </div>
            </div>

        </div>
    </div>
</section>

<!-- Google Map -->
<section class="pb-0" id="location">
    <div class="container-fluid">
        <div class="row justify-content-center">
            <div class="col-12 p-0">
                <iframe 
                    src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d31763.78227331743!2d-0.147142!3d5.644521!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xa5a56144b3517924!2sBS%20HOLDINGS%20LTD!5e0!3m2!1sen!2sgh!4v1637700807312!5m2!1sen!2sgh" 
                    width="100%" 
                    height="450" 
                    style="border:0;" 
                    allowfullscreen="" 
                    loading="lazy">
                </iframe>
            </div>
        </div>
    </div>
</section>

@push('styles')

		<style>
    .single-contact {
        margin-bottom: 1.5rem;
    }

    .single-contact .icon span {
        font-size: 3rem;
        color: #ffc107;
    }

    .contact-info p {
        margin-bottom: 0;
    }

    .form-results {
        margin-top: 20px;
    }

   .input-error {
        border: 2px solid red !important;
        background-color: #ffe6e6;
    }
}

</style>

@endpush

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const form = document.getElementById('contactForm');
        const resultDiv = document.querySelector('.form-results');

        form.addEventListener('submit', function (e) {
            e.preventDefault();

            const inputs = form.querySelectorAll('input, textarea');
            inputs.forEach(el => el.classList.remove('input-error'));

            let hasError = false;

            inputs.forEach(el => {
                if (!el.value.trim()) {
                    el.classList.add('input-error');
                    hasError = true;
                }
            });

            if (hasError) {
                resultDiv.classList.remove('d-none');
                resultDiv.innerHTML = `<div class="alert alert-danger">Veuillez remplir tous les champs requis.</div>`;
                return;
            }

            const formData = new FormData(form);

            fetch(form.action, {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                resultDiv.classList.remove('d-none');
                resultDiv.innerHTML = `<div class="alert alert-success">${data.message}</div>`;
                form.reset();
            })
            .catch(error => {
                resultDiv.classList.remove('d-none');
                resultDiv.innerHTML = `<div class="alert alert-danger">Une erreur est survenue lors de l'envoi.</div>`;
            });
        });
    });
</script>
@endpush

@endsection
