@extends($activeTemplate.'layouts.frontend')
@section('content')
<div class="pt-50 pb-50 section--bg">
    <div class="container">
        <div class="row justify-content-center gy-4">
            @include($activeTemplate . 'partials.employer_sidebar')
            <div class="col-xl-9 ps-xl-4">
                <form action="{{ route('employer.job.store') }}" method="POST" enctype="multipart/form-data" class="edit-profile-form">
                    @csrf
                    <div class="custom--card mt-4">
                        <div class="card-header bg--dark">
                            <h5 class="text-white">@lang('Job Information (Write in Bangla)')</h5>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-lg-6 form-group">
                                    <label>@lang('Circular No.')</label>
                                    <input type="text" name="circular" placeholder="example: ৩৭.০১.৭২০১.০১৪.১১.০০১.২৩.১০৮" value="{{ old('circular') }}" class="form--control" required>
                                </div>
                                <div class="col-lg-6 form-group">
                                    <label>@lang('Title')</label>
                                    <input type="text" name="title" placeholder="example: শাখা কর্মকর্তা" value="{{ old('title') }}" class="form--control" required>
                                </div>

                                <div class="col-lg-6 form-group">
                                    <label>@lang('Application Deadline')</label>
                                    <input type="text" name="deadline" required value="{{ old('deadline') }}" autocomplete="off"  class="form--control deadline">
                                </div>
                                
                                <div class="col-lg-12 form-group">
                                    <label class="required">@lang('Description (Grade, Pay scale, no. of post, age etc.)')</label>
                                    <textarea class="form--control nicEdit" name="description" rows="8" >{{ old('description') }}</textarea>
                                </div>
                                <div class="col-lg-12 form-group">
                                    <label class="required">@lang('Requirements')</label>
                                    <textarea class="form--control nicEdit" name="requirements" placeholder="example: ৩৭.০১.৭২০১.০১৪.১১.০০১.২৩.১০৮"  rows="8">{{ old('requirements') }}</textarea>
                                </div>
                                
                            </div>
                        </div>
                    </div>
                    <div class="custom--card mt-4">
                        <div class="card-header bg--dark">
                            <h5 class="text-white">@lang('Validation Info (Write in English)')</h5>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-lg-6 form-group">
                                    <label>@lang('Minimum Age')</label>
                                    <div class="input-group">
                                        <input type="text" name="min_age" placeholder="example: 18" value="{{ old('min_age') }}" class="form--control" required>
                                        <span class="input-group-text">Year</span>
                                    </div>
                                </div>
                                <div class="col-lg-6 form-group">
                                    <label>@lang('Maximum Age')</label>
                                    <div class="input-group">
                                        <input type="text" name="max_age" placeholder="example: 30" value="{{ old('max_age') }}" class="form--control" required>
                                        <span class="input-group-text">Year</span>
                                    </div>
                                </div>
                                <div class="col-lg-6 form-group">
                                    <label>@lang('Application Fee')</label>
                                    <div class="input-group">
                                        <input type="text" name="application_fee" placeholder="example: 600" value="{{ old('application_fee') }}" class="form--control" required>
                                        <span class="input-group-text">Taka</span>
                                    </div>
                                </div>
                                <div class="col-lg-6 form-group">
                                    <label>@lang('Minimum Total Experience')</label>
                                    <div class="input-group">
                                        <input type="text" name="min_total_exp" placeholder="example: 10" value="{{ old('min_total_exp') }}" class="form--control">
                                        <span class="input-group-text">Year</span>
                                    </div>
                                </div>
                                <div class="col-lg-6 form-group">
                                    <label>@lang('Grade 9 Minimum Experience')</label>
                                    <div class="input-group">
                                        <input type="text" name="grade9_min_exp" placeholder="example: 5" value="{{ old('grade9_min_exp') }}" class="form--control">
                                        <span class="input-group-text">Year</span>
                                    </div>
                                </div>
                                <div class="col-lg-6 form-group">
                                    <label>@lang('Grade 7 Minimum Experience')</label>
                                    <div class="input-group">
                                        <input type="text" name="grade7_min_exp" placeholder="example: 5" value="{{ old('grade7_min_exp') }}" class="form--control">
                                        <span class="input-group-text">Year</span>
                                    </div>
                                </div>
                                <div class="col-lg-6 form-group">
                                    <label>@lang('Grade 6 Minimum Experience')</label>
                                    <div class="input-group">
                                        <input type="text" name="grade6_min_exp" placeholder="example: 5" value="{{ old('grade6_min_exp') }}" class="form--control">
                                        <span class="input-group-text">Year</span>
                                    </div>
                                </div>
                                <div class="col-lg-6 form-group">
                                    <label>@lang('Grade 5 Minimum Experience')</label>
                                    <div class="input-group">
                                        <input type="text" name="grade5_min_exp" placeholder="example: 5" value="{{ old('grade5_min_exp') }}" class="form--control">
                                        <span class="input-group-text">Year</span>
                                    </div>
                                </div>
                                <div class="col-lg-6 form-group">
                                    <label>@lang('Grade 4 Minimum Experience')</label>
                                    <div class="input-group">
                                        <input type="text" name="grade4_min_exp" placeholder="example: 5" value="{{ old('grade4_min_exp') }}" class="form--control">
                                        <span class="input-group-text">Year</span>
                                    </div>
                                </div>

                                <div class="col-lg-6 form-group">
                                    <label>@lang('Minimum Level of Education')</label>
                                    <select class="form--control" name="min_education_level" required>
                                        <option value="">@lang('Select One')</option>
                                        @foreach($educationLevels as $educationLevel)
                                        <option value="{{ $educationLevel->id }}" @selected(old('min_education_level')==$educationLevel->id)>{{ __($educationLevel->name) }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mt-4">
                        <button type="submit" class="btn btn--base w-100">
                            <i class="lab la-telegram-plane"></i>@lang('Submit')
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@push('script-lib')
<script src="{{ asset('assets/global/js/nicEdit.js') }}"></script>
<script src="{{ asset('assets/global/js/datepicker.min.js') }}"></script>
<script src="{{ asset('assets/global/js/datepicker.en.js') }}"></script>
@endpush

@push('style-lib')
    <link rel="stylesheet" href="{{asset('assets/global/css/datepicker.min.css')}}">
@endpush

@push('script')
    <script>
        "use strict";
        (function ($) {
            bkLib.onDomLoaded(function () {
                $(".nicEdit").each(function (index) {
                    $(this).attr("id", "nicEditor" + index);
                    new nicEditor({
                        fullPanel: true
                    }).panelInstance('nicEditor' + index, {
                        hasPanel: true
                    });
                });
            });

        function changeCity(locationId=0){
            var locations = $('select[name=city] :selected').data('locations');
            var html = `<option selected disabled value="">@lang('Select One')</option>`;
            locations.forEach(function myFunction(item, index) {
                html += `<option value="${item.id}" ${parseInt(item.id) == parseInt(locationId)  ? 'selected' : ''}>${item.name}</option>`;
            });
            $('select[name=location]').html(html);
        }

        $('select[name=city]').on('change', function () {
            changeCity();
        });

        @if(old('location'))
            changeCity("{{ old('location') }}");
        @endif

        $('#salary_type').on('change', function () {
            var value = $('#salary_type').val();
            if (value == 2) {
                var html = `
                <div class="col-lg-6">
                        <div class="form-group">
                            <label for="salary_from" class="required">@lang('Salary From')</label>
                                <div class="input-group">
                                <input id="salary_from" type="number" step="any" class="form--control" name="salary_from" required>
                                <span class="input-group-text">{{ __($general->cur_text) }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="form-group">
                            <label for="salary_to" class="required">@lang('Salary To')</label>
                            <div class="input-group">
                                <input id="salary_to" type="number" step="any" class="form--control" name="salary_to"  required>
                                <span class="input-group-text">{{ __($general->cur_text) }}</span>
                            </div>
                        </div>
                </div>`;
                $(".addSalaryField").append(html);
            } else {
                $(".addSalaryField").empty();
            }
        });

        $('.deadline').datepicker({
            language: 'en',
            dateFormat: 'dd-mm-yyyy',
            minDate: new Date(),
        });
        })(jQuery);
    </script>
@endpush