@extends('master')
@section('content')
    <section>
        <div class="post d-flex flex-column-fluid" id="kt_post">
            <!--begin::Container-->
            <div id="kt_content_container" class="container-fluid">
                <!--begin::Card-->
                <div class="card">
                    <div class="card-header border-0 pt-5 p-0">
                        <div class="container-fluid"><span id="general_result"></span></div>
                        <div class="container-fluid mt-3 text-end">

                            <button type="button" class="btn btn-sm btn-primary" name="create_record" id="create_record"><i
                                    class="fa fa-plus"></i> {{ __('Add Job') }}</button>
                        </div>
                    </div>
                    <div class="card-body py-4">
                        <div class="table-responsive hr-bg">
                            <table id="job_post-table"
                                class="table table-row-dashed table-row-gray-300 align-middle gs-0 gy-4">
                                <thead>
                                    <tr class="text-start text-muted text-uppercase fw-bolder fs-7 gs-0">
                                        <th style="width: 10%">#</th>
                                        <th>{{ trans('Position') }}</th>
                                        <th>{{ trans('Company') }}</th>
                                        <th>{{ __('Posted Date') }}</th>
                                        <th>{{ trans('Status') }}</th>
                                        <th>{{ __('Closing Date') }}</th>
                                        <th class="not-exported">{{ trans('action') }}</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>

                    </div>
                </div>
            </div>
        </div>

    </section>


    <!--begin::Modal - Add Job-->
    <div class="modal fade" id="formModal" data-keyboard="false" data-bs-backdrop="static">
        <!--begin::Modal dialog-->
        <div class="modal-dialog modal-dialog-centered mw-650px">
            <!--begin::Modal content-->
            <div class="modal-content">
                <!--begin::Form-->
                <form class="form" action="javascript:void(0)" id="sample_form" enctype="multipart/form-data">
                    @csrf
                    <!--begin::Modal header-->
                    <div class="modal-header" id="kt_modal_new_address_header">
                        <!--begin::Modal title-->
                        <h2 id="modalTitle">{{ __('Add Job') }}</h2>
                        <!--end::Modal title-->
                        <!--begin::Close-->
                        <div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">
                            <!--begin::Svg Icon | path: icons/duotune/arrows/arr061.svg-->
                            <span class="svg-icon svg-icon-1">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                    fill="none">
                                    <rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1"
                                        transform="rotate(-45 6 17.3137)" fill="black" />
                                    <rect x="7.41422" y="6" width="16" height="2" rx="1"
                                        transform="rotate(45 7.41422 6)" fill="black" />
                                </svg>
                            </span>
                            <!--end::Svg Icon-->
                        </div>
                        <!--end::Close-->
                    </div>
                    <!--end::Modal header-->

                    <!--begin::Modal body-->
                    <div class="modal-body py-10 px-lg-17">
                        <span id="form_result"></span>
                        <div class="row mb-5">
                            <div class="col-md-6 fv-row mb-5">
                                <label class="required fs-5 fw-bold mb-2">{{ __('Company') }}</label>
                                <select name="company_id" id="company_id" class="form-select form-select-solid"
                                    data-control="select2" data-placeholder="{{ __('Select Company') }}">
                                    <option value=""></option>
                                    @foreach($companies as $company)
                                        <option value="{{$company->id}}">{{$company->company_name}}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-md-6 fv-row mb-5">
                                <label class="required fs-5 fw-bold mb-2">{{ __('Job Title') }}</label>
                                <input type="text" class="form-control form-control-solid" name="job_title"
                                    id="job_title" placeholder="{{ __('Job Title') }}" />
                            </div>

                            <div class="col-md-6 fv-row mb-5">
                                <label class="required fs-5 fw-bold mb-2">{{ __('Job Type') }}</label>
                                <select name="job_type" id="job_type" class="form-select form-select-solid"
                                    data-control="select2" data-placeholder="{{ __('Select Job Type') }}">
                                    <option value=""></option>
                                    <option value="full_time">{{__('Full Time')}}</option>
                                    <option value="part_time">{{__('Part Time')}}</option>
                                    <option value="internship">{{trans('Internship')}}</option>
                                    <option value="freelance">{{trans('Freelance')}}</option>
                                </select>
                            </div>

                            <div class="col-md-6 fv-row mb-5">
                                <label class="required fs-5 fw-bold mb-2">{{ __('Job Category') }}</label>
                                <select name="job_category_id" id="job_category_id" class="form-select form-select-solid"
                                    data-control="select2" data-placeholder="{{ __('Select Job Category') }}">
                                    <option value=""></option>
                                    @foreach($job_categories as $job_category)
                                        <option value="{{$job_category->id}}">{{$job_category->job_category}}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-md-6 fv-row mb-5">
                                <label class="required fs-5 fw-bold mb-2">{{ __('No Of Vacancy') }}</label>
                                <input type="text" class="form-control form-control-solid" name="no_of_vacancy"
                                    id="no_of_vacancy" placeholder="{{ __('No Of Vacancy') }}" />
                            </div>

                            <div class="col-md-6 fv-row mb-5">
                            <label class="required fs-5 fw-bold mb-2">{{__('Date Of Closing')}}</label>
                            <input type="text" class="form-control form-control-solid flatpickr-date" name="closing_date" id="closing_date" placeholder="Select Date" autocomplete="off">
                            </div>

                            <div class="col-md-6 fv-row mb-5">
                                <label class="required fs-5 fw-bold mb-2">{{ trans('Gender') }}</label>
                                <select name="gender" id="gender" class="form-select form-select-solid"
                                    data-control="select2" data-placeholder="{{ __('Select Gender') }}">
                                    <option value=""></option>
                                    <option value="No Preference">{{__('No Preference')}}</option>
                                    <option value="Male">{{trans('Male')}}</option>
                                    <option value="Female">{{trans('Female')}}</option>
                                    <option value="Other">{{trans('Other')}}</option>
                                </select>
                            </div>

                            <div class="col-md-6 fv-row mb-5">
                                <label class="required fs-5 fw-bold mb-2">{{ __('Minimum Experience') }}</label>
                                <select name="job_experience_id" id="job_experience_id" class="form-select form-select-solid"
                                    data-control="select2" data-placeholder="{{ __('Select Experience') }}">
                                    <option value=""></option>
                                    @foreach($jobExperiences as $item)
                                        <option value="{{$item->id}}">{{$item->title}}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-md-6 fv-row mb-5">
                                <label class="required fs-5 fw-bold mb-2">{{ __('Is Featured?') }}</label>
                                <select name="is_featured" id="is_featured" class="form-select form-select-solid"
                                    data-control="select2" data-placeholder="{{ __('Select Option') }}">
                                    <option value=""></option>
                                    <option value="0">No</option>
                                    <option value="1">Yes</option>
                                </select>
                            </div>

                            <div class="col-md-6 fv-row mb-5">
                                <label class="required fs-5 fw-bold mb-2">{{ trans('Status') }}</label>
                                <select name="status" id="status" class="form-select form-select-solid"
                                    data-control="select2" data-placeholder="{{ __('Select Status') }}">
                                    <option value=""></option>
                                    <option value="0">{{trans(('Unpublished'))}}</option>
                                    <option value="1">{{trans('Published')}}</option>
                                </select>
                            </div>

                            <div class="col-md-12 fv-row mb-5">
                                <label class="fs-5 fw-bold mb-2">{{ __('Short Description') }}</label>
                                <textarea class="form-control form-control-solid" id="short_description"
                                    name="short_description" rows="3"></textarea>
                            </div>

                            <div class="col-md-12 fv-row mb-5">
                                <label class="fs-5 fw-bold mb-2">{{ __('Long Description') }}</label>
                                <textarea class="form-control form-control-solid" id="long_description"
                                    name="long_description" rows="3"></textarea>
                            </div>
                        </div>
                    </div>
                    <!--end::Modal body-->

                    <!--begin::Modal footer-->
                    <div class="modal-footer flex-center">
                        <input type="hidden" name="action" id="action"/>
                        <input type="hidden" name="hidden_id" id="hidden_id"/>
                        <!--begin::Button-->
                        <button type="submit" id="action_button" class="btn btn-primary">
                            <span class="indicator-label">{{ trans('Submit') }}</span>
                        </button>
                        <!--end::Button-->
                    </div>
                    <!--end::Modal footer-->
                </form>
                <!--end::Form-->
            </div>
        </div>
    </div>
    <!--end::Modal - Add Job-->
@endsection

@section('page_script')
    <script nonce="{{ $cspNonce }}">
        (function($) {
            "use strict";
            $(document).ready(function() {

        $('.flatpickr-date').flatpickr({
        dateFormat: "Y-m-d"
    });


                let table_table = $('#job_post-table').DataTable({
                    initComplete: function() {
                        this.api().columns([1]).every(function() {
                            var column = this;
                            var select = $('<select><option value=""></option></select>')
                                .appendTo($(column.footer()).empty())
                                .on('change', function() {
                                    var val = $.fn.dataTable.util.escapeRegex(
                                        $(this).val()
                                    );

                                    column
                                        .search(val ? '^' + val + '$' : '', true, false)
                                        .draw();
                                });

                            column.data().unique().sort().each(function(d, j) {
                                select.append('<option value="' + d + '">' + d +
                                    '</option>');
                                $('select').selectpicker('refresh');
                            });
                        });
                    },
                    responsive: true,
                    fixedHeader: {
                        header: true,
                        footer: true
                    },

                    serverSide: true,
                    ajax: {
                        url: "{{ route('job_posts.index') }}",
                    },

                    columns: [

                        {
                            data: 'id',
                            orderable: false,
                            searchable: false
                        },
                        {
                            data: 'job_description',
                            name: 'job_description',

                        },
                        {
                            data: 'company',
                            name: 'company',
                        },
                        {
                            data: 'updated_at',
                            name: 'updated_at',
                        },
                        {
                            data: 'status',
                            name: 'status',
                            render: function(data) {
                                if (data == 1) {
                                    return "<td><div class = 'badge badge-success'>Published</div></td>";
                                } else {
                                    return "<td><div class = 'badge badge-danger'>Unpublished</div></td>";
                                }
                            }

                        },
                        {
                            data: 'closing_date',
                            name: 'closing_date',
                        },
                        {
                            data: 'action',
                            name: 'action',
                            orderable: false
                        }
                    ],


                    "order": [],
                    'language': {
                        'lengthMenu': '_MENU_ {{ __('records per page') }}',
                        "info": '{{ trans('Showing') }} _START_ - _END_ (_TOTAL_)',
                        "search": '{{ trans('Search') }}',
                        'paginate': {
                            'previous': '{{ trans('Previous') }}',
                            'next': '{{ trans('Next') }}'
                        }
                    },
                    'columnDefs': [{
                            "orderable": false,
                            'targets': [0, 6],
                        },

                    ],


                    'select': {
                        style: 'multi',
                        selector: 'td:first-child'
                    },
                    'lengthMenu': [
                        [10, 25, 50, -1],
                        [10, 25, 50, "All"]
                    ],
                    dom: '<"row"lfB>rtip',
                    buttons: [{
                            extend: 'pdf',
                            text: '<i title="export to pdf" class="fa fa-file-pdf"></i>',
                            exportOptions: {
                                columns: ':visible:Not(.not-exported)',
                                rows: ':visible'
                            },
                        },
                        {
                            extend: 'csv',
                            text: '<i title="export to csv" class="fa fa-file-csv"></i>',
                            exportOptions: {
                                columns: ':visible:Not(.not-exported)',
                                rows: ':visible'
                            },
                        },
                        {
                            extend: 'print',
                            text: '<i title="print" class="fa fa-print"></i>',
                            exportOptions: {
                                columns: ':visible:Not(.not-exported)',
                                rows: ':visible'
                            },
                        }
                    ],
                });
                new $.fn.dataTable.FixedHeader(table_table);
            });




            $('#create_record').on('click', function() {
                $('#modalTitle').text('{{__('Add Job')}}');
                $('#action_button').val('{{trans("file.Add")}}');
                $('#action').val('{{trans("file.Add")}}');
                $('#formModal').modal('show');
                $('#sample_form')[0].reset();
                $("#company_id").val(null).trigger('change');
                $("#job_category_id").val(null).trigger('change');
                $("#job_type").val(null).trigger('change');
                $("#gender").val(null).trigger('change');
                $("#job_experience_id").val(null).trigger('change');
                $("#is_featured").val(null).trigger('change');
                $("#status").val(null).trigger('change');
            });

            $('#sample_form').on('submit', function(event) {
                event.preventDefault();


                 if ($('#action').val() == '{{trans('file.Add')}}') {
                     console.log(123);
                    $.ajax({
                        url: "{{ route('job_posts.store') }}",
                        method: "POST",
                        data: new FormData(this),
                        contentType: false,
                        cache: false,
                        processData: false,
                        dataType: "json",
                        success: function(data) {
                            var html = '';
                            if (data.errors) {
                                html = '<div class="alert alert-danger">';
                                for (var count = 0; count < data.errors.length; count++) {
                                    html += '<p>' + data.errors[count] + '</p>';
                                }
                                html += '</div>';
                            }
                            if (data.error) {
                                html = '<div class="alert alert-danger">' + data.error + '</div>';
                            }
                            if (data.success) {
                                toastr.success(data.success, "Success!");
                                setTimeout(function () {
                                    $('#sample_form')[0].reset();
                                    $('#job_post-table').DataTable().ajax.reload();
                                }, 1000);
                            }
                            $('#form_result').html(html).slideDown(300).delay(5000).slideUp(300);
                        }
                    });
                }

                if ($('#action').val() == '{{ trans('file.Edit') }}') {
                    console.log(123);
                    $.ajax({
                        url: "{{ route('job_posts.update') }}",
                        method: "POST",
                        data: new FormData(this),
                        contentType: false,
                        cache: false,
                        processData: false,
                        dataType: "json",
                        success: function(data) {
                            var html = '';
                            if (data.errors) {
                                html = '<div class="alert alert-danger">';
                                for (var count = 0; count < data.errors.length; count++) {
                                    html += '<p>' + data.errors[count] + '</p>';
                                }
                                html += '</div>';
                            }
                            if (data.error) {
                                html = '<div class="alert alert-success">' + data.error + '</div>';
                            }
                            if (data.success) {
                                toastr.success(data.success, "Success!");
                                setTimeout(function () {
                                    $('#formModal').modal('hide');
                                    $('#sample_form')[0].reset();
                                    $('#job_post-table').DataTable().ajax.reload();
                                }, 1000);
                            }
                            $('#form_result').html(html).slideDown(300).delay(5000).slideUp(300);
                        }
                    });
                }
            });


            $(document).on('click', '.edit', function() {

                var id = $(this).attr('id');
                $('#form_result').html('');


                var target = "{{ route('job_posts.index') }}/" + id + '/edit';

                $.ajax({
                    url: target,
                    dataType: "json",
                    success: function(html) {

                        $('#company_id').val(html.data.company_id).trigger('change');
                        $('#job_category_id').val(html.data.job_category_id).trigger('change');
                        $('#job_type').val(html.data.job_type).trigger('change');
                        $('#gender').val(html.data.gender).trigger('change');
                        $('#job_experience_id').val(html.data.job_experience_id).trigger('change');
                        $('#is_featured').val(html.data.is_featured).trigger('change');
                        $('#status').val(html.data.status).trigger('change');
                        $('#job_title').val(html.data.job_title);
                        $('#no_of_vacancy').val(html.data.no_of_vacancy);
                        $('#closing_date').val(html.data.closing_date);
                        $('#short_description').val(html.data.short_description);
                        $('#hidden_id').val(html.data.id);
                        $('#modalTitle').text('{{trans('Edit')}}');
                        $('#action_button').val('{{trans('file.Edit')}}');
                        $('#action').val('{{trans('file.Edit')}}');
                        $('#formModal').modal('show');


                        //if (html.data.long_description) {
                            //function htmlDecode(input) {
                                //var e = document.createElement('div');
                                //e.innerHTML = input;
                                //return e.childNodes.length == 0 ? "" : e.childNodes[0].nodeValue;
                                //  }
                            //tinymce.get('long_description').setContent(htmlDecode(html.data
                                //.long_description));
                        //}


                    }
                })
            });


            let delete_id;

            $(document).on('click', '.delete', function() {
                delete_id = $(this).attr('id');
                $('#confirmModal').modal('show');
                $('.modal-title').text('{{ __('DELETE Record') }}');
                $('#ok_button').text('{{ trans('OK') }}');

            });


            $(document).on('click', '#bulk_delete', function() {

                var id = [];
                let table = $('#job_post-table').DataTable();
                id = table.rows({
                    selected: true
                }).ids().toArray();
                if (id.length > 0) {
                    if (confirm('{{ __('Delete Selection', ['key' => trans('Job')]) }}')) {
                        $.ajax({
                            url: '{{ route('mass_delete_job_posts') }}',
                            method: 'POST',
                            data: {
                                job_postIdArray: id
                            },
                            success: function(data) {
                                let html = '';
                                if (data.success) {
                                    html = '<div class="alert alert-success">' + data.success +
                                        '</div>';
                                }
                                if (data.error) {
                                    html = '<div class="alert alert-danger">' + data.error +
                                        '</div>';
                                }
                                table.ajax.reload();
                                table.rows('.selected').deselect();
                                if (data.errors) {
                                    html = '<div class="alert alert-danger">' + data.error +
                                        '</div>';
                                }
                                $('#general_result').html(html).slideDown(300).delay(5000).slideUp(
                                    300);

                            }

                        });
                    }
                } else {

                }
            });


            $('.close').on('click', function() {
                $('#sample_form')[0].reset();
                $('select').selectpicker('refresh');
                $('#job_post-table').DataTable().ajax.reload();
            });

            $('#ok_button').on('click', function() {
                let target = "{{ route('job_posts.index') }}/" + delete_id + '/delete';
                $.ajax({
                    url: target,
                    beforeSend: function() {
                        $('#ok_button').text('{{ trans('Deleting...') }}');
                    },
                    success: function(data) {
                        if (data.success) {
                            toastr.success(data.success, "Success!");
                        }
                        if (data.error) {
                            toastr.error(data.error, "Error!");
                        }
                        setTimeout(function() {
                            $('#confirmModal').modal('hide');
                            $('#job_post-table').DataTable().ajax.reload();
                        }, 1000);
                    }
                })
            });
        })(jQuery);
    </script>
@endsection