@extends('layouts.app')

@push('page_css')
    <link href="{{ asset('assets') }}/plugins/select2/css/select2.min.css" rel="stylesheet">   
@endpush

@section('content')

    <div class="page-info">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ url('/home'); }}">Dashboard</a></li>
                <li class="breadcrumb-item"><a href="{{ url('/suppliers'); }}">Listado de proveedores</a></li>
                <li class="breadcrumb-item active" aria-current="page">Evaluación proveedor</li>
            </ol>
        </nav>
        <div class="page-options">
            <a  href="{{ route('suppliers.estadistica', ['id' => $suppliers->id]) }}" class="btn btn-success">
                <img src=" {{  asset('assets/iconos/agregar.png') }} " alt="usuarios" style="height: 20px;">
                Estadisticas
            </a>
        </div>
    </div>


    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-12">
                    <h1>Evaluación de Proveedor</h1>
                </div>
            </div>
        </div>
    </section>
    
    <div class="main-wrapper">
        <div class="row">
            <div class="col">

				@include('adminlte-templates::common.errors')

				<div class="card">

					{!! Form::open(['route' => 'suppliers.store','id' => 'evaluacion']) !!}

					<div class="card-body">
							@include('suppliers.evaluation_calidad_fields')
					</div>
				
					<div class="card-footer">
						{!! Form::submit('Guardar', ['class' => 'btn btn-primary']) !!}
						<a href="{{ route('suppliers.evaluations') }}" class="btn btn-default">Cancelar</a>
					</div>

					{!! Form::close() !!}

				</div>
			</div>
		</div>
	</div>
@endsection



@push('page_scripts')
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
    <script src="{{ asset('assets') }}/plugins/select2/js/select2.full.min.js"></script>    
    
    <script src=" {{ asset('assets') }}/js/validaciones.js"></script>
    
    <script>
		const url = '{{ url('/get_period/') }}';

        $(document).ready(function(){

            "use strict";

            $('.date').datetimepicker({
				format: 'YYYY-MM',
                viewMode: "months",
                useCurrent: true,
                icons: {
                    up: "icon-arrow-up-circle icons font-2xl", 
                    down: "icon-arrow-down-circle icons font-2xl"
                },
                sideBySide: true
            })
    
            $('.select_tow').select2();    
            
			$('#period').on('dp.hide',function(e){
                
				//generar un api que regrese el registro solicitado
                
                console.log('entramos');
                console.log(e.date.format('YYYY'));

                let period = $('#period').val();
                let llamada = `${url}/${period}`; 

                // mandar a llamar a la funcion para generar el json si existe
                fetch(llamada)
                .then(response => {
                        if (!response.ok)   
                            throw new Error('error'); 
                        return response.json()
                    })
                .then(data => conDatos(data))
                .catch(data =>  sinDatos());
            });
        });

		function conDatos(data){
			console.log(data.data.id);
            $( "#patch" ).remove();

			$('#ppms').val(data.data.ppms);
			$('#calidad_repetitivo').val(data.data.calidad_repetitivo);
			$('#calidad_paro_linea').val(data.data.calidad_paro_linea);
			$('#calidad_incidente_cliente').val(data.data.calidad_incidente_cliente);
            $('#satisfaccion_cliente').val(data.data.satisfaccion_cliente);

			$('#evaluacion').append('<input id="patch" name="_method" type="hidden" value="PATCH">');

			$('#evaluacion').attr('action', "{{ url('/supplierEvaluations/')}}/" + data.data.id );
		}

		function sinDatos(){

			$('#ppms').val('');
			$('#calidad_repetitivo').val('');
			$('#calidad_paro_linea').val('');
			$('#calidad_incidente_cliente').val('');

            $( "#patch" ).remove();

			$('#evaluacion').attr('action', "{{ url('/supplierEvaluations/')}}" );
			console.log('no hay datos');
		}


    </script>
@endpush