@extends('adminlte::page')

@section('title', 'Crear registro Acta recaudo externo')

@section('content_header')
    <h1>Nuevo Registro de actas recaudo externo Autoridades de tránsito</h1>
@stop

@section('content')
    @if (session('mensaje'))
        <div class="alert alert-success">
            <strong>{{session('mensaje')}}</strong>
        </div>
    @endif
    <div class="card">
        <div class="card-body">
          <form action="{{ route('admin.actasexterno.store') }}" method="POST" enctype="multipart/form-data">
            @csrf
            
            <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('nroActa', 'Nro. Acta') !!}
            {!! Form::text('nroActa', null, ['id'=>'nroActa','class'=>'form-control form-control-sm', 'onKeypress'=>"if (event.keyCode < 45 || event.keyCode > 57) event.returnValue = false;", 'placeholder'=>'Escribir Nro. Acta']) !!}
            
            @error('nroActa')
                <span class="text-danger">{{$message}}</span>
            @enderror
          </div>

          <div class="form-group">
            {!! Form::label('cantidadrecaudos', 'Cantidad Recaudos') !!}
            {!! Form::text('cantidadrecaudos', null, ['id'=>'nroActa','class'=>'form-control form-control-sm', 'onKeypress'=>"if (event.keyCode < 45 || event.keyCode > 57) event.returnValue = false;", 'placeholder'=>'Escribir cantidad de recaudos']) !!}
            
            @error('cantidadrecaudos')
              <span class="text-danger">{{$message}}</span>
            @enderror
          </div>

          <div class="form-group">
            {!! Form::label('valorrecaudos', 'Valor recaudos') !!}
            {!! Form::text('valorrecaudos', null, ['id'=>'nroActa','class'=>'form-control form-control-sm', 'onKeypress'=>"if (event.keyCode < 45 || event.keyCode > 57) event.returnValue = false;", 'placeholder'=>'Escribir valor total de recaudos']) !!}
          
            @error('valorrecaudos')
              <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">
                
                    <div class="form-group">
                        {!! Form::label('ano', 'Año del acta') !!}
                        {!! Form::select('ano', ['2021' => '2021', '2022' => '2022', '2023' => '2023', '2024' => '2024', '2025' => '2025', '2026' => '2026', '2027' => '2027', '2028' => '2028', '2029' => '2029', '2030' => '2030'],null ,['class'=>'form-select form-select-sm','placeholder' => 'Seleccione...']) !!}   
                    
                        @error('ano')
                        <span class="text-danger">{{$message}}</span>
                        @enderror
                    </div>
                
                </div>
                <div class="col-sm-6">
                
                    <div class="form-group">
                        {!! Form::label('periodo', 'Mes del acta') !!}
                        {!! Form::select('periodo', ['1' => 'Enero', '2' => 'Febrero', '3' => 'Marzo', '4' => 'Abril', '5' => 'Mayo', '6' => 'Junio', '7' => 'Julio', '8' => 'Agosto', '9' => 'Septiembre', '10' => 'Octubre', '11' => 'Noviembre', '12' => 'Diciembre'],null ,['class'=>'form-select form-select-sm','placeholder' => 'Seleccione...']) !!}   
                    
                        @error('periodo')
                        <span class="text-danger">{{$message}}</span>
                        @enderror
                    </div>

                </div>
            
          </div>
           
            <hr class="mx-n3">
                       
                        <label class="is-block mb-4">
                            <span class="file has-name is-fullwidth">
                                <label class="file-label">
                                    <input class="form-control form-control-sm" type="file" name="file_upload" accept=".pdf"/>
                                </label>
                            </span>
                        </label>
                        
                                                                         
                        <div class="field is-grouped mt-3">
                            
                            <div class="control">
                                <button type="submit" class="btn btn-primary btn-sm">Cargar</button>
                            </div>

                            <hr class="mx-n3">
                               
                            <div class="control">
                                <a href="{{ route('admin.actasexterno.index') }}" class="btn btn-danger btn-sm">Regresar</a>
                            </div>
                        </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">

<style>
  .progress { position:relative; width:100%; }
  .bar { background-color: #2dab27; width:0%; }
  .percent { position: relative; display: block; left:50%; color: #040608; text-align: center;}    
</style>

@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 type="text/javascript">
      var SITEURL = "{{URL('/')}}";
      $(function() {
          $(document).ready(function()
          {
              var bar = $('.bar');
              var percent = $('.percent');
              $('form').ajaxForm({
                  beforeSend: function() {
                      var percentVal = '0%';
                      bar.width(percentVal)
                      percent.html(percentVal);
                  },
                  uploadProgress: function(event, position, total, percentComplete) {
                      var percentVal = percentComplete + '%';
                      bar.width(percentVal)
                      percent.html(percentVal);
                  },
                  complete: function(xhr) {
                      alert('Archivo cargado exitosamente');
                      window.location.href = SITEURL +"/"+"admin/pagos";
                  }
              });
          }); 
      });
    </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