@extends('layouts.tramiteslayout')
@section('content')
    <div class="row">
        <div class="col-md-9 section-header">
            <h2>
                <span class="icon-i-documento-1"></span>Trámite: Cambio de nombre
            </h2>
            <p>Requisitos para la solicitud del cambio de nombre</p>
        </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>Realizar la contratación del servicio para uso doméstico es rápido y fácil. Solicítala aquí.</p>
        </div>
    </div>

    <div>
        <p>Adjunta los archivos necesarios para el trámite</p>
        {{-- Uso doméstico --}}
        <div class="box-desplegable">
            <h4 class="encabezado-box-desplegable bg-azul thisclose">
                <span class="icon-i-documento-1 ico-box-desplegable"></span>
                Requisitos para uso doméstico
            </h4>
            <div class="contenido-box-desplegable" style="display: none">
                <div class="espacio"></div>
                <div class="row">
                    <div class="col-md-6">
                        <p style="color: red;">Original y copia de:</p>
                        <p><span class="icon-i-ok txt-azul"></span> Escrituras notariadas, cesión de derechos notariada (con sello), orden de ocupación SEDUVI y/o título de propiedad (poder notarial en representación del propietario)</p>
                        <p><span class="icon-i-ok txt-azul"></span> Boleta de registro público de propiedad (en caso de que aplique)</p>
                        <p><span class="icon-i-ok txt-azul"></span> Impuesto predial o cédula catastral (clave catastral) actualizado</p>
                        <p><span class="icon-i-ok txt-azul"></span> Identificación oficial vigente del propietario (INE, licencia de manejo o pasaporte)</p>
                        <p><span class="icon-i-ok txt-azul"></span> Boleta de pago actual sin adeudo</p>
                        <p><span class="icon-i-ok txt-azul"></span> Carta Poder simple ratificado por dos testigos (en caso de representar al propietario)</p>
                        <p><span class="icon-i-ok txt-azul"></span> Carta de mutuo acuerdo en caso de copropiedad firmada por los interesados (en caso de que aplique)*Sólo en trámites para Playa del Carmen.</p>
                        <p><span class="icon-i-ok txt-azul"></span> Constancia de situación fiscal (sólo si aplica)</p>
                        <div class="espacio"></div>
                        <p class="folletos">
                            <a href="/folletos/cambio-nombre.pdf" target="_blank" class="btn btn-sm btn-primary">Más
                                información</a>
                        </p>


                    </div>

                    <div class="col-md-6">
                        <form method="POST" action="{{ route('tramite.procesar') }}" enctype="multipart/form-data">
                            @csrf
                            <input type="hidden" name="tramite" value="Cambio de nombre - Doméstico">

                            <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" required>
                                <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>
                            <div class="form-group">
                                <label for="municipio">Municipio</label>
                                <select class="form-control form-control-sm" name="municipio" id="municipio">
                                    <option value="Cancún">Cancún</option>
                                    <option value="Pto. Morelos">Pto. Morelos</option>
                                    <option value="Isla">Isla</option>
                                    <option value="Solidaridad">Solidaridad</option>
                                </select>
                            </div>
                            <p><b>Adjunta los siguientes archivos</b></p>
                            <p style="color: red;">* Todos los archivos deben ser adjuntados en formato PDF.</p>
                            <p style="color: red;">* Trámite con costo.</p>
                            <div class="mb-2">
                                <label for="escrituras" class="form-label">Escrituras Notariadas o Cesión de
                                    derechos notariado u orden de ocupación de SEDUVI y/o título de propiedad</label>
                                <input class="form-control form-control-sm control-file" type="file"
                                    accept="pdf, application/pdf" data-max-size="4096"
                                    id="escrituras" name="escrituras" required="required">
                                <small class="form-text text-muted">Poder notarial en representación del propietario</small>
                            </div>
                            <div class="mb-2">
                                <label for="boleta_registro">Boleta de registro público de propiedad</label><br>
                                <input type="file" accept="pdf, application/pdf"
                                    data-max-size="4096" class="form-control form-control-sm control-file" id="boleta_registro"
                                    name="boleta_registro" required="required">
                                <small class="form-text text-muted">* (en caso de que aplique)</small>
                            </div>

                            <div class="mb-2">
                                <label for="predial">Impuesto Predial o Cédula catastral</label><br>
                                <input type="file" accept="pdf, application/pdf"
                                    data-max-size="4096" class="form-control form-control-sm control-file" id="predial"
                                    name="predial" required="required">
                                <small class="form-text text-muted">Clave catastral sin adeudo</small>
                            </div>
                            <div class="mb-2">
                                <label for="identificacion">Identificación oficial vigente</label><br>
                                <input type="file" accept="pdf, application/pdf"
                                    data-max-size="4096" class="form-control form-control-sm control-file"
                                    id="identificacion" name="identificacion" required="required">
                                <small class="form-text text-muted">INE, Licencia de manejo o pasaporte</small>
                            </div>
                            <div class="mb-2">
                                <label for="boleta_pago">Boleta de pago actual sin adeudo</label><br>
                                <input type="file" accept="pdf, application/pdf"
                                    data-max-size="4096" class="form-control form-control-sm control-file" id="boleta_pago"
                                    name="boleta_pago" required="required">
                                <small class="form-text text-muted">Actualmente pagada</small>
                            </div>
                            <div class="mb-2">
                                <label for="carta_poder">Carta Poder simple ratificado por dos testigos</label><br>
                                <input type="file" accept="pdf, application/pdf"
                                    data-max-size="4096" class="form-control form-control-sm control-file" id="carta_poder"
                                    name="carta_poder">
                                <small class="form-text text-muted">* (en caso de representar al propietario)</small>
                            </div>
                            <div class="mb-2">
                                <label for="carta_mutuo">Carta de mutuo acuerdo en caso de copropiedad firmada por los interesados (en caso de que aplique).</label><br>
                                <input type="file" accept="pdf, application/pdf"
                                    data-max-size="4096" class="form-control form-control-sm control-file" id="carta_mutuo"
                                    name="carta_mutuo">
                                <small class="form-text text-muted">*Sólo en trámites para Playa del Carmen.</small>
                            </div>
                            <div class="mb-2">
                                <label for="carta_mutuo"> Constancia de situación fiscal.</label><br>
                                <input type="file" accept="pdf, application/pdf"
                                    data-max-size="4096" class="form-control form-control-sm control-file" id="carta_mutuo"
                                    name="carta_mutuo">
                                <small class="form-text text-muted">*(sólo si aplica)</small>
                            </div>
                            <br>
                            <button type="submit" class="btn btn-dark btn-sm">Enviar mis datos</button>
                        </form>
                    </div>

                </div>
            </div>
        </div>
        {{-- Uso comercial --}}
        <div class="box-desplegable">
            <h4 class="encabezado-box-desplegable bg-azul thisclose">
                <span class="icon-i-documento-1 ico-box-desplegable"></span>
                Requisitos para uso comercial
            </h4>
            <div class="contenido-box-desplegable" style="display: none">
                <div class="espacio"></div>
                <div class="row">
                    <div class="col-md-6">
                        <p style="color: red;">Original y copia de:</p>
                        <p><span class="icon-i-ok txt-azul"></span> Escrituras notariadas, cesión de derechos notariada o título de propiedad (poder notarial en representación del propietario)</p>
                        <p><span class="icon-i-ok txt-azul"></span> Boleta de registro público de propiedad (en caso de que aplique)</p>
                        <p><span class="icon-i-ok txt-azul"></span> Impuesto predial o cédula catastral (clave catastral) actualizado</p>
                        <p><span class="icon-i-ok txt-azul"></span> Identificación oficial vigente del propietario (INE, licencia de manejo o pasaporte)</p>
                        <p><span class="icon-i-ok txt-azul"></span> Constancia de situación fiscal (vigente)</p>
                        <p><span class="icon-i-ok txt-azul"></span> Boleta de pago actual sin adeudo</p>
                        <p><span class="icon-i-ok txt-azul"></span> Carta de mutuo acuerdo en caso de copropiedad firmada por los interesados (en caso de que aplique)*Sólo en trámites para Playa del Carmen</p>
                        <div class="espacio"></div>
                        <p class="folletos">
                            <a href="/folletos/cambio-nombre.pdf" target="_blank" class="btn btn-sm btn-primary">Más
                                información</a>
                        </p>
                    </div>

                    <div class="col-md-6">
                        <form method="POST" action="{{ route('tramite.procesar') }}" enctype="multipart/form-data">
                            @csrf
                            <input type="hidden" name="tramite" value="Cambio de nombre - Comercial">

                            <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'] : '' }}">
                            </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'] : '' }}">
                            </div>
                            <div class="form-group">
                                <label for="email">Cliente</label>
                                <input type="number" class="form-control form-control-sm" id="cliente" name="cliente" required>
                                <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'] : '' }}">
                            </div>
                            <div class="form-group">
                                <label for="municipio">Municipio</label>
                                <select class="form-control form-control-sm" name="municipio" id="municipio">
                                    <option value="Cancún">Cancún</option>
                                    <option value="Pto. Morelos">Pto. Morelos</option>
                                    <option value="Isla">Isla</option>
                                    <option value="Solidaridad">Solidaridad</option>
                                </select>
                            </div>
                            <p><b>Adjunta los siguientes archivos</b></p>
                            <p style="color: red;">* Todos los archivos deben ser adjuntados en formato PDF.</p>
                            <p style="color: red;">* Trámite con costo.</p>
                            <div class="mb-2">
                                <label for="escrituras" class="form-label">Escrituras Notariadas o Cesión de
                                    derechos notariado u orden de ocupación de SEDUVI y/o título de propiedad</label>
                                <input class="form-control form-control-sm control-file" type="file"
                                    accept="pdf, application/pdf" data-max-size="4096"
                                    id="escrituras" name="escrituras" required="required">
                                <small class="form-text text-muted">Poder notarial en representación del
                                    propietario</small>
                            </div>
                            <div class="mb-2">
                                <label for="boleta_registro">Boleta de registro público de propiedad</label><br>
                                <input type="file" accept="pdf, application/pdf"
                                    data-max-size="4096" class="form-control form-control-sm control-file" id="boleta_registro"
                                    name="boleta_registro" required="required">
                                <small class="form-text text-muted">* (en caso de que aplique)</small>
                            </div>

                            <div class="mb-2">
                                <label for="predial">Impuesto Predial o Cédula catastral</label><br>
                                <input type="file" accept="pdf, application/pdf"
                                    data-max-size="4096" class="form-control form-control-sm control-file" id="predial"
                                    name="predial" required="required">
                                <small class="form-text text-muted">Clave catastral sin adeudo</small>
                            </div>
                            <div class="mb-2">
                                <label for="identificacion">Identificación oficial vigente</label><br>
                                <input type="file" accept="pdf, application/pdf"
                                    data-max-size="4096" class="form-control form-control-sm control-file"
                                    id="identificacion" name="identificacion" required="required">
                                <small class="form-text text-muted">INE, Licencia de manejo o pasaporte</small>
                            </div>
                            <div class="mb-2">
                                <label for="carta_mutuo"> Constancia de situación fiscal</label><br>
                                <input type="file" accept="pdf, application/pdf"
                                    data-max-size="4096" class="form-control form-control-sm control-file" id="carta_mutuo"
                                    name="carta_mutuo">
                                <small class="form-text text-muted">*(sólo si aplica)</small>
                            </div>
                            <div class="mb-2">
                                <label for="boleta">Boleta de pago actual sin adeudo</label><br>
                                <input type="file" accept="pdf, application/pdf"
                                    data-max-size="4096" class="form-control form-control-sm control-file" id="boleta"
                                    name="boleta" required="required">
                                <small class="form-text text-muted">Actualmente pagada</small>
                            </div>
                            <div class="mb-2">
                                <label for="carta_mutuo">Carta de mutuo acuerdo en caso de copropiedad firmada por los interesados (en caso de que aplique).</label><br>
                                <input type="file" accept="pdf, application/pdf"
                                    data-max-size="4096" class="form-control form-control-sm control-file" id="carta_mutuo"
                                    name="carta_mutuo">
                                <small class="form-text text-muted">*Sólo en trámites para Playa del Carmen.</small>
                            </div>
                            <br>
                            <button type="submit" class="btn btn-dark btn-sm">Enviar mis datos</button>
                        </form>
                    </div>

                </div>
            </div>
        </div>
        {{-- Persona moral --}}
        <div class="box-desplegable">
            <h4 class="encabezado-box-desplegable bg-azul thisclose">
                <span class="icon-i-documento-1 ico-box-desplegable"></span>
                Requisitos para persona moral
            </h4>
            <div class="contenido-box-desplegable" style="display: none">
                <div class="espacio"></div>
                <div class="row">
                    <div class="col-md-6">
                        <p style="color: red;">Original y copia de3:</p>
                        <p><span class="icon-i-ok txt-azul"></span> Escrituras notariadas, cesión de derechos notariada o título de propiedad (poder notarial en representación del propietario)</p>
                        <p><span class="icon-i-ok txt-azul"></span> Boleta de registro público de propiedad (en caso de que aplique)</p>
                        <p><span class="icon-i-ok txt-azul"></span> Acta constitutiva de la empresa</p>
                        <p><span class="icon-i-ok txt-azul"></span> Poder notarial del representante legal</p>
                        <p><span class="icon-i-ok txt-azul"></span> Identificación oficial vigente del representante legal (INE, licencia de manejo o pasaporte)</p>
                        <p><span class="icon-i-ok txt-azul"></span> Constancia de situación fiscal (vigente)</p>
                        <p><span class="icon-i-ok txt-azul"></span> Boleta de pago actual sin adeudo</p>
                        <p><span class="icon-i-ok txt-azul"></span> Boleta de registro público de propiedad (en caso de que aplique)</p>
                        <div class="espacio"></div>
                        <p class="folletos">
                            <a href="/folletos/cambio-nombre.pdf" target="_blank" class="btn btn-sm btn-primary">Más
                                información</a>
                        </p>

                    </div>

                    <div class="col-md-6">
                        <form method="POST" action="{{ route('tramite.procesar') }}" enctype="multipart/form-data">
                            @csrf
                            <input type="hidden" name="tramite" value="Cambio de nombre - Persona Moral">

                            <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'] : '' }}">
                            </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'] : '' }}">
                            </div>
                            <div class="form-group">
                                <label for="email">Cliente</label>
                                <input type="number" class="form-control form-control-sm" id="cliente" name="cliente" required>
                                <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'] : '' }}">
                            </div>
                            <div class="form-group">
                                <label for="municipio">Municipio</label>
                                <select class="form-control form-control-sm" name="municipio" id="municipio">
                                    <option value="Cancún">Cancún</option>
                                    <option value="Pto. Morelos">Pto. Morelos</option>
                                    <option value="Isla">Isla</option>
                                    <option value="Solidaridad">Solidaridad</option>
                                </select>
                            </div>
                            <p><b>Adjunta los siguientes archivos</b></p>
                            <p style="color: red;">* Todos los archivos deben ser adjuntados en formato PDF.</p>
                            <p style="color: red;">* Trámite con costo.</p>
                            <div class="mb-2">
                                <label for="escrituras">Escrituras notariadas, cesión de derechos notariada o título de propiedad (poder notarial en representación del propietario)</label><br>
                                <input type="file" accept="pdf, application/pdf"
                                    data-max-size="4096" class="form-control form-control-sm control-file"
                                    id="escrituras" name="escrituras" required="required">
                                <small class="form-text text-muted"></small>
                            </div>
                            <div class="mb-2">
                                <label for="boleta_regsitro">Boleta de registro público de propiedad (en caso de que aplique)</label><br>
                                <input type="file" accept="pdf, application/pdf"
                                    data-max-size="4096" class="form-control form-control-sm control-file"
                                    id="boleta_regsitro" name="boleta_regsitro" required="required">
                                <small class="form-text text-muted"></small>
                            </div>                            
                            <div class="mb-2">
                                <label for="actaconstitutiva">Acta constitutiva de la empresa</label><br>
                                <input type="file" accept="pdf, application/pdf"
                                    data-max-size="4096" class="form-control form-control-sm control-file"
                                    id="actaconstitutiva" name="actaconstitutiva" required="required">
                                <small class="form-text text-muted">Subir pdf acta constitutiva</small>
                            </div>
                            <div class="mb-2">
                                <label for="podernotarial">Poder notarial del representante legal</label><br>
                                <input type="file" accept="pdf, application/pdf"
                                    data-max-size="4096" class="form-control form-control-sm control-file"
                                    id="podernotarial" name="podernotarial" required="required">
                                <small class="form-text text-muted">Adjuntar PDF del poder notarial</small>
                            </div>
                            <div class="mb-2">
                                <label for="identificacion">Identificación oficial vigente del representante legal</label><br>
                                <input type="file" accept="pdf, application/pdf"
                                    data-max-size="4096" class="form-control form-control-sm control-file"
                                    id="identificacion" name="identificacion" required="required">
                                <small class="form-text text-muted">INE, Licencia de manejo o pasaporte</small>
                            </div>
                            <div class="mb-2">
                                <label for="constancia">Constancia de situación fiscal</label><br>
                                <input type="file" accept="pdf, application/pdf"
                                    data-max-size="4096" class="form-control form-control-sm control-file" id="constancia"
                                    name="constancia">
                                <small class="form-text text-muted">*(sólo si aplica)</small>
                            </div>
                            <div class="mb-2">
                                <label for="boleta_pago">Boleta de pago actual sin adeudo</label><br>
                                <input type="file" accept="pdf, application/pdf"
                                    data-max-size="4096" class="form-control form-control-sm control-file" id="boleta_pago"
                                    name="boleta_pago" required="required">
                                <small class="form-text text-muted">Actualmente pagada</small>
                            </div>
                            <div class="mb-2">
                                <label for="boleta_registro">Boleta de registro público de propiedad</label><br>
                                <input type="file" accept="pdf, application/pdf"
                                    data-max-size="4096" class="form-control form-control-sm control-file" id="boleta_registro"
                                    name="boleta_registro" required="required">
                                <small class="form-text text-muted">*(en caso de que aplique)</small>
                            </div>
                            <button type="submit" class="btn btn-dark btn-sm">Enviar mis datos</button>
                        </form>
                    </div>

                </div>
            </div>
        </div>
    </div>
@endsection
@section('alertas')
    @if (session()->has('error'))
        <div class="floatMessageContainer" style="background: red; color: white">
            <div class="floatMessageText">
                <p>
                    {{ session()->get('error') }}
                </p>
            </div>
        </div>
    @endif
    @if (session()->has('archivos'))
        <div class="floatMessageContainer" style="background: red; color: white">
            <div class="floatMessageText">
                <p>Los siguientes archivos exceden el tamaño permitido</p>
                <ul>
                    @foreach (session()->get('archivos') as $archivo => $content)
                        <li>{{ $archivo }}</li>
                    @endforeach
                </ul>
            </div>
        </div>
    @endif
@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