@extends('layouts.app')
@section('title', 'ISIPP')

@section('css')
<style>
    .contador {
        margin-top: 10px;
        font-weight: bold;
    }
</style>
@endsection

@section('content')
<section id="recent-blog-posts" class="recent-blog-posts section">
    <div class="container section-title" data-aos="fade-up">
        <h2 style="color: #e43d30;">Área de Soporte Académico</h2>
        <p class="text-justify">En nuestra Área de Soporte Académico, te ofrecemos asistencia personalizada para resolver cualquier dificultad que puedas enfrentar. Ya sea que necesites ayuda con el acceso a tus credenciales, la descarga de tu diplomado o cualquier otra consulta relacionada con nuestros programas, nuestro equipo está aquí para ayudarte. No dudes en registrarte y describir tu situación; trabajaremos contigo para garantizar que tengas la mejor experiencia educativa posible.</p>
    </div>
    <div class="container">
        <div class="form-group">
            <label class="form-label">Buscar cliente</label>
            <div class="input-group">
                <div class="input-group-prepend">
                    <select v-model="cbotipo" class="form-control" @change="cambiar()">
                        <option value="DNI">DNI</option>
                        <option value="RUC">RUC</option>
                    </select>
                </div>
                <input type="text" class="form-control" id="txtdoc" v-model="txtdoc" autocomplete="off">
                <div class="input-group-append">
                    <button class="btn btn-primary" @click="buscarcliente()" title="Agregar Cliente"><i class="fas fa-search"></i> Buscar
                    </button>
                </div>
            </div>
        </div><br>
        <h5 class="my-2 p-2" style="background-color: #e43d30;color: white;text-align: center;">Información Personal</h5>
        <div class="row">
            <div class="col-md-6">
                <div class="form-group">
                    <label class="form-label">@{{cbotipo}}</label>
                    <input type="text" class="form-control" v-model="txtdocu" disabled>
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group">
                    <label class="form-label">@{{nombre}}</label>
                    <input type="text" class="form-control" v-model="txtnom" disabled>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="form-group">
                    <label class="form-label">Correo</label>
                    <input type="text" class="form-control" v-model="txtcor" disabled>
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group">
                    <label class="form-label">Celular</label>
                    <input type="text" class="form-control" v-model="txtcel" disabled>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="form-label">Dirección</label>
            <input type="text" class="form-control" v-model="txtdir" disabled>
        </div>
        <h5 class="my-3 p-2" style="background-color: #e43d30;color: white;text-align: center;">Incidencia</h5>
        <div class="form-group">
            <label class="form-label">Descripción</label>
            <textarea v-model="txtdesc" @input="checkLength" class="form-control" maxlength="1000" placeholder="Escribe aquí..." rows="5"></textarea>
            <div class="contador">Caracteres usados: @{{txtdesc.length }}/@{{cant}} </div>
        </div>
        <br>
        <div class="d-grid gap-2">
            <button class="btn btn-success" v-if="existe=='siexiste'" @click="guardarqueja()">Registrar</button>
        </div>
    </div>
</section>
@endsection

@section('script')
@vite(['resources/js/header.js'])
@vite(['resources/js/footer.js'])
@vite(['resources/js/soporte.js'])
@endsection