@extends('layouts.frontpages')

@section('content')
    <div class="bg-cream-custom pb-4">
        @include('partials.header')
        <img src="{{ asset('images/banners/update-user.png') }}" class="hidden md:block relative top-0 z-10" alt="Banner">
        <img src="{{ asset('images/banners/update-user-mobile.png') }}" class="md:hidden w-full relative top-0 z-10"
            alt="Banner">
        <form action="{{ route('update-data.save') }}"
            class="flex flex-col md:flex-row space-y-4 md:space-y-0 justify-center items-center px-8 md:px-16" method="post">
            <div class="md:w-2/3">
                <div class="bg-white px-4 pb-4 grid md:grid-cols-2 gap-4 text-center pt-32 -mt-28 rounded-2xl">
                    @csrf
                    @if (count($errors->all()))
                        <div class="alert alert-danger col-span-full">
                            @foreach ($errors->all() as $error)
                                <p class="text-sm font-bold">{{ $error }}</p>
                            @endforeach
                        </div>
                    @endif
                    <div class="col-span-full">
                        @include('partials.messages')
                    </div>
                    <h1 class="font-dunkin-sans-book text-xl font-bold text-center col-span-full">
                        Actualiza tus datos y disfruta beneficios hechos para ti
                    </h1>
                    <div class="">
                        <label for="first_name">*Nombres:</label>
                        <input type="text" name="first_name"
                            class="bg-gray-100 w-full px-2 py-1 rounded-2xl border-2 border-gray-300"
                            value="{{ old('first_name', $user->first_name) }}" required>
                    </div>
                    <div class="">
                        <label for="last_name">*Apellidos:</label>
                        <input type="text" name="last_name"
                            class="bg-gray-100 w-full px-2 py-1 rounded-2xl border-2 border-gray-300"
                            value="{{ old('last_name', $user->last_name) }}" required>
                    </div>
                    <div class="">
                        <label for="email">*Correo electrónico:</label>
                        <input type="email" name="email"
                            class="bg-gray-100 w-full px-2 py-1 rounded-2xl border-2 border-gray-300"
                            value="{{ old('email', $user->email) }}" required>
                    </div>
                    <div class="">
                        <label for="identification">*Identificación:</label>
                        <input type="number" name="identification"
                            class="bg-gray-100 w-full px-2 py-1 rounded-2xl border-2 border-gray-300""
                            value="{{ old('identification', $user->identification) }}" required>
                    </div>
                    <div class="">
                        <label for="gender">*Género:</label>
                        <select name="gender" class="bg-gray-100 w-full px-2 py-1 rounded-2xl border-2 border-gray-300"
                            required>
                            <option value="Masculino" {{ $user->gender == 'Masculino' ? 'selected' : '' }}>
                                Masculino</option>
                            <option value="Femenino" {{ $user->gender == 'Femenino' ? 'selected' : '' }}>
                                Femenino</option>
                        </select>
                    </div>
                    <div class="">
                        <label for="birthday">*Fecha de nacimiento:</label>
                        <div class="row">
                            <div class="col">
                                <input type="number" name="birthday_day"
                                    class="bg-gray-100 w-full px-2 py-1 rounded-2xl border-2 border-gray-300""
                                    value="{{ old('birthday_day', substr($user->birthday, 8, 2)) }}" placeholder="DD"
                                    required>
                            </div>
                            <div class="col padding0">
                                <input type="number" name="birthday_month"
                                    class="bg-gray-100 w-full px-2 py-1 rounded-2xl border-2 border-gray-300""
                                    value="{{ old('birthday_month', substr($user->birthday, 5, 2)) }}" placeholder="MM"
                                    required>
                            </div>
                            <div class="col">
                                <input type="number" name="birthday_year" id="birthday_year"
                                    class="bg-gray-100 w-full px-2 py-1 rounded-2xl border-2 border-gray-300"
                                    value="{{ old('birthday_year', substr($user->birthday, 0, 4)) }}" placeholder="YYYY"
                                    required>
                            </div>
                        </div>
                    </div>
                    <div class="">
                        <label for="department">{{ is_null($user->city_id) ? '*' : '' }}Departamento:</label>
                        <select name="department" class="bg-gray-100 w-full px-2 py-1 rounded-2xl border-2 border-gray-300"
                            id="department_id">
                            <option value="">Selecciona departamento</option>
                            @foreach ($departments as $item)
                                <option value="{{ $item->id }}"
                                    {{ $item->id == $user->city->department->id ? 'selected' : '' }}>{{ $item->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="">
                        <label for="city">{{ is_null($user->city_id) ? '*' : '' }}Ciudad:</label>
                        <select name="city_id" class="bg-gray-100 w-full px-2 py-1 rounded-2xl border-2 border-gray-300"
                            id="city_id" {{ is_null($user->city_id) ? 'required' : '' }}>
                            <option value="">Selecciona ciudad</option>
                            @if ($user->city_id)
                                <option value="{{ $user->city_id }}" selected>
                                    {{ $user->city->name }}
                                </option>
                            @endif
                        </select>
                    </div>
                    <div class="">
                        <label for="address">Dirección: (opcional)</label>
                        <input type="text" name="address"
                            class="bg-gray-100 w-full px-2 py-1 rounded-2xl border-2 border-gray-300"
                            placeholder="Ej: Calle 100 #45b-12" value="{{ old('address', $user->address) }}">
                    </div>
                    <div class="">
                        <label for="address_complement">Dirección complementaria: (opcional)</label>
                        <input type="text" name="address_complement"
                            class="bg-gray-100 w-full px-2 py-1 rounded-2xl border-2 border-gray-300""
                            placeholder="Apartamento, Casa, Oficina"
                            value="{{ old('address_complement', $user->address_complement) }}">
                    </div>
                    <div class="">
                        <label for="cellphone">*Teléfono celular:</label>
                        <input type="text" name="cellphone"
                            class="bg-gray-100 w-full px-2 py-1 rounded-2xl border-2 border-gray-300"
                            value="{{ old('cellphone', $user->cellphone) }}" required>
                    </div>
                    @if (!$user->data_updated)
                        <div class="">
                            <div class="">
                                <label for="password">*Nueva Contraseña:</label>
                                <input type="password" name="password"
                                    class="bg-gray-100 w-full px-2 py-1 rounded-2xl border-2 border-gray-300"">
                            </div>
                            <div class="">
                                <label for="password_confirmation">*Confirmar Nueva Contraseña:</label>
                                <input type="password" name="password_confirmation"
                                    class="bg-gray-100 w-full px-2 py-1 rounded-2xl border-2 border-gray-300">
                            </div>
                        </div>
                    @endif
                    <div class="flex justify-center items-center">
                        <div>
                            <input
                                class="appearance-none h-5 w-5 bg-pink-100 border-2 border-pink-600 checked:bg-pink-600 cursor-pointer rounded-full"
                                type="checkbox" name="terms" id="terms-check" required
                                {{ $user->data_updated ? 'checked' : '' }}>
                        </div>
                        <label class="" for="terms-check">
                            Autorizo el tratamiento de mis datos personales a Dunkin' - La Rosca
                        </label>
                    </div>
                </div>
                <div
                    class="text-center font-dunkin-sans-book border-dotted border-b-2 md:border-b-0 border-red-400 py-2 md:py-0 px-2">
                    <p>
                        Conoce nuestras políticas de tratamiento de datos personales
                        <a href="https://www.laroscadd.com.co/storage/terms/Qa89oztC7hKwvBo1ES3oHhf4dv098lJzbjTGcnFJ.pdf"
                            target="_blank" class="underline font-dunkin-sans-display text-dark-cream-custom">AQUÍ</a>
                    </p>
                    <p>
                        Si deseas {{ $user->unsubscribe ? '' : 'de' }}suscribirte,
                        <a href="{{ route('contact-user.unsubscribe', ['email' => $user->email]) }}"
                            class="underline font-dunkin-sans-display text-dark-cream-custom">
                            HAZ CLIC AQUÍ
                        </a>
                    </p>
                </div>
            </div>
            <div class="md:w-1/3 md:pl-10 space-y-8 text-sm">
                <div class="flex items-center justify-center border-b-2 border-dotted border-red-400 py-2">
                    <img src="{{ asset('images/icon-alert.png') }}" alt="">
                    <p class="font-dunkin-sans-book">
                        <b class="font-dunkin-sans-display">Queremos que siempre estés enterado</b>
                        de todo lo que La Rosca tiene para ti.
                    </p>
                </div>
                <div class="bg-white rounded-2xl py-2 px-3 relative flex flex-col justify-center items-center">
                    <p class="text-center">
                        El correo electrónico con el que estás registrado es
                        <b>{{ $user->email }}.</b>
                    </p>
                    <i class="fa fa-caret-down text-5xl text-white absolute -bottom-7"></i>
                </div>
                <div
                    class="bg-dark-cream-custom bg-opacity-10 text-center rounded-full py-2 px-3 relative flex flex-col justify-center items-center">
                    <p>Ahora, selecciona el canal de tu preferencia para ser contactado por Dunkin' - La Rosca</p>
                </div>
                <div class="flex flex-col md:flex-row md:flex-wrap justify-center gap-4 px-16 md:px-0">
                    @include('partials.contacs-checkbox', ['user' => $user])
                </div>
                <button type="submit" class="w-full">
                    <img src="{{ asset('images/button-update.png') }}" alt="Actualizar" class="w-full h-auto" />
                </button>
            </div>
        </form>
    </div>
    {{-- @include('partials.footer') --}}
@stop

@section('scripts')
    <script nonce="some-nonce">
        $(document).ready(function() {
            let year = new Date().getFullYear();
            $('#birthday_year').attr({
                "max": (year - 18),
                "min": (year - 100)
            })
        })
    </script>
@endsection