@extends('frontend.layouts.plain')

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

        <div class="card card-nav-tabs">
            <div class="header header-dark-blue">
                <div class="nav-tabs-navigation">
                    <div class="nav-tabs-wrapper">
                        <ul class="nav nav-tabs row" data-tabs="tabs">
                            <li class="active col-md-4">
                                <a class="text-center" href="#stations" data-toggle="tab">
                                    {{-- <i class="material-icons">face</i> --}}
                                    By Multiple Stations
                                </a>
                            </li>
                            <li class="col-md-4">
                                <a class="text-center" href="#types" data-toggle="tab">
                                    {{-- <i class="material-icons">chat</i> --}}
                                    By Multiple Forecast Types
                                </a>
                            </li>
                            <li class="col-md-4">
                                <a class="text-center" href="#coordinates" data-toggle="tab">
                                    {{-- <i class="material-icons">chat</i> --}}
                                    By Coordinates
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="content">
                <div class="tab-content text-center">
                    <div class="tab-pane active" id="stations">

                        <div class="col-md-8 col-md-offset-2" style="padding-top: 40px;">

                            {{-- {{ Form::open([route('frontend.graphs.hourly.show'), 'method' => 'post', 'class' => 'form-horizontal col-md-12 form']) }} --}}
                            <div class="card card-nav-tabs" style="margin-bottom: 50px;">

                                <div class="header header-info">
                                    <span class="text-uppercase">Forecast Parameters</span>
                                </div>

                                <div class="content">

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

                                        {{ csrf_field() }}

                                        <div class="row text-left">
                                            <div class="col-md-12">
                                                <h6 class="h6">
                                                    Forecast Variable Type
                                                </h6>
                                            </div>
                                        </div>
                                        <div class="input-group">
                                            <select name="variable"
                                                    class="form-control select-simple text-left variable" required>
                                                {{-- <option disabled selected>Select</option> --}}
                                                <option value="Waterlevel">Waterlevel</option>
                                                <option value="Precipitation" selected>Precipitation</option>
                                                <option value="Discharge">Discharge</option>
                                            </select>
                                        </div>

                                        <div class="row text-left obsereved_stations">
                                            <div class="col-md-12">
                                                <h6 class="h6">
                                                    Station
                                                </h6>
                                            </div>
                                        </div>
                                        <div class="input-group obsereved_stations">
                                            <select name="stations[]"
                                                    class="form-control select-simple pmd-select2-tags stations"
                                                    multiple style="width: 100%;" required>
                                            </select>
                                        </div>

                                        <div class="row text-left ob-station-row">
                                            <div class="col-md-12">
                                                <h6 class="h6">
                                                    Observed Weather Station
                                                </h6>
                                            </div>
                                        </div>
                                        <div class="input-group ob-station-row">
                                            <select name="obs_station"
                                                    class="form-control  select-simple text-left pmd-select2-tags ob-stations"
                                                    style="width: 100%;" required>
                                                {{-- <option disabled selected>Select</option> --}}
                                                {{--<option value="IBATTARA2" selected>IBATTARA2</option>--}}
                                                {{--<option value="IBATTARA3">IBATTARA3</option>--}}

                                            </select>
                                        </div>

                                        <div class="row text-left">
                                            <div class="col-md-12">
                                                <h6 class="h6">
                                                    Forecast Type
                                                </h6>
                                            </div>
                                        </div>
                                        <div class="input-group">
                                            <select name="type"
                                                    class="form-control  select-simple text-left pmd-select2-tags "
                                                    style="width: 100%;" required>
                                                {{-- <option disabled selected>Select</option> --}}

                                                <option value="Forecast-0-d" selected>Forecast-0-d</option>
                                                <option value="Forecast-1-d-after">Forecast-1-d-after</option>
                                                <option value="Forecast-2-d-after">Forecast-2-d-after</option>
                                                <option value="Forecast-3-d-after">Forecast-3-d-after</option>
                                                <option value="Forecast-4-d-after">Forecast-4-d-after</option>
                                                <option value="Forecast-5-d-after">Forecast-5-d-after</option>

                                                {{-- @foreach($types as $type)

                                                <option value="{{ $type->type }}">{{ $type->type }}</option>

                                                @endforeach --}}

                                            </select>
                                        </div>

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

                                                <option value="wrf0" selected>wrf0</option>
                                                <option value="wrf1">wrf1</option>
                                                <option value="wrf2">wrf2</option>
                                                <option value="wrf3">wrf3</option>
                                                <option value="wrf4">wrf4</option>
                                                <option value="wrf5">wrf5</option>

                                            </select>
                                        </div>

                                        <div class="row text-left">
                                            <div class="col-md-12">
                                                <h6 class="h6">
                                                    Date Range
                                                </h6>
                                            </div>
                                        </div>
                                        <div class="col-md-12" style="width: 100%; margin: 0 auto">
                                            <div class="col-md-6">
                                                <label for="start_date-1" class="control-label"
                                                       style="color: #000000; font-size: 13px; cursor: pointer;">Start
                                                    Date</label>
                                                <input name="start_date" type="text" id="start_date-1"
                                                       class="form-control datepicker-start-1"
                                                       style="width: 95%; border-bottom: 2px solid #354285;" required>
                                            </div>
                                            <div class="col-md-6">
                                                <label for="end_data-1" class="control-label"
                                                       style="color: #000000; font-size: 13px; cursor: pointer;">End
                                                    Date</label>
                                                <input name="end_date" type="text" id="end_data-1"
                                                       class="form-control datepicker-end-1"
                                                       style="width: 95%; border-bottom: 2px solid #354285;" required>
                                            </div>
                                        </div>

                                        {{ Form::hidden('data_type', 'by_station') }}

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


                                    </form>
                                </div>


                            </div>

                        </div>


                    </div>
                    <div class="tab-pane" id="types">
                        <div class="col-md-8 col-md-offset-2" style="padding-top: 40px;">

                            {{-- {{ Form::open([route('frontend.graphs.hourly.show'), 'method' => 'post', 'class' => 'form-horizontal col-md-12 form']) }} --}}
                            <div class="card card-nav-tabs" style="margin-bottom: 50px;">

                                <div class="header header-info">
                                    <span class="text-uppercase">Forecast Parameters</span>
                                </div>

                                <div class="content">

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

                                        {{ csrf_field() }}

                                        <div class="row text-left">
                                            <div class="col-md-12">
                                                <h6 class="h6">
                                                    Forecast Variable Type
                                                </h6>
                                            </div>
                                        </div>
                                        <div class="input-group">
                                            <select name="variable"
                                                    class="form-control select-simple text-left variable"
                                                    style="width: 100%;" required>
                                                {{-- <option disabled selected>Select</option> --}}
                                                <option value="Waterlevel">Waterlevel</option>
                                                <option value="Precipitation" selected>Precipitation</option>
                                                <option value="Discharge">Discharge</option>
                                            </select>
                                        </div>

                                        <div class="row text-left obsereved_stations">
                                            <div class="col-md-12">
                                                <h6 class="h6">
                                                    Stations
                                                </h6>
                                            </div>
                                        </div>
                                        <div class="input-group obsereved_stations">
                                            <select name="station" class="form-control select-simple select2 stations"
                                                    style="width: 100%;" required>
                                            </select>
                                        </div>

                                        <div class="row text-left ob-station-row">
                                            <div class="col-md-12">
                                                <h6 class="h6">
                                                    Observed Weather Station
                                                </h6>
                                            </div>
                                        </div>
                                        <div class="input-group ob-station-row">
                                            <select name="obs_station"
                                                    class="form-control  select-simple text-left ob-stations"
                                                    style="width: 100%;" required>
                                                {{-- <option disabled selected>Select</option> --}}
                                                {{--<option value="IBATTARA2" selected>IBATTARA2</option>--}}
                                                {{--<option value="IBATTARA3">IBATTARA3</option>--}}

                                            </select>
                                        </div>

                                        <div class="row text-left">
                                            <div class="col-md-12">
                                                <h6 class="h6">
                                                    Forecast Type
                                                </h6>
                                            </div>
                                        </div>
                                        <div class="input-group">
                                            <select name="types[]"
                                                    class="form-control  select-simple text-left pmd-select2-tags"
                                                    multiple style="width: 100%;" required>
                                                {{-- <option disabled selected>Select</option> --}}

                                                <option value="Forecast-0-d" selected>Forecast-0-d</option>
                                                <option value="Forecast-1-d-after">Forecast-1-d-after</option>
                                                <option value="Forecast-2-d-after">Forecast-2-d-after</option>
                                                <option value="Forecast-3-d-after">Forecast-3-d-after</option>
                                                <option value="Forecast-4-d-after">Forecast-4-d-after</option>
                                                <option value="Forecast-5-d-after">Forecast-5-d-after</option>

                                                {{-- @foreach($types as $type)

                                                <option value="{{ $type->type }}">{{ $type->type }}</option>

                                                @endforeach --}}

                                            </select>
                                        </div>

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

                                                <option value="wrf0" selected>wrf0</option>
                                                <option value="wrf1">wrf1</option>
                                                <option value="wrf2">wrf2</option>
                                                <option value="wrf3">wrf3</option>
                                                <option value="wrf4">wrf4</option>
                                                <option value="wrf5">wrf5</option>

                                            </select>
                                        </div>

                                        <div class="row text-left">
                                            <div class="col-md-12">
                                                <h6 class="h6">
                                                    Date Range
                                                </h6>
                                            </div>
                                        </div>
                                        <div class="col-md-12" style="width: 100%; margin: 0 auto">
                                            <div class="col-md-6">
                                                <label for="start_date-2" class="control-label"
                                                       style="color: #000000; font-size: 13px; cursor: pointer;">Start
                                                    Date</label>
                                                <input name="start_date" type="text" id="start_date-2"
                                                       class="form-control datepicker-start-2"
                                                       style="width: 95%; border-bottom: 2px solid #354285;" required>
                                            </div>
                                            <div class="col-md-6">
                                                <label for="end_data-2" class="control-label"
                                                       style="color: #000000; font-size: 13px; cursor: pointer;">End
                                                    Date</label>
                                                <input name="end_date" type="text" id="end_data-2"
                                                       class="form-control datepicker-end-2"
                                                       style="width: 95%; border-bottom: 2px solid #354285;" required>
                                            </div>
                                        </div>

                                        {{ Form::hidden('data_type', 'by_forecast') }}

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


                                    </form>
                                </div>


                            </div>

                        </div>


                    </div>
                    <div class="tab-pane" id="coordinates">
                        <div class="col-md-8 col-md-offset-2" style="padding-top: 40px;">

                            {{-- {{ Form::open([route('frontend.graphs.hourly.show'), 'method' => 'post', 'class' => 'form-horizontal col-md-12 form']) }} --}}
                            <div class="card card-nav-tabs" style="margin-bottom: 50px;">

                                <div class="header header-info">
                                    <span class="text-uppercase">Forecast Parameters</span>
                                </div>

                                <div class="content">

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

                                        {{ csrf_field() }}

                                        <div class="row text-left">
                                            <div class="col-md-12">
                                                <h6 class="h6">
                                                    Latitude
                                                </h6>
                                            </div>
                                        </div>
                                        <div class="col-md-12" style="width: 100%; margin: 0 auto">
                                            <div class="col-md-6">
                                                <label for="start_lat" class="control-label"
                                                       style="color: #000000; font-size: 13px; cursor: pointer;">Start
                                                    Latitude</label>
                                                <input name="start_lat" id="start_lat" type="text" class="form-control"
                                                       style="width: 95%; border-bottom: 2px solid #354285;">
                                            </div>
                                            <div class="col-md-6">
                                                <label for="end_lat" class="control-label"
                                                       style="color: #000000; font-size: 13px; cursor: pointer;">End
                                                    Latitude</label>
                                                <input name="end_lat" id="end_lat" type="text" class="form-control"
                                                       style="width: 95%; border-bottom: 2px solid #354285;">
                                            </div>
                                        </div>

                                        <div class="row text-left">
                                            <div class="col-md-12">
                                                <h6 class="h6">
                                                    Longitude
                                                </h6>
                                            </div>
                                        </div>
                                        <div class="col-md-12" style="width: 100%; margin: 0 auto">
                                            <div class="col-md-6">
                                                <div class="">
                                                    <label for="start_long" class="control-label"
                                                           style="color: #000000; font-size: 13px; cursor: pointer;">Start
                                                        Longitude</label>
                                                    <input name="start_long" id="start_long" type="text"
                                                           class="form-control"
                                                           style="width: 95%; border-bottom: 2px solid #354285;">
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="">
                                                    <label for="end_long" class="control-label"
                                                           style="color: #000000; font-size: 13px; cursor: pointer;">End
                                                        Longitude</label>
                                                    <input name="end_long" id="end_long" type="text"
                                                           class="form-control"
                                                           style="width: 95%; border-bottom: 2px solid #354285;">
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row text-left">
                                            <div class="col-md-12">
                                                <h6 class="h6">
                                                    Forecast Variable Type
                                                </h6>
                                            </div>
                                        </div>
                                        <div class="input-group">
                                            <select name="variable"
                                                    class="form-control select-simple text-left variable"
                                                    style="width: 100%;" required>
                                                {{-- <option disabled selected>Select</option> --}}
                                                <option value="Waterlevel">Waterlevel</option>
                                                <option value="Precipitation" selected>Precipitation</option>
                                                <option value="Discharge">Discharge</option>
                                            </select>
                                        </div>

                                        <div class="row text-left obsereved_stations ob-station-row">
                                            <div class="col-md-12">
                                                <h6 class="h6">
                                                    Observed Weather Station
                                                </h6>
                                            </div>
                                        </div>
                                        <div class="input-group obsereved_stations ob-station-row">
                                            <select name="obs_station"
                                                    class="form-control  select-simple text-left ob-stations"
                                                    style="width: 100%;" required>
                                                {{-- <option disabled selected>Select</option> --}}
                                                {{--<option value="IBATTARA2" selected>IBATTARA2</option>--}}
                                                {{--<option value="IBATTARA3">IBATTARA3</option>--}}

                                            </select>
                                        </div>

                                        <div class="row text-left">
                                            <div class="col-md-12">
                                                <h6 class="h6">
                                                    Forecast Type
                                                </h6>
                                            </div>
                                        </div>
                                        <div class="input-group">
                                            <select name="type" class="form-control select-simple text-left"
                                                    style="width: 100%;" required>
                                                <option disabled selected>Select</option>

                                                <option value="Forecast-0-d" selected>Forecast-0-d</option>
                                                <option value="Forecast-1-d-after">Forecast-1-d-after</option>
                                                <option value="Forecast-2-d-after">Forecast-2-d-after</option>
                                                <option value="Forecast-3-d-after">Forecast-3-d-after</option>
                                                <option value="Forecast-4-d-after">Forecast-4-d-after</option>
                                                <option value="Forecast-5-d-after">Forecast-5-d-after</option>

                                                {{-- @foreach($types as $type)

                                                <option value="{{ $type->type }}">{{ $type->type }}</option>

                                                @endforeach --}}

                                            </select>
                                        </div>

                                        <div class="row text-left">
                                            <div class="col-md-12">
                                                <h6 class="h6">
                                                    Date Range
                                                </h6>
                                            </div>
                                        </div>
                                        <div class="col-md-12" style="width: 100%; margin: 0 auto">
                                            <div class="col-md-6">
                                                <label for="start_date-3" class="control-label"
                                                       style="color: #000000; font-size: 13px; cursor: pointer;">Start
                                                    Date</label>
                                                <input name="start_date" type="text" id="start_date-3"
                                                       class="form-control datepicker-start-3"
                                                       style="width: 95%; border-bottom: 2px solid #354285;" required>
                                            </div>
                                            <div class="col-md-6">
                                                <label for="end_data-3" class="control-label"
                                                       style="color: #000000; font-size: 13px; cursor: pointer;">End
                                                    Date</label>
                                                <input name="end_date" type="text" id="end_data-3"
                                                       class="form-control datepicker-end-3"
                                                       style="width: 95%; border-bottom: 2px solid #354285;" required>
                                            </div>
                                        </div>

                                        {{ Form::hidden('data_type', 'by_coordinates') }}

                                        <div class="footer">
                                            {{ Form::submit('CREATE', ['class' => 'btn btn-info btn-block']) }}
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </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">
        $(function () {

            // Date picker 1
            /* Linked date and time picker */
            // start date date and time picker
            $('.datepicker-start-1').datetimepicker({
                format: 'YYYY-MM-DD'
            });

            // End date date and time picker
            $('.datepicker-end-1').datetimepicker({
                format: 'YYYY-MM-DD',
                useCurrent: false
            });

            // start date picke on chagne event [select minimun date for end date datepicker]
            $(".datepicker-start-1").on("dp.change", function (e) {
                $('.datepicker-end-1').data("DateTimePicker").minDate(e.date);
            });
            // Start date picke on chagne event [select maxmimum date for start date datepicker]
            $(".datepicker-end-1").on("dp.change", function (e) {
                $('.datepicker-start-1').data("DateTimePicker").maxDate(e.date);
            });


            // Date picker 1
            /* Linked date and time picker */
            // start date date and time picker
            $('.datepicker-start-2').datetimepicker({
                format: 'YYYY-MM-DD'
            });

            // End date date and time picker
            $('.datepicker-end-2').datetimepicker({
                format: 'YYYY-MM-DD',
                useCurrent: false
            });

            // start date picke on chagne event [select minimun date for end date datepicker]
            $(".datepicker-start-2").on("dp.change", function (e) {
                $('.datepicker-end-2').data("DateTimePicker").minDate(e.date);
            });
            // Start date picke on chagne event [select maxmimum date for start date datepicker]
            $(".datepicker-end-2").on("dp.change", function (e) {
                $('.datepicker-start-2').data("DateTimePicker").maxDate(e.date);
            });


            // Date picker 3
            /* Linked date and time picker */
            // start date date and time picker
            $('.datepicker-start-3').datetimepicker({
                format: 'YYYY-MM-DD'
            });

            // End date date and time picker
            $('.datepicker-end-3').datetimepicker({
                format: 'YYYY-MM-DD',
                useCurrent: false
            });

            // start date picke on chagne event [select minimun date for end date datepicker]
            $(".datepicker-start-3").on("dp.change", function (e) {
                $('.datepicker-end-3').data("DateTimePicker").minDate(e.date);
            });
            // Start date picke on chagne event [select maxmimum date for start date datepicker]
            $(".datepicker-end-3").on("dp.change", function (e) {
                $('.datepicker-start-3').data("DateTimePicker").maxDate(e.date);
            });

        });
    </script>

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

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

    <script>
        $(document).ready(function (e) {
            // Getting observed stations

            $ob_stations = $('.ob-stations');
            $token = $('._token').val();

            $.ajax({
                url: '{{ route('frontend.stations.get-ob') }}',
                type: 'POST',
                dataType: 'JSON',
                headers: {'X-CSRF-TOKEN': '{{ csrf_token() }}'},
                data: {_token: $token},

                success: function (data) {
                    // console.log(data);
                    stations = data['stations'];
                    var $options;
                    for (var i = 0; i < stations.length; i++) {
                        $options += '<option value="' + stations[i]['station'] + '">' + stations[i]['station'] + '</option>'
                    }

                    $ob_stations.html('');
                    $('.ob-stations:selected', this).remove();
                    $ob_stations.html($options);

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

            // loading all stations
            $variable = $(".variable").val();

            if ($variable == 'Precipitation') {
                $stations_list = $('.stations');

                $.ajax({
                    url: '{{ route('frontend.stations.get') }}',
                    type: 'POST',
                    dataType: 'JSON',
                    headers: {'X-CSRF-TOKEN': '{{ csrf_token() }}'},
                    data: {variable: $variable, _token: $token},

                    success: function (data) {
                        console.log(data);
                        stations = data['stations'];
                        var $options = null;
                        for (var i = 0; i < stations.length; i++) {
                            $options += '<option value="' + stations[i]['station'] + '">' + stations[i]['station'] + '</option>'

                        }

                        $stations_list.html('');
                        $('.stations:selected', this).remove();
                        $stations_list.html($options);

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

            // get stations
            $(".variable").on('change', function (event) {
                event.preventDefault();

                $variable = $(this).val();
                $stations_list = $('.stations');
                $token = $('._token').val();

                if ($variable == 'Discharge') {
                    $('.ob-station-row').fadeOut('slow').css('display', 'none');
                    $('.ob-stations').removeAttr('required');
                }
                else {
                    $('.ob-station-row').fadeIn('fast').css('display', 'block');
                    // $('.ob-stations').addAttr('required');
                }

                $.ajax({
                    url: '{{ route('frontend.stations.get') }}',
                    type: 'POST',
                    dataType: 'JSON',
                    headers: {'X-CSRF-TOKEN': '{{ csrf_token() }}'},
                    data: {variable: $variable, _token: $token},

                    success: function (data) {
                        console.log(data);
                        stations = data['stations'];
                        var $options = "";
                        for (var i = 0; i < stations.length; i++) {
                            $options += '<option value="' + stations[i]['station'] + '">' + stations[i]['station'] + '</option>'

                        }
                        // console.log($options);
                        $stations_list.html('');
                        $('.stations:selected', this).remove();
                        $stations_list.html($options);

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

            });

        });
    </script>

@endsection