@extends('layouts.theme_selector')

@section('content')
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-md-8">
        <div class="card {{ session('theme_card') }}">

          <div class="card-header">Perfil del Usuario</div>

          <div class="card-body {{ session('theme_bg_black') }}">

            <form class="form" action="{{ route('UpdateUser') }}" method="post">
              @csrf

              <div class="row">
                <p>Datos básicos de tu perfil</p>
                <div class="col-sm-6">
                  <div class="input-group mb-3">
                    <span class="input-group-text {{session('theme_bg_dark')}}" id="user_nombre">Usuario:</span>
                    <input name="user_nombre" type="text" class="form-control {{session('theme_bg_black')}}" placeholder="Nombre" value="{{old('user_nombre') ?? $user->name}}" aria-label="Nombre" aria-describedby="user_nombre">
                  </div>
                  <div class="input-group mb-3">
                    <span class="input-group-text {{session('theme_bg_dark')}}" id="user_email">Email:</span>
                    <input name="user_email" type="text" class="form-control {{session('theme_bg_black')}}" placeholder="Email" value="{{old('user_email') ?? $user->email}}" aria-label="Email" aria-describedby="user_email">
                  </div>
                  <div class="input-group mb-3">
                    <span class="input-group-text {{session('theme_bg_dark')}}" id="user_birth_date">Cumpleaños:</span>
                    <input name="user_birth_date" type="date" class="form-control {{session('theme_bg_black')}}" placeholder="Fecha"
                        value="@if($user->birth_date != null){{$user->birth_date->format('Y-m-d')}}@endif" aria-label="Nacimiento" aria-describedby="user_birth_date">
                  </div>
                </div>
              </div>

              <hr>

              <div class="row">
                <p>Preferencias</p>
                <div class="col-sm-6">
                  <div class="input-group mb-3">
                    <span class="input-group-text {{session('theme_bg_dark')}}" id="theme">Tema:</span>
                    <select class="custom-select {{session('theme_bg_black')}}" name="theme">
                      <option value="default" @if(auth()->user()->theme == null or auth()->user()->theme == 'default') selected @endif>Básico (Defecto)</option>
                      <option value="dark"    @if(auth()->user()->theme == 'dark') selected @endif>Oscuro</option>
                    </select>
                  </div>
                </div>
              </div>

              <hr>

              <div class="row justify-content-around text-center border {{session('theme') == 'dark' ? 'border-warning' : 'border-primary'}} p-2 mx-1">
                <p>OPCIONAL. Si desea cambiar/actualizar su contraseña coloque una nueva.</p>
                <div class="col-sm-8">
                  <div class="input-group mb-3">
                    <span class="input-group-text {{session('theme_bg_dark')}}" id="user_password">Contraseña:</span>
                    <input name="user_password" type="password" class="form-control {{session('theme_bg_black')}}" placeholder="Contraseña nueva" value="" aria-label="Contraseña nueva" aria-describedby="user_password">
                  </div>
                  <div class="input-group mb-3">
                    <span class="input-group-text {{session('theme_bg_dark')}}" id="user_password_confirmation">Confirmacion:</span>
                    <input name="user_password_confirmation" type="password" class="form-control {{session('theme_bg_black')}}" placeholder="Confirme la nueva contraseña" value="" aria-label="Confirme la nueva contraseña" aria-describedby="user_password_confirmation">
                  </div>
                </div>
              </div>

              <hr>

              <br>

              <div class="row text-center">
                <div class="col">
                  <button type="submit" class="btn btn-outline-success">Actualizar</button>
                </div>
              </div>

            </form>

            @include('layouts.alerts.error')

            @include('layouts.alerts.success')

          </div>

        </div>
      </div>
    </div>
  </div>
@endsection