@extends('organizations.layouts.default')
@inject('working_area_helper', 'App\Helpers\WorkingAreaHelper')
@section('content')
    {!! htmlScriptTagJsApi() !!}
    <main>
        <div class="max-w-screen-2xl mx-auto p-2 md:p-2 2xl:p-4">
            <div class="text-title-xsm">
                <div class="flex justify-between m-0 p-0">
                    @include('organizations.layouts.partials.breadcrumb')
                </div>
                <hr class="text-white my-3">
                <div class="my-3">
                </div>


                <div class="p-6.5 bg-white dark:bg-strokedark">
                    {{ html()->modelForm(
                            $model,
                            getMethod($model),
                            getMethod($model) == 'POST'
                                ? route('organization.' . $route . '.store')
                                : route('organization.' . $route . '.update', $model->id),
                        )->id('form-validator')->acceptsFiles()->open() }}

                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 lg:gap-6">
                        <input type="hidden" name="form_type" value="2">

                        {{ ym_input([
                            'label' => __('form.Tender Number'),
                            'type' => 'text',
                            'name' => 'tender_number',
                            'required' => true,
                            'value' => $model->tender_number,
                            'id' => 'rfpNumber',
                        ]) }}

                        {{ ym_input([
                            'label' => __('form.Tender Title'),
                            'type' => 'text',
                            'name' => 'title',
                            'required' => true,
                            'value' => $model->title,
                            'id' => 'rfp_title',
                        ]) }}

                        {{ ym_select2([
                            'label' => __('form.Working Areas (max 3)'),
                            'name' => 'working_areas_id',
                            'required' => true,
                            'value' => $model->workingAreas->pluck('id') ?? null,
                            'options' => $working_area_helper->dropdown(),
                            'id' => 'select-area',
                            'placeholder' => 'Select',
                        ]) }}
                        {{-- {{ ym_input([
                            'label' => __('form.Tender Location'),
                            'type' => 'text',
                            'name' => 'tender_location',
                            'required' => true,
                            'value' => $model->tender_location,
                        ]) }} --}}



                        {{ ym_date([
                            'label' => __('form.Start Date'),
                            'type' => 'date',
                            'name' => 'start_date',
                            'required' => true,
                            'value' => $model->start_date,
                            'min' => now()->format('Y-m-d'),
                            'id' => 'sdate',
                        ]) }}

                        {{ ym_input([
                            'label' => __('form.End Date'),
                            'type' => 'datetime',
                            'name' => 'end_date',
                            'required' => true,
                            'value' => $model->end_date,
                            'min' => now()->format('Y-m-d'),
                            'id' => 'edate',
                        ]) }}




                        {{ ym_select([
                            'label' => __('form.Opportunity Type ?'),
                            'name' => 'opportunity_type_id',
                            'required' => true,
                            'value' => $model->opportunity_type_id,
                            'options' => config('dropdown.opportunity_type'),
                            'placeholder' => 'Select',
                            'id' => 'rfpTypeId',
                        ]) }}

                        <div>
                            <label class="font-semibold text-black dark:text-white">{{ __('form.Apply Method') }} <span
                                    class="text-danger">*</span></label>

                            <div class="flex items-center space-x-8 mt-2.5">
                                <div class="flex items-center">
                                    <input type="checkbox" name="apply_online" value="1" id="apply_online"
                                        class="rounded border-[1.5px] bg-transparent py-3 px-5 font-medium outline-none transition focus:border-primary active:border-primary disabled:cursor-default disabled:bg-w dark:border-form-strokedark dark:bg-form-input dark:focus:border-primary {{ $errors->has('apply_online') ? ' border-red-500' : ' border-stroke' }}"
                                        {{ old('apply_online', $model->apply_online ?? '') ? 'checked' : '' }}>
                                    <label for="apply_online" class="ml-2 text-black dark:text-white">Online</label>
                                </div>

                                <div class="flex items-center">
                                    <input type="checkbox" name="apply_email" value="1" id="apply_email"
                                        class="rounded border-[1.5px] bg-transparent py-3 px-5 font-medium outline-none transition focus:border-primary active:border-primary disabled:cursor-default disabled:bg-w dark:border-form-strokedark dark:bg-form-input dark:focus:border-primary {{ $errors->has('apply_email') ? ' border-red-500' : ' border-stroke' }}"
                                        {{ old('apply_email', $model->apply_email ?? '') ? 'checked' : '' }}>
                                    <label for="apply_email" class="ml-2 text-black dark:text-white">Email</label>
                                </div>

                                <div class="flex items-center">
                                    <input type="checkbox" name="apply_offline" value="1" id="apply_offline"
                                        class="rounded border-[1.5px] bg-transparent py-3 px-5 font-medium outline-none transition focus:border-primary active:border-primary disabled:cursor-default disabled:bg-w dark:border-form-strokedark dark:bg-form-input dark:focus:border-primary {{ $errors->has('apply_offline') ? ' border-red-500' : ' border-stroke' }}"
                                        {{ old('apply_offline', $model->apply_offline ?? '') ? 'checked' : '' }}>
                                    <label for="apply_offline" class="ml-2 text-black dark:text-white">Offline</label>
                                </div>
                            </div>

                        </div>

                        {{ ym_select([
                            'label' => __('form.Who can Apply ?'),
                            'type' => 'select',
                            'name' => 'can_apply',
                            'required' => true,
                            'placeholder' => 'Select',
                            'id' => 'select-option',
                            'options' => config('dropdown.can_apply'),
                        ]) }}

                        <div>
                            <label class="font-semibold text-black dark:text-white">Upload TOR</label>
                            <div class="flex items-center space-x-6 py-2">
                                <div class="shrink-0">

                                    <img id='preview_img' class="h-12 w-12 object-cover rounded-full"
                                        src="{{ $model->medias ? asset($model->medias) : asset('images/task/task-01.jpg') }}"
                                        alt="Current file" />
                                </div>

                                <label class="block">
                                    <input type="file" name="medias" onchange="loadFile(event)"
                                        class="block w-full text-sm text-slate-500
                            file:mr-4 file:py-2 file:px-4
                            file:rounded-full file:border-0
                            file:text-sm file:font-semibold
                            file:bg-violet-50 file:text-violet-700
                            hover:file:bg-violet-100" />
                                </label>
                            </div>
                        </div>




                        <div id="submission_email_field"
                            class="mt-3 {{ old('apply_email', $model->apply_email ?? '') ? '' : 'hidden' }}">
                            <label for="submission_email" class="font-semibold text-black dark:text-white">Submission
                                Email</label>
                            <input type="email" id="submission_email" name="submission_email"
                                class="w-full rounded border-[1.5px] bg-transparent py-3 px-5 font-medium outline-none transition focus:border-primary active:border-primary disabled:cursor-default disabled:bg-w dark:border-form-strokedark dark:bg-form-input dark:focus:border-primary {{ $errors->has('submission_email') ? ' border-red-500' : ' border-stroke' }}"
                                value="{{ old('submission_email', $model->submission_email ?? $org_email) }}">
                            @error('submission_email')
                                <div class="border-red-500 text-danger p-2">{{ $message }}</div>
                            @enderror
                        </div>

                        <div id="submission_address_field"
                            class="mt-3 {{ old('apply_offline', $model->apply_offline ?? '') ? '' : 'hidden' }}">
                            <label for="submission_address" class="font-semibold text-black dark:text-white">Submission
                                Address</label>
                            <input type="text" id="submission_address" name="submission_address"
                                class="w-full rounded border-[1.5px] bg-transparent py-3 px-5 font-medium outline-none transition focus:border-primary active:border-primary disabled:cursor-default disabled:bg-w dark:border-form-strokedark dark:bg-form-input dark:focus:border-primary {{ $errors->has('submission_address') ? ' border-red-500' : ' border-stroke' }}"
                                value="{{ old('submission_address', $model->submission_address ?? $org_address) }}">
                            @error('submission_address')
                                <div class="border-red-500 text-danger p-2">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="md:flex gap-4 lg:gap-6">
                        {{-- <div class="md:w-1/3 lg:mt-4">
                            {{ ym_select([
                                'label' => __('form.Who can Apply ?'),
                                'type' => 'select',
                                'name' => 'can_apply',
                                'required' => true,
                                'placeholder' => 'Select',
                                'id' => 'select-option',
                                'options' => config('dropdown.can_apply'),
                            ]) }}
                        </div> --}}
                        <div id="showField" style="display:none" class="flex md:gap-6 lg:mt-4">
                            {{ ym_input(['label' => __('form.Document Charge'), 'type' => 'number', 'name' => 'document_charge', 'id' => 'name']) }}
                            {{ ym_file(['label' => __('form.Document'), 'type' => 'text', 'name' => 'paid_document', 'id' => 'address']) }}
                        </div>

                    </div>

                    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
                    <script>
                        $(document).ready(function() {
                            function checkLastOption() {
                                const lastOptionValue = $('#select-option option:last').val();
                                $('#select-option').on('change', function() {
                                    if ($(this).val() === lastOptionValue) {
                                        $('#showField').show();
                                    } else {
                                        $('#showField').hide();
                                        $('#name').val('');
                                        $('#address').val('');
                                    }
                                });
                                $('#select-option').trigger('change');
                            }
                            checkLastOption();
                        });
                    </script>

                    <div class="flex w-full justify-end">
                        <a href="#" onclick="loadTemplate()"
                            class="text-white bg-blue-700 hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 font-medium rounded-full text-md px-5 py-2.5 text-center me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Load
                            Template
                        </a>
                    </div>
                    <div class="grid grid-cols-1 gap-4 mt-3">
                        {{ ym_textarea([
                            'label' => __('form.Tender Details'),
                            'name' => 'tender_details',
                            'editor' => 'editor',
                            'value' => $model->tender_details,
                            'enlarge' => true,
                            'id' => 'rfp_details',
                        ]) }}
                    </div>




                    <div class="flex gap-3 mt-8">
                        <button type="submit" name="submit" value="SUBMIT"
                            class="text-white bg-blue-700 hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 font-medium rounded-full text-md px-5 py-2.5 text-center me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
                            {{ __('form.Save') }}
                        </button>
                        <a type="button"
                            class="text-white bg-red-700 hover:bg-red-800 focus:outline-none focus:ring-4 focus:ring-red-300 font-medium rounded-full text-md px-5 py-2.5 text-center me-2 mb-2 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900"
                            href="{{ route('organization.tenders.index') }}">{{ __('form.Cancel') }}</a>
                    </div>
                    {{ html()->closeModelForm() }}
                </div>

            </div>
        </div>
    </main>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const applyEmailCheckbox = document.getElementById("apply_email");
            const applyOfflineCheckbox = document.getElementById("apply_offline");
            const submissionEmailField = document.getElementById(
                "submission_email_field"
            );
            const submissionAddressField = document.getElementById(
                "submission_address_field"
            );

            applyEmailCheckbox.addEventListener("change", function() {
                if (this.checked) {
                    submissionEmailField.classList.remove("hidden");
                } else {
                    submissionEmailField.classList.add("hidden");
                }
            });

            applyOfflineCheckbox.addEventListener("change", function() {
                if (this.checked) {
                    submissionAddressField.classList.remove("hidden");
                } else {
                    submissionAddressField.classList.add("hidden");
                }
            });

            // Show fields if they are checked on page load
            if (applyEmailCheckbox.checked) {
                submissionEmailField.classList.remove("hidden");
            }

            if (applyOfflineCheckbox.checked) {
                submissionAddressField.classList.remove("hidden");
            }
        });
    </script>
    <script>
        // input photo js
        var loadFile = function(event) {
            var input = event.target;
            var file = input.files[0];
            var type = file.type;

            var output = document.getElementById("preview_img");

            output.src = URL.createObjectURL(event.target.files[0]);
            output.onload = function() {
                URL.revokeObjectURL(output.src);
            };
        };
    </script>
    <script>
        function loadTemplate(id = 3) {
            const params = new URLSearchParams({
                rfp_title: getElementValue('rfp_title'),
                sdate: getElementValue('sdate'),
                edate: getElementValue('edate'),
                aponline: isChecked('apply_online'),
                apoffline: isChecked('apply_offline'),
                appemail: isChecked('apply_email'),
                oaddress: getElementValue('submission_address'),
                semail: getElementValue('submission_email'),
                rfpTypeId: getElementValue('rfpTypeId'),
                rfpNumber: getElementValue('rfpNumber'),
            });
            const url = '{{ url('organization/get-rfp-template/') }}/' + id + "?" + params.toString()
            ymGet(url)
                .then(data => {
                    if (data) {
                        CKEDITOR.instances.rfp_details.setData(data.data.template_details);
                    } else {
                        console.log('No data returned');
                    }
                });
        }
    </script>
@endsection