@extends('master')
@section('style')
    <link rel='stylesheet' href="{{mix('/assets/css/app.css')}}" type='text/css' media='all' />
    <link rel='stylesheet' href="{{config('app.cdn_files')}}/assets/plugins/sweetalert2/sweetalert2.min.css" type='text/css' media='all' />
    <link rel="stylesheet" href="{{mix('/assets/css/pages/dashboard.css')}}">
@endsection
@section('content')
<section class="main-title-section-wrapper default" style="">
    <div class="container">
        <div class="main-title-section">
            <h1>Mi Cuenta</h1>
        </div>
        <div class="breadcrumb"><a href="/">Inicio</a><span class="fa default"></span><span class="current">Mi Perfil</span></div>
        @include('partials.submenu')
    </div>
</section>
<!-- ** Container ** -->
    <main class="main">
        <div class="container account-container custom-account-container">
            <div class="row">
                <div class="sidebar widget widget-dashboard mb-lg-0 mb-3 col-lg-3 order-0">
                    <h2>Mi cuenta</h2>
                    <ul class="nav nav-tabs list flex-column mb-0" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active show" href="/micuenta/perfil">Datos personales</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="/micuenta/documentos">Mis documentos</a>
                        </li>
                        @if(!empty($user['CustomerID']))
                        <li class="nav-item">
                            <a class="nav-link" href="/micuenta/membresia">Mi Membresía</a>
                        </li>                        
                        <li class="nav-item">
                            <a class="nav-link" href="/micuenta/compras">Mis compras</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="/micuenta/cash">E-Cash</a>
                        </li>
                        @endif
                    </ul>
                    <div>
                        <img src="{{$customer->carnet}}" style="max-width: 200px; border: 1px solid #d9d9d9; margin-top: 20px">
                    </div>
                </div>
                <div class="col-lg-9 order-lg-last order-1 tab-content">
                    <!-- End .tab-pane -->
                    <div class="tab-pane fade active show" id="edit" role="tabpanel">
                        <h3 class="account-sub-title d-md-block mt-0 pt-1 ml-1"><i class="icon-user-2 align-middle mr-3 pr-1"></i>Datos personales</h3>
                        <div class="account-content">
                            <form action="#" method="post" onsubmit="saveUpdate(this); return false;">
                                <div class="row"> 
                                   <div class="col-md-4">
                                        <div class="form-group">
                                            <label>N° Registro</label>
                                            <input type="text" class="form-control" disabled value="{{$customer->afi_cod ?? ''}}">
                                        </div>
                                    </div>  
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label>Sede</label>
                                            <select @if(!empty($customer->sede)) disabled @endif name="sede" id="sede" class="dt-select-service" required>
                                                <option value="">Seleccionar</option>
                                                @if(!empty($campus))
                                                    @foreach($campus as $item)
                                                    <option value="{{$item->sed_id}}" data="{{$item->sed_pag}}">{{$item->sed_nom}}</option>  
                                                    @endforeach
                                                @endif                                                             
                                            </select>
                                        </div>
                                    </div>
                                   <div class="col-md-4">
                                        <div class="form-group">
                                            <label>DNI, CE ó PASAPORTE</label>
                                            <input type="text" class="form-control" disabled value="{{$customer->afi_dni ?? ''}}">
                                        </div>
                                    </div>                                   
                                </div>
                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label>Nombres</label>
                                            <input type="text" class="form-control" disabled value="{{$customer->afi_nom ?? ''}}">
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label>Apellido Paterno</label>
                                            <input type="text" class="form-control" disabled value="{{$customer->afi_pat ?? ''}}">
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label>Apellido Materno</label>
                                            <input type="text" class="form-control" disabled value="{{$customer->afi_mat ?? ''}}">
                                        </div>
                                    </div>                                      
                                </div>
                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label>Correo Electrónico</label>
                                            <input type="text" class="form-control" disabled class="form-control form-control-sm" value="{{ $customer->afi_ema ?? ''}}">
                                        </div>
                                    </div>                                     
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label>Sexo</label>
                                            <input type="text" class="form-control" disabled value="@if($customer->afi_sex == 'M') Masculino @else Femenino @endif">
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label>Fecha Nacimiento</label>
                                            <input type="date" class="form-control" id="nac" name="nac" value="{{date('Y-m-d', strtotime($customer->afi_nac)) ?? ''}}" disabled>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label>Celular</label>
                                            <input type="text" class="form-control" id="cel" name="cel" value="{{$customer->afi_cel}}" disabled>
                                        </div>
                                    </div>                                    
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label>Dirección</label>
                                            <input type="text" class="form-control" id="dir" name="dir" value="{{$customer->afi_dir ?? ''}}" disabled>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label>Departamento</label>
                                            <select name="dep" id="dep" class="dt-select-service" onchange="getUbigeo(this.value, 1, '#pro');" disabled>
                                                <option value="">Seleccionar</option>
                                                @if(!empty($departments))
                                                    @foreach($departments as $item)
                                                        <option value="{{$item->dep_cod}}">{{$item->dep_nom}}</option>  
                                                    @endforeach
                                                @endif
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label>Provincia </label>
                                            <select name="pro" id="pro" class="dt-select-service" onchange="getUbigeo(this.value, 2, '#dis');" disabled>
                                                <option value="">Seleccionar</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label>Distrito </label>
                                            <select name="dis" id="dis" class="dt-select-service" disabled>
                                                <option value="">Seleccionar</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label>Nivel Académico </label>
                                            <select name="aca" id="aca" class="dt-select-service" disabled>
                                                <option value="">Seleccionar</option>
                                                <option value="E">Estudiante</option>
                                                <option value="X">Egresado</option>
                                                <option value="B">Bachiller</option>
                                                <option value="P">Profesional</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-6" id="divuni">
                                        <div class="form-group">
                                            <label>Universidad </label>
                                            <select name="uni" id="uni" class="dt-select-service" disabled>
                                                <option value="">Seleccionar</option>
                                                @if(!empty($universities))
                                                    @foreach($universities as $item)
                                                        <option value="{{$item->uni_cod}}">{{$item->uni_nom}}</option>  
                                                    @endforeach
                                                @endif                                                               
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-6 d-none" id="divcol">
                                        <div class="form-group">
                                            <label>Colegio Profesional </label>
                                            <select name="col" id="col" class="dt-select-service" disabled>
                                                <option value="">Seleccionar</option>
                                                @if(!empty($schools))
                                                    @foreach($schools as $item)
                                                        <option value="{{$item->col_id}}">{{$item->col_nom}}</option>  
                                                    @endforeach
                                                @endif                                                            
                                            </select>
                                        </div>
                                    </div> 
                                </div>     
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label>Lugar de Trabajo</label>
                                            <input type="text" id="tra" value="{{$customer->afi_lug_tra}}" name="tra" class="form-control">
                                        </div>
                                    </div>
                                </div>                                 
                                <div class="change-password">
                                    <h3 class="mb-2">Cambiar contraseña</h3>
                                    <div class="row">
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label>Contraseña actual</label>
                                                <input type="password" class="form-control" id="upassword" name="upassword">
                                            </div>
                                        </div>            
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label>Nueva contraseña</label>
                                                <input type="password" class="form-control" id="unewpass" name="unewpass">
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label>Confirmar contraseña</label>
                                                <input type="password" class="form-control" id="uconfirmpass" name="uconfirmpass">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-12">
                                        <div id="message_update"></div>
                                    </div>
                                </div>    
                                <div class="form-footer mt-2 mb-0">
                                    <button type="submit" class="btn btn-dark mr-0">
                                    Guardar cambios
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                    <!-- End .tab-pane -->
                </div>
                <!-- End .tab-content -->
            </div>
            <!-- End .row -->
        </div>
    </main>
