@extends('u.layouts.app')
@section('page_title')
    {{(!empty($page_title) && isset($page_title)) ? $page_title : ''}}
@endsection
@push('head-scripts')
    <link href="{{ asset('u/select2/dist/css/select2.min.css') }}" rel="stylesheet"/>
    <link href="{{ asset('u/select2/dist/css/select2-bootstrap5.min.css') }}" rel="stylesheet"/>
    <link href="{{ asset('u/cropper/cropper.min.css') }}" rel="stylesheet"/>
@endpush
@section('content')
    <main class="page-wrapper compact-wrapper" id="pageWrapper">
        @include('u.applicant.inc.topMenu')
        <div class="page-body-wrapper">
            <div class="page-body">
    <div class="card mt-3 mx-3">
        <div class="card-body">
            @if(isset($submission))
                {{-- Start: Page Content --}}
                <div class="d-flex justify-content-between">
                    <div>
                        <h1 class="card-title mb-0">{{(!empty($p_title) && isset($p_title)) ? $p_title : ''}}</h1>
                        <div class="small text-medium-emphasis">
                            <h3>  {{(!empty($p_summary) && isset($p_summary)) ? $p_summary : ''}}</h3>
                        </div>
                    </div>
                </div>
                <hr>

                {{-- Start: Form --}}
                <form class="" method="{{$method}}" action="{{$action}}" enctype="{{$enctype}}">
                    @csrf
                    <div class="row">
                        <div class="mb-3 col-md-12">
                            <label class="form-label" for="stall">Cover Letter</label>
                            <textarea rows="5" class="form-control" id="cover_letter"
                                      name="cover_letter">{{old('cover_letter')}}</textarea>
                            @error('cover_letter')
                            <strong class="text-danger">{{ $message }}</strong>
                            @enderror
                        </div>
                    </div>
                    <button type="submit" class="btn m-1 btn-success" onclick="holdOn('sk-rect');">Submit</button>
                </form>
                {{-- End: Form --}}
            @else
                <h4>Complete your Profile before Applying</h4>
                <p>Please Fill Out Details Mention Below.</p>
                <ul>
                    <li> Submission</li>
                </ul>
            @endif
        </div>
        {{-- Page Description : Start --}}
        @if(!empty($p_description) && isset($p_description))
            <div class="card-footer">
                <div class="row">
                    <div class="col-12 mb-sm-2 mb-0">
                        <p>{{(!empty($p_description) && isset($p_description)) ? $p_description : ''}}</p>
                    </div>
                </div>
            </div>
        @endif
        {{-- Page Description : End --}}
        {{-- End: Page Content --}}
    </div>
{{--    </div>--}}
        </div>
        </div>
    </main>
@endsection
@push('footer-scripts')
    <script src="{{ asset('u/ckeditor/ckeditor.js') }}"></script>
    <script src="{{ asset('u/ckeditor/ckfinder/ckfinder.js') }}"></script>
    <script src="{{ asset('u/select2/dist/js/select2.js') }}"></script>
    <script>
        $(document).ready(function () {
            //Select Job Catalogue
            $('.select2-jobs').select2({
                theme: "bootstrap5",
                placeholder: 'Select Jobs',
                ajax: {
                    url: '{{route('manager.get.jobs-select')}}',
                    dataType: 'json',
                    delay: 250,
                    type: 'GET',
                    data: function (params) {
                        var query = {
                            q: params.term,
                            type: 'public',
                            _token: '{{csrf_token()}}'
                        }
                        return query;
                    },
                    processResults: function (data) {
                        return {
                            results: $.map(data, function (item) {
                                let title = '[' + item.id + ']' + item.name + ' | ' + item.department;
                                return {
                                    id: item.id,
                                    text: title
                                }
                            })
                        };
                    },
                    cache: true
                }
            }).trigger('change.select2');

            //Select Applicant
            $('.select2-applicant').select2({
                theme: "bootstrap5",
                placeholder: 'Select Applicant',
                ajax: {
                    url: '{{route('manager.get.applicants-select')}}',
                    dataType: 'json',
                    delay: 250,
                    type: 'GET',
                    data: function (params) {
                        var query = {
                            q: params.term,
                            type: 'public',
                            _token: '{{csrf_token()}}'
                        }
                        return query;
                    },
                    processResults: function (data) {
                        return {
                            results: $.map(data, function (item) {
                                return {
                                    id: item.id,
                                    text: item.name
                                }
                            })
                        };
                    },
                    cache: true
                }
            }).trigger('change.select2');
            var editor = CKEDITOR.replace('cover_letter',{
                removePlugins: 'sourcearea, save, print, templates, exportpdf, forms,embed, link,div,flash,iframe,attach,showblocks,pagebreak,image,new page,preview,cut,copy',
            });
        });
    </script>
    @if(Session::has('messages'))
        <script>
            noti({!! json_encode((Session::get('messages'))) !!});
        </script>
    @endif
@endpush