@extends('layouts.frontpages')

@section('content')
    <div
        class="bg-cream-custom md:bg-custom-back-landing-desktop md:bg-center md:bg-cover md:flex flex-wrap h-screen bg-no-repeat bg-contain font-dunkin-sans-book">
        <img src="{{ url('/images/landing/bg-mobile.png') }}" alt="" class="md:hidden w-full max-h-96">
        <div class="md:grid items-center w-full grid-cols-2 pr-5 px-8 md:px-0 -mt-28 md:mt-0">
            <div></div>
            <div class="flex flex-wrap items-center justify-center w-full">
                <section class="relative w-full mx-auto my-4 h-full">
                    <div
                        class="absolute inset-x-0 -top-3 bottom-0 z-0 mb-16 ml-3x w-full h-full rounded-xl bg-gray-200 shadow-2xl ml-3">
                    </div>
                    @if ($user->exists)
                        <form action="{{ route('contact-user.update') }}" method="post"
                            class="grid md:grid-cols-2 items-center mt-0 gap-2 px-8 md:px-4 w-full h-full rounded-xl relative bg-white shadow z-20">
                            @csrf
                            <input type="hidden" value="{{ $user->email }}" name="email">
                            <div class="col-span-full flex justify-center">
                                <hr class="bg-orange-custom w-3/4 h-2 rounded-b-full" />
                            </div>
                            @csrf
                            <div class="col-span-full">
                                <h2 class="md:mb-4 font-semibold text-center">
                                    Cuéntanos cuál medio prefieres para que te enviemos nuestra información.
                                </h2>
                            </div>
                            @include('partials.contacs-checkbox', ['user' => $user])
                            <div class="col-span-full h-14"></div>
                            <div class="col-span-full flex justify-center relative">
                                <button type="submit"
                                    class="flex justify-center items-center absolute -bottom-6 md:-bottom-6">
                                    <img src="{{ asset('images/landing/button-update.png') }}" alt="Actualizar"
                                        class="w-3/4 h-auto hidden md:block" />
                                    <img src="{{ asset('images/landing/button-update-mobile.png') }}" alt="Actualizar"
                                        class="w-5/6 h-auto md:hidden" />
                                </button>
                            </div>
                        </form>
                    @else
                        <div
                            class="w-full h-40 rounded-xl relative bg-white shadow z-20 flex flex-col justify-center items-center space-y-4">
                            <p>usuario no encontrado</p>
                            <a href="{{ route('login') }}"
                                class="bg-pink-600 w-1/3 text-center text-white rounded-full font-semibold text-lg hover:no-underline hover:bg-pink-500">
                                Volver
                            </a>
                        </div>
                    @endif
                </section>
                <div class="md:px-10 text-left {{ $user->exists ? '' : 'hidden' }}">
                    <div class="justify-left flex items-center my-2">
                        <img src="{{ asset('images/landing/icon-paper.png') }}" alt="Icono de papel"
                            class="mx-2 md:mx-4 w-16 md:w-10 h-16 md:h-10" />
                        <span class="ml-2 font-semibold">
                            Conoce nuestras políticas de tratamiento de datos personales
                            <a href="https://www.laroscadd.com.co/storage/terms/Qa89oztC7hKwvBo1ES3oHhf4dv098lJzbjTGcnFJ.pdf"
                                class="ml-1 text-pink-600 underline" target="_blank">AQUÍ</a>
                        </span>
                    </div>
                    <div class="justify-left flex items-center my-2">
                        <img src="{{ asset('images/landing/icon-letter.png') }}" alt="Icono de carta"
                            class="mx-2 md:mx-4 w-16 md:w-10 h-16 md:h-10" />
                        <span class="ml-2 font-semibold">
                            Si deseas {{ $user->unsubscribe ? '' : 'de' }}suscribirte,
                            <a href="{{ route('contact-user.unsubscribe', ['email' => $user->email]) }}"
                                class="ml-1 text-pink-600 underline">
                                AQUÍ
                            </a>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection