@extends('layout.index')
@section('title', 'Farmer Options Language')

<!-- Dashboard Ecommerce start -->
@section('content')
    <section>
        <div class="content-header row">
            <div class="content-header-left col-md-6 col-12 mb-2">
                <div class="row breadcrumbs-top">
                    <div class="col-12 d-flex">
                        <h2 class="content-header-title float-start mb-0">Import Farmer Options Language</h2>
                    </div>
                </div>
            </div>

            <div class="col-md-6">

            </div>
        </div>
    </section>
    <section>
        @if ($message = Session::get('success'))
            <div class="demo-spacing-0 mb-1">
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    <div class="alert-body">
                        <i class="fa fa-check-circle" style="font-size:16px;" aria-hidden="true"></i>
                        {!! $message !!}
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">

                    </div>
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            </div>
        @elseif ($message = Session::get('error'))
            <div class="demo-spacing-0 mb-1">
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    <div class="alert-body">
                        <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
                        {!! $message !!}
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">

                    </div>
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            </div>
        @endif

        <div class="content-body">
            <section id="multiple-column-form">
                <div class="row justify-content-center">
                    <div class="col-sm-12">
                        <div class="card">
                            <div class="card-body">
                                <form class="form" id="uploadfrmseason" action="" method="post"
                                    enctype="multipart/form-data">
                                    <input type="hidden" name="form_type" value="upload_option_language">
                                    {{ csrf_field() }}

                                    <div class="row">
                                        <div class="col-md-4 col-12">
                                            <div class="form-group">
                                                <label for="form-column">Select Forms <span
                                                        style="color:red;">*</span></label>

                                                <select name="form" id="form_dropdown" class="form-control form-select"
                                                    onchange="return get_forms()">
                                                    <option value="">Select Forms</option>
                                                                                                    </select>
                                                <h5><small class="text-danger" id="form_dropdown_err"></small></h5>
                                                @if ($errors->has('form'))
                                                    <span class="text-danger">{{ $errors->first('form') }}</span>
                                                @endif
                                            </div>
                                        </div>

                                        <div class="col-md-4 col-12">
                                            <div class="form-group">
                                                <label for="form-column">Select Questions <span
                                                        style="color:red;">*</span></label>

                                                <select name="question" id="que_drodown" class="form-control form-select">
                                                    <option value="">Select Question</option>
                                                                                                    </select>
                                                <h5><small class="text-danger" id="que_drodown_err"></small></h5>
                                                @if ($errors->has('question'))
                                                    <span class="text-danger">{{ $errors->first('question') }}</span>
                                                @endif
                                            </div>
                                        </div>

                                        <div class="col-md-4 col-12">
                                            <div class="form-group">
                                                <label for="option_language_file">Upload Document <span
                                                        style="color:red;">*</span></label>
                                                <input type="file" id="option_language_file" name="option_language_file"
                                                    class="form-control ">
                                                @if ($errors->has('option_language_file'))
                                                    <span
                                                        class="text-danger">{{ $errors->first('option_language_file') }}</span>
                                                @endif
                                                <h5><small class="text-danger" id="option_language_file_err"></small></h5>

                                            </div>
                                        </div>

                                        <div class="col-md-6 col-12">

                                            <div class="form-group">
                                                <button type="submit" id="uplodebtn" class="btn btn-primary"
                                                    onClick="return validate()">Upload</button>
                                            </div>

                                        </div>
                                        <div class="col-md-6 col-12">

                                            <div class="form-group float-lg-right mr-1">
                                                <a href="{{ url('upload_option_language/download/language_sample') }}?v=1.1"
                                                    class="btn btn-danger text-white">Download </a>
                                            </div>

                                        </div>
                                    </div>


                                </form>

                            </div>
                        </div>
                    </div>
                    <!-- Bordered table end -->
                </div>


            </section>
        </div>

    @endsection

    <script>
        var aQuestions = [];

        function get_forms() {

            var form_id = $('#form_dropdown').val();

            s_question_options = '<option value="" >Select Question</option>'
            $.each(aQuestions, function(key, question_obj) {

                if (form_id != 0 && question_obj.form_id == form_id) {

                    s_question_options += '<option value=' + question_obj.id + ' form_id=' + question_obj.form_id +
                        ' >' + question_obj.name_description + '</option>'
                } else if (form_id == 0) {
                    s_question_options += '<option value=' + question_obj.id + ' form_id=' + question_obj.form_id +
                        ' >' + question_obj.name_description + '</option>'
                }
            })

            $('#que_drodown').html(s_question_options);
        }

        function validate() {
            if ($('#form_dropdown').val() == ""){
                $('#form_dropdown').parent().addClass('has-error');
                $('#form_dropdown_err').html('Please Select Form.');
                $('#form_dropdown').focus();
                $('#form_dropdown').click(function () {
                $('#form_dropdown').parent().removeClass('has-error');
                $('#form_dropdown_err').html('');
                });
                return false;
            }

            if ($('#que_drodown').val() == ""){
                $('#que_drodown').parent().addClass('has-error');
                $('#que_drodown_err').html('Please Select Question.');
                $('#que_drodown').focus();
                $('#que_drodown').click(function () {
                $('#que_drodown').parent().removeClass('has-error');
                $('#que_drodown_err').html('');
                });
                return false;
            }

            if ($('#option_language_file').val() == ""){
                $('#option_language_file').parent().addClass('has-error');
                $('#option_language_file_err').html('Please Select File.');
                $('#option_language_file').focus();
                $('#option_language_file').click(function () {
                $('#option_language_file').parent().removeClass('has-error');
                $('#option_language_file_err').html('');
                });
                return false;
            }

            var fileInput = document.getElementById('option_language_file');
            var filePath = fileInput.value;
            // Allowing file type
            var allowedExtensions =
                /(\.csv)$/i;

            if (!allowedExtensions.exec(filePath)) {
                // alert('Invalid file type');
                 $('#option_language_file_err').html('Please Select CSV File.');

                fileInput.value = '';
                return false;
            }
            return true;
        }
    </script>