@php
        $modules = DB::table('user_jobs')->select('module')->distinct()->get();

@endphp



<style>
    .job-card {
        border: 1px solid #ddd;
        border-radius: 5px;
        padding: 15px;
        margin-bottom: 10px;
        cursor: pointer;
        transition: 0.3s;
    }

    .job-card:hover {
        background-color: #f8f9fa;
    }

    .job-card.active {
        background-color: #e0e0e0;
    }
</style>
<style>
    body {
        height: 100vh !important;
        font-family: 'Arial', sans-serif;
        background-color: #f4f6f9;
        margin: 0;
        padding-top: 20px;
        padding-right: 20px;
        padding-left: 20px;
        padding-bottom: 0;
    }

    .container {
        background-color: #ffffff;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        border-radius: 8px;
        padding: 20px;
        overflow: auto;/
    }

    h4 {
        color: #333;
        margin-bottom: 20px;
    }

    .job-card {
        border: 1px solid #ddd;
        border-radius: 5px;
        padding: 15px;
        margin-bottom: 10px;
        cursor: pointer;
        transition: 0.3s;
        background-color: #fff;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .job-card:hover {
        background-color: #f8f9fa;
        transform: translateY(-2px);
    }

    .job-card.active {
        background-color: #e0e0e0;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }

    #searchBar {
        border-radius: 5px;
        border: 1px solid #ddd;
        padding: 10px;
    }

    .list-group {
        padding: 0;
    }

    .list-group-item {
        border: none;
        transition: background-color 0.3s;
    }

    .list-group-item:hover {
        background-color: #f8f9fa;
    }

    .modal-content {
        border-radius: 8px;
        border: none;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    }

    .modal-header {
        border-bottom: 1px solid #ddd;
    }

    .modal-body {
        padding: 20px;
    }

    #registration-number {
        border-radius: 5px;
        border: 1px solid #ddd;
        padding: 10px;
    }

    .btn-primary {
        background-color: #007bff;
        border: none;
        border-radius: 5px;
        padding: 10px 20px;
        color: white;
        transition: background-color 0.3s;
    }

    .btn-primary:hover {
        background-color: #0056b3;
        align-items: center;
    }

    #modules-list,
    #jobs-container {
        max-height: 70vh;
        overflow-y: auto;
        border: 1px solid #ddd;
        border-radius: 5px;
        background-color: #fafafa;
        padding: 10px;
    }
</style>


<div class="modal fade" id="viewJobsModal" tabindex="-1" role="dialog" aria-labelledby="viewJobsModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content" style="border-radius: 10px; overflow: hidden;">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title" id="viewJobsModalLabel">View Jobs</h5>
                <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body p-4" style="max-height: 75vh; overflow-y: auto;">
                <div class="container">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="search-container mb-3">
                                <input type="text" id="searchBar" class="form-control" placeholder="Search Departments...">
                            </div>
                            <div class="list-container" style="height: 60vh; overflow-y: auto; border: 1px solid #ccc; border-radius: 5px;">
                                <ul class="list-group" id="modules-list">
                                    @foreach ($modules as $module)
                                        <li class="list-group-item module-item" data-module="{{ $module->module }}" style="cursor: pointer;">
                                            {{ $module->module }}
                                        </li>
                                    @endforeach
                                </ul>
                            </div>
                        </div>

                        <!-- Right Column: Job Details -->
                        <div class="col-md-8">
                            <div class="job-container p-3" style="height: 60vh; overflow-y: auto; border: 1px solid #ccc; border-radius: 5px;">
                                <div id="jobs-container">
                                    <p class="text-muted">Select a department to view jobs here.</p>
                                </div>
                            </div>
                            <div class="d-flex justify-content-end mt-3">
                                <button id="submit-btn" class="btn btn-primary" disabled>Submit</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    let selectedJobId = null;
    let selectedRegBodyId = null;
    let reqReg = 0;

    $(document).ready(function() {
        $('.module-item').click(function () {
const module = $(this).data('module');
$('.module-item').removeClass('active');
$(this).addClass('active');
$('#jobs-container').html('<p>Loading jobs...</p>');

$.post("{{ route('get.jobs') }}", {
    module: module,
    _token: '{{ csrf_token() }}'
}, function (data) {
    $('#jobs-container').empty();
    if (data.length === 0) {
        $('#jobs-container').html('<p>No jobs available in this department.</p>');
    } else {
        data.forEach(job => {
            $('#jobs-container').append(`
                <div class="job-card" data-job-id="${job.id}" data-req-reg="${job.req_reg}">
                    <h5>${job.job}</h5>
                    <p>${job.job_description || 'No description available'}</p>
                </div>
            `);
        });
    }
});
});


        $(document).on('click', '.job-card', function() {
            $('.job-card').removeClass('active');
            $(this).addClass('active');
            selectedJobId = $(this).data('job-id');
            reqReg = $(this).data('req-reg'); 
            $('#submit-btn').removeAttr('disabled');

            $.post("{{ route('get.regulatory.bodies') }}", {
                job_id: selectedJobId,
                _token: '{{ csrf_token() }}'
            }, function(data) {
                $('#regulatory-bodies-container').empty();
                if (data.length > 0) {
                    data.forEach(body => {
                        $('#regulatory-bodies-container').append(`
                            <div class="form-check">
                                <input class="form-check-input reg-body-option" type="radio" name="reg_body" value="${body.id}">
                                <label class="form-check-label">${body.name}</label>
                            </div>
                        `);
                    });
                    $('#regulatoryBodyModal').modal('show');
                }
            });
        });

        $('#save-regulatory-body').click(function() {
            let selectedRegBodyId = $('input[name="reg_body"]:checked').val();
            let registrationNumber = $('#registration-number').val();

            if (reqReg === 1 && !selectedRegBodyId) {
                alert('Please select a regulatory body.');
                return;
            }

            if (selectedRegBodyId && !registrationNumber) {
                alert('Please provide a registration number.');
                return;
            }

            $.post("{{ route('update.job') }}", {
                job_id: selectedJobId,
                reg_body_id: selectedRegBodyId,
                registration_number: registrationNumber,
                _token: '{{ csrf_token() }}'
            }, function(response) {
                if (response.success) {
                    alert(response.message);
                    $('#regulatoryBodyModal').modal('hide');
                } else {
                    alert(response.message);
                }
            }).fail(function(xhr) {
                console.error('Error: ', xhr.responseText);
                alert('Error: ' + xhr.responseText);
            });
        });

        $('#submit-btn').click(function() {
            if (selectedJobId) {
                $.post("{{ route('update.job') }}", {
                    job_id: selectedJobId,
                    reg_body_id: selectedRegBodyId,
                    registration_number: $('#registration-number').val(),
                    _token: '{{ csrf_token() }}'
                }, function(response) {
                    if (response.success) {
                        alert(response.message);
                    } else {
                        alert(response.message);
                    }
                });
            }
        });
    });
</script>

<script>
    $('#searchBar').keyup(function() {
        let searchTerm = $(this).val().toLowerCase();
        $('.module-item').each(function() {
            let moduleText = $(this).text().toLowerCase();
            if (moduleText.indexOf(searchTerm) !== -1) {
                $(this).show();
            } else {
                $(this).hide();
            }
        });
    });
</script>