@extends('jomhor::services.show')

@section('action')
    @php
        $generalResponses = collect(config('custom.general_responses', []))
            ->mapWithKeys(fn ($response) => [$response => $response])
            ->all();
        $employees = \Modules\Hr\Entities\Employee::query()
            ->where('is_officer', 1)
            ->where('status', 'enabled')
            ->orderBy('id')
            ->get(['id', 'name'])
            ->pluck('name', 'id')
            ->all();
        $attachmentTypes = \Modules\PublicService\Entities\AttachmentType::query()
            ->orderBy('name')
            ->get(['id', 'name'])
            ->pluck('name', 'id')
            ->all();
    @endphp
    <form action="{{ route('jomhor.general_action', $public_id) }}" method="post">
        @csrf
        <div class="kt-card kt-card-accent ">
            <div class="kt-card-header flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
                <div class="kt-card-heading">
                    <h2 class="kt-card-title">{{ __('modules.jomhor.resources_views_service_actions_general_action.text_b678b3e7f5') }}</h2>
                    <div class="text-sm text-gray-500">{{ __('modules.jomhor.resources_views_service_actions_general_action.text_29e7901de1') }}</div>
                </div>
                <button type="button" class="kt-btn kt-btn-outline" onclick="openAttachmentModal()">
                    اضافة مرفق
                </button>

            </div>
            <div class="kt-card-content py-1">
                <div class="grid grid-cols-3 gap-2">
                    <div class="col-span-2 relative">
                        <x-inputs.area name="response" required title="{{ __('modules.jomhor.resources_views_service_actions_general_action.text_8dbac43ebe') }}" mb="mb-2" rows="4" />

                        <div class="absolute bottom-0 left-0" style="width: 200px;">
                            <x-inputs.select
                                name="prepared_response"
                                mb="mb-2"
                                :value="old('prepared_response', '')"
                                :options="['' => 'الردود الجاهزة'] + $generalResponses"
                            />
                        </div>
                    </div>

                    <x-inputs.area
                        name="citizen_response_summary"
                        title="{{ __('modules.jomhor.resources_views_service_actions_general_action.text_46d4358477') }}"
                        hint="الرد المدخل هنا يستطيع المواطن الاطلاع عليه"
                        mb="mb-2"
                        rows="3"
                    />
                </div>
            </div>
            <div class="kt-card-footer justify-center">
                <div class="flex flex-wrap gap-4">
                    @if($activePath->response_status == 'hold')
                        @if($activePath->response_action == 'accept')
                            <button type="submit" name="action" value="accept" class="kt-btn">{{ __('modules.jomhor.resources_views_service_actions_general_action.text_a5977d11bc') }}</button>
                            <button type="submit" name="action" value="reject" class="kt-btn kt-btn-destructive">{{ __('modules.jomhor.resources_views_service_actions_general_action.text_ce66e09895') }}</button>
                        @elseif($activePath->response_action == 'forward')
                            <button type="submit" name="action" value="forward" class="kt-btn ">{{ __('modules.jomhor.resources_views_service_actions_general_action.text_a5977d11bc') }}</button>
                        @endif
                        <button type="button" class="kt-btn kt-btn-secondary" onclick="openTransferEmployeeModal()">{{ __('modules.jomhor.resources_views_service_actions_general_action.text_3d1e99208b') }}</button>
                    @else
                        @if($activePath->response_action == 'accept')
                            <button type="submit" name="action" value="accept" class="kt-btn">{{ __('modules.jomhor.resources_views_service_actions_general_action.text_a484ff179d') }}</button>
                            <button type="submit" name="action" value="reject" class="kt-btn kt-btn-destructive">{{ __('modules.jomhor.resources_views_service_actions_general_action.text_ce66e09895') }}</button>
                        @elseif($activePath->response_action == 'forward')
                            <button type="submit" name="action" value="forward" class="kt-btn ">{{ __('modules.jomhor.resources_views_service_actions_general_action.text_a2000623a5') }}</button>
                        @endif
                            <button type="button" class="kt-btn kt-btn-outline" onclick="openRequestCitizenAttachmentsModal()">
                                طلب مرفقات من المواطن
                            </button>
                        <button type="submit" name="action" value="hold" class="kt-btn kt-btn-mono">{{ __('modules.jomhor.resources_views_service_actions_general_action.text_c37b71f903') }}</button>
                        <button type="button" class="kt-btn kt-btn-secondary" onclick="openTransferEmployeeModal()">{{ __('modules.jomhor.resources_views_service_actions_general_action.text_3d1e99208b') }}</button>
                    @endif
                </div>
            </div>
        </div>
    </form>

    <div id="transferEmployeeModal" class="fixed inset-0 z-50 hidden">
        <div class="absolute inset-0 bg-black/50" onclick="closeTransferEmployeeModal()"></div>

        <div class="relative mx-auto my-10 w-[95%] md:w-[70%] lg:w-[55%] max-w-2xl">
            <div class="bg-white rounded-xl shadow-lg overflow-hidden">
                <form action="{{ route('jomhor.general_action', $public_id) }}" method="post">
                    @csrf
                    <input type="hidden" name="action" value="transfer">

                    <div class="flex items-center justify-between px-4 py-3 border-b">
                        <div class="text-base font-semibold text-gray-800">{{ __('modules.jomhor.resources_views_service_actions_general_action.text_3d1e99208b') }}</div>
                        <button type="button" class="text-gray-500 hover:text-gray-800" onclick="closeTransferEmployeeModal()">
                            ✕
                        </button>
                    </div>

                    <div class="p-5 space-y-4">
                        <x-inputs.select
                            name="employee_id"
                            title="{{ __('modules.jomhor.resources_views_service_actions_general_action.text_9fa9435e11') }}"
                            :value="old('employee_id', '')"
                            :options="['' => 'اختر الموظف'] + $employees"
                        />

                        <div class="kt-form-item mb-0 @error('response') has_error @enderror">
                            <label class="required kt-form-label" for="transfer_response">{{ __('modules.jomhor.resources_views_service_actions_general_action.text_8dbac43ebe') }}</label>
                            <div class="kt-form-control">
                                <textarea
                                    id="transfer_response" required
                                    name="response"
                                    class="kt-textarea mb-0"
                                    placeholder="{{ __('modules.jomhor.resources_views_service_actions_general_action.text_f05fe2d9d8') }}"
                                    rows="5"
                                >{{ old('response') }}</textarea>
                                @error('response')
                                    <div class="text-red-500 JS_error has-error">
                                        {{ $message }}
                                    </div>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="px-4 py-3 border-t flex justify-end gap-2">
                        <button type="button" onclick="closeTransferEmployeeModal()" class="kt-btn kt-btn-outline">
                            الغاء
                        </button>
                        <button type="submit" class="kt-btn kt-btn-secondary">
                            حفظ التفويض
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div id="attachmentModal" class="fixed inset-0 z-50 hidden">
        <div class="absolute inset-0 bg-black/50" onclick="closeAttachmentModal()"></div>

        <div class="relative mx-auto my-10 w-[95%] md:w-[70%] lg:w-[55%] max-w-2xl">
            <div class="bg-white rounded-xl shadow-lg overflow-hidden">
                <form action="{{ route('jomhor.general_action', $public_id) }}" method="post" enctype="multipart/form-data">
                    @csrf
                    <input type="hidden" name="action" value="add_attachment">

                    <div class="flex items-center justify-between px-4 py-3 border-b">
                        <div class="text-base font-semibold text-gray-800">{{ __('modules.jomhor.resources_views_service_actions_general_action.text_50de46e76b') }}</div>
                        <button type="button" class="text-gray-500 hover:text-gray-800" onclick="closeAttachmentModal()">
                            ✕
                        </button>
                    </div>

                    <div class="p-5 space-y-4">
                        <x-inputs.select
                            name="attachment_type_id"
                            title="{{ __('modules.jomhor.resources_views_service_actions_general_action.text_c72de17f43') }}"
                            :value="old('attachment_type_id', '')"
                            :options="['' => 'اختر التصنيف'] + $attachmentTypes"
                        />

                        <div class="kt-form-item mb-0 @error('attachment') has_error @enderror">
                            <label class="required kt-form-label" for="attachment">{{ __('modules.jomhor.resources_views_service_actions_general_action.text_26430d304f') }}</label>
                            <div class="kt-form-control">
                                <input
                                    id="attachment"
                                    type="file"
                                    name="attachment"
                                    accept=".jpg,.jpeg,.png,.pdf,.dwg"
                                    class="kt-input"
                                    required
                                />
                                <div class="mt-2 text-xs text-gray-500">{{ __('modules.jomhor.resources_views_service_actions_general_action.text_e7bb2f9c5b') }}</div>
                                @error('attachment')
                                    <div class="text-red-500 JS_error has-error">
                                        {{ $message }}
                                    </div>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="px-4 py-3 border-t flex justify-end gap-2">
                        <button type="button" onclick="closeAttachmentModal()" class="kt-btn kt-btn-outline">
                            الغاء
                        </button>
                        <button type="submit" class="kt-btn">
                            رفع المرفق
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div id="requestCitizenAttachmentsModal" class="fixed inset-0 z-50 hidden">
        <div class="absolute inset-0 bg-black/50" onclick="closeRequestCitizenAttachmentsModal()"></div>

        <div class="relative mx-auto my-10 w-[95%] md:w-[70%] lg:w-[55%] max-w-2xl">
            <div class="bg-white rounded-xl shadow-lg overflow-hidden">
                <form action="{{ route('jomhor.general_action', $public_id) }}" method="post">
                    @csrf
                    <input type="hidden" name="action" value="request_citizen_attachments">

                    <div class="flex items-center justify-between px-4 py-3 border-b">
                        <div class="text-base font-semibold text-gray-800">{{ __('modules.jomhor.resources_views_service_actions_general_action.text_c702fdd323') }}</div>
                        <button type="button" class="text-gray-500 hover:text-gray-800" onclick="closeRequestCitizenAttachmentsModal()">
                            اغلاق
                        </button>
                    </div>

                    <div class="p-5 space-y-4">
                        <div class="kt-form-item mb-0 @error('requested_attachment_type_ids') has_error @enderror @error('requested_attachment_type_ids.*') has_error @enderror">
                            <label class="required kt-form-label">{{ __('modules.jomhor.resources_views_service_actions_general_action.text_d965cfeabc') }}</label>
                            <div class="kt-form-control">
                                <div class="grid gap-2 rounded-xl border border-gray-200 p-3 max-h-72 overflow-y-auto">
                                    @foreach($attachmentTypes as $attachmentTypeId => $attachmentTypeName)
                                        <label class="flex items-center gap-3 rounded-lg border border-transparent px-2 py-2 hover:bg-gray-50">
                                            <input
                                                type="checkbox"
                                                name="requested_attachment_type_ids[]"
                                                value="{{ $attachmentTypeId }}"
                                                class="kt-checkbox"
                                                @checked(in_array((string) $attachmentTypeId, array_map('strval', old('requested_attachment_type_ids', [])), true))
                                            />
                                            <span class="text-sm text-gray-800">{{ $attachmentTypeName }}</span>
                                        </label>
                                    @endforeach
                                </div>
                                @error('requested_attachment_type_ids')
                                    <div class="text-red-500 JS_error has-error">
                                        {{ $message }}
                                    </div>
                                @enderror
                                @error('requested_attachment_type_ids.*')
                                    <div class="text-red-500 JS_error has-error">
                                        {{ $message }}
                                    </div>
                                @enderror
                            </div>
                        </div>

                        <div class="kt-form-item mb-0 @error('citizen_note') has_error @enderror">
                            <label class="kt-form-label" for="citizen_note">{{ __('modules.jomhor.resources_views_service_actions_general_action.text_2f34cd6955') }}</label>
                            <div class="kt-form-control">
                                <textarea
                                    id="citizen_note"
                                    name="citizen_note"
                                    class="kt-textarea mb-0"
                                    placeholder="{{ __('modules.jomhor.resources_views_service_actions_general_action.text_ae851ccf73') }}"
                                    rows="5"
                                >{{ old('citizen_note') }}</textarea>
                                @error('citizen_note')
                                    <div class="text-red-500 JS_error has-error">
                                        {{ $message }}
                                    </div>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="px-4 py-3 border-t flex justify-end gap-2">
                        <button type="button" onclick="closeRequestCitizenAttachmentsModal()" class="kt-btn kt-btn-outline">
                            إلغاء
                        </button>
                        <button type="submit" class="kt-btn kt-btn-secondary">
                            حفظ
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const preparedResponse = document.getElementById('prepared_response');
            const responseTextarea = document.getElementById('response');

            if (preparedResponse && responseTextarea) {
                preparedResponse.addEventListener('change', function () {
                    if (preparedResponse.value !== '') {
                        responseTextarea.value = preparedResponse.value;
                    }
                });
            }

            const hasAttachmentErrors = {{ $errors->has('attachment') || $errors->has('attachment_type_id') ? 'true' : 'false' }};
            const hasRequestedAttachmentErrors = {{ $errors->has('requested_attachment_type_ids') || $errors->has('requested_attachment_type_ids.*') || $errors->has('citizen_note') ? 'true' : 'false' }};

            if (hasAttachmentErrors || '{{ old('action') }}' === 'add_attachment') {
                openAttachmentModal();
            }

            if (hasRequestedAttachmentErrors || '{{ old('action') }}' === 'request_citizen_attachments') {
                openRequestCitizenAttachmentsModal();
            }
        });

        function openTransferEmployeeModal() {
            const modal = document.getElementById('transferEmployeeModal');
            if (!modal) {
                return;
            }

            modal.classList.remove('hidden');
            document.body.classList.add('overflow-hidden');
        }

        function closeTransferEmployeeModal() {
            const modal = document.getElementById('transferEmployeeModal');
            if (!modal) {
                return;
            }

            modal.classList.add('hidden');
            document.body.classList.remove('overflow-hidden');
        }

        function openAttachmentModal() {
            const modal = document.getElementById('attachmentModal');
            if (!modal) {
                return;
            }

            modal.classList.remove('hidden');
            document.body.classList.add('overflow-hidden');
        }

        function closeAttachmentModal() {
            const modal = document.getElementById('attachmentModal');
            if (!modal) {
                return;
            }

            modal.classList.add('hidden');
            document.body.classList.remove('overflow-hidden');
        }

        function openRequestCitizenAttachmentsModal() {
            const modal = document.getElementById('requestCitizenAttachmentsModal');
            if (!modal) {
                return;
            }

            modal.classList.remove('hidden');
            document.body.classList.add('overflow-hidden');
        }

        function closeRequestCitizenAttachmentsModal() {
            const modal = document.getElementById('requestCitizenAttachmentsModal');
            if (!modal) {
                return;
            }

            modal.classList.add('hidden');
            document.body.classList.remove('overflow-hidden');
        }
    </script>
@endpush