@extends('layouts.app')
@section('title', 'Contacto')
@section('content')
    <main class="container-fluid  ct-cover-image  border-b-5 border-black ">
        <!-- nav -->
        <header class="vh-100 flex items-center justify-center">
            <script>
                function onSubmit(token) {
                    document.getElementById("demo-contact_form").submit();
                }
            </script>
            <section class="p-3 flex flex-wrap justify-center gap-y-4">
                <div class="text-white flex w-full col-span-2 flex-wrap text-center justify-center">
                    <h1 class="w-full text-3xl">Tienes Preguntas?</h1>
                    <ul class="list-none flex w-full justify-center gap-4 my-3 text-start">
                        <li class="text-white">
                            <a href="https://www.instagram.com/red.donantesrd/" target="_blank">
                                <i class="bi bi-instagram text-3xl  text-white"></i>
                            </a>
                        </li>
                        <li class="text-white">
                            <a href="https://www.facebook.com/red.donantesrd/" target="_blank">
                                <i class="bi bi-facebook text-3xl  text-white"></i>
                            </a>
                        </li>
                    </ul>
                    <p class="text-white text-lg w-full">Estamos felices de
                        responder tus dudas</p>
                </div>
                <div class=" bg-[#FAEED1] p-4 w-fit rounded-xl w-full flex justify-center col-span-2">
                    <form  action="{{ route('contact') }}" method="POST" id="contact_form">
                        @csrf
                        <!-- name and email -->
                        <div class="d-md-flex mb-2">
                            <input type="text" placeholder="Nombre" name="name"
                                class="w-full rounded-xl my-2 border border-gray-400" required>
                            <div class="mx-2"></div>
                            <input type="text" placeholder="Email" name="email"
                                class="w-full rounded-xl mt-2 border border-gray-400" required>
                        </div>
                        <input type="text" name="subject" class="w-full rounded-xl my-2 border border-gray-400 "
                            placeholder="Asunto" required>
                        <textarea name="content" id="" rows="5" class="w-full rounded-xl my-2 p-2 border border-gray-400"
                            placeholder='Mensaje' required></textarea>
                        <div class="d-flex justify-content-end align-items-center">

                            <button type="submit" data-sitekey="6LcFDlkeAAAAAM64Ri04vpSn2j2hc6AgvdxUvZhh"
                                data-callback='onSubmit' data-action='submit'
                                class=" bg-[#BF3131] hover:bg-[#B31312] ease-in-out duration-200 my-2 px-5 py-2 rounded-lg w-full text-white">Enviar</button>
                        </div>
                    </form>
                </div>
            </section>


        </header>
    </main>

@endsection

@section('javascript')



@endsection