@extends('adminlte::page')

@section('title', 'Crear Evento')

@section('content_header')
    <h1>Nuevo Registro de reuniones o eventos con las Autoridades de tránsito</h1>
@stop

@section('content')
    
    <div class="card">
        <div class="card-body">
            {!! Form::open(['route'=>'eventos.store']) !!}
            
            
            <div class="form-group">
                {!! Form::label('evento', 'Evento') !!}
                {!! Form::text('evento', null, ['id'=>'evento','class'=>'form-control form-control-sm', 'placeholder'=>'Escribir evento']) !!}
                
                @error('evento')
                    <span class="text-danger">{{$message}}</span>
                @enderror
            </div>
      
            <div class="row">
                <div class="col-sm-12" id="htmlTarget">
                  <div class="row">
                    <div class="col-sm-6">
                      <label for="fecha_inicio" class="form-label">Fecha inicio evento</label>
                      <div
                        class="input-group log-event"
                        id="fecha_inicio"
                        data-td-target-input="nearest"
                        data-td-target-toggle="nearest"
                      >
                        <input
                          id="fecha_inicio"
                          name="fecha_inicio"
                          type="datetime-local"
                          class="form-control"
                          data-td-target="#fecha_inicio"
                        />
                        <span
                          class="input-group-text"
                          data-td-target="#fecha_inicio"
                          data-td-toggle="datetimepicker"
                        >
                          <span class="bi bi-calendar"></span>
                        </span>
                      </div>
                    </div>
                    <div class="col-sm-6">
                      <label for="fecha_finalizacion" class="form-label">Fecha finalizacion evento</label>
                      <div
                        class="input-group log-event"
                        id="fecha_finalizacion"
                        data-td-target-input="nearest"
                        data-td-target-toggle="nearest"
                      >
                        <input
                          id="fecha_finalizacion"
                          name="fecha_finalizacion"
                          type="datetime-local"
                          class="form-control"
                          data-td-target="#linkedPickers2"
                        />
                        <span
                          class="input-group-text"
                          data-td-target="#fecha_finalizacion"
                          data-td-toggle="datetimepicker"
                        >
                          <span class="bi bi-calendar"></span>
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              
              <div class="form-group">
                {!! Form::label('divipo_id', 'Divipo') !!}
                <select class="form-select form-select-sm" onchange="CargarDirectorio(this)" name="divipo_id" id="divipo_id">
                    @foreach ($areaLits as $item)
                        <option value="{{$item->id}}"> {{$item->municipio}}</option>
                    @endforeach
                </select>

                @error('divipo_id')
                <span class="text-danger">{{$message}}</span>
                @enderror
            </div>

            <div class="form-group">
              {!! Form::label('directorio_id', 'Nombre contacto') !!}
              <select class="form-select form-select-sm" name="directorio_id" id="directorio_id">
                 <option value="">Seleccione contacto</option>
              </select>

              @error('directorio_id')
              <span class="text-danger">{{$message}}</span>
              @enderror
          </div>

            <div class="form-group">
              {!! Form::label('user_id', 'Organiza evento/reunión') !!}
              <select class="form-select form-select-sm" name="user_id" id="user_id">
                  @foreach ($areaLits3 as $item)
                      <option value="{{$item->id}}"> {{$item->name}}</option>
                  @endforeach
              </select>

              @error('user_id')
              <span class="text-danger">{{$message}}</span>
              @enderror
          </div>

          <div class="form-group">
            {!! Form::label('tipogestion_id', 'Tipo gestión') !!}
            <select class="form-select form-select-sm" name="tipogestion_id" id="tipogestion_id">
                @foreach ($areaLits4 as $item)
                    <option value="{{$item->id}}"> {{$item->nombreGestion}}</option>
                @endforeach
            </select>

            @error('tipogestion_id')
            <span class="text-danger">{{$message}}</span>
            @enderror
          </div>

          <div class="form-group">
            {!! Form::label('observacion', 'Observaciones') !!}
            {!! Form::textarea('observacion', null, ['class'=>'form-control form-control-sm', 'placeholder'=>'Observaciones']) !!}
          
           @error('observacion')
               <span class="text-danger">{{$message}}</span>
           @enderror
         </div>

         <div class="form-group">
           {!! Form::label('link', 'Link reunión') !!}
           {!! Form::text('link', null, ['id'=>'link','class'=>'form-control form-control-sm', 'placeholder'=>'Escribir link']) !!}
          
           @error('link')
                <span class="text-danger">{{$message}}</span>
           @enderror
         </div>
         
         <div class="form-check form-switch">
          <input class="form-check-input" type="checkbox" id="cancelacion">
          <label class="form-check-label" for="cancelacion">Por defecto evento no cancelado</label>
          @error('cancelacion')
                <span class="text-danger">{{$message}}</span>
           @enderror
        </div>   

        <hr class="mx-n3">
                        

            <div class="control">
                {!! Form::submit('Guardar registro',['class'=>'btn btn-primary']) !!}
                <a href="{{ route('eventos.index') }}" class="btn btn-danger">Regresar</a>
            </div> 

            {!! Form::close() !!}
        </div>    
                
    </div>

@stop

@section('css')

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.3/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">


@endsection

@section('js')

    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment-with-locales.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
    
    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <script src="https://code.jquery.com/ui/1.13.3/jquery-ui.js"></script>
   
         
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    
    <script>

        function CargarDirectorio(params) {
            let divipoId = params.value;
            fetch(`divipos/${divipoId}/directorio`)
            .then (function(response){
                return response.json();
            })
            
            .then(function(jsonData){
                buildDirectorioSelect(jsonData);
            }) 
        }

        function buildDirectorioSelect(jsonDirectorio) {
            let  directorioSelect= document.getElementById('directorio_id');
            clearSelect(directorioSelect);
            jsonDirectorio.forEach(function(contacto) {
                let optionTag = document.createElement('option');
                optionTag.value = contacto.id;
                optionTag.innerHTML = contacto.nombreFuncionario;
                directorioSelect.append(optionTag); 
            });
        }

        function clearSelect(select){
            while (select.options.length > 1) {
                select.remove(1);
            }
        }

    
    </script>   

    <script type="text/javascript">
        
        config = {
                   enableTime: true,
                   dateFormat: "Y-m-d H:i",
                 }
        flatpickr("input[type=datetime-local]", config);


    </script>


    <script>
        $( function() 
        {
            var from = $( "#fromDate" )
                .datepicker
                ({
                dateFormat: "yy-mm-dd",
                changeMonth: true
                })
                .on( "change", function() {
                    to.datepicker( "option", "minDate", getDate( this ) );
                }),
                to = $( "#toDate" ).datepicker
                ({
                    dateFormat: "yy-mm-dd",
                    changeMonth: true
                })
                .on( "change", function() 
                {
                from.datepicker( "option", "maxDate", getDate( this ) );
                });
  
                function getDate( element ) 
                {
                    var date;
                    var dateFormat = "yy-mm-dd";
                    try {
                        date = $.datepicker.parseDate( dateFormat, element.value );
                        } catch( error ) 
                        {
                            date = null;
                        }
  
                    return date;
                }
        });
    </script>

@endsection