@extends('admin.layouts.master')
@section('title') Job @endsection
@section('content')
<!-- Include SweetAlert CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
<style>
    div#buttons-datatables_filter input {
        width: 100%;
        height: 40px;
        margin-top: 3px;
    }

    div#buttons-datatables_filter {
        padding-top:0;   
    }
</style>
<div class="row">
    <div class="col-lg-12">
        <div class="card">
        <div class="card-header py-2 d-flex flex-wrap g-3 justify-content-between align-items-center">
                <h4 class="card-title mb-0">Job List</h4>
                <div class="d-flex justify-content-end">
                    <a href="{{ route('admin.add.job-page') }}" class="btn btn-success">
                        <i class="bi bi-plus-lg"></i> Post a Job
                    </a>
                </div>
                <!--<button type="button" class="btn btn-primary add-btn" data-bs-toggle="modal" data-bs-target="#exampleModalgrid">-->
                <!--                    <i class="ri-add-line align-bottom me-1"></i> Add-->
                <!--                </button>-->
            </div><!-- end card header -->
           
            <div class="card-body">
                <div class="listjs-table" id="customerList">
                    <div class="row g-4 mb-3">
                      <div class="row g-3 mb-0">
                            <div class="col-md-3">
                                <label for="filter-status" class="form-label">Filter by Status</label>
                                <select id="filter-status" class="form-select">
                                    <option value="">All</option>
                                    <option value="open">Open</option>
                                    <option value="on-hold">On Hold</option>
                                    <option value="closed">Closed</option>
                                </select>
                            </div>
                            <div class="col-md-3">
                                <label for="filter-job-type" class="form-label">Filter by Job Type</label>
                                <select id="filter-job-type" class="form-select">
                                    <option value="">All</option>
                                                                    </select>
                            </div>
                        </div>

                        <!-- <div class="col-sm">
                            <div class="d-flex justify-content-sm-end">
                                <div class="search-box ms-2">
                                    <input type="text" class="form-control search" placeholder="Search...">
                                    <i class="ri-search-line search-icon"></i>
                                </div>
                            </div>
                        </div> -->
                    </div>

                    <div class="table-responsive table-card mt-3 mb-1">
                        <table class="table align-middle table-nowrap" id="buttons-datatables">
                            <thead class="table-light">
                                <tr>
                                    <th>Sr. No.</th>
                                    <th>Company Name</th>
                                    <th>Designation</th>
                                    <th>Job Location</th>
                                    <th>Job Type</th>
                                    <th>Qualification</th>
                                    <th>Exprience</th>
                                    <th>Applied Candidates</th>
                                    <th>Status</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody class="list form-check-all">  
                                @if($careers->isEmpty())
                                <tr>
                                    <td colspan="5" class="text-center">
                                        <lord-icon src="https://cdn.lordicon.com/msoeawqm.json" trigger="loop" colors="primary:#121331,secondary:#08a88a" style="width:75px;height:75px"></lord-icon>
                                        <h5 class="mt-2">Sorry! No Data Found</h5>
                                    </td>
                                </tr>
                                @else
                                @foreach($careers as $key => $row)
                                <tr>
                                    <td>{{ $key + 1 }}</td>
                                    <td>{{ $row->employer->company_name ?? '' }}</td>
                                    <td>{{ $row->designation }}</td>
                                    <td>{{ $row->job_location }}</td>
                                    <td>{{ $row->jobType ? $row->jobType->name : '' }}</td>
                                    <td>{{ $row->required_qualification }}</td>
                                    <td>{{ $row->required_experience }} Years</td>
                                    <td>{{ $row->applications_count }}</td>
                                    <td>
                                        <div class="d-flex gap-2 align-items-center">
                                            <select class="form-select form-select-sm w-auto job-status-select"
                                                    data-id="{{ $row->id }}"
                                                    data-prev-status="{{ $row->status }}"
                                                    data-prev-reason="{{ $row->reason ?? '' }}">
                                                <option value="open" {{ $row->status == 'open' ? 'selected' : '' }}>Open</option>
                                                <option value="on-hold" {{ $row->status == 'on-hold' ? 'selected' : '' }}>On Hold</option>
                                                <option value="closed" {{ $row->status == 'closed' ? 'selected' : '' }}>Closed</option>
                                            </select>

                                        </div>
                                    </td>


                                    <!--<td class="cv-logo">-->
                                    <!--    <a href="{{ url('public/uploads/careers/' . $row->image) }}" download><strong>Download Job Profile Document</strong>-->
                                    <!--    </a>-->
                                    <!--</td>-->

                                    <td>
                                        <div class="d-flex gap-2">
                                            <a href="{{ route('admin.job.edit', $row->id) }}" class="btn btn-sm btn-primary">Edit</a>
                                            <a href="{{ route('jobs.show', $row->id) }}" class="btn btn-sm btn-info">View</a>
                                            <!--<div class="edit">-->
                                            <!--    <button class="btn btn-sm btn-success edit-item-btn" data-bs-toggle="modal" data-bs-target="#exampleModalgrid"-->
                                            <!--        data-id="{{ $row->id }}"-->
                                            <!--        data-designation="{{ $row->designation }}"-->
                                            <!--        data-job_location="{{ $row->job_location }}"-->
                                            <!--        data-qualification="{{ $row->qualification }}"-->
                                            <!--        data-overview="{{ $row->overview }}"-->
                                            <!--        data-roles_n_responsibilities="{{ $row->roles_n_responsibilities }}"-->
                                            <!--        data-experience="{{ $row->experience }}">-->
                                            <!--        Edit-->
                                            <!--    </button>-->
                                            <!--</div>-->
                                            <!--<div class="remove">-->
                                            <!--    <a href="{{ route('career.delete', $row->id) }}" class="btn btn-sm btn-danger" onclick="return confirm('Are you sure want to delete this?')">Remove</a>-->
                                            <!--</div>-->
                                        </div>
                                    </td>
                                </tr>
                                @endforeach
                                @endif
                            </tbody>
                        </table>
                    </div>
                   
                </div>
            </div><!-- end card -->
        </div>
        <!-- end col -->
    </div>
    <!-- end col -->
