@extends('layouts.pagina')
@section('titulo', 'Contactos')

@section('content')   
    @livewire('iconos-flotante')
    <section class="w-full h-auto">
        @livewire('direccion-imagenes')
    </section>
    <section class="form-cont">
        <h2 class="text-gray-400 text-center">¿Dudas o Consultas?</h2>
        <h2 class="mb-12 mt-4 text-2xl font-bold">CONTACTANOS</h2>
        <div class="grid grid-cols-1 md:grid-cols-5">


            <div class="col-span-2">
                @livewire('direccion-contacto')
            </div>
            <!-- formulario-->
            <div class="col-span-3">
                @if ($errors->any())

                    <div class="bg-red-200 border-yellow-600 text-yellow-600 border-l-4 p-2" role="alert">
                        <p class="font-bold">
                            Error de validación
                        </p>
                        <p>
                        <ul>
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                        </p>
                    </div>

                @endif
                <form action="{{ route('contactanos.store') }}" method="POST">
                    @csrf
                    <input id="" type="text" name="nombre" placeholder="Nombre"
                        class="px-4 py-2 my-2 w-full rounded-md border border-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-200"
                        value="{{ old('nombre') }}">

                    <input id="" type="text" name="apellido" placeholder="Apellido"
                        class="px-4 py-2 my-2 w-full rounded-md border border-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-200"
                        value="{{ old('apellido') }}">

                    <div class="flex">
                        <input id="" type="number" name="telefono" placeholder="Telefono"
                            class="px-4 py-2 my-2 mx-1 w-1/2 rounded-md border border-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-200"
                            value="{{ old('telefono') }}">

                        <input id="" type="email" name="email" placeholder="Email"
                            class="px-4 py-2 my-2 mx-1 w-1/2 rounded-md border border-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-200"
                            value="{{ old('email') }}">

                    </div>
                    <textarea cols="30" rows="10" name="mensaje"
                        class="px-4 py-2 my-2 w-full h-40 rounded-md border border-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-200">
                                            </textarea>

                    <button
                        class="p-2 pl-5 pr-5 bg-transparent border-2 text-left border-blue-700 text-blue-500 text-lg rounded-lg transition-colors duration-700 transform hover:bg-blue-600 hover:text-gray-100 focus:border-4 focus:border-indigo-300">
                        Enviar
                    </button>
                </form>

                @if (session('info'))
                    <script>
                        alert("{{ session('info') }}");
                    </script>
                @endif
            </div>
            <!-- fin formulario-->
        </div>
    </section>
@endsection