@extends('organizations.layouts.default')
@section('title')
    / Required Documents
@endsection
@section('content')
    <main class="overflow-scroll no-scrollbar mb-10">
        <div class="mx-auto max-w-screen-2xl p-4 md:p-6 2xl:p-10 ">
            {!! htmlScriptTagJsApi() !!}
            <!-- Breadcrumb Start -->
            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
                <nav>
                    <ol class="flex gap-2 text-title-sm">
                        <li><a href="{{ route('organization.dashboard') }}">{{ __('menu.Dashboard') }} </a></li>
                        <li class="text-brandBlue">
                            <a href="{{ route('organization.tenders.applied.index') }}">/ {{ __('menu.' . $title) }}</a>
                        </li>
                        @if ('title')
                            <li class="text-blue-900">
                                @yield('title')
                            </li>
                        @endif
                    </ol>
                </nav>
            </div>
            <!-- Breadcrumb End -->
            <hr class="my-3">
            <div class="bg-white overflow-hidden rounded-md p-6 dark:text-black">
                <div class="font-semibold text-2xl underline mb-2">Tender Details</div>
                <div class="text-right">
                    <a type="button" title="Back"
                        class="text-white bg-orange-700 hover:bg-orange-800 focus:outline-none focus:ring-4 focus:ring-orange-300 font-medium rounded-full text-md px-5 py-2.5 text-center me-2 mb-2 dark:bg-orange-600 dark:hover:bg-orange-700 dark:focus:ring-green-900"
                        href="{{ url()->previous() }}"><i class="bi bi-arrow-left"></i>
                        Back</a>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
                    <div class="py-3">
                        <span class="font-semibold">Tender Number: </span> {{ $tender->tender_number }}
                    </div>
                    <div class="py-3">
                        <span class="font-semibold">Title: </span> {{ $tender->title }}
                    </div>
                    <div class="py-3">
                        <span class="font-semibold">Start Date:</span>
                        {{ \Carbon\Carbon::parse($tender->start_date)->format('Y-m-d') }}
                    </div>
                    <div class="py-3">
                        <span class="font-semibold">End Date:</span>
                        {{ \Carbon\Carbon::parse($tender->end_date)->format('Y-m-d') }}
                    </div>
                    <div class="py-3">
                        <span class="font-semibold">Who can Apply ?:</span>
                        {{ config('dropdown.can_apply.' . $tender->can_apply) }}
                    </div>


                    <div class="py-3">
                        <span class="font-semibold">Apply Method :</span>
                        {{ $tender->apply_online == 1 ? 'Online,' : '' }}
                        {{ $tender->apply_offline == 1 ? 'Offline,' : '' }}
                        {{ $tender->apply_email == 1 ? 'Email' : '' }}
                    </div>

                    @if ($tender->apply_offline == 1)
                        <div class="py-3">
                            <span class="font-semibold">Submission Address :</span> {{ $tender->submission_address }}
                        </div>
                    @endif
                    @if ($tender->apply_email == 1)
                        <div class="py-3">
                            <span class="font-semibold">Submission Email :</span> {{ $tender->submission_email }}
                        </div>
                    @endif
                </div>
            </div>

            <div class="bg-white overflow-hidden rounded-md p-6" id="apply">
                <div class="font-semibold text-2xl underline mb-2">Required Documents</div>

                @if ($tender->form_type == 1)
                    <div class="bg-white dark:bg-boxdark overflow-hidden rounded-md mt-2">
                        <p class="italic text-red-600 p-2">Please upload documents or provide your document url</p>

                        @foreach ($tender->documents as $doc)
                            @php
                                $docs = $application->documents->where('document_title', $doc->document_title)->first();
                            @endphp
                            <div
                                class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-3 border p-4 border-stroke rounded-md">
                                <div class="mb-2 w-full">
                                    <div class="flex">
                                        <label class="font-semibold text-black dark:text-white">Document Title</label>
                                        <span class="text-danger">*</span>
                                        @if ($docs)
                                            <img src="{{ asset('images/checked.png') }}" alt="" class="h-6 px-4">
                                        @endif
                                    </div>
                                    <input
                                        class="w-full rounded border-[1.5px] bg-transparent py-2 px-4 font-medium outline-none mt-1 transition focus:border-primary active:border-primary disabled:cursor-default disabled:bg-whiter dark:border-form-strokedark dark:bg-form-input dark:focus:border-primary border-stroke document-title-input"
                                        type="text" name="document_title[]" value="{{ $doc->document_title }}"
                                        placeholder="Document Title" required="{{ $doc->is_require == 1 }}"
                                        readonly="readonly" data-doc-id="{{ $doc->id }}">
                                </div>

                                <div class="mb-2 w-full">
                                    <label class="font-semibold text-black dark:text-white">Document File</label>
                                    <div
                                        class="w-full flex rounded border-[1.5px] bg-transparent py-1.5 px-4 font-medium outline-none mt-1 transition focus:border-primary active:border-primary disabled:cursor-default disabled:bg-whiter dark:border-form-strokedark dark:bg-form-input dark:focus:border-primary border-stroke">
                                        @if ($docs && $docs->document_file)
                                            <img src="{{ asset($docs->document_file) }}" alt="File"
                                                class="w-10 h-10 rounded-full me-3 doc-image"
                                                data-doc-id="{{ $doc->id }}">
                                        @endif
                                        <input class="document-file-input" type="file" name="document_file[]"
                                            data-doc-id="{{ $doc->id }}">
                                    </div>
                                </div>

                                <div class="mb-2 w-full">
                                    <label class="font-semibold text-black dark:text-white">Document External Link</label>
                                    <input
                                        class="w-full rounded border-[1.5px] bg-transparent py-2 px-4 font-medium outline-none mt-1 transition focus:border-primary active:border-primary disabled:cursor-default disabled:bg-whiter dark:border-form-strokedark dark:bg-form-input dark:focus:border-primary border-stroke document-external-link-input"
                                        type="text" name="document_external_link[]"
                                        value="{{ $docs ? $docs->document_external_link : '' }}" placeholder="https://"
                                        data-doc-id="{{ $doc->id }}">
                                </div>

                                <div class="mb-2 w-full">
                                    <label class="font-semibold text-black dark:text-white">Remarks</label>
                                    <input
                                        class="w-full rounded border-[1.5px] bg-transparent py-2 px-4 font-medium outline-none mt-1 transition focus:border-primary active:border-primary disabled:cursor-default disabled:bg-whiter dark:border-form-strokedark dark:bg-form-input dark:focus:border-primary border-stroke remarks-input"
                                        type="text" name="remarks[]" data-doc-id="{{ $doc->id }}"
                                        value="{{ $docs ? $docs->remarks : '' }}">
                                </div>
                            </div>
                        @endforeach
                    </div>
                @endif

                {{-- @if ($has_applied)
                    <div class="rounded-sm">
                        <div class="max-w-full overflow-auto grid grid-cols-1 md:grid-cols-4 lg:grid-cols-4 py-2">
                            @foreach ($tender->documents as $doc)
                                <div>
                                    <i class="bi bi-arrow-right"></i>
                                    {{ $doc->document_title }}
                                </div>
                            @endforeach
                        </div>
                    </div>
                @else --}}
                {{ html()->modelForm($tender, 'POST', route('organization.tenders.applications.store-doc', $application->id))->id('form-validator')->acceptsFiles()->open() }}
                <div class="bg-white shadow-default dark:bg-boxdark py-6">
                    <input type="hidden" name="tender_id" value="{{ $tender->id }}">
                    <div class="gap-4 mb-3 border p-4 border-stroke rounded-md">
                        {{ ym_textarea([
                            'label' => 'Application Details',
                            'name' => 'cover_letter',
                            'required' => true,
                            'editor' => 'editor',
                        ]) }}
                    </div>
                    @if ($tender->form_type == 1 && $tender->separate_proposal == 1)
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-3 border p-4 border-stroke rounded-md">
                            {{ ym_file([
                                'label' => 'Technical Proposal',
                                'name' => 'tc_document_file',
                            ]) }}

                            {{ ym_file([
                                'label' => 'Financial Proposal',
                                'name' => 'fc_document_file',
                            ]) }}
                        </div>
                    @endif

                    {{-- @if ($tender->form_type == 1)
                        <div class="font-semibold text-xl underline mb-2">Other Documents</div>
                        @foreach ($tender->documents as $doc)
                            <div
                                class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-3 border p-4 border-stroke rounded-md">
                                {{ ym_input([
                                    'label' => __('form.Document Title'),
                                    'type' => 'text',
                                    'name' => 'document_title[]',
                                    'required' => $doc->is_require == 1 ? true : '',
                                    'value' => $doc->document_title,
                                    'readonly' => 'readonly',
                                ]) }}

                                {{ ym_file([
                                    'label' => __('form.Document File'),
                                    'name' => 'document_file[]',
                                ]) }}

                                {{ ym_input([
                                    'label' => __('form.Document External Link'),
                                    'type' => 'text',
                                    'name' => 'document_external_link[]',
                                ]) }}

                                {{ ym_input([
                                    'label' => __('form.Remarks'),
                                    'type' => 'text',
                                    'name' => 'remarks[]',
                                ]) }}


                            </div>
                        @endforeach
                    @endif --}}
                    <button type="submit" name="submit" value="SUBMIT"
                        class="m-auto 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.Apply') }}
                    </button>
                </div>

                {{ html()->closeModelForm() }}
                {{-- @endif --}}

            </div>
    </main>
    <script>
        $(document).ready(function() {
            $(document).on('change', '.document-file-input, .document-external-link-input, .remarks-input',
                function() {
                    function updateImagePreview(docId, file) {
                        var reader = new FileReader();
                        reader.onload = function(e) {
                            var imgElement = $('.doc-image[data-doc-id="' + docId + '"]');
                            if (imgElement.length) {
                                imgElement.attr('src', e.target.result);
                            } else {
                                var img = $('<img>', {
                                    src: e.target.result,
                                    class: 'w-10 h-10 rounded-full me-3 doc-image',
                                    'data-doc-id': docId
                                });
                                $('.document-file-input[data-doc-id="' + docId + '"]').before(img);
                            }
                        };
                        reader.readAsDataURL(file);
                    }

                    $('.document-file-input').each(function() {
                        var input = $(this);
                        var docId = input.data('doc-id');
                        var file = input[0].files.length > 0 ? input[0].files[0] : null;
                        if (file) {
                            updateImagePreview(docId, file);
                        }
                    });
                    var input = $(this);
                    var docId = input.data('doc-id');

                    var title = $('.document-title-input[data-doc-id="' + docId + '"]').val();
                    var externalLink = $('.document-external-link-input[data-doc-id="' + docId + '"]').val();
                    var remarks = $('.remarks-input[data-doc-id="' + docId + '"]').val();

                    var fileInput = $('.document-file-input[data-doc-id="' + docId + '"]')[0];
                    var file = fileInput.files.length > 0 ? fileInput.files[0] : null;

                    if (!file && !externalLink) {
                        toastr.error('Please add a file or an external link to save the document.');
                        return;
                    }

                    var formData = new FormData();
                    formData.append('doc_id', docId);
                    formData.append('document_title', title);
                    formData.append('document_external_link', externalLink);
                    formData.append('remarks', remarks);
                    formData.append('_token', '{{ csrf_token() }}');

                    if (file) {
                        formData.append('document_file', file);
                    }

                    $.ajax({
                        url: '{{ route('organization.tenders.updateTenderApplicationDocuments', $application->id) }}',
                        type: 'POST',
                        data: formData,
                        processData: false,
                        contentType: false,
                        success: function(response) {
                            toastr.success('Document updated successfully');
                            if (file) {
                                updateImagePreview(docId, file);
                            }
                        },
                        error: function(response) {
                            $.each(response.responseJSON.errors, function() {
                                $.each(this, function(k, v) {
                                    toastr.error('Error: ' + v);
                                });
                            });
                        }
                    });
                });
        });
    </script>
@endsection