@extends('website.layouts.master')
@section('title', 'Jobs')
@section('pagecss')
    <link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="{{ asset('css/jquery.dataTables.min.css') }}" >
    <link rel="stylesheet" type="text/css" href="{{ asset('css/responsive.dataTables.min.css') }}" >
    <link rel="stylesheet" type="text/css" href="{{ asset('css/rowReorder.dataTables.min.css') }}" >
    <link rel="stylesheet" type="text/css" href="/fonts/icomoon/icomoon.css" />
@endsection
@section('content')
<section>
    <div class="rs-breadcrumbs breadcrumbs-overlay">
         <div class="breadcrumbs-inner">
             <div class="container">
                 <div class="row">
                     <div class="col-md-12 text-center" style="color:white;font-weight:bold;">
                         <h1 class="pb-8" style="color:white;font-weight:bold;">@yield('title')</h1>
                         <ul>
                             @if(isset($path))
                                 @foreach($path as $item)
                                     <li class="pt-4 {{($parent->id==$section->id)?'active':''}}">
                                         <a href="{{$website->resolve($parent)}}" style="text-align: center;">{{$parent->locale->title}}</a>
                                     </li>
                                     <li class="pt-4">
                                         <a href="{{$item->link}}" style="text-align: center;">{{$item->title}}</a>
                                     </li>
                                 @endforeach
                             @else
                                 <li class="pt-4">
                                    <a href="/" style="text-align: center;">@lang("tr.Home")</a>
                                    <span style="color: #1998f4">@yield('title')</span>
                                 </li>
                             @endif
                         </ul>
                     </div>
                 </div>
             </div>
         </div>
     </div>  
 </section>
 <br>
<section>
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="col-lg-12 col-md-12 col-xs-12 col-sm-12">
                        <div class="card-body">
                            <table id="alumni_jobs_table" class="table table-striped display" style="@if(Lang::locale()=='ar')direction: rtl;text-align: right;@endif width:100%">
                                <thead>
                                <tr>
                                    <th width="30%">@lang('tr.Title')</th>
                                    <th width="45%">@lang('tr.Required Specializations')</th>
                                    <th width="20%">@lang('tr.Submission Due Date')</th>
                                    <th width="5%"></th>
                                </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

@endsection

@section('pagejs')

<!-- Datatables JS -->
<script src="/int/js/jquery.dataTables.min.js"></script>
<script src="/int/js/dataTables.responsive.min.js"></script>
<script src="/int/js/dataTables.rowReorder.min.js"></script>
<script src="/int/js/dataTables.fixedColumns.min.js"></script>

<script type="text/javascript">
    var showURL = '{{ route('show_job_post', ['jobPost'=>'#id']) }}';

    $(document).ready(function() {
        var dataTableLanguage = {
            "lengthMenu": "@lang('tr.DataTablePages')",
            "search": "@lang('tr.DataTableSearch')",
            "info": "@lang('tr.DataTableInfo')",
            "infoEmpty": "@lang('tr.DataTableNoRecord')",
            "infoFiltered": "@lang('tr.DataTableFiltered')",
            "loadingRecords": "@lang('tr.DataTableLoading')",
            "processing": "@lang('tr.DataTableProcessing')",
            "zeroRecords": "@lang('tr.DataTableZeroRecord')",
            "paginate": {
                "first": "@lang('tr.DataTableFirst')",
                "last": "@lang('tr.DataTableLast')",
                "next": "@lang('tr.DataTableNext')",
                "previous": "@lang('tr.DataTablePrevious')",
            },
        };
        var table = $('#alumni_jobs_table').DataTable({
                processing: true,
                serverSide: true,
                scrollX: true,
                stateSave: false,
                rowId: 'id',
                language: dataTableLanguage,
                "ajax": {
                    "url": '{{ route('website_alumni_jobs') }}',
                    "dataSrc": "data.data"
                },
                "columns": [
                    {"data": "title", "name": "title"},
                    {"data": "specializations", "name": "specializations",
                        fnCreatedCell: function (nTd, sData, oData, iRow, iCol) {

                            var html = '';
                            Object.entries(oData.specializations).forEach(function(value, key) {

                                html += value[1];
                                if((key+1) < oData.specializations.length)
                                    html += '<span class="text-separator">, </span>';
                            });

                            $(nTd).html(html);
                        }
                    },
                    {"data": "submission_due_date", "name": "submission_due_date"},
                    {"data": "id", "name": "id",
                        fnCreatedCell: function (nTd, sData, oData, iRow, iCol) {

                            var html = "";
                            html += "<a target='_blank' title='@lang('tr.View')' href='"+showURL.replace('#id', oData.id)+"' ><i class='icon-eye'></i></a>&nbsp;";

                            $(nTd).html("<span class='action-column'>" + html + "</span>");
                        }
                    },
                ]
            });

            $(".dataTables_filter").hide();

    });
</script>
@endsection