@extends('layouts.app')

@section('content')

    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">Post a Job</h3>
        </div>
        <div class="panel-body">

            @if(session()->has('success'))
                <div class="alert alert-success alert-dismissible" role="alert">
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <strong>Success!</strong> {{ session('success') }}.
                </div>
            @endif


            <form action="{{ route('careers.update', $career) }}" method="post">
                @method('PUT')
                @csrf
                <div class="row">
                    <div class="form-group col-md-4 @error('name') has-error @enderror ">
                        <label for="name">Job Name</label>
                        <input type="text" name="name" id="name" class="form-control "
                               value="{{old('name', $career->name)}}" autocomplete="off" placeholder="Post Name">
                        @error('name')
                        <small class="form-text text-danger">{{ $message }}</small>
                        @enderror
                    </div>
                    <div class="form-group col-md-4 @error('type') has-error @enderror ">
                        <label for="type">Job Type</label>
                        <select name="type" id="type" class="form-control">
                            <option value="" style="display: none;">Select Job Type</option>
                            <option value="Consultant" @if($career->type == 'Consultant') selected @endif >Consultant</option>
                            <option value="Intern" @if($career->type == 'Intern') selected @endif >Intern</option>
                            <option value="Permanent" @if($career->type == 'Permanent') selected @endif >Permanent</option>
                            <option value="Temporary" @if($career->type == 'Temporary') selected @endif >Temporary</option>
                        </select>
                        @error('type')
                        <small class="form-text text-danger">{{ $message }}</small>
                        @enderror
                    </div>
                    <div class="form-group col-md-4 @error('location') has-error @enderror ">
                        <label for="location">Post Location</label>
                        <input type="text" name="location" id="location" class="form-control"
                               value="{{old('location',$career->location)}}" autocomplete="off" placeholder="Post Location">
                        @error('location')
                        <small class="form-text text-danger">{{ $message }}</small>
                        @enderror
                    </div>
                </div>
                <div class="row">

                    <div class="form-group col-md-4 @error('experience_required') has-error @enderror ">
                        <label for="experience_required">Experience Required</label>
                        <input type="number" step=".1" name="experience_required" id="experience_required"
                               class="form-control"
                               value="{{old('experience_required',$career->experience_required)}}" autocomplete="off"
                               placeholder="Experience Required">
                        @error('experience_required')
                        <small class="form-text text-danger">{{ $message }}</small>
                        @enderror
                    </div>
                    <div class="form-group col-md-4 @error('industry') has-error @enderror ">
                        <label for="industry">Industry</label>
                        <input type="text" name="industry" id="industry" class="form-control"
                               value="{{old('industry',$career->industry)}}" autocomplete="off" placeholder="Industry">
                        @error('industry')
                        <small class="form-text text-danger">{{ $message }}</small>
                        @enderror
                    </div>
                    <div class="form-group col-md-4 @error('number_of_positions') has-error @enderror ">
                        <label for="number_of_positions">Number of Positions</label>
                        <input type="number" name="number_of_positions" id="number_of_positions" class="form-control"
                               value="{{old('number_of_positions',$career->number_of_positions)}}" autocomplete="off"
                               placeholder="Number of Positions">
                        @error('number_of_positions')
                        <small class="form-text text-danger">{{ $message }}</small>
                        @enderror
                    </div>
                </div>
                <div class="row">

                    <div class="form-group col-md-12 @error('heading') has-error @enderror ">
                        <label for="heading">Short Description</label>
                        <input type="text" name="heading" id="heading" class="form-control"
                               value="{{old('heading',$career->heading)}}" autocomplete="off" placeholder="Short Description">
                        @error('heading')
                        <small class="form-text text-danger">{{ $message }}</small>
                        @enderror
                    </div>
                </div>
                <div class="row">
                    <div class="form-group col-md-12 @error('description') has-error @enderror ">
                        <label for="description">Post Description</label>
                        <textarea name="description" id="description" cols="30" rows="10"
                                  class="form-control jodit">{{old('description', $career->description)}}</textarea>
                        @error('description')
                        <small class="form-text text-danger">{{ $message }}</small>
                        @enderror
                    </div>
                </div>
                <div class="row">
                    <div class="form-group col-md-3">
                        <button type="submit" class="btn btn-primary">Submit Job</button>
                    </div>

                </div>
            </form>

        </div>


        @endsection
        @push('css')
            <link rel="stylesheet" type="text/css"
                  href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css"/>
        @endpush
        @push('script')
            <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
            <script type="text/javascript"
                    src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
            <script>
                $(function () {
                    let dateRange = $('input[name="dateRange"]');
                    dateRange.daterangepicker({
                        autoUpdateInput: false,
                        maxDate: new Date(),
                        locale: {
                            cancelLabel: 'Clear'
                        }
                    });

                    dateRange.on('apply.daterangepicker', function (ev, picker) {
                        $(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
                    });

                    dateRange.on('cancel.daterangepicker', function (ev, picker) {
                        $(this).val('');
                    });

                });
            </script>

            <script type="text/javascript">
                const editorJodit = new Jodit('.jodit', {
                    showCharsCounter: true,
                    showWordsCounter: true,
                    askBeforePasteHTML: false,
                    askBeforePasteFromWord: false,
                    defaultActionOnPaste: 'insert_only_text',
                    defaultActionOnPasteFromWord: 'insert_as_text',
                    tabIndex: 0,
                    theme: "summer",
                    height: 300,
                    hotkeys: {
                        redo: 'ctrl+z',
                        undo: 'ctrl+y,ctrl+shift+z',
                        indent: 'ctrl+]',
                        outdent: 'ctrl+[',
                        bold: 'ctrl+b',
                        italic: 'ctrl+i',
                        removeFormat: 'ctrl+shift+m',
                        insertOrderedList: 'ctrl+shift+7',
                        insertUnorderedList: 'ctrl+shift+8',
                        openSearchDialog: 'ctrl+f',
                        openReplaceDialog: 'ctrl+r',
                    }
                });

                editorJodit.events.on('beforePaste', (event) => {
                    const target = event.clipboardData || window.clipboardData || event.originalEvent.clipboardData;
                    const pastedText = target.getData('text/plain') || target.getData('text/html');
                    console.log("beforePaste");
                    if (pastedText.indexOf('data:image') !== -1 || pastedText.indexOf('src="data:image"') !== -1 || pastedText.indexOf('base64') !== -1) {
                        return false;
                    }
                });

                editorJodit.events.off('processPaste.paste').on('processPaste.paste', (event, text, type) => {
                    if (text && /.*\<img.*src=".*base64.*[\S\n\r\s]*">.*/g.test(text)) {
                        return text.replace(/\<img.*src=".*base64.*[\S\n\r\s]*">/g, '');
                    } else {
                        return text;
                    }
                });
            </script>
    @endpush