@extends('frontend.layouts.app2')

@section('title')
Hired Applicants
@endsection

@section('seo')
<title>Your Trusted Service Contracting Partner | Beta Com Resources Inc.</title>
<!-- (SEO metadata here) -->
@endsection

@section('content')
<h3>Welcome, {{ Auth::user()->name }}!</h3>

<h1>Hired Applicants</h1>


<div class="table-responsive">
    <table class="table">
        <thead>
            <tr>
                <th scope="col">Job Title</th>
                <th scope="col">Name</th>
                <th scope="col">Email</th>
                <th scope="col">Phone</th>
                <th scope="col">Status and Remarks</th>
                <th scope="col"></th>
            </tr>
        </thead>
        <tbody>
            @foreach($applications as $application)
            @foreach($application->applicationCareer as $applicationCareer)
            @if($applicationCareer->applicationCareerStatus->isNotEmpty())
            <tr>
                <td>{{ $applicationCareer->career->jobtitle }}</td>
                <td>{{ $application->first_name }} {{ $application->last_name }}</td>
                <td>{{ $application->email }}</td>
                <td>{{ $application->phone_no }}</td>

                <td class="row align-items-center">

                    <div class="col-6">
                        <!-- Button to open update modal -->
                        <button type="button" class="btn bg-color-light border-0 rounded-0 px-5" data-bs-toggle="modal" data-bs-target="#updateModal{{ $applicationCareer->id }}">
                            Update
                        </button>

                    </div>

                    <!-- Button to open view all statuses modal -->
                    <div class="col-6">
                        <button type="button" class="btn btn-secondary border-0 rounded-0 " data-bs-toggle="modal" data-bs-target="#viewAllModal{{ $applicationCareer->id }}">
                            View All Statuses
                        </button>
                    </div>

                </td>
                <td>
                    <form method="GET" action="{{ url('recruiter-applicants-details', ['id' => $application->id, 'career_id' => $applicationCareer->career->id]) }}">
                        <div class="text-center">
                            <button class="btn bg-color-light border-0 rounded-0 px-5" style="align-items: center;">VIEW DETAILS</button>
                        </div>
                    </form>
                </td>
            </tr>

            <!-- Update Status Modal -->
            <div class="modal fade" id="updateModal{{ $applicationCareer->id }}" tabindex="-1" aria-labelledby="updateModalLabel{{ $applicationCareer->id }}" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="updateModalLabel{{ $applicationCareer->id }}">Update Status and Remarks</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <form method="POST" onsubmit="return validateCKEditor('{{ $applicationCareer->id }}')" action="{{ route('update-status', ['applicationCareer' => $applicationCareer->id]) }}">
                            @csrf
                            @method('PATCH')
                            <div class="modal-body">
                                <div class="mb-3">
                                    <label for="status" class="form-label">Status</label>
                                    <select name="status" class="form-select">
                                        <option value="For Review" {{ $applicationCareer->applicationCareerStatus->first()->status == 'For Review' ? 'selected' : '' }}>For Review</option>
                                        <option value="For Interview" {{ $applicationCareer->applicationCareerStatus->first()->status == 'For Interview' ? 'selected' : '' }}>For Interview</option>
                                        <option value="2nd Interview" {{ $applicationCareer->applicationCareerStatus->first()->status == '2nd Interview' ? 'selected' : '' }}>2nd Interview</option>
                                        <option value="Final Interview" {{ $applicationCareer->applicationCareerStatus->first()->status == 'Final Interview' ? 'selected' : '' }}>Final Interview</option>
                                        <option value="Rejected" {{ $applicationCareer->applicationCareerStatus->first()->status == 'Rejected' ? 'selected' : '' }}>Rejected</option>
                                    </select>
                                </div>
                                <div class="mb-3">
                                    <label for="remarks{{ $applicationCareer->id }}" class="form-label">Remarks</label>
                                    <textarea required name="remarks" class="form-control" id="remarks{{ $applicationCareer->id }}"></textarea>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                                <button type="submit" class="btn btn-primary">Save changes</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>


            <script src="https://cdn.ckeditor.com/4.16.2/standard/ckeditor.js"></script>
            <script>
                // Initialize CKEditor dynamically
                CKEDITOR.replace('remarks{{ $applicationCareer->id }}');

                // Function to validate CKEditor content
                function validateCKEditor(id) {
                    const editorInstance = CKEDITOR.instances[`remarks${id}`]; // Get specific CKEditor instance
                    const remarksContent = editorInstance.getData().trim(); // Get and trim content
                    if (remarksContent === '') {
                        alert('Remarks field cannot be empty.'); // Alert if empty
                        return false; // Prevent form submission
                    }
                    return true; // Allow form submission if not empty
                }

                // Reset CKEditor content when modal is closed
                document.querySelector(`#updateModal{{ $applicationCareer->id }}`).addEventListener('hidden.bs.modal', function() {
                    const editorInstance = CKEDITOR.instances[`remarks{{ $applicationCareer->id }}`];
                    if (editorInstance) {
                        editorInstance.setData(''); // Clear content
                    }
                });
            </script>

            <!-- View All Statuses Modal -->
            <div class="modal fade" id="viewAllModal{{ $applicationCareer->id }}" tabindex="-1" aria-labelledby="viewAllModalLabel{{ $applicationCareer->id }}" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="viewAllModalLabel{{ $applicationCareer->id }}">All Statuses and Remarks</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <ul class="list-group">
                                @foreach($applicationCareer->applicationCareerStatus as $status)
                                <li class="list-group-item">
                                    <strong>Status:</strong> {{ $status->status }}<br>
                                    <strong>Remarks:</strong> {!! $status->remarks !!}<br>
                                    <strong>Date:</strong> {{ $status->created_at->format('F j, Y') }}
                                </li>
                                @endforeach
                            </ul>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>
            @endif
            @endforeach
            @endforeach
        </tbody>
    </table>
</div>


<style>
    table,
    th,
    td {
        border: none;
    }

    .contact-bg {
        background-color: #0f7170;
        height: 20vh;
        background-position: center;
        background-size: cover;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    @media (max-width: 768px) {
        .contact-bg {
            height: 25vh;
        }
    }
</style>
@endsection