@extends('layouts.app')

@section('contenido')
    <style>
        /*responsive secction*/
        /*pc, laptop*/
        @media only screen and (min-width: 1280px) {
            .panel-body-custom {
                padding: 40px 120px;
            }
        }
        /*tablets*/
        @media only screen and (min-width: 960px) and (max-width: 1279px) {
        }
        /*tablets*/
        @media only screen and (min-width: 600px) and (max-width: 959px) {
            
        }
        /*celulares*/
        @media only screen and (max-width: 599px) {

        }

        .contenedor {
            max-width: 80rem;
            margin-left: auto;
            margin-right: auto;
        }
    </style>


    <div class="panel panel-default">
        <div class="panel-heading">
            <div class="row">
                <div class="col-md-2 col-sm-12">
                  <img alt="" src="{!! url('uploads/logos/logo_chopia.jpg') !!}" width="150" />
                </div>
                <div class="col-md-10 col-sm-12">
                    <h3>Solicitud de eliminación de cuenta</h3>
                </div>
            </div>


        </div>
        <div class="panel-body panel-body-custom">
        @if ($message = Session::get('success'))
            <div class="alert alert-success">
                <p>{{ $message }}</p>
            </div>
        @endif
        @if ($message = Session::get('error'))
            <div class="alert alert-danger">
                <p>{{ $message }}</p>
            </div>
        @endif
        @if ($errors->any())
            <div class="alert alert-danger">
                <strong>Oops!</strong> Hubo algunos problemas con tus datos.<br><br>
                <ul>
                    @foreach ($errors->all() as $error)
                        @switch($error)
                            @case('contraseña y confirm-password deben coincidir.')
                                <li>Error, la clave debe coincidir.</li>
                                @break
                            @case('confirm-password y contraseña deben coincidir.')
                                <li>Error, verificar clave debe coincidir.</li>
                                @break
                            @default
                                <li>{{ $error }}</li>
                        @endswitch
                    @endforeach
                </ul>
            </div>
        @endif
    
    <form class="contenedor" action="{{ route('accounts.solicitud.eliminacion') }}" method="POST" autocomplete="off">
        @csrf
        <div class="row">
            <h4 class="sub-title">Datos generales de la cuenta</h4>
            <hr class="espaciador">
            <div class="col-sm-12 col-md-12 col-xs-12">
                <div class="form-group">
                    <strong>Nombre de usuario* :</strong>
                    <input
                        type="text" 
                        name="nombre" 
                        value="{{ old('nombre') }}"
                        class="form-control {{ $errors->has('nombre') ? 'is-invalid' : '' }}" 
                        placeholder="Nombre de usuario"
                        minlength="3"
                        maxlength="250"
                    >
                </div>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-12">
                <div class="form-group">
                    <strong>Correo electrónico* :</strong>
                    <input  
                        type="text" 
                        name="email" value="{{ old('email') }}"
                        class="form-control {{ $errors->has('email') ? 'is-invalid' : '' }}" 
                        placeholder="Correo electrónico"
                        minlength="3"
                        maxlength="250"
                    >
                </div>
            </div>

            <div class="col-xs-12 col-sm-12 col-md-12">
                <div class="form-group">
                    <strong>Teléfono :</strong>
                    <input 
                        type="text" 
                        name="telefono" 
                        value="{{ old('telefono') }}" 
                        class="form-control {{ $errors->has('telefono') ? 'is-invalid' : '' }}" 
                        placeholder="Teléfono"
                        minlength="10"
                        maxlength="10"
                        data-mask="99-9999-9999"
                    >
                </div>
            </div>

            <div class="col-xs-12 col-sm-12 col-md-12">
                <div class="form-group">
                    <strong>Motivo de eliminación* :</strong>
                    <textarea 
                        rows="4"
                        name="motivo_eliminacion"
                        id="motivo_eliminacion"
                        class="form-control {{ $errors->has('motivo_eliminacion') ? 'is-invalid' : '' }}"
                        placeholder="Motivo de eliminación"
                        maxlength="400"
                    >{{old('motivo_eliminacion')}}</textarea>
                </div>
            </div>


            <div class="col-xs-12 col-sm-12 col-md-12">
                <div class="form-group">
                    <strong>Contraseña* :</strong>
                    <input  
                        type="password" 
                        name="password" 
                        value="" 
                        class="form-control {{ $errors->has('password') ? 'is-invalid' : '' }}" 
                        placeholder="Contraseña"
                        id="password-1"
                        minlength="3"
                        maxlength="250"
                    >
                    <div class="input-group-append">
                        <button type="button" class="btn btn-show show-password-1" data-target="#password-1">
                            <i class="fa fa-eye"></i>
                        </button>
                    </div>
                </div>
            </div>

            <div class="col-xs-12 col-sm-12 col-md-12">
                <div class="form-group">
                    <strong>Repite contraseña* :</strong>
                    <input                             
                        type="password" 
                        value="" 
                        name="confirm_password" 
                        id="password-2"
                        class="form-control {{ $errors->has('confirm_password') ? 'is-invalid' : '' }}"
                        placeholder="Repite contraseña"
                        minlength="3"
                        maxlength="250"                         
                    >
                    <div class="input-group-append">
                        <button type="button" class="btn btn-show show-password-2" data-target="#password-2">
                            <i class="fa fa-eye"></i>
                        </button>
                    </div>
                </div>
            </div>

            <div class="col-xs-12 col-sm-12 col-md-12">
                <div class="form-group">
                    <input 
                        style="transform: scale(1.5);"                            
                        type="checkbox"
                        name="confirmacion_eliminacion"
                    >
                    &nbsp;<label>Confirmar eliminación de cuenta</label>
                </div>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-12">
                <div class="form-group">
                    <input 
                        style="transform: scale(1.5);"                            
                        type="checkbox"
                        name="politicas_de_privacidad"
                    >
                    &nbsp;Aceptar <a href="{{ route('privacidad') }}" class="btn-link">Aviso politicas de privacidad</a>
                </div>
            </div>         

        </div>

        <br><br>

        <div class="text-center">
            <button class="btn btn-primary">
                Enviar solicitud
            </button>

        </div>

    </form>
  
        </div>

    </div>


@endsection