@extends('admin.layouts.master')

@section('title')
    Jobs Manage
@endsection

@section('content')
<section class="section">
    <div class="section-body">
        <div class="row">
          <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h4>Jobs</h4>
                    <a href="{{ route('jobs.create') }}" class="btn btn-primary">Create Job</a>
                </div>
              <div class="card-body">
                <div class="table-responsive">
                  <table class="table table-striped" id="table-1">
                    <thead>
                      <tr>
                          <th>No</th>
                          <th>Title</th>
                          <th>Location</th>
                          <th>Salary</th>
                          <th>Restaurant Name</th>
                          <th>Experience</th>
                          <th>City</th>
                          <th>Status</th>
                          <th width="280px">Action</th>
                      </tr>
                    </thead>
                    <tbody>
                      @foreach ($jobs as $key => $job)
                      <tr>
                        <td>{{ $key + 1 }}</td>
                        <td>{{ $job->title }}</td>
                        <td>{{ $job->location }}</td>
                        <td>{{ $job->salary }}</td>
                        <td>{{ $job->restaurant_name }}</td>
                        <td>{{ $job->experience }}</td>
                        <td>{{ $job->city }}</td>
                        <td>
                          @if($job->status == '0')
                            <span class="badge badge-success">Active</span>
                          @else
                            <span class="badge badge-danger">Inactive</span>
                          @endif
                        </td>
                        <td>
                            {{-- Edit --}}
                            <a href="{{ route('jobs.edit', $job->id) }}" class="btn btn-success">
                                <i class="fa fa-edit"></i> Edit
                            </a>

                            {{-- Activate/Deactivate --}}
                            @if($job->status == '0')
                              <a class="btn btn-primary" href="{{ route('jobs.status',$job->id) }}">
                                  <i class="fa fa-check"></i> Activate
                              </a>
                            @else
                              <a class="btn btn-danger" href="{{ route('jobs.status',$job->id) }}">
                                  <i class="fa fa-times"></i> Deactivate
                              </a>
                            @endif

                            {{-- Delete --}}
                            <button class="btn btn-danger" type="button" onclick="deleteItem({{ $job->id }})">
                                <i class="fa fa-trash" aria-hidden="true"></i> Delete
                            </button>
                            <form id="delete-form-{{ $job->id }}" action="{{ route('jobs.destroy', $job->id) }}" method="post" style="display:none;">
                                @csrf
                                @method('DELETE')
                            </form>
                        </td>
                      </tr>
                      @endforeach
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
    </div>
</section>
@endsection

@push('js')
<!-- Sweet Alert Js -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@7.29.1/dist/sweetalert2.all.min.js"></script>
<script type="text/javascript">
    function deleteItem(id) {
        const swalWithBootstrapButtons = swal.mixin({
            confirmButtonClass: 'btn btn-success',
            cancelButtonClass: 'btn btn-danger',
            buttonsStyling: false,
        })

        swalWithBootstrapButtons({
            title: 'Are you sure?',
            text: "You won't be able to revert this!",
            type: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Yes, delete it!',
            cancelButtonText: 'No, cancel!',
            reverseButtons: true
        }).then((result) => {
            if (result.value) {
                event.preventDefault();
                document.getElementById('delete-form-'+id).submit();
            } else if (
                result.dismiss === swal.DismissReason.cancel
            ) {
                swalWithBootstrapButtons(
                    'Cancelled',
                    'Your data is safe :)',
                    'error'
                )
            }
        })
    }
</script>
@endpush