@endsection

@section('scripts')
    <script src="{{config('app.cdn_files')}}/assets/plugins/sweetalert2/sweetalert2.min.js"></script>
    <script src="{{mix('/assets/js/affiliate.js')}}"></script>
    <script type="text/javascript">
        jQuery(function ($) {
            $(document).ready(function() {
                document.getElementById('sede').value = @if(!empty($customer->sede)) {{$customer->sede}} @else '' @endif;
                document.getElementById('dep').value = @if(!empty($customer->dep_cod)) {{$customer->dep_cod}} @else 0 @endif;
                document.getElementById('aca').value = @if(!empty($customer->afi_aca)) '{{$customer->afi_aca}}' @else '' @endif;
                document.getElementById('uni').value = @if(!empty($customer->uni_cod)) {{$customer->uni_cod}} @else 0 @endif;
                document.getElementById('col').value = @if(!empty($customer->col_cod)) {{$customer->col_cod}} @else 0 @endif;
                if('{{$customer->afi_aca}}' == 'P'){
                    $("#divcol").removeClass("d-none");
                    $("#divuni").addClass("d-none");
                    $("#uni").val('');
                }else{
                    $("#divuni").removeClass("d-none");
                    $("#divcol").addClass("d-none");
                    $("#col").val('');
                }                
                loadUbigeo = async () => {
                    await getUbigeo ("{{$customer->dep_cod}}", 1, "#pro");
                    await getUbigeo ("{{$customer->pro_cod}}", 2, "#dis");
                    $('#pro').val("{{$customer->pro_cod}}");
                    $('#dis').val("{{$customer->dis_cod}}");
                };
                loadUbigeo();
            });
        });
    </script>    
@endsection