@extends('master')
@section('styles')
<style>
  /* Solo afecta a las imágenes dentro del bloque Expediente */
  .expediente-section .doc-img {
    width: 200px;
    height: 130px;
    object-fit: cover;
    border-radius: 15px;
    border: 2px solid #eee;
    transition: transform 0.2s ease;
  }

  .expediente-section .doc-img:hover {
    transform: scale(1.05);
  }

  /* Solo afecta a los fv-row dentro del bloque de Expediente */
  .expediente-section .fv-row {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .expediente-section .fv-row label.fs-6 {
    margin-bottom: 10px;
  }
</style>
@endsection
@section('content')
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA95BKEwCCowDR5prODT4esukzD2yWGG04"></script>
<!--begin::Content wrapper-->
<div class="d-flex flex-column flex-column-fluid">
    <!--end::Toolbar-->
    <!--begin::Content-->
    <div id="kt_app_content" class="app-content flex-column-fluid">
        <div class="app-container container-fluid">
            <form name="listado" id="listado" class="form" method="POST" enctype="multipart/form-data" autocomplete="off">
                <div class="card mb-2 mb-xl-10 ">
                    <div class="card-header py-1" style="background-color:#00B041;">
                        <div class="card-title" >
                            <h3>Seguimiento a Solicitud Ciudadana</h3><br>
                        </div>
                    </div>
                    <div class="card-body pt-0 pb-0 my-2">
                        <div class="mb-13 mt-8">
                            <div class="col-md-12 row mt-4 fv-row">
                                <div class="col-md-4 fv-row mt-4">
                                    <label class="fs-6 fw-semibold mb-2"><span>Nombre:</span></label>
                                    <select class="form-control py-2" name="nombre" id="nombre">
                                    </select>
                                </div>
                                <div class="col-md-4 fv-row mt-4">
                                    <label class="fs-6 fw-semibold mb-2"><span>Fecha Inicial:</span></label>
                                    <input type="date" name="fechaini" id="fechaini" class="form-control py-2" autocomplete="off">
                                </div>
                                <div class="col-md-4 fv-row mt-4">
                                    <label class="fs-6 fw-semibold mb-2"><span>Fecha Final:</span></label>
                                    <input type="date" name="fechafin" id="fechafin" class="form-control py-2" autocomplete="off">
                                </div>
                            </div>

                            <div class="col-md-12 row mt-4 fv-row">
                                <div class="col-md-4 fv-row mt-4">
                                    <label class="fs-6 fw-semibold mb-2"><span>Responsable:</span></label>
                                    <select class="form-control py-2" name="responsable" id="responsable">
                                        <option value="">-- Seleccione --</option>
                                        @foreach($responsables as $resp)
                                            <option value="{{ $resp->responsable }}">{{ $resp->responsable }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-4 fv-row mt-4">
                                    <label class="fs-6 fw-semibold mb-2"><span>Origen:</span></label>
                                    <select class="form-control py-2" name="origen" id="origen">
                                        <option value="">-- Seleccione --</option>
                                        @foreach($origenes as $origen)
                                            <option value="{{ $origen->id }}">{{ $origen->origen }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-4 fv-row mt-4">
                                    <label class="fs-6 fw-semibold mb-2"><span>Categoria:</span></label>
                                    <select class="form-control py-2" name="categoria" id="categoria">
                                        <option value="">-- Seleccione --</option>
                                        @foreach($categorias as $categoria)
                                            <option value="{{ $categoria->categoria }}">{{ $categoria->categoria }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <div class="col-md-12 row mt-4 fv-row">
                                <div class="col-md-3 fv-row mt-3">
                                    <label class="fs-6 fw-semibold mb-2"><span>Evento:</span></label>
                                    <input type="text" name="evento" id="evento" class="form-control py-2" autocomplete="off">
                                </div>
                                <div class="col-md-3 fv-row mt-3">
                                    <label class="fs-6 fw-semibold mb-2"><span>Folio único:</span></label>
                                    <input type="text" name="folio_unico" id="folio_unico" class="form-control py-2" autocomplete="off">
                                </div>
                                <div class="col-md-3 fv-row mt-3">
                                    <label class="fs-6 fw-semibold mb-2"><span>Folio gestión:</span></label>
                                    <input type="text" name="folio_gestion" id="folio_gestion" class="form-control py-2" autocomplete="off">
                                </div>
                                <div class="col-md-3 fv-row mt-3">
                                    <label class="fs-6 fw-semibold mb-2"><span>Teléfono móvil:</span></label>
                                    <input type="text" name="telefono_movil" id="telefono_movil" class="form-control py-2" autocomplete="off">
                                </div>
                            </div>
                            <div class="col-md-12 row mt-4 fv-row">
                                <div class="col-md-3 fv-row mt-3">
                                    <label class="fs-6 fw-semibold mb-2"><span>Estatus:</span></label><br>
                                    <input type="checkbox" id="estatus1" name="estatus[]" value="Propuesta Obra Servicio">
                                    <label for="estatus1">Propuesta Obra | Servicio</label><br>

                                    <input type="checkbox" id="estatus2" name="estatus[]" value="En trámite">
                                    <label for="estatus2">En trámite</label><br>

                                    <input type="checkbox" id="estatus3" name="estatus[]" value="Lista de Espera">
                                    <label for="estatus3">Lista de Espera</label><br>

                                    <input type="checkbox" id="estatus4" name="estatus[]" value="Atendiendo">
                                    <label for="estatus4">Atendiendo</label><br>

                                    <input type="checkbox" id="estatus5" name="estatus[]" value="Falta papelería">
                                    <label for="estatus5">Falta papelería</label><br>

                                    <input type="checkbox" id="estatus6" name="estatus[]" value="Finalizado">
                                    <label for="estatus6">Finalizado</label><br>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-12 row mb-20 py-2">
                    <div class="container text-center">                 
                        <button type="button" name="submit_data" onclick="get_info_search(event)" id="submit_data" class="btn btn-success btn-lg btn-block mt-15">
                            <span class="indicator-label">
                                <span id="btn-text-submit">Traer gestiones</span>
                            </span>
                            <span class="indicator-progress">Espere ...
                            <span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
                        </button>
                    </div>
                </div>
            </form>
            @include('seguimiento.gestiones')
        </div>
    </div>
    <!--end::Content-->
</div>
<!--end::Content wrapper-->
@endsection
@section('javascript')
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="{{ asset('js/seguimiento/dt_seguimiento.js?v=1.0.1') }}"></script>
<script src="{{ asset('js/seguimiento/seguimiento.js?v=1.0.1') }}"></script>
<script src="{{ asset('assets/plugins/custom/datatables/datatables.bundle.js') }}"></script>
<script src="{{ asset('assets/plugins/custom/prismjs/prismjs.bundle.js') }}"></script>
@endsection