</div>
<!-- end row -->
<!-- Status Update Modal -->
<div class="modal fade" id="statusReasonModal" tabindex="-1" aria-labelledby="statusReasonModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form id="statusReasonForm">
                <div class="modal-header">
                    <h5 class="modal-title" id="statusReasonModalLabel">Reason for Status Change</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="modal-job-id">
                    <input type="hidden" id="modal-new-status">
                    <div class="mb-3">
                        <label for="status-reason" class="form-label">Reason</label>
                        <textarea class="form-control" id="status-reason" rows="3" required></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary">Update Status</button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                </div>
            </form>
        </div>
    </div>
</div>


@endsection

@section('script')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Include SweetAlert JS -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.all.min.js"></script>
<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.11.5/js/dataTables.bootstrap5.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.9/js/dataTables.responsive.min.js"></script>
<!--<script src="https://cdn.datatables.net/buttons/2.2.2/js/dataTables.buttons.min.js"></script>-->
<!--<script src="https://cdn.datatables.net/buttons/2.2.2/js/buttons.print.min.js"></script>-->
<!--<script src="https://cdn.datatables.net/buttons/2.2.2/js/buttons.html5.min.js"></script>-->

<script src="{{ URL::asset('build/js/pages/datatables.init.js') }}"></script>

<script src="{{ URL::asset('build/js/app.js') }}"></script>

<script>
    let previousSelected = {};

    $(document).on('focusin', '.job-status-select', function () {
        previousSelected[this.dataset.id] = $(this).val();
    });

    $(document).on('change', '.job-status-select', function () {
        const jobId = $(this).data('id');
        const newStatus = $(this).val();
        const prevReason = $(this).data('prev-reason') || '';
        const prevStatus = $(this).data('prev-status') || '';

        // Only prompt modal for on-hold or closed
        if (newStatus === 'on-hold' || newStatus === 'closed') {
            // Show modal and populate data
            $('#modal-job-id').val(jobId);
            $('#modal-new-status').val(newStatus);
            $('#status-reason').val(prevReason);

            let modal = new bootstrap.Modal(document.getElementById('statusReasonModal'));
            modal.show();
        } else {
            // No modal needed for 'open', so submit directly
            updateStatus(jobId, newStatus, '');
        }
    });

    $('#statusReasonForm').on('submit', function (e) {
        e.preventDefault();
        const jobId = $('#modal-job-id').val();
        const newStatus = $('#modal-new-status').val();
        const reason = $('#status-reason').val();

        if (!reason.trim()) {
            Swal.fire({
                icon: 'warning',
                title: 'Reason Required',
                text: 'Please provide a reason for this status change.'
            });
            return;
        }

        updateStatus(jobId, newStatus, reason);
        let modal = bootstrap.Modal.getInstance(document.getElementById('statusReasonModal'));
        modal.hide();
    });
    $('#filter-status, #filter-job-type').on('change', function () {
    let status = $('#filter-status').val();
    let jobType = $('#filter-job-type').val();

    $.ajax({
        url: "{{ route('admin.jobs.ajax.filter') }}",
        type: "GET",
        data: {
            status: status,
            job_type: jobType
        },
        success: function (response) {
            let table = $('#buttons-datatables').DataTable();
            if ($.fn.DataTable.isDataTable('#buttons-datatables')) {
                table.clear().destroy();
            }

            $('#buttons-datatables tbody').html(response);
            $('#buttons-datatables').DataTable({
                dom: 'Bfrtip',
                buttons: [
                    'copy', 'csv', 'excel', 'print', 'pdf'
                ]
            });
        },
        error: function () {
            Swal.fire({
                icon: 'error',
                title: 'Oops!',
                text: 'Something went wrong while filtering.'
            });
        }
    });
});


    function updateStatus(jobId, status, reason) {
        $.ajax({
            url: "{{ route('jobs.update.status') }}",
            type: "POST",
            data: {
                _token: "{{ csrf_token() }}",
                job_id: jobId,
                status: status,
                reason: reason
            },
            success: function (response) {
                Swal.fire({
                    icon: 'success',
                    title: 'Status Updated',
                    text: response.message
                });
            },
            error: function () {
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: 'Failed to update status.'
                });
            }
        });
    }
</script>


@endsection