@extends('layouts.backend')

@section('title', 'Create Vacancy')

@section('breadcrumb-title')
    <h3>New Vacancy</h3>
@endsection

@section('breadcrumb-items')
    <li class="breadcrumb-item">Vacancy</li>
    <li class="breadcrumb-item active">New Vacancy</li>
@endsection

@section('content')

<div class="container-fluid">
    <div class="row">

        <div class="col-sm-12">
            <div class="card">
                <div class="card-header">
                    <strong><h5>Opening Date</h5></strong> 
                </div>
                <div class="card-body">
                    <div class="mb-3 row">
                        <label class="col-md-2 col-form-label" for="email-input">Start Date</label>
                        <div class="col-md-4">
                            <input class="form-control datepicker-here datepicker_format" id="start_date" type="text" name="start_date" placeholder="Start Date">
                            <span class="help-block">[optional] Date for vacancy to start appearing on website</span>
                        </div>
                        <label class="col-md-2 col-form-label" for="email-input">End Date</label>
                        <div class="col-md-4">
                            <input class="form-control datepicker-here datepicker_format" id="end_date" type="text" name="end_date" placeholder="End Date">
                            <span class="help-block">[optional] Date for vacancy to stop appearing on website</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div class="col-sm-12">
            <div class="card">
                <div class="card-header">
                    <strong><h5>Vacant Details</h5></strong> 
                </div>
                <div class="card-body">
                    <form id="createForm" class="form-horizontal" method="post" enctype="multipart/form-data">
                        @csrf
                        <div class="mb-3 row">
                            <label class="col-md-2 col-form-label">Title<code>*</code></label>
                            <div class="col-md-10">
                                <input class="form-control" id="vacancyID" type="hidden" name="vacancyID" placeholder="">
                                <input class="form-control" id="vacancyTitle" type="text" name="vacancyTitle" placeholder="title">
                            </div>
                        </div>

                        <div class="mb-3 row">
                            <label class="col-md-2 col-form-label" for="text-input">Position</label>
                            <div class="col-md-10">
                                <input class="form-control" id="positionType" type="text" name="positionType" placeholder="position"><span class="help-block">[optional]</span>
                            </div>
                        </div>

                        <div class="mb-3 row">
                            <label class="col-md-2 col-form-label" for="email-input">Position Level<code>*</code></label>
                            <div class="col-md-4">
                                <select class="form-select" id="select1" name="positionLevel">
                                    <option value="" disabled selected>Please Select</option>
                                </select>
                            </div>
                            <label class="col-md-2 col-form-label" for="email-input">Type of Hire<code>*</code></label>
                            <div class="col-md-4">
                                <select class="form-select" id="select2" name="hire">
                                    <option value="" disabled selected>Please Select</option>
                                </select>
                            </div>
                        </div>

                        <div class="mb-3 row">
                            <label class="col-md-2 col-form-label" for="email-input">Department<code>*</code></label>
                            <div class="col-md-4">
                                <select class="form-select" id="select3" name="department">
                                    <option value="" disabled selected>Please Select</option>
                                </select>
                            </div>
                            <label class="col-md-2 col-form-label" for="email-input">Branch<code>*</code></label>
                            <div class="col-md-4">
                                <select class="form-select" id="select4" name="branch">
                                    <option value="" disabled selected>Please Select</option>
                                </select>
                            </div>
                        </div>

                        <div class="mb-3 row">
                            <label class="col-md-2 col-form-label" for="email-input">Business Entity<code>*</code></label>
                            <div class="col-md-4">
                                <select class="form-select" id="select5" name="businessEntity">
                                    <option value="" disabled selected>Please Select</option>
                                </select>
                            </div>
                            <label class="col-md-2 col-form-label" for="email-input">Contract Type<code>*</code></label>
                            <div class="col-md-4">
                                <select class="form-select" id="select6" name="contractType">
                                    <option value="" disabled selected>Please Select</option>
                                </select>
                            </div>
                        </div>
                        <div class="mb-3 row">
                            <label class="col-md-2 col-form-label" for="educationLevel">Education level<code>*</code></label>
                            <div class="col-md-4">
                                <select class="form-select" id="educationLevel" name="educationLevel">
                                    <option value="" disabled selected>Please Select</option>
                                </select>
                            </div>
                            <label class="col-md-2 col-form-label" for="email-input">Majoring In<code>*</code></label>
                            <div class="col-md-4">
                                <input class="form-control" id="majoring" type="" name="majoring" placeholder="">
                                <span class="help-block">[optional]</span>
                            </div>
                        </div>
                        <div class="mb-3 row">
                            <label class="col-md-2 col-form-label" for="email-input">Salary</label>
                            <div class="col-md-4">
                                <input class="form-control" id="date-input" type="" name="salary" placeholder="salary">
                                <span class="help-block">[optional] -RM</span>
                            </div>

                            <label class="col-md-2 col-form-label" for="email-input">Number of Position</label>
                            <div class="col-md-1">
                                <input class="form-control" id="date-input" type="number" name="positionNumber" placeholder="" min="1" max="999" value="1">
                                <span class="help-block">[optional] Person</span>
                            </div>
                            <label class="col-md-1 col-form-label" for="email-input">Status<code>*</code></label>
                            <div class="col-md-2">
                                <select class="form-select" id="select1" name="status">
                                    <option value="" disabled selected>Please Select</option>
                                </select>
                            </div>
                        </div>

                        <div class="mb-3 row">
                            <label class="col-md-2 col-form-label" for="text-input">Short Description</label>
                            <div class="col-md-10">
                                <textarea class="form-control" id="text-input" name="shortDesc" rows="5" placeholder="Describe here.."></textarea>
                                <span class="help-block"><i>not more than 255 characters</i></span>
                            </div>
                        </div>
                        <div class="mb-3 row">
                            <label class="col-md-2 col-form-label" for="textarea-input">Detail Description and Requirement<code>*</code></label>
                            <div class="col-md-10">
                                <textarea class="form-control" name="desc" cols="30" rows="5"></textarea>
                            </div>
                        </div>

                    </form>

                </div>

                <div class="card-footer">
                    <button id="resetButton" class="btn btn-danger" type="reset"><i class="fa fa-ban"></i> Reset</button>
                    <button id="submitVacancy" class="btn btn-success sweet-8" type="submit">Submit</button>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection


@push('styles')
    <link rel="stylesheet" type="text/css" href="{{asset('assets/css/vendors/date-picker.css')}}">
@endpush

@push('scripts')
    <script src="{{ asset('assets/js/datepicker/date-picker/datepicker.js') }}"></script>
    <script src="{{ asset('assets/js/datepicker/date-picker/datepicker.en.js') }}"></script>
    <script src="{{ asset('assets/js/datepicker/date-picker/datepicker.custom.js') }}"></script>
    <script type="text/javascript">
        $(function() {
            $(".datepicker_format").datepicker({ dateFormat: "dd/mm/yyyy" }).val()
        });
    </script>
@endpush