@extends('layouts.app')

@section('title','Jobs')

@section('content')
<div class="row">
    <div class="col-md-12">
        <div class="panel panel-default">
            <div class="panel-heading">Latest Jobs Posted</div>
            <div class="panel-body">
                @if(count($jobs)>0)
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>Title</th>
                            <th>Country</th>
                            <th>Company</th>
                            <th>Category</th>
                            <th>Salary</th>
                            <th>Description</th>
                            <th>Expires In</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($jobs as $job)
                        <tr>
                            <td>{{ $job->title }}</td>
                            <td>{{ $job->company->country->name }}</td>
                            <td>{{ $job->company->name }}</td>
                            <td>{{ $job->jobCategory->name }}</td>
                            <td>{{ $job->salary }}</td>
                            <td>{!! $job->description !!}</td>
                            <td>{{ $job->expiryStatus() }}</td>
                            <td class="text-center"><p> <a id="editBtn" data-id="{{ $job->id }}" data-jobtitle="{{ $job->title }}" data-jobcompanyid="{{ $job->company->id }}" data-numberofvacancy="{{ $job->vacancy }}" data-jobsalary="{{ $job->salary }}" data-jobcategoryid="{{ $job->job_category_id }}" data-jobdescription="{{ str_replace('<br />','',$job->description) }}" data-jobexpirydate="{{ $job->expires_at->toFormattedDateString() }}" href="#" class="btn btn-warning" data-toggle="modal" data-target="#editModal">Edit</a> </p> <p> <a id="deleteJob" data-id="{{ $job->id }}" href="#" class="btn btn-danger" data-toggle="modal" data-target="#deleteModal">Delete</a> </p></td>
                        </tr>
                        @endforeach
                    </tbody>                                        
                </table>
                {{ $jobs->links() }}
                @else
                No jobs found.
                @endif
            </div>
        </div>
    </div>
</div>

<div id="editModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Edit Job</h4>
            </div>
            <div class="modal-body">
                @include('errors.form')
                <form id="editForm" method="POST" action="{{ url('/admin/job') }}">
                    {{ csrf_field() }}
                    <input type="hidden" name="_method" value="PATCH">
                    <input type="hidden" name="job_id" id="current_job_id">
                    <div class="form-group">
                        <label>Job Title</label>
                        <input type="text" id="current_job_title" name="job_title" class="form-control">
                    </div>
                    <div class="form-group">
                        <label>Company</label>
                        <select id="current_job_company" name="company" class="form-control">
                            @foreach($companies as $company)
                            <option value="{{ $company->id }}">{{ $company->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Number of vacancy</label>
                                <input id="current_vacancy" type="number" name="vacancy" class="form-control" min="1" value="10">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Salary</label>
                                <input id="current_salary" type="text" name="salary" class="form-control">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Job Category</label>
                                <select id="current_job_category" name="category" class="form-control">
                                    @foreach($categories as $category)
                                    <option value="{{ $category->id }}">{{ $category->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Final Date</label>
                                <input type="date" name="expires_at" class="form-control" min="{{ date('Y-m-d') }}" value="{{ date('Y-m-d') }}" required>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>Job Description</label>
                        <textarea id="current_job_description" rows="10" class="form-control" name="description"></textarea>
                    </div>
                    <input type="submit" name="submit" value="Edit Job" class="btn btn-block btn-lg btn-success">
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<div id="deleteModal" class="modal fade" role="dialog">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Delete Job</h4>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to delete this job?</p>
                <form id="deleteJobForm" method="POST" action="{{ url('/admin/job') }}">
                    {{ csrf_field() }}
                    <input id="job_id" type="hidden" name="job_id" value="">
                    <input type="hidden" name="_method" value="DELETE">
                    <input type="submit" name="submit" value="Yes" class="btn btn-success">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">No</button>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

@endsection

@section('footer')

<script type="text/javascript">
  $(document).on('click','#deleteJob',function(){
    var job = $(this).data('id');
    $("#deleteJobForm #job_id").val(job);
});

  $(document).on('click','#editBtn',function(){
    var jobId = $(this).data('id');
    var jobCompanyId = $(this).data('jobcompanyid');
    var jobTitle = $(this).data('jobtitle');
    var jobSalary = $(this).data('jobsalary');
    var numberOfVacancy = $(this).data('numberofvacancy');
    var jobDescription = $(this).data('jobdescription');
    var jobCategoryId = $(this).data('jobcategoryid');
    $("#editForm #current_job_id").val(jobId);
    $("#editForm #current_job_title").val(jobTitle);
    $("#editForm #current_salary").val(jobSalary);
    $("#editForm #current_vacancy").val(numberOfVacancy);
    $('#editForm #current_job_description').html(jobDescription);
    $('#editForm #current_job_category').val(jobCategoryId);
    $('#editForm #current_job_company').val(jobCompanyId);
});
</script>

@endsection
