@extends('layouts.tramiteslayout')
@section('content')
    <div class="row align-items-center">

        <div class="col-md-9 section-header">
            <h2>
                Aforo
            </h2>

        </div>
        <div class="col-md-3 d-flex align-items-center justify-content-center">
            <p class="text-center">
                <a class="btn btn-sm btn-secondary" href="{{ route('tramites') }}">
                    <span class="icon-i-flecha"></span>
                    Regresar
                </a>
            </p>
        </div>
    </div>
    <div class="row">
        <div class="col-md-auto">
            <p>
                Si tienes dudas sobre el funcionamiento de tu aparato medidor, puedes organizar una cita con el personal de
                fontanería
                para su revisión.
            </p>

            <ul>
                <li>Una vez programado su Aforo no hay cancelación. Estoy de acuerdo con el cargo de $369.09 (costo sujeto a tarifas vijetes) y me comprometo
                    a estar presente en la hora y fecha programada.</li>
                <li>La fecha estimada es tentativa, el horario debe ser ente 8:00 a 16:00 de Lunes a Viernes (no incluye
                    festivos). </li>
                <li>La cita debe ser en horario de servicio.</li>
                <li>El 99% de los casos arrojan que el cliente presenta fugas internas, te invitamos a realizar la inspección conforme el instructivo adjunto.</li>
            </ul>

        </div>
    </div>
    <div class="espacio"></div>
    <div class="row">
        <div class="col-md-6">
            <h5 class="txt-azul">Información del cliente</h5>
            <p><b>Cliente:</b> {{ $info[0]->vCLIENTE }}</p>
            <!--p><b>Dirección: </b> {{ $info[0]->vDIRECCION }}</p-->
            <p><b>NIA</b> {{ $info[0]->VNIA }}</p>
            <p><b>Próximo vencimiento</b> {{ $info[0]->vigencia }}</p>
            <div class="espacio"></div>
            <p class="folletos">
                <a href="/folletos/instructivo.pdf" target="_blank" class="btn btn-sm btn-secondary" download>Descargar información</a>

            </p>
        </div>
        <div class="col-md-6">
            <form action="{{ route('tramite.procesar') }}" method="POST" name="aforo" enctype="multipart/form-data">
                @csrf
                @method('post')
                <p><b>Datos de contacto</b></p>

                <div class="form-group">
                    <label for="nombre">Nombre completo:</label>
                    <input type="text" class="form-control form-control-sm" id="nombre" name="nombre"
                        required="required"
                        value="{{ session()->exists('userdata') ? session()->get('userdata')['nombre'] . ' ' . session()->get('userdata')['apellido'] : '' }}">
                    <small class="form-text" style="color:red">{{ $errors->first('nombre') }}</small>
                </div>
                <div class="form-group">
                    <label for="email">Correo electrónico</label>
                    <input type="email" class="form-control form-control-sm" id="email" name="email"
                        value="{{ session()->exists('userdata') ? session()->get('userdata')['correo'] : '' }}">
                    <small class="form-text" style="color:red">{{ $errors->first('email') }}</small>
                </div>
                <div class="form-group">
                    <label for="email">Cliente</label>
                    <input type="number" class="form-control form-control-sm" id="cliente" name="cliente" value="{{$info[0]->vCLIENTE}}" disabled>
                    <small class="form-text" style="color:red">{{ $errors->first('cliente') }}</small>
                </div>
                <div class="form-group">
                    <label for="telefono">Teléfono de contacto</label>
                    <input type="tel" class="form-control form-control-sm" id="telefono" name="telefono"
                        value="{{ session()->exists('userdata') ? session()->get('userdata')['telefono'] : '' }}">
                    <small class="form-text" style="color:red">{{ $errors->first('telefono') }}</small>
                </div>
                <input type="hidden" name="tramite" value="Aforo">
                <div class="form-group">
                    <label for="municipio">Municipio</label>
                    <select class="form-control form-control-sm" name="municipio" id="municipio">
                        <option value="{{ $info[0]->vCENOPR }}" selected>{{ $info[0]->vCENOPR }}</option>
                    </select>
                </div>
                <div class="mb-2">
                    <label for="identificacion">Identificación oficial vigente</label><br>
                    <input type="file" accept="pdf, application/pdf"
                        class="form-control form-control-sm control-file" id="identificacion" name="identificacion"
                        required="required">
                    <small class="form-text text-muted">Subir pdf folio</small>
                </div>
                <input type="hidden" name="cliente" value="{{ $info[0]->vCLIENTE }}">


                <button type="submit" class="btn btn-dark btn-sm">Enviar mis datos</button>

            </form>
        </div>
        <p style="text-align: center;">
            ARTICULO 103.-Si después de efectuarse la revisión, se comprueba el correcto funcionamiento del medidor, así
            como que la denuncia se apoyó en meras suposiciones o se procedió en forma maliciosa al efectuarse el aviso de
            compostura, el usuario queda obligado a cubrir una cantidad para retribuir los gastos erogados.
        </p>

    </div>
@endsection
@push('scripts')
    <script src="{{ asset('js/max_size_validator.js') }}"></script>
    <script>
        const form = document.querySelector("form");
        form.addEventListener('submit', () => {
            $(".spinner-box").fadeIn(1000);
        })
    </script>
@endpush