@extends('layouts.dashboard')
@section('css')
    <link href="{{ asset('css/receptores/create.css') }}" rel="stylesheet">
@endsection

@section('js')
    <script src="{{ asset('js/vilidationRules.js?version='.version_js()) }}"></script>
    <script src="{{ asset('js/miCuenta/main.js?version='.version_js()) }}"></script>
@endsection

@section('content')

    <div class="app-page-title d-xs-none">
        <div class="page-title-wrapper">
            <div class="col-sm-12">
                <div class="page-header float-right">
                    <nav class="" aria-label=" breadcrumb">
                        <ol class="breadcrumb text-right">
                            <li class="breadcrumb-item"><a href="{{ route('home') }}">Inicio</a></li>
                            <li class="active breadcrumb-item" aria-current="page">{{ $email }}</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </div>

    @if (session('message'))
        <div class="alert alert-success alert-dismissable col-lg-4 col-md-12"
            style="text-align: center;margin: auto;margin-bottom: 1rem;">
            <button type="button" class="close" data-dismiss="alert">&times;</button>
            <strong>{{ session('message') }}</strong>
        </div>
    @endif

    @if (session('error'))
        <div class="alert alert-danger alert-dismissable col-lg-4 col-md-12"
            style="text-align: center;margin: auto;margin-bottom: 1rem;">
            <button type="button" class="close" data-dismiss="alert">&times;</button>
            <strong>{{ session('error') }}</strong>
        </div>
    @endif

    <div class="animated fadeIn d-flex justify-content-center mt-5">
        <form class="col-md-7" action="{{ url('/miCuenta') }}" method="POST" autocomplete="off">
            @csrf

            <div class="card">
                <div class="card-header">Información de mi cuenta</div>
                <div class="card-body card-block">
                    <div class="row form-group">
                        <div class="col col-md-3">
                            <label for="txt_nombre" class=" form-control-label">Nombre : <span class="color-red "
                                    style="color: red;">*</span>
                            </label>
                        </div>

                        <div class="col-12 col-md-9">
                            <input type="text" id="txt_nombre" name="txt_nombre" placeholder="p. ej.: Carlos Alberto"
                                class="form-control" required="" value="{{ $nombre }}">
                        </div>
                    </div>

                    <div class="row form-group">
                        <div class="col col-md-3"><label for="txt_apat" class=" form-control-label">Apellido paterno :
                            </label></div>
                        <div class="col-12 col-md-9">
                            <input type="text" id="txt_apat" name="txt_apat" placeholder="p. ej.: Bartolano"
                                class="form-control" value="{{ $apat }}">
                        </div>
                    </div>

                    <div class="row form-group">
                        <div class="col col-md-3"><label for="txt_amat" class=" form-control-label">Apellido
                                materno : </label></div>
                        <div class="col-12 col-md-9"><input type="text" id="txt_amat" name="txt_amat"
                                placeholder="p. ej.: Robles" class="form-control" value="{{ $amat }}">
                        </div>
                    </div>

                    <div class="row form-group">
                        <div class="col col-md-3"><label for="text-input" class=" form-control-label">E-mail :
                            </label></div>
                        <div class="col-12 col-md-9">
                            <input id="txt_email" name="txt_email" placeholder="Ingrese su correo electrónico"
                                class="form-control input-mask-trigger" data-inputmask="'alias': 'email'" im-insert="true"
                                value="{{ $email }}"
                                pattern="[a-zA-Z0-9_]+([.][a-zA-Z0-9_]+)*@[a-zA-Z0-9_]+([.][a-zA-Z0-9_]+)*[.][a-zA-Z]{1,5}" readonly>

                            <small class="form-text text-muted"></small>
                        </div>
                    </div>
                    <div class="row form-group">
                        <div class="col col-md-3"><label for="text-input" class=" form-control-label">Teléfono de
                                contacto :</label></div>
                        <div class="col-12 col-md-9"><input type="text" id="txt_telefono" name="txt_telefono"
                                placeholder="p. ej.: 9512345670" class="form-control" minlength="10" maxlength="10"
                                value="{{ $telefono }}"><small class="form-text text-muted"></small>
                        </div>
                    </div>

                    <div class="row form-group">
                        <div class="col col-md-11 d-flex justify-content-end"><label for="text-input"
                                class=" form-control-label">Cambiar
                                contraseña</label></div>
                        <div class="col-12 col-md-1 d-flex justify-content-end">
                            <input class="input-control" type="checkbox" id="cbx_contrasenia" name="cbx_contrasenia"
                                onchange="change_password(this);">
                        </div>
                    </div>



                    <div class="col-md-6 mx-auto" id="content-password" style="display: none;">
                        <div class="row align-items-start mb-2">
                            <div class="col-sm-6">
                                <label for="exampleFormControlInput1" class="form-label">Contraseña actual :<span
                                        class="color-red " style="color: red;">*</span></label>
                            </div>
                            <div class="col">
                                <input name="password_actual" id="password_actual" type="password" class="form-control"
                                    id="contrasenia-actual">
                            </div>
                        </div>

                        <div class="row align-items-start mb-2">
                            <div class="col-sm-6">
                                <label for="passwod" class="form-label">Nueva contraseña :<span class="color-red "
                                        style="color: red;">*</span></label>
                            </div>
                            <div class="col">
                                <input name="password" type="password" class="form-control" id="password"
                                    minlength="8" maxlength="20" data-toggle="tooltip" data-html="true"
                                    data-placement="right" title="">
                                @if ($errors->any())
                                    <div class="alert alert-danger">
                                        <ul style="width: 100%;padding: 0px;">
                                            @foreach ($errors->all() as $error)
                                                <li>{{ $error }}</li>
                                            @endforeach
                                        </ul>
                                    </div>
                                @endif
                                <span class="claimedRight" id="counter" maxlength="20"
                                    style="float: inline-end;font-size: 12px;color: #868686;"></span>
                            </div>
                        </div>
                        <div class="mb-2 pl-4" id="messagePassword"
                            style="color: red; text-align: initial; font-size: 12px; font-family: 'Open Sans', sans-serif;">
                        </div>

                        <div class="row align-items-start mb-2">
                            <div class="col-sm-6">
                                <label for="password2" class="form-label">Confirmar contraseña :<span class="color-red "
                                        style="color: red;">*</span></label>
                            </div>
                            <div class="col">
                                <input name="password_confirm" type="password" class="form-control"
                                    id="password-confirm" minlength="8" maxlength="20">
                            </div>
                        </div>
                        <div class="mb-2 pl-4" id="messagePassword2"
                            style="color: red;  font-size: 12px; font-family: 'Open Sans', sans-serif;">
                        </div>


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

        <div class="col-md-12 d-flex justify-content-center">
            @can('micuenta.edit')
            <button id="sendPassword-1" name="sendPass" type="button" onclick="valida_form();" class="btn btn-lg buttom_agregar">
                        <i class="fa fa-lock fa-save"></i>&nbsp;
                        <span>Actualizar</span>
                    </button>
                @endcan
                &nbsp;
                &nbsp;
                <button id="cancel-button" type="button" class="btn btn-lg buttom_white"
                    onclick="window.location='{{ route('home') }}'">
                    <span>&nbsp;&nbsp;&nbsp;Cancelar&nbsp;&nbsp;&nbsp;</span>
                </button>
            </div>
        </form>
    </div>

@endsection