@extends('adminlte::page')

@section('title', 'Gestiones cartera')

@section('content_header')
    <h1>Nuevo Registro control gestión de recuperación cartera</h1>
@stop

@section('content')
    <p>Ingreso de control gestión de recuperación cartera</p>
    
    <div class="card">
        <div class="card-body">
            {!! Form::open(['route'=>'admin.gestiones.store']) !!}
            
            <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('tipogestion_id', 'Tipo Gestion') !!}
                <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('fechaGestion', 'Fecha Gestión') !!}
                {!! Form::text('fechaGestion', null, ['id'=>'fromDate','class'=>'form-control form-control-sm', 'placeholder'=>'Fecha gestión recuperación cartera']) !!}
                
                @error('fechaGestion')
                    <span class="text-danger">{{$message}}</span>
                @enderror
            </div>
                       
            
            <div class="form-group">
                {!! Form::label('gestionRealizada', 'Gestión realizada') !!}
                {!! Form::textarea('gestionRealizada', null, ['class'=>'form-control form-control-sm', 'placeholder'=>'Gestión realizada']) !!}
                
                @error('gestionRealizada')
                    <span class="text-danger">{{$message}}</span>
                @enderror
            </div>

            <div class="form-group">
                {!! Form::label('user_id', 'Personal que Gestiona') !!}
                <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="control">
                {!! Form::submit('Guardar registro',['class'=>'btn btn-primary']) !!}
                <a href="{{ route('admin.gestiones.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">
    
@endsection

@section('js')

    <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>

        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>
        $( function() 
        {
            $("#datepicker").datepicker({
            dateFormat: "yy-mm-dd"
            });
        } );
    </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