@extends('layouts.sidebar')
@section('title', 'Requisitions')
@section('content')

    @if (in_array('Manage Requisition', $privileges))

        <div class="container mx-auto text-sm">
            <a href="{{ route('requisitions.index') }}"
                class="px-4 py-2 text-center text-white bg-blue-600 rounded-lg hover:bg-blue-900">
                < Back </a>
                    <div id="update-form-modal" class="w-full h-full pd-overlay ">
                        <div class="max-w-full p-8 mx-auto my-10 bg-white border border-gray-200 rounded-lg shadow-md">
                            <div class="flex flex-col px-5 py-4 bg-white rounded-2xl">
                                <div class="flex items-center justify-between pb-4 border-b border-gray-200">
                                    <h4 class="text-sm font-medium text-gray-900">Update and View Manpower Requisition</h4>

                                </div>

                                <h1 class="mb-6 text-3xl font-bold text-center text-gray-800">Manpower Requisition
                                    Form</h1>

                                <p class="mb-4 text-gray-600">
                                    Notes: This MR must be updated with any changes in the requisition. Ensure all fields
                                    are
                                    accurate
                                    before submitting.
                                </p>
                                <div class="grid grid-cols-1 gap-10 lg:grid-cols-2">
                                    <div>

                                        @if (session('success'))
                                            <div id="successModal"
                                                class="fixed inset-0 z-50 flex items-center justify-center bg-gray-900 bg-opacity-50">
                                                <div
                                                    class="flex flex-col items-center justify-center w-full max-w-2xl p-6 bg-white rounded-lg shadow-lg">
                                                    <i class="text-3xl bx bx-check-circle"></i>
                                                    <p class="mb-5 text-lg font-semibold text-center">
                                                        {{ session('success') }}
                                                    </p>
                                                </div>
                                            </div>
                                            <script>
                                                // Automatically close the modal after 5 seconds
                                                setTimeout(function() {
                                                    document.getElementById('successModal').style.display = 'none';
                                                }, 3000); // 5000 milliseconds = 5 seconds
                                            </script>
                                        @endif

                                        <form action="{{ route('requisitions.update', $requisition->id) }}" method="POST">
                                            @csrf
                                            @method('PUT')

                                            <div class="mb-6">
                                                <h2 class="mb-2 text-2xl font-semibold text-gray-700">Manpower Required By:
                                                </h2>
                                                <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                                                    <div>
                                                        <label class="block mb-1 text-gray-600">Select Agency:</label>
                                                        <select id="agency" name="agency_id"
                                                            class="w-full p-2 border border-gray-300 rounded-md" required>
                                                            <option value="" disabled>Select an Agency</option>
                                                            @foreach ($agencies as $agency)
                                                                <option value="{{ $agency->id }}"
                                                                    {{ $agency->id == $requisition->agency_id ? 'selected' : '' }}>
                                                                    {{ $agency->name }}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                    </div>

                                                    <div>
                                                        <label class="block mb-1 text-gray-600">Select Company:</label>
                                                        <select id="company" name="company_id"
                                                            class="w-full p-2 border border-gray-300 rounded-md" required>
                                                            <option value="" disabled>Select a Company</option>
                                                            @foreach ($companies as $company)
                                                                <option value="{{ $company->id }}"
                                                                    {{ $company->id == $requisition->company_id ? 'selected' : '' }}>
                                                                    {{ $company->name }}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                    </div>

                                                    <div>
                                                        <label class="block mb-1 text-gray-600">Select Client:</label>
                                                        <select id="clientAccount" name="client_id"
                                                            class="w-full p-2 border border-gray-300 rounded-md" required>
                                                            <option value="" disabled>Select a Client</option>
                                                            @foreach ($clients as $client)
                                                                <option value="{{ $client->id }}"
                                                                    {{ $client->id == $requisition->client_id ? 'selected' : '' }}>
                                                                    Client: {{ $client->business_name }}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                    </div>

                                                    <div>
                                                        <label class="block mb-1 text-gray-600">Department:</label>
                                                        <select id="department_id" name="department_id"
                                                            class="w-full p-2 border border-gray-300">
                                                            <option value="" disabled>Select a Department</option>
                                                            @foreach ($departments as $department)
                                                                <option value="{{ $department->id }}"
                                                                    {{ $department->id == $requisition->department_id ? 'selected' : '' }}>
                                                                    {{ $department->department_name }}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                    <div>
                                                        <label class="block mb-1 text-gray-600">Designation:</label>
                                                        <input type="text" name="designation"
                                                            class="w-full p-2 border border-gray-300 rounded-md"
                                                            value="{{ old('designation', $requisition->designation) }}"
                                                            required>
                                                    </div>

                                                    <script>
                                                        $(document).ready(function() {
                                                            $('#agency').change(function() {
                                                                var agencyId = $(this).val();
                                                                if (agencyId) {
                                                                    var url = '{{ route('get_companies', ':agencyId') }}';
                                                                    url = url.replace(':agencyId', agencyId);

                                                                    $.ajax({
                                                                        url: url,
                                                                        type: 'GET',
                                                                        success: function(data) {
                                                                            $('#company').empty();
                                                                            $('#company').append(
                                                                                '<option value="" disabled selected>Select a Company</option>'
                                                                            );

                                                                            $.each(data, function(key, value) {
                                                                                $('#company').append('<option value="' + value.id +
                                                                                    '">' + value.name + '</option>');
                                                                            });
                                                                        }
                                                                    });
                                                                } else {
                                                                    $('#company').empty().append(
                                                                        '<option value="" disabled selected>Select a Company</option>');
                                                                }
                                                            });

                                                            $('#company').change(function() {
                                                                var companyId = $(this).val();
                                                                if (companyId) {
                                                                    var url = '{{ route('get_clients_by_company', ':companyId') }}';
                                                                    url = url.replace(':companyId', companyId);

                                                                    $.ajax({
                                                                        url: url,
                                                                        type: 'GET',
                                                                        success: function(data) {
                                                                            $('#clientAccount').empty();
                                                                            $('#clientAccount').append(
                                                                                '<option value="" disabled selected>Select a Client</option>'
                                                                            );

                                                                            $.each(data, function(key, value) {
                                                                                $('#clientAccount').append('<option value="' + value
                                                                                    .id + '">Client: ' + value.business_name +
                                                                                    '</option>');
                                                                            });
                                                                        }
                                                                    });
                                                                } else {
                                                                    $('#clientAccount').empty().append(
                                                                        '<option value="" disabled selected>Select a Client</option>');
                                                                }
                                                            });

                                                            $('#clientAccount').change(function() {
                                                                var clientId = $(this).val();
                                                                if (clientId) {
                                                                    var url = '{{ route('get_department', ':clientId') }}';
                                                                    url = url.replace(':clientId', clientId);

                                                                    $.ajax({
                                                                        url: url,
                                                                        type: 'GET',
                                                                        success: function(data) {
                                                                            $('#department_id').empty();
                                                                            $('#department_id').append(
                                                                                '<option value="" disabled selected>Select a Department</option>'
                                                                            );

                                                                            $.each(data, function(key, value) {
                                                                                $('#department_id').append('<option value="' + value
                                                                                    .id + '">' + value.department_name + '</option>'
                                                                                );
                                                                            });
                                                                        }
                                                                    });
                                                                } else {
                                                                    $('#department_id').empty().append(
                                                                        '<option value="" disabled selected>Select a Department</option>');
                                                                }
                                                            });
                                                        });
                                                    </script>

                                                    <div>
                                                        <label class="block mb-1 text-gray-600">Date:</label>
                                                        <div class="flex items-center pt-2">
                                                            {{ $requisition->created_at->timezone('Asia/Manila')->format('F jS, Y \a\t g:i A') }}
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <h2 class="mb-2 text-2xl font-semibold text-gray-700">Manpower Details:</h2>
                                            @if ($details && $details->isNotEmpty())
                                                <h2 class="mb-2 text-sm font-semibold text-gray-700">Stationary</h2>
                                                <div class="mt-4 border-2 border-black p-3 rounded">
                                                    @foreach ($details as $detail)
                                                        <div class="dynamic-input grid grid-cols-1 md:grid-cols-2 gap-10">
                                                            <div class="mb-4 ">
                                                                <label class="block mb-1 text-gray-600">Per Store</label>
                                                                <input type="text" name="per_store[]"
                                                                    class="w-full p-2 border border-gray-300 rounded-md"
                                                                    value="{{ $detail->per_store }}">
                                                            </div>
                                                            <div class="mb-4 ">
                                                                <label class="block mb-1 text-gray-600">Frequency of
                                                                    Duty</label>
                                                                <input type="text" name="frequency[]"
                                                                    class="w-full p-2 border border-gray-300 rounded-md"
                                                                    value="{{ $detail->frequency }}">
                                                            </div>
                                                            {{-- <div class="flex items-center">
                                                                <button type="button"
                                                                    class="remove-input bg-red-500 text-white w-[5rem] h-[2rem] px-3 py-1 rounded-md hover:bg-red-600">Remove</button>
                                                            </div> --}}
                                                        </div>
                                                    @endforeach
                                                </div>
                                            @else
                                                <h2 class="mb-2 text-sm font-semibold text-gray-700">Roving</h2>
                                            @endif
                                            <div class="mb-6">

                                                <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                                                    <div>
                                                        <label class="block mb-1 text-gray-600">Job Title:</label>
                                                        <input type="text" name="job_title"
                                                            class="w-full p-2 border border-gray-300 rounded-md"
                                                            value="{{ old('job_title', $requisition->job_title) }}"
                                                            required>
                                                    </div>
                                                    <div>
                                                        <label class="block mb-1 text-gray-600">No. of Vacancies:</label>
                                                        <input type="number" name="vacant_no"
                                                            class="w-full p-2 border border-gray-300 rounded-md"
                                                            value="{{ old('vacant_no', $requisition->vacant_no) }}"
                                                            required>
                                                    </div>
                                                    <div>
                                                        <label class="block mb-1 text-gray-600">Recruitment Type:</label>
                                                        <select name="rec_type"
                                                            class="w-full p-2 border border-gray-300 rounded-md" required>
                                                            <option value="project_based"
                                                                {{ $requisition->rec_type == 'project_based' ? 'selected' : '' }}>
                                                                Project
                                                                Based</option>
                                                            <option value="replacement"
                                                                {{ $requisition->rec_type == 'replacement' ? 'selected' : '' }}>
                                                                Replacement
                                                            </option>
                                                            <option value="seasonal"
                                                                {{ $requisition->rec_type == 'seasonal' ? 'selected' : '' }}>
                                                                Seasonal
                                                            </option>
                                                            <option value="direct_hire"
                                                                {{ $requisition->rec_type == 'direct_hire' ? 'selected' : '' }}>
                                                                Direct Hire
                                                            </option>
                                                            <option value="other"
                                                                {{ $requisition->rec_type == 'other' ? 'selected' : '' }}>
                                                                Other
                                                            </option>
                                                        </select>
                                                    </div>
                                                    <div>
                                                        <label class="block mb-1 text-gray-600">Project Name:</label>
                                                        <input type="text" name="project_name"
                                                            class="w-full p-2 border border-gray-300 rounded-md"
                                                            value="{{ old('project_name', $requisition->project_name) }}">
                                                    </div>
                                                    <div>
                                                        <label class="block mb-1 text-gray-600">To be filled before
                                                            (Date):</label>
                                                        <input type="date" name="filled_date"
                                                            class="w-full p-2 border border-gray-300 rounded-md"
                                                            value="{{ old('filled_date', $requisition->filled_date) }}">
                                                    </div>
                                                    @if (in_array('MRF Form Status', $privileges))
                                                        <div class="">
                                                            <label for="status" class="block mb-1 text-gray-600">Select
                                                                Status:</label>
                                                            <select id="status" name="status"
                                                                class="w-full p-2 border border-gray-300 rounded-md"
                                                                required>
                                                                <option value=" "
                                                                    {{ old('status', $requisition->status) === null ? 'selected' : '' }}>
                                                                    Open
                                                                </option>

                                                                <option value="Approved"
                                                                    {{ old('status', $requisition->status) == 'Approved' ? 'selected' : '' }}>
                                                                    Approved</option>
                                                                <option value="For Approval"
                                                                    {{ old('status', $requisition->status) == 'For Approval' ? 'selected' : '' }}>
                                                                    For Approval</option>
                                                                <option value="Meet & Greet / Intro"
                                                                    {{ old('status', $requisition->status) == 'Meet & Greet / Intro' ? 'selected' : '' }}>
                                                                    Meet & Greet / Intro</option>
                                                                <option value="Process Requirement"
                                                                    {{ old('status', $requisition->status) == 'Process Requirement' ? 'selected' : '' }}>
                                                                    Process Requirement</option>
                                                                <option value="Agency Orientation"
                                                                    {{ old('status', $requisition->status) == 'Agency Orientation' ? 'selected' : '' }}>
                                                                    Agency Orientation</option>
                                                                <option value="Client Orientation"
                                                                    {{ old('status', $requisition->status) == 'Client Orientation' ? 'selected' : '' }}>
                                                                    Client Orientation</option>
                                                                <option value="Deploy"
                                                                    {{ old('status', $requisition->status) == 'Deploy' ? 'selected' : '' }}>
                                                                    Deploy</option>
                                                                <option value="Disapproved"
                                                                    {{ old('status', $requisition->status) == 'Disapproved' ? 'selected' : '' }}>
                                                                    Disapproved</option>
                                                                <option value="Cancel"
                                                                    {{ old('status', $requisition->status) == 'Cancel' ? 'selected' : '' }}>
                                                                    Cancel</option>
                                                            </select>
                                                        </div>
                                                    @endif

                                                </div>

                                                <div class="mb-6">
                                                    <h2 class="mb-2 text-2xl font-semibold text-gray-700 ">Additional
                                                        Details:
                                                    </h2>
                                                    <div class="mb-4">
                                                        <label class="block mb-1 text-gray-600">Project Name (if project
                                                            based):</label>
                                                        <input type="text" name="project_name"
                                                            class="w-full p-2 border border-gray-300 rounded-md"
                                                            value="{{ old('project_name', $requisition->project_name) }}">
                                                    </div>
                                                    <div class="mb-4">
                                                        <label class="block mb-1 text-gray-600">Replacement for (name of
                                                            employee):</label>
                                                        <input type="text" name="replacement"
                                                            class="w-full p-2 border border-gray-300 rounded-md"
                                                            value="{{ old('replacement', $requisition->replacement) }}">
                                                    </div>
                                                    <div class="mb-4">
                                                        <label for="reasons" class="block mb-1 text-gray-600">Reasons for
                                                            Additional Position:</label>
                                                        <select name="reasons" id="reasons"
                                                            class="w-full p-2 border border-gray-300 rounded-md" required>
                                                            <option value="resignation"
                                                                {{ old('reasons', $requisition->reasons) === 'resignation' ? 'selected' : '' }}>
                                                                Resignation
                                                            </option>
                                                            <option value="termination"
                                                                {{ old('reasons', $requisition->reasons) === 'termination' ? 'selected' : '' }}>
                                                                Termination
                                                            </option>
                                                            <option value="promotion"
                                                                {{ old('reasons', $requisition->reasons) === 'promotion' ? 'selected' : '' }}>
                                                                Promotion
                                                            </option>
                                                            <option value="transfer"
                                                                {{ old('reasons', $requisition->reasons) === 'transfer' ? 'selected' : '' }}>
                                                                Transfer
                                                            </option>
                                                        </select>
                                                    </div>

                                                    <div class="mb-4">
                                                        <label for="vacant_form" class="block mb-1 text-gray-600">Vacancy
                                                            to
                                                            be
                                                            filled from:</label>
                                                        <select name="vacant_form" id="vacant_form"
                                                            class="w-full p-2 border border-gray-300 rounded-md" required>
                                                            <option value="within"
                                                                {{ old('vacant_form', $requisition->vacant_form) === 'within' ? 'selected' : '' }}>
                                                                Within
                                                            </option>
                                                            <option value="outside"
                                                                {{ old('vacant_form', $requisition->vacant_form) === 'outside' ? 'selected' : '' }}>
                                                                Outside
                                                            </option>
                                                        </select>
                                                    </div>

                                                </div>
                                            </div>
                                            <div class="flex items-center justify-center gap-5 mt-6">
                                                @if (in_array('MRF Open', $privileges))
                                                    <button type="submit"
                                                        class="px-4 py-2 text-white bg-blue-600 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75">
                                                        Update
                                                    </button>
                                                @endif
                                            </div>
                                        </form>
                                    </div>
                                    <div>
                                        <form action="{{ route('requisition.updateapplicant.submit') }}" method="POST">
                                            @csrf
                                            <div class="mb-6">
                                                <h2 class="mb-2 text-2xl font-semibold text-gray-700"> Applicants
                                                    Details:</h2>
                                                <div class="overflow-x-auto">
                                                    <table
                                                        class="min-w-full text-center border border-gray-300 rounded-md shadow-sm">
                                                        <thead>
                                                            <tr class="text-gray-700 bg-gray-100">
                                                                <th class="px-4 py-2 border-b">Name</th>
                                                                <th class="px-4 py-2 border-b">View</th>
                                                                <th class="px-4 py-2 border-b">Current Status</th>

                                                                <th class="px-4 py-2 border-b">Update Status</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                            @foreach ($requisition->mrfapplicant as $employee)
                                                                <tr class="border-b hover:bg-gray-50">
                                                                    <td class="px-4 py-2">
                                                                        {{ $employee->employee->first_name }}
                                                                        {{ $employee->employee->middle_name }}
                                                                        {{ $employee->employee->last_name }}
                                                                    </td>
                                                                    <td class="px-4 py-2">
                                                                        <div class="flex items-center justify-center"> <a
                                                                                href="{{ url('admin/pre-profile/' . $employee->employee->id) }}"
                                                                                class="flex items-center justify-center w-10 h-10 text-white bg-green-600 rounded-md edit"><i
                                                                                    class="text-xl bx bx-show"></i></a>
                                                                        </div>

                                                                    </td>

                                                                    <td class="px-4 py-2">
                                                                        {{ $employee->status }}

                                                                    </td>



                                                                    <td class="px-4 py-2">
                                                                        <select name="update_status[{{ $employee->id }}]"
                                                                            class="w-full p-2 border border-gray-300 rounded-md">
                                                                            @if (in_array('MRF Open', $privileges))
                                                                                <option value="open"
                                                                                    {{ $employee->status == 'open' ? 'selected' : '' }}>
                                                                                    Open</option>
                                                                            @endif
                                                                            @if (in_array('MRF For Approval', $privileges))
                                                                                <option value="approved"
                                                                                    {{ $employee->status == 'approved' ? 'selected' : '' }}>
                                                                                    Approved</option>
                                                                            @endif
                                                                            @if (in_array('MRF For Approval', $privileges))
                                                                                <option value="for_approval"
                                                                                    {{ $employee->status == 'for_approval' ? 'selected' : '' }}>
                                                                                    For Approval</option>
                                                                            @endif
                                                                            @if (in_array('MRF Meet & Greet', $privileges))
                                                                                <option value="meet_greet_intro"
                                                                                    {{ $employee->status == 'meet_greet_intro' ? 'selected' : '' }}>
                                                                                    Meet & Greet / Intro</option>
                                                                            @endif
                                                                            @if (in_array('MRF Process Requirement', $privileges))
                                                                                <option value="process_requirement"
                                                                                    {{ $employee->status == 'process_requirement' ? 'selected' : '' }}>
                                                                                    Process Requirement</option>
                                                                            @endif
                                                                            @if (in_array('MRF Agency Orientation', $privileges))
                                                                                <option value="agency_orientation"
                                                                                    {{ $employee->status == 'agency_orientation' ? 'selected' : '' }}>
                                                                                    Agency Orientation</option>
                                                                            @endif
                                                                            @if (in_array('MRF Client Orientation', $privileges))
                                                                                <option value="client_orientation"
                                                                                    {{ $employee->status == 'client_orientation' ? 'selected' : '' }}>
                                                                                    Client Orientation</option>
                                                                            @endif
                                                                            @if (in_array('MRF Deploy', $privileges))
                                                                                <option value="deploy"
                                                                                    {{ $employee->status == 'deploy' ? 'selected' : '' }}>
                                                                                    Deploy</option>
                                                                            @endif
                                                                            @if (in_array('MRF Disapproved', $privileges))
                                                                                <option value="disapproved"
                                                                                    {{ $employee->status == 'disapproved' ? 'selected' : '' }}>
                                                                                    Disapproved</option>
                                                                            @endif
                                                                            @if (in_array('MRF Cancel', $privileges))
                                                                                <option value="cancel"
                                                                                    {{ $employee->status == 'cancel' ? 'selected' : '' }}>
                                                                                    Cancel</option>
                                                                            @endif
                                                                            @if (in_array('MRF Cancel', $privileges))
                                                                                <option value="delete"
                                                                                    {{ $employee->status == 'delete' ? 'selected' : '' }}>
                                                                                    Delete</option>
                                                                            @endif
                                                                        </select>
                                                                    </td>
                                                                </tr>
                                                            @endforeach
                                                        </tbody>
                                                    </table>
                                                </div>
                                                <p class="mt-2 text-sm text-gray-500">Update the status of the existing
                                                    employees as needed.</p>
                                                @if (in_array('MRF Form Status', $privileges) || $requisition->status == 'For Approval')
                                                    <button type="submit"
                                                        class="w-full p-2 my-5 text-white bg-blue-500 rounded-md hover:bg-blue-600">Update</button>
                                                @endif
                                            </div>
                                        </form>
                                        @if (in_array('MRF Add Appicant', $privileges))
                                            <form action="{{ route('requisition.addEmployees.submit') }}" method="POST">
                                                @csrf
                                                <input type="hidden" name="requisition_id"
                                                    value="{{ $requisition->id ?? '' }}">

                                                <div class="mb-6">
                                                    <h2 class="mb-2 text-2xl font-semibold text-gray-700">Select Applicant:
                                                    </h2>
                                                    <div class="grid grid-cols-1 gap-4">
                                                        <div class="mb-4">
                                                            <label class="block mb-2 font-semibold text-gray-700">Select
                                                                Applicant:</label>
                                                            <!-- Add a searchable select element -->
                                                            <select id="employee_ids" name="employee_ids[]"
                                                                class="w-full p-3 h-[10rem] transition duration-200 ease-in-out border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 hover:border-gray-400"
                                                                multiple required>
                                                                @foreach ($employees as $employee)
                                                                    <option value="{{ $employee->id }}"
                                                                        class="text-gray-800">
                                                                        {{ $employee->first_name }}
                                                                        {{ $employee->middle_name }}
                                                                        {{ $employee->last_name }}
                                                                    </option>
                                                                @endforeach
                                                            </select>
                                                            <p class="mt-2 text-sm text-gray-500">
                                                                Hold down the Ctrl (Windows) or Command (Mac) button to
                                                                select multiple employees.
                                                            </p>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="mb-6">
                                                    <label class="block mb-1 text-gray-600">Select Status:</label>
                                                    <select id="status" name="status"
                                                        class="w-full p-2 border border-gray-300 rounded-md" required>
                                                        <option value="open">Open</option>
                                                        <option value="approved">Approved</option>
                                                        <option value="for_approval">For Approval</option>
                                                        <option value="meet_greet_intro">Meet & Greet / Intro</option>
                                                        <option value="process_requirement">Process Requirement</option>
                                                        <option value="agency_orientation">Agency Orientation</option>
                                                        <option value="client_orientation">Client Orientation</option>
                                                        <option value="deploy">Deploy</option>
                                                        <option value="disapproved">Disapproved</option>
                                                        <option value="cancel">Cancel</option>
                                                    </select>
                                                </div>

                                                <button type="submit"
                                                    class="w-full p-2 text-white bg-blue-500 rounded-md hover:bg-blue-600">Add
                                                    Employees</button>
                                            </form>

                                            <!-- Add Select2 Script -->
                                            <link
                                                href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css"
                                                rel="stylesheet" />
                                            <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
                                            <script>
                                                document.addEventListener('DOMContentLoaded', () => {

                                                    $('#employee_ids').select2({
                                                        placeholder: "Search employees...",
                                                        width: '100%',
                                                        allowClear: true
                                                    });
                                                });
                                            </script>

                                        @endif
                                    </div>
                                </div>
                            </div>

                            <div class="flex items-center justify-center">
                                @if ($requisition->status == 'For Approval' && in_array('MRF For Approval', $privileges))
                                    <form
                                        action="{{ route('requisition.updateStatus', ['requisition' => $requisition->id]) }}"
                                        method="post" class="inline-block" id="formForApproval">
                                        @csrf
                                        @method('PUT')
                                        <input type="hidden" name="status" value="Approved">
                                        <button type="button" onclick="showConfirmationModal('formForApproval')"
                                            class="px-4 py-2 text-white bg-red-600 rounded-md hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75">
                                            Mark as Approved
                                        </button>
                                    </form>
                                @elseif ($requisition->status == 'Approved' && in_array('MRF Approved', $privileges))
                                    <form
                                        action="{{ route('requisition.updateStatus', ['requisition' => $requisition->id]) }}"
                                        method="post" class="inline-block" id="formMeetGreet">
                                        @csrf
                                        @method('PUT')
                                        <input type="hidden" name="status" value="Meet & Greet / Intro">
                                        <button type="button" onclick="showConfirmationModal('formMeetGreet')"
                                            class="px-4 py-2 text-white bg-red-600 rounded-md hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75">
                                            Approved Proceed to Meet and Greet
                                        </button>
                                    </form>
                                @elseif ($requisition->status == 'Meet & Greet / Intro' && in_array('MRF Meet & Greet', $privileges))
                                    <form
                                        action="{{ route('requisition.updateStatus', ['requisition' => $requisition->id]) }}"
                                        method="post" class="inline-block" id="formMeetGreet">
                                        @csrf
                                        @method('PUT')
                                        <input type="hidden" name="status" value="Process Requirement">
                                        <button type="button" onclick="showConfirmationModal('formMeetGreet')"
                                            class="px-4 py-2 text-white bg-red-600 rounded-md hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75">
                                            Meet & Greet Completed
                                        </button>
                                    </form>
                                @elseif ($requisition->status == 'Process Requirement' && in_array('MRF Process Requirement', $privileges))
                                    <form
                                        action="{{ route('requisition.updateStatus', ['requisition' => $requisition->id]) }}"
                                        method="post" class="inline-block" id="formProcessRequirement">
                                        @csrf
                                        @method('PUT')
                                        <input type="hidden" name="status" value="Agency Orientation">
                                        <button type="button" onclick="showConfirmationModal('formProcessRequirement')"
                                            class="px-4 py-2 text-white bg-red-600 rounded-md hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75">
                                            Requirements Completed
                                        </button>
                                    </form>
                                @elseif ($requisition->status == 'Agency Orientation' && in_array('MRF Agency Orientation', $privileges))
                                    <form
                                        action="{{ route('requisition.updateStatus', ['requisition' => $requisition->id]) }}"
                                        method="post" class="inline-block" id="formAgencyOrientation">
                                        @csrf
                                        @method('PUT')
                                        <input type="hidden" name="status" value="Client Orientation">
                                        <button type="button" onclick="showConfirmationModal('formAgencyOrientation')"
                                            class="px-4 py-2 text-white bg-red-600 rounded-md hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75">
                                            Agency Orientation Completed
                                        </button>
                                    </form>
                                @elseif ($requisition->status == 'Client Orientation' && in_array('MRF Client Orientation', $privileges))
                                    <form
                                        action="{{ route('requisition.updateStatus', ['requisition' => $requisition->id]) }}"
                                        method="post" class="inline-block" id="formClientOrientation">
                                        @csrf
                                        @method('PUT')
                                        <input type="hidden" name="status" value="Deploy">
                                        <button type="button" onclick="showConfirmationModal('formClientOrientation')"
                                            class="px-4 py-2 text-white bg-red-600 rounded-md hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75">
                                            Client Orientation Completed
                                        </button>
                                    </form>
                                @endif
                            </div>
                            @foreach ($mrf as $action)
                                <div class="mb-2 p-2 border-b border-gray-200">


                                    <p><strong>User:</strong> {{ $action->user->name ?? 'Unknown User' }}</p>
                                    <p><strong>Action:</strong>
                                        @if (!in_array($action->action, ['Cancel', 'Approved', 'Disapproved']))
                                            Proceed to {{ $action->action ?? 'Open' }}
                                        @else
                                            {{ $action->action ?? 'Open' }}
                                        @endif
                                    </p>

                                    <p><strong>Timestamp:</strong>
                                        {{ $action->created_at->timezone('Asia/Manila')->format('F jS, Y \a\t g:i A') }}
                                    </p>

                                    </p>
                                </div>
                            @endforeach

                            <!-- Confirmation Modal -->
                            <div id="confirmationModal"
                                class="fixed inset-0 z-50 flex items-start justify-center hidden bg-black bg-opacity-50">
                                <div class="w-1/3 p-6 mt-20 bg-white rounded-md shadow-md">
                                    <h3 class="mb-4 text-lg font-semibold">Confirmation</h3>
                                    <p class="mb-4">Are you sure you want to proceed with this action?</p>
                                    <div class="flex justify-end">
                                        <button id="cancelButton" class="px-4 py-2 mr-2 bg-gray-300 rounded-md"
                                            onclick="closeConfirmationModal()">Cancel</button>
                                        <button id="confirmButton" class="px-4 py-2 text-white bg-red-600 rounded-md"
                                            onclick="submitForm()">Confirm</button>
                                    </div>
                                </div>
                            </div>

                        </div>

                    </div>


        </div>


        <script>
            let formToSubmit = null;

            function showConfirmationModal(formId) {
                formToSubmit = document.getElementById(formId);
                document.getElementById('confirmationModal').classList.remove('hidden');
            }

            function closeConfirmationModal() {
                document.getElementById('confirmationModal').classList.add('hidden');
            }

            function submitForm() {
                if (formToSubmit) {
                    formToSubmit.submit();
                }
            }
        </script>

    @endif
@endsection