@extends('layouts.master')
@section('title') Inicio @endsection
@section('content')
<!-- this is breadcrumbs -->
@component('components.breadcrumb')
@slot('li_1') Inicio @endslot
@slot('li_2') Panel Academico @endslot
@slot('title') Periodos @endslot
@endcomponent

<!-- start page content -->
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body mb-n3">
                
                <div class="row">
                    <div class="col-lg-8 mx-auto">

                        <div class="card shadow-sm">
                            <div class="card-body">

                                <!-- PERFIL SUPERIOR -->
                                <div class="text-center mb-4">

                                    <div class="mb-3">
                                        @if($user->img)
                                            <img src="{{ asset('storage/'.$user->img) }}" 
                                                class="rounded-circle" width="120" height="120">
                                        @else
                                            <div class="rounded-circle bg-primary text-white d-inline-flex align-items-center justify-content-center"
                                                style="width:120px;height:120px;font-size:40px;">
                                                {{ strtoupper(substr($user->nombre_completo,0,1)) }}
                                            </div>
                                        @endif
                                    </div>

                                    <h4 class="fw-bold">{{ $user->nombre_completo }}</h4>

                                    <div class="mb-2">
                                        @foreach($user->roles as $rol)
                                            <span class="badge bg-info text-dark">{{ $rol->nombre }}</span>
                                        @endforeach
                                    </div>

                                    @if($user->areas && $user->areas->count())
                                        <div>
                                            @foreach($user->areas as $area)
                                                <span class="badge bg-secondary">
                                                    {{ $area->nombre }}
                                                </span>
                                            @endforeach
                                        </div>
                                    @endif

                                </div>

                                <!-- TABS -->
                                <ul class="nav nav-tabs mb-3">
                                    <li class="nav-item">
                                        <a class="nav-link active" data-bs-toggle="tab" href="#datos">Datos Personales</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" data-bs-toggle="tab" href="#clave">Cambiar Contraseña</a>
                                    </li>
                                </ul>

                                <div class="tab-content">

                                    <!-- ===================== -->
                                    <!-- DATOS PERSONALES -->
                                    <!-- ===================== -->
                                    <div class="tab-pane fade show active" id="datos">

                                        <form id="formDatos">
                                            @csrf

                                            <div class="row">

                                                <div class="col-md-6 mb-3">
                                                    <label>Nombre</label>
                                                    <input type="text" name="nombre"
                                                        value="{{ $user->administrador->nombre ?? $user->docente->nombre ?? $user->estudiante->nombres ?? '' }}"
                                                        class="form-control" required>
                                                </div>

                                                <div class="col-md-6 mb-3">
                                                    <label>Apellido</label>
                                                    <input type="text" name="apellido"
                                                        value="{{ $user->administrador->apellido ?? $user->docente->apellido ?? $user->estudiante->apellidos ?? '' }}"
                                                        class="form-control" required>
                                                </div>

                                                <div class="col-md-6 mb-3">
                                                    <label>Teléfono</label>
                                                    <input type="text" name="telefono"
                                                        value="{{ $user->administrador->telefono ?? $user->docente->telefono ?? $user->estudiante->telefono ?? '' }}"
                                                        class="form-control">
                                                </div>

                                                <div class="col-md-6 mb-3">
                                                    <label>Dirección</label>
                                                    <input type="text" name="direccion"
                                                        value="{{ $user->administrador->direccion ?? $user->docente->direccion ?? $user->estudiante->direccion ?? '' }}"
                                                        class="form-control">
                                                </div>

                                            </div>

                                            <div class="text-end">
                                                <button type="submit" class="btn btn-primary">
                                                    Actualizar Datos
                                                </button>
                                            </div>

                                        </form>

                                    </div>

                                    <!-- ===================== -->
                                    <!-- CAMBIAR CONTRASEÑA -->
                                    <!-- ===================== -->
                                    <div class="tab-pane fade" id="clave">

                                        <form id="formClave">
                                            @csrf

                                            <div class="mb-3">
                                                <label>Contraseña actual</label>
                                                <input type="password" name="password_actual" class="form-control" required>
                                            </div>

                                            <div class="mb-3">
                                                <label>Nueva contraseña</label>
                                                <input type="password" name="password" class="form-control" required>
                                            </div>

                                            <div class="mb-3">
                                                <label>Confirmar nueva contraseña</label>
                                                <input type="password" name="password_confirmation" class="form-control" required>
                                            </div>

                                            <div class="text-end">
                                                <button type="submit" class="btn btn-dark">
                                                    Cambiar Contraseña
                                                </button>
                                            </div>

                                        </form>

                                    </div>

                                </div>

                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <!--end card-body-->
        </div>
        <!--end card-->
    </div>
    <!--end col-->
</div>









<!--end row-->


@endsection
@section('script')
<!-- jQuery y DataTables -->

<!-- jQuery y DataTables -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>

<!-- DataTables Buttons -->
<script src="https://cdn.datatables.net/buttons/2.3.6/js/dataTables.buttons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.print.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.colVis.min.js"></script>

<!-- DataTables CSS -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.3.6/css/buttons.dataTables.min.css">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>

document.getElementById('formDatos').addEventListener('submit', function(e) {
    e.preventDefault();

    fetch("{{ route('mi.cuenta.actualizar') }}", {
        method: "POST",
        headers: {
            "X-CSRF-TOKEN": "{{ csrf_token() }}"
        },
        body: new FormData(this)
    })
    .then(res => res.json())
    .then(data => {
        if(data.status){
            Swal.fire({
                icon: 'success',
                title: 'Correcto',
                text: data.message
            });
        } else {
            Swal.fire('Error', data.message, 'error');
        }
    });
});


document.getElementById('formClave').addEventListener('submit', function(e) {
    e.preventDefault();

    fetch("{{ route('mi.cuenta.cambiar.clave') }}", {
        method: "POST",
        headers: {
            "X-CSRF-TOKEN": "{{ csrf_token() }}"
        },
        body: new FormData(this)
    })
    .then(res => res.json())
    .then(data => {
        if(data.status){
            Swal.fire({
                icon: 'success',
                title: 'Actualizado',
                text: data.message
            });
            document.getElementById('formClave').reset();
        } else {
            Swal.fire('Error', data.message, 'error');
        }
    });
});

</script>

@endsection