@extends('frontend.layouts.app')

@section('after-styles')
    <!-- css for datepicker -->
    <link rel="stylesheet" type="text/css" href="{{ URL::asset('css/bootstrap-datetimepicker.css') }}">   
    <link rel="stylesheet" type="text/css" href="{{ URL::asset('css/pmd-datetimepicker.css') }}"> 

    <!-- Select2 css -->
    <link rel="stylesheet" type="text/css" href="{{ URL::asset('css/select2.min.css') }}">

	<style>
		.input-group{
			width: 90%;
			margin: 0 auto;
		}
	</style>
    

@endsection

@section('content')

	<div class="container" style="margin-bottom: 10%;">
		<div class="card card-nav-tabs">
            <div class="header header-dark-blue">
            	<h4 class="text-center"><strong>Weather Forecasts</strong></h4>
            </div>
			
			<div class="col-md-8 col-md-offset-2" style="padding-top: 40px;">
            	
            	<div class="card card-nav-tabs" style="margin-bottom: 50px;">
            	
	            	<div class="header header-info text-center">
		            	<span class="text-uppercase">Weather Forecast Parameters</span>
		            </div>

            		<div class="content">

	            	<form method="post" action="maps/create" accept-charset="UTF-8" class="form-horizontal col-md-12 create text-center">

	                {{ csrf_field() }}

	                    <div class="row text-left">
	                        <div class="col-md-12">
	                        <h6 class="h6">
	                            WRF Number
	                        </h6>
	                        </div>
	                    </div>
	                    <div class="input-group">
	                        <select name="wrf_no" class="form-control select-simple text-left wrf_no" style="width: 100%;" required>
	                            <option value="wrf0">wrf0</option>
	                            <option value="wrf1">wrf1</option>
	                            <option value="wrf2">wrf2</option>
	                            <option value="wrf3">wrf3</option>
	                            <option value="wrf3">wrf4</option>
	                        </select>
	                    </div> 

	                    <div class="row text-left">
	                        <div class="col-md-12">
	                        <h6 class="h6">
	                            Run Date
	                        </h6>
	                        </div>
	                    </div>
                    	<div class="input-group">
	                        <input name="run_date" type="text" id="" class="form-control datepicker-run text-center run_date" required  style="width: 100%; border-bottom: 2px solid #354285;">
                    	</div>

                    	<div class="row text-left">
	                        <div class="col-md-12">
	                        <h6 class="h6">
	                            WRF Run ID
	                        </h6>
	                        </div>
	                    </div>
	                    <div class="input-group">
	                        <select name="run_id" class="form-control select-simple text-left pmd-select2-tags run_id" style="width: 100%;" required>
	                            
	                        </select>  
	                    </div> 

	                    <div class="row text-left">
	                        <div class="col-md-12">
	                        <h6 class="h6">
	                            Image Date and Time
	                        </h6>
	                        </div>
	                    </div>
                    	<div class="input-group">
	                        <input name="image_date" type="text" id="" class="form-control pmd-select2-tags datetimepicker text-center" required  style="width: 100%; border-bottom: 2px solid #354285;">
                    	</div>

	                    <div class="footer">
	                        {{ Form::submit('CREATE', ['class' => 'btn btn-info btn-block create']) }}
	                    </div>
	                </form>
	            	</div>
	            </div>
            </div>
        </div>
	</div>

@endsection

@section('after-scripts')
	<script type="text/javascript" src="{{ URL::asset('js/moment-with-locales.js') }}"></script>
    <script type="text/javascript" src="{{ URL::asset('js/bootstrap-datetimepicker.js') }}"></script>   
    {{-- <script type="text/javascript" src="{{ url('https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.45/css/bootstrap-datetimepicker.min.css') }}"></script>    --}}

    <!-- Select2 js-->
    <script type="text/javascript" src="{{ URL::asset('js/select2.full.js') }}"></script>    

    <!-- Propeller Select2 -->
    <script type="text/javascript">
        $(document).ready(function() {
            <!-- Simple Selectbox -->
            $(".select-simple").select2({
                theme: "flat",
                minimumResultsForSearch: 5,
                tags: true
            });
        });
    </script>
    

    <script type="text/javascript">
        $(function () {
            // start date date and time picker 
            $('.datepicker-run').datetimepicker({
                format: 'YYYY-MM-DD_18-00'
            });
            $('.datetimepicker').datetimepicker({
                format: 'YYYY-MM-DD_HH-00'
            });           
        });
        
    </script>

    <script>
    	$(document).ready(function($) {
    		$(".run_date").on('dp.change' , function(event) {
    			event.preventDefault();
    			
    			var $run_date = $(this).val();
    			var $wrf_no = $(".wrf_no").val();
                var $run_ids = $('.run_id');
                var $create = $('.create');

                $.ajax({
                    url: '{{ route('frontend.graphs.maps.get.run.id') }}',
                    type: 'POST',
                    dataType: 'JSON',
                    headers: {'X-CSRF-TOKEN': '{{ csrf_token() }}'},
                    data: {run_date:$run_date, wrf_no: $wrf_no},

                    success: function(data){
                        run_ids = data['data'];
                        var $options;

                        if (run_ids == 0){
                            $options = '<option value="select" selected disabled>WRF RUN ID IS NOT AVAILABLE</option>';
                            $create.addClass('disabled');
						}

						else{
                            $options = '<option value="select" selected disabled>Select WRF RUN ID</option>';
                            $create.removeClass('disabled');

                            for (var i = 0; i < run_ids.length; i++) {
                                $options += '<option value="'+ i +'">'+ i +'</option>'

                            }
						}

                        $run_ids.html('');
                        $('.run_id:selected', this).remove();
                        $run_ids.html($options);

                    },
                    error:function(data){
                        console.log(data);
                    }
                });

    		});

    		$(".wrf_no").on('dp.change' , function(event) {
			event.preventDefault();

				var $wrf_no = $(this).val();
    			var $run_date = $(".run_date").val();
    			alert();
    			if ($run_date == '') {
    				alert('Select RUN DATE');
    			}



			});	
    	});
    </script>
@endsection