@extends('admin/layouts/default')
{{-- Page title --}}
@section('title')
Add Editor
@parent
@stop
{{-- page level styles --}}
@section('header_styles')
@include('admin.layouts.css')
<link href="{{ asset('assets/css/pages/tables.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('assets/vendors/select2/css/select2.min.css') }}" type="text/css" rel="stylesheet">
<link href="{{ asset('assets/vendors/select2/css/select2-bootstrap.css') }}" rel="stylesheet">
<!-- end of page level css-->
@stop
{{-- Page content --}}
@section('content')
<section class="content-header">
    <!--section starts-->
    <h1>Add New Editor</h1>
    <ol class="breadcrumb">
        <li>
            <a href="{{ route('admin.dashboard') }}">
                <i class="livicon" data-name="home" data-size="14" data-loop="true"></i>
                Dashboard
            </a>
        </li>
        <li><a href="{{ URL::to('admin/editorial_board_member') }}">Editorial Board Member List</a></li>
        <li class="active">
            Add New Editor
        </li>
    </ol>
</section>
<!--section ends-->
<section class="content paddingleft_right15">
    <!--main content-->
    <div class="row">
        <div class="panel panel-primary ">
            <div class="panel-heading">
                <h3 class="panel-title">
                    Editor Form
                </h3>
            </div>
            <div class="panel-body">
                <div id="banner" class="panel">
                    @if ($errors->any())
                    @foreach ($errors->all() as $error)
                    <div class="text-danger">{{$error}}</div>
                    @endforeach
                    @endif
                    <div class="panel-body">
                        <form name="first" method="post" action="{{ route('editorial_board_member.store') }}" enctype="multipart/form-data">
                            <input type="hidden" name="_token" value="<?= csrf_token() ?>">

                            <div class="form-group col-md-4">
                                <label for="e1" class="control-label">First Name: </label>
                                <input type="text" class="form-control" name="fname">
                            </div>
                            <div class="form-group col-md-4">
                                <label for="e1" class="control-label">Middle Name: </label>
                                <input type="text" class="form-control" name="mname">
                            </div>
                            <div class="form-group col-md-4">
                                <label for="e1" class="control-label">Last Name: </label>
                                <input type="text" class="form-control" name="lname">
                            </div>

                            <div class="form-group col-md-6">
                                <label for="e1" class="control-label">Degree: </label>
                                <input type="text" class="form-control" name="degree">
                            </div>
                            <div class="form-group col-md-6">
                                <label for="e1" class="control-label">Title: </label>
                                <input type="text" class="form-control" name="titles">
                            </div>

                            <div class="form-group col-md-6">
                                <label class="control-label" for="select21">Salutation: </label>
                                <select class="form-control" name="salutation">
                                    <option selected="true" value="" disabled="disabled" hidden>Select Salutation</option>
                                    <option value="dr">Dr.</option>
                                    <option value="prof">Prof.</option>
                                    <option value="mr">Mr.</option>
                                    <option value="mrs">Mrs.</option>
                                    <option value="sir">Sir.</option>
                                </select>
                            </div>
                            <div class="form-group col-md-6">
                                <label class="control-label" for="select21">Suffix: </label>
                                <select class="form-control" name="suffix">
                                    <option selected="true" value="" disabled="disabled" hidden>Select Suffix</option>
                                    <option value="jr">Jr.</option>
                                    <option value="sr">Sr.</option>
                                </select>
                            </div>

                            <div class="form-group col-md-12">
                                <label for="e1" class="control-label">Institute: </label>
                                <input type="text" class="form-control" name="institute">
                            </div>

                            <div class="form-group col-md-12">
                                <label for="e1" class="control-label">University: </label>
                                <input type="text" class="form-control" name="university">
                            </div>

                            <div class="form-group col-md-12">
                                <label for="e1" class="control-label">Pharmaceutical: </label>
                                <input type="text" class="form-control" name="pharmaceutical">
                            </div>

                            <div class="form-group col-md-12">
                                <label for="e1" class="control-label">Other (if company): </label>
                                <input type="text" class="form-control" name="company">
                            </div>

                            <div class="form-group col-md-12">
                                <label for="e1" class="control-label">Department: </label>
                                <input type="text" class="form-control" name="department">
                            </div>

                            <div class="form-group col-md-12">
                                <label for="e1" class="control-label">Laboratory: </label>
                                <input type="text" class="form-control" name="laboratory">
                            </div>

                            <div class="form-group col-md-12">
                                <label for="e1" class="control-label">Library: </label>
                                <input type="text" class="form-control" name="library">
                            </div>

                            <div class="form-group col-md-12">
                                <label for="e1" class="control-label">Field of Expertise <span class="text-danger">(Comma Seprated)</span> </label>
                                <input type="text" class="form-control" name="expertise">
                            </div>

                            <div class="form-group col-md-4">
                                <label for="e1" class="control-label">H-Index: </label>
                                <input type="text" class="form-control" name="h_index">
                            </div>
                            <div class="form-group col-md-4">
                                <label for="e1" class="control-label">Orcid ID: </label>
                                <input type="text" class="form-control" name="orcid_id">
                            </div>
                            <div class="form-group col-md-4">
                                <label for="e1" class="control-label">Researcher ID: </label>
                                <input type="text" class="form-control" name="researcher_id">
                            </div>

                            <div class="form-group col-md-4">
                                <label for="e1" class="control-label">Research Gate: </label>
                                <input type="text" class="form-control" name="research_gate">
                            </div>
                            <div class="form-group col-md-4">
                                <label for="e1" class="control-label">Google Scholar: </label>
                                <input type="text" class="form-control" name="google_scholar">
                            </div>
                            <div class="form-group col-md-4">
                                <label for="e1" class="control-label">Scopus ID: </label>
                                <input type="text" class="form-control" name="scopus_id">
                            </div>

                            <div class="form-group col-md-12">
                                <label for="e1" class="control-label">Address: </label>
                                <input type="text" class="form-control" name="address">
                            </div>

                            <div class="form-group col-md-6">
                                <label for="e1" class="control-label">Email:<span class="text-danger"> *</span> </label>
                                <input type="email" class="form-control" name="email" required>
                            </div>
                            <div class="form-group col-md-6">
                                <label for="e1" class="control-label">Alt Email: <span class="text-danger">(email1, email2)</span></label>
                                <input type="text" class="form-control" name="alt_email">
                            </div>

                            <div class="form-group col-md-6">
                                <label for="e1" class="control-label">Postal Code: </label>
                                <input type="text" class="form-control" name="zip_code">
                            </div>
                            <div class="form-group col-md-6">
                                <label for="e1" class="control-label">City: </label>
                                <input type="text" class="form-control" name="city">
                            </div>

                            <div class="form-group col-md-6">
                                <label for="e1" class="control-label">Country: </label>
                                <select class="form-control select2" id="country-list" name="country" onchange="getCity(this.value);">
                                    <option selected="true" value="" disabled="disabled" hidden>Select Country</option>
                                    @foreach($country_list as $country)
                                    <option value="{{$country->printable_name}}">{{$country->printable_name}}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-group col-md-6">
                                <label for="e1" class="control-label">State: </label>
                                <input type="text" class="form-control" name="state">
                            </div>

                            <div class="form-group col-md-6">
                                <label for="e1" class="control-label">City: </label>
                                <select class="form-control" id="city_list" name="editor_city" onchange="getInstitute(this.value);">
                                    <option selected="true" value="" disabled="disabled" hidden>Select City</option>
                                </select>
                            </div>
                            <div class="form-group col-md-6">
                                <label for="e1" class="control-label">Institute: </label>
                                <select class="form-control" name="institution_id" id="institute_list">
                                    <option selected="true" value="" disabled="disabled" hidden>Select Institute</option>
                                </select>
                            </div>

                            <div class="form-group col-md-4">
                                <label for="e1" class="control-label">Phone No: </label>
                                <input type="text" class="form-control" name="phone">
                            </div>
                            <div class="form-group col-md-4">
                                <label for="e1" class="control-label">Mobile No: </label>
                                <input type="text" class="form-control" name="mobile">
                            </div>
                            <div class="form-group col-md-4">
                                <label for="e1" class="control-label">Fax: </label>
                                <input type="text" class="form-control" name="fax">
                            </div>

                            <div class="form-group col-md-12">
                                <label for="e1" class="control-label">Website: </label>
                                <input type="text" class="form-control" name="url">
                            </div>

                            <div class="form-group col-md-12 row" style="margin-bottom: 0px;">
                                <label for="pic" class="control-label col-sm-4">Profile Picture: </label>
                                <div class="fileinput fileinput-new col-sm-8" data-provides="fileinput" style="margin-bottom: 0px;">
                                    <div class="fileinput-new thumbnail" style="width: 150px; height: 150px;">
                                        <img src="http://placehold.it/200x200" alt="profile pic">
                                    </div>
                                    <div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 150px; max-height: 150px;"></div>
                                    <div>
                                        <span class="btn btn-default btn-file">
                                            <span class="fileinput-new">Select image</span>
                                            <span class="fileinput-exists">Change</span>
                                            <input type="file" id="profile_pic" name="profile_pic" value="">
                                        </span>
                                        <a href="#" class="btn btn-danger fileinput-exists" data-dismiss="fileinput">Remove</a>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group col-md-12">
                                <label for="e1" class="control-label">Web Format: </label>
                                <textarea class="textarea editor-cls" placeholder="Place some text here" name="web_format"></textarea>
                            </div>

                            <div class="form-group text-center col-md-12">
                                <button class="btn btn-primary text-center" type="submit">Submit</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
    <!--main content ends-->
</section>
<!-- content -->
@stop

{{-- page level scripts --}}
@section('footer_scripts')
@include('admin.layouts.js')
<script src="{!! asset('assets/vendors/select2/js/select2.js') !!}"></script>
<script src="{!! asset('js/filter.js') !!}"></script>
<script>
    $("#country-list").select2({
        theme: "bootstrap",
        placeholder: "Select Country",
        width: '100%',
        height: '50px'
    });
</script>
<script>
    function getCity(country_name) {
        $.ajax({
            url: "{{ url('/get_city') }}" + '/' + country_name,
            type: "GET",
            success: function(data) {
                $('#city_list').html(data.output);
                $('#institute_list').html('<option value="0">Select Institute</option>');
            }
        });

    }

    function getInstitute(city_names) {
        var country_name = $('#country-list').val();
        var city_name = city_names;

        $.ajax({
            url: "{{ url('/get_institute') }}" + '/' + country_name + '/' + city_name,
            method: "GET",
            success: function(data) {
                $('#institute_list').html(data.output);

            }
        });

    }
</script>
@stop