@include('site/header')

<section class="min-h-[calc(100vh-550px)] sm:min-h-[calc(100vh-240px)] bg-white relative">
	<div class="max-w-[1000px] flex flex-col justify-center items-center gap-2 text-center relative z-20 m-auto px-4 pt-36 pb-4">
        <h1 class="text-[25px] leading-[35px] font-bold text-[#0077b2]">Nuestros Vendedores</h1>
    </div>

    <div class="text-center max-w-[1000px] m-auto pb-6">
        @if (count($vendedores) > 0)
            <div class="flex flex-wrap justify-center items-start gap-6">
                @foreach ($vendedores as $vendedor)
                    <div class="flex flex-col w-full md:w-[48%]">
                        <p class="text-[#2C8272] font-bold">{{$vendedor->nombre}}</p>
                        @if (!empty($vendedor->email))
                            <a href="mailto:{{$vendedor->email}}" class="text-sm text-gray-600 hover:text-[#349e8d] w-fit m-auto">
                                {{$vendedor->email}}
                            </a>
                        @endif
                        @if (!empty($vendedor->telefono))
                            <p class="text-sm text-gray-600">Tel: {{$vendedor->telefono}}</p>
                        @endif
                        <button type="button" data-toggle="modal" data-target="#modalConsulta" onclick="loadDataConsulta('{{$vendedor->nombre}}')" class="w-fit m-auto px-3 py-0.5 border-2 border-solid border-[#0077b2] text-xs text-[#0077b2] font-[600] rounded-sm uppercase hover:text-white hover:bg-[#0077b2] hover:shadow-md transition-all">
                            Consultar
                        </button>
                    </div>
                @endforeach
            </div>
        @else
            <p class="italic text-gray-500 text-base mt-6">No hay lista de vendedores aún.</p>
        @endif
    </div>

    {{-- Banner Contacto --}}
    <section class="bg-center bg-cover bg-fixed overflow-hidden relative" style="background-image:url({{$imagen_bg_contacto}});">
        <div class="absolute bg-black w-full h-full opacity-40 z-10"></div>
        <div class="flex flex-col items-center gap-6 px-4 md:px-12 py-8 relative z-20">
            <div class="text-white">
                <h2 class="text-[22px] leading-[30px] font-bold text-center mb-1">¿Tienes alguna pregunta?</h2>
                <p class="text-[15px] font-[600] text-center">No dudes en consultarnos haciendo click en "Contacto"</p>
            </div>
            <div>
                <a href="{{route('contacto')}}" class="block w-[120px] text-[#2C8272] hover:text-[#2C8272] bg-white font-bold text-center uppercase border border-solid border-[#2C8272] rounded-sm py-2 hover:scale-105 duration-300">Contacto</a>
            </div>
        </div>
    </section>
</section>

<!-- Modal Consulta -->
<div id="modalConsulta" class="modal fade" role="dialog">
	<div class="modal-dialog" style="max-width: 600px !important;">	
		<!-- Modal content-->
		<div class="modal-content p-4">
			<form onsubmit="return mySubmitFunction(event)">
			@csrf
		
				<h2 class="font-[700] text-gray-600 text-md tracking-[3px]">Consulta - <span id="nombre-vendedor"></span></h2>

				<div class="grid grid-cols-1 sm:grid-cols-3 gap-2 mt-4">
					<div class="w-full">
						<div class="">
							<input type="text" placeholder="Nombre y Apellido" id="name" class="w-full border border-gray-300 border-solid rounded px-2 py-1">
						</div>
					</div>
					<div class="w-full">
						<div class="">
							<input type="text" placeholder="Email" id="email" class="w-full border border-gray-300 border-solid rounded px-2 py-1">
						</div>
					</div>
					<div class="w-full">
						<div class="">
							<input type="text" placeholder="Teléfono (Opcional)" id="phone" class="w-full border border-gray-300 border-solid rounded px-2 py-1">
						</div>
					</div>
					<div class="sm:col-span-3">
						<textarea rows="6" id="message" class="w-full border border-gray-300 border-solid rounded px-2 py-1"></textarea>
					</div>
				</div>

				<div class="flex justify-between items-start gap-2 mt-4">
					<div class="">
						<button data-dismiss="modal" class="px-2 py-1 border-2 border-solid border-[#0077b2] text-[#0077b2] rounded font-bold uppercase">Cancelar</button>
					</div>
					<div class="" id="botonEnviar">
						<button type="submit" class="px-2 py-1 bg-[#2C8272] text-white border-2 border-solid border-[#2C8272] rounded font-bold uppercase hover:shadow-md">Enviar</button>
					</div>
				</div>

			</form>

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

@include('site/footer')

<script>
    function loadDataConsulta(nombre) {
        $('#name').val('');
        $('#email').val('');
        $('#phone').val('');
        $('#nombre-vendedor').text(nombre);
        $('#message').val('Hola, Circuitos! Quería conocer más información sobre el vendedor "'+nombre+'". Muchas gracias!');
    }
</script>
<script>
    function mySubmitFunction(e) {
        e.preventDefault();
        let name = $('#name').val()
		let email = $('#email').val()
		let phone = $('#phone').val()
		let message = $('#message').val()

        if (name != "" && email != "" && message != "") {
            $('#botonEnviar').html('<button type="button" class="px-2 py-1 bg-[#2C8272] text-white border-2 border-solid border-[#2C8272] rounded font-bold uppercase hover:shadow-md">'+
										'Enviando...'+
									'</button>');

            $.ajax({
                type:'POST',
                url:"{{route('send_mail_contacto')}}",
                data: {
                    "_token": "{{csrf_token()}}",
                    name: name,
                    email: email,
                    phone: phone,
                    message: message,
                    link_viaje: window.location.href
                },
                success:function(resp){
                    if (resp == 1) {
                        $('#botonEnviar').html('<button type="button" class="px-2 py-1 bg-[#2C8272] text-white border-2 border-solid border-[#2C8272] rounded font-bold uppercase hover:shadow-md">'+
													'Mensaje Enviado!'+
												'</button>');
                    } else {
                        $('#botonEnviar').html('<button type="submit" class="px-2 py-1 bg-[#2C8272] text-white border-2 border-solid border-[#2C8272] rounded font-bold uppercase hover:shadow-md">'+
													'Error al enviar el email. Inténtalo nuevamente!'+
												'</button>');
                    }
                }
            });
        }
    }
</script>