@extends('layouts.platform')

@section('main')
    <div class="pb-6 pb-lg-9 mb-6 mb-lg-8">
        <div class="container mb-10">
            <div class="w-md-80 w-lg-50 text-center mx-md-auto my-3">
                <h2 class="section-title text-black font-size-30 font-weight-bold mb-5 pb-xl-1">Contactez nous</h2>
            </div>
            @if (session('status'))
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    {{ session('status') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            @endif
            <div class="row">
                <div class="col-lg-6">
                    <iframe
                        src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d13293.957168777175!2d-7.6050134!3d33.592607!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xda7cd646f29c9b9%3A0x25e52166df5fccce!2sChambre%20de%20Commerce%20Espagnole!5e0!3m2!1sen!2sma!4v1691078091021!5m2!1sen!2sma"
                        width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy"
                        referrerpolicy="no-referrer-when-downgrade"></iframe>
                </div>
                <div class="col-lg-6">
                    <div class="comment-section max-width-810 mx-auto">
                        <form class="js-validate" action="{{ route('platform.contact.submit') }}" method="POST"
                            novalidate="novalidate">
                            @csrf
                            <div class="row">
                                <!-- Input -->
                                <div class="col-sm-6 mb-5">
                                    <div class="js-form-message">
                                        <input type="text" class="form-control @error('name') is-invalid @enderror"
                                            value="{{ old('name') }}" name="name" placeholder="Nom" required=""
                                            data-error-class="u-has-error" data-msg="Please enter your name."
                                            data-success-class="u-has-success">
                                        @error('name')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>
                                </div>
                                <!-- End Input -->

                                <!-- Input -->
                                <div class="col-sm-6 mb-5">
                                    <div class="js-form-message">
                                        <input type="email" class="form-control @error('email') is-invalid @enderror"
                                            value="{{ old('email') }}" name="email" placeholder="Email" required=""
                                            data-msg="Please enter a valid email address." data-error-class="u-has-error"
                                            data-success-class="u-has-success">
                                        @error('email')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>
                                </div>
                                <!-- End Input -->
                                <div class="col-sm-12 mb-5">
                                    <div class="js-form-message">
                                        <div class="input-group">
                                            <textarea class="form-control @error('message') is-invalid @enderror" value="{{ old('message') }}" rows="6"
                                                cols="77" name="message" placeholder="Message" required data-msg="Please enter a reason."
                                                data-error-class="u-has-error" data-success-class="u-has-success"></textarea>
                                            @error('message')
                                                <span class="invalid-feedback" role="alert">
                                                    <strong>{{ $message }}</strong>
                                                </span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                                <!-- End Input -->
                                <div class="col d-flex justify-content-lg-start">
                                    <button type="submit"
                                        class="btn rounded-xs bg-red text-white height-51 width-190 transition-3d-hover">Envoyer</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection