@extends('layouts.backend.index')
@section('title', $label)

@section('content')
    <div class="card">
        <div class="card-body">
            <x-section-header  action="list"  :icon="$icon" :label="$label" hr-class="mb-4" />
            <div class="row mt-3">
                <div class="col-sm-6">
                    <table class="table-padding">
                        <tr>
                            <td>Nomor</td>
                            <td class="divide">:</td>
                            <td>{{ $vacancy->number }}</td>
                        </tr>
                        <tr>
                            <td>Jabatan</td>
                            <td class="divide">:</td>
                            <td>{{ $vacancy->positionData->name }}</td>
                        </tr>
                        <tr>
                            <td>Tanggal</td>
                            <td class="divide">:</td>
                            <td>{{ Common::dateFormat($vacancy->start_date, 'dd mmmm yyyy') }}</td>
                        </tr>
                    </table>
                </div>
                <div class="col-sm-6">
                    <tr>
                        <td>Tanggal</td>
                        <td class="divide">:</td>
                        <td>{!!$vacancy->status_badge!!}</td>
                    </tr>
                </div>
            </div>
            <div class="row mt-3">
                <div class="col-sm-12">
                    <label>Job Desk:</label>
                    {!!$vacancy->job_desk!!}
                </div>
                <div class="col-sm-12">
                    <label>Requirement</label>
                    {!!$vacancy->requirement!!}

                </div>
            </div>
        </div>
    </div>
    <div class="card mt-3">
        <div class="card-body">
            <x-section-header action="create"  :create-route="route('recruitment.job_vacancy.applicant.create',$vacancy->encrypted_id)"  :icon="'mdi mdi-account-tie'" :label="'Pelamar'" hr-class="mb-4" />

            <div class="table-responsive">
                <table class="table" id="table-applicant">
                    <thead>
                        <tr>
                            <th>No</th>
                            <th>Tanggal</th>
                            <th>Nama</th>
                            <th>Usia</th>
                            <th>No Telepon</th>
                            <th>Pendidikan</th>
                            <th>#</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
@endsection
@push('styles')
    <link href="{{ asset('vendor/datatables.net/datatables.net-bs4/css/dataTables.bootstrap4.min.css') }}" rel="stylesheet">
@endpush

@push('scripts')
    <script src="{{ asset('vendor/datatables.net/datatables.net/js/jquery.dataTables.min.js') }}" type="text/javascript">
    </script>
    <script src="{{ asset('vendor/datatables.net/datatables.net-bs4/js/dataTables.bootstrap4.min.js') }}"
        type="text/javascript"></script>

    <script>
        $(document).ready(function() {
            window.LaravelDataTables = window.LaravelDataTables || {}
            window.LaravelDataTables["table-applicant"] = $("#table-applicant").DataTable({
                dom: 'fltpr',
                language: {
                    search: "",
                    searchPlaceholder: "Pencarian...",
                    lengthMenu: "_MENU_ Data"
                },
                ajax: {
                    url: "{{ route('recruitment.job_vacancy.datatable.applicant', $vacancy->encrypted_id) }}",
                    type: "POST",
                    data: {
                        _token: token
                    }
                },
                processing: true,
                serverSide: true,
                deferRender: true,
                ordering: false,
                aLengthMenu: [
                    [10, 25, 50, 100],
                    [10, 25, 50, 100]
                ],
                drawCallback: function() {
                    $(".set-tooltip").tooltip({
                        container: "body"
                    })
                },
                columns: [{
                        data: null,
                        class: "align-top",
                        orderable: false,
                        searchable: false,
                        render: (data, type, row, meta) =>{
                            if(row.is_seen)
                                return  meta.row + meta.settings._iDisplayStart + 1

                                return '<b>'+(meta.row + meta.settings._iDisplayStart + 1)+'</b>';
                        }
                    },

                    {
                        class: "align-top",
                        render: (data, type, row) => {


                            return dateFormat(row.applied_date)
                        }
                    },
                    {
                        class: "align-top",
                        render: (data, type, row) => row?.name??""
                    },

                    {
                        class: "align-top",
                        render: (data, type, row) => row?.usia??""
                    },


                    {
                        data: "status",
                        class: "align-top",
                        render: (data, type, row) => row.phone
                    },

                    {
                        data: "status",
                        class: "align-top",
                        render: (data, type, row) => row.last_education
                    },

                    {
                        class: "align-top text-center",
                        orderable: false,
                        searchable: false,
                        width: "100px",
                        render: (data, type, row) => {
                            let url_show = "{{ route('recruitment.job_vacancy.applicant.show', -1) }}"
                            let url_edit = "{{ route('recruitment.job_vacancy.applicant.edit', -1) }}"
                            let url_destroy = "{{ route('recruitment.job_vacancy.applicant.delete', -1) }}"

                            url_show = url_show.replace("-1", row.encrypted_id)
                            url_edit = url_edit.replace("-1", row.encrypted_id)
                            url_destroy = url_destroy.replace("-1", row.encrypted_id)


                            let html = `<a href="${url_show}" class="btn btn-primary btn-xs set-tooltip mb-1" title="Lihat">
                            <i class="mdi mdi-magnify"></i></a>
                            <a href="${url_edit}" class="btn btn-default btn-xs set-tooltip mb-1" title="Edit">
                            <i class="mdi mdi-pencil"></i></a>
                            <button type="button" class="btn btn-danger btn-xs set-tooltip mb-1" title="Batal" onclick="deleteConfirm('${url_destroy}', false, 'table-applicant','Hapus pelamar ini')">
                                    <i class="mdi mdi-delete"></i>
                                </button>`;

                            return html;
                        }
                    }
                ]
            })

            $($.fn.dataTable.tables(true)).css('width', '100%')


        })
    </script>
@endpush