@extends('admin.admin_dashboard_hipotecario') 
@section('content') 

				
<div class="pc-container">
    <div class="pc-content">
      <!-- [ breadcrumb ] start -->
      <div class="page-header">
        <div class="page-block">
          <div class="row align-items-center">
            <div class="col-md-12">
              <ul class="breadcrumb mb-3">
                <li class="breadcrumb-item"><a href="../home">Home</a></li>
                <li class="breadcrumb-item"><a href="../promociones">Oficinas</a></li>
                <li class="breadcrumb-item" aria-current="page">Agregar Oficina</li>
              </ul>
            </div>
            <div class="col-md-12">
              <div class="page-header-title">
                <h2 class="mb-0">Agregar Oficina</h2>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- [ breadcrumb ] end -->

      <!-- [ Main Content ] start -->
      <div class="row">
        <!-- [ sample-page ] start -->
        <div class="col-sm-12">
          <div class="card">
            <div class="card-body"> 
               <form class="smart-form" enctype="multipart/form-data"  method="POST" action="{{ route('sucursal/save')}}">
                @csrf 
               	
              <div class="row"> 
                


                <div class="col-md-4"> 
                  <div class="form-group">
                    <label class="form-label">Nombre</label> 
                    <input id="nombre" name="nombre" type="text" class="form-control" placeholder=""  value="{{ (old('nombre')) }}"> 
                    @error('nombre')<span class="fs-6 text-danger">El campo de Lugar es requerido </span> @enderror
                  </div> 

                          <div class="form-group">
                      <label>Entidad Federativa</label>
                  <select id="id_entidad_federativa" name="id_entidad_federativa" class="form-control">
                      <option value="">-- Seleccione una entidad --</option>
                      @foreach ($entidades_federativas as $entidad_federativa)
                          <option value="{{ $entidad_federativa->CATALOG_KEY }}">
                              {{ $entidad_federativa->ENTIDAD_FEDERATIVA }}
                          </option>
                      @endforeach
                  </select>
              </div>

             
              <div class="form-group mt-3">
                  <label>Zona</label>
                  <select id="zona" name="zona" class="form-control">
                      <option value="">-- Seleccione un zona --</option>
                      <option value="CENTRO">CENTRO</option>
                      <option value="NORTE">NORTE</option>
                      <option value="OCCIDENTE">OCCIDENTE</option>
                      <option value="SUR">SUR</option>
                  </select>
              </div>
            </div>

              
               

              </div>

              <div class="row">

                <div class="col-md-4"> 
                    <a href="{{ route('sucursales/list')}}" class="btn btn-outline-secondary">Regresar</a> 
                    <button type="submit" class="btn btn-primary">Agregar Oficina</button>
                 
                </div>  

              </div>
              </form> 


            </div>
          </div>
        </div>
        <!-- [ sample-page ] end -->
      </div>
      <!-- [ Main Content ] end -->
    </div>
  </div>

          <!-- DOM/Jquery table end -->
<!--main--> 

    <!-- datatable Js --> 
 
<style> 
.ui-datepicker-calendar {
    display: none;
    }
</style>
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="{{ URL::asset('js/plugins/jquery.dataTables.min.js')}}"></script>
<script src="{{ URL::asset('js/plugins/dataTables.bootstrap5.min.js')}}"></script>
<script src="{{ URL::asset('js/plugins/dataTables.responsive.min.js')}}"></script>
<script src="{{ URL::asset('js/plugins/responsive.bootstrap5.min.js')}}"></script>
<script src="{{ URL::asset('js/plugins/datepicker-full.min.js')}}"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>  
  
  <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
 
 
   <script>
document.getElementById('entidad_federativas').addEventListener('change', function () {

    let catalogKey = this.value;
    let municipioSelect = document.getElementById('municipio');

    municipioSelect.innerHTML = '<option value="">Cargando...</option>';

    if (catalogKey === '') {
        municipioSelect.innerHTML = '<option value="">-- Seleccione un municipio --</option>';
        return;
    }

    fetch(`../municipios/${catalogKey}`)
        .then(response => response.json())
        .then(data => {

            municipioSelect.innerHTML = '<option value="">-- Seleccione un municipio --</option>';

            data.forEach(municipio => {
                let option = document.createElement('option');
                option.value = municipio.id;
                option.textContent = municipio.MUNICIPIO;
                municipioSelect.appendChild(option);
            });
        })
        .catch(error => {
            console.error(error);
            municipioSelect.innerHTML = '<option value="">Error al cargar</option>';
        });
});
</script>


@endsection