@extends('organizations.layouts.default')
@section('title')
    / Apply
@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() !!}
            <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.rosters.applied.index') }}">{{ __('menu.' . $title) }}</a>
                        </li>
                        @if ('title')
                            <li class="text-blue-900">
                                @yield('title')
                            </li>
                        @endif
                    </ol>
                </nav>
            </div>
            <hr class="my-3">
            <div class="bg-white dark:bg-boxdark overflow-hidden rounded-md p-6">
                @php
                    $staus = config('dropdown.roster_application_status');
                @endphp
                <div class="flex justify-between gap-2 mb-2">
                    <div>
                        Application Status:
                        <span class="bg-brandBlue rounded text-white p-1">{{ $staus[$appDetails->app_status] }}</span>
                    </div>
                    <div>
                        <a href="{{ route('organization.rosters.applied.show', $appDetails->id) }}"
                            class="bg-primary rounded text-white py-1 px-4">
                            <i class="bi bi-backspace me-2"></i>Go back
                        </a>
                    </div>
                </div>
                <hr>
                <div class="mt-4 mb-4 md:text-center">
                    <div class="text-xl font-semibold">{{ $model->roster_title }} </div>
                </div>
                <div class="grid md:grid-cols-3 md:text-center">
                    <div class="flex gap-2">
                        <img src="{{ asset($model->organization->org_logo) }}" class="inline-flex items-center h-10"
                            alt="">
                        <span class="inline-flex items-center">
                            {{ $model->organization->name ?? '-' }}
                        </span>
                    </div>
                    <div class="py-3">
                        <span class="font-semibold">Publish Date:</span> {{ $model->start_date->format('Y-m-d') }}
                    </div>
                    <div class="py-3">
                        <span class="font-semibold">Expiry Date:</span> {{ $model->end_date->format('Y-m-d') }}
                    </div>
                </div>
            </div>
            @php
                $appliedServices = $appDetails->applicationServices->pluck('roster_open_id')->toArray();
            @endphp
            @if ($model->expiry_date < now())
                {{ html()->modelForm($model, 'POST', route('organization.roster-applications.update', $appDetails->id))->id('form-validator')->acceptsFiles()->open() }}
                @method('PUT')
                <input type="hidden" name="roster_id" value="{{ $model->id }}">
                @if ($model->form_type == 1)
                    <div class="bg-white dark:bg-boxdark overflow-hidden rounded-md p-6 mt-2" id="apply">
                        <div class="font-semibold text-2xl mb-1">Please select your services your company works on</div>
                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mt-4">
                            @foreach (config('dropdown.roster_service_category') as $key => $category)
                                <div
                                    class="bg-white dark:bg-boxdark overflow-hidden rounded-lg shadow-black shadow-1 hover:shadow-xl transition duration-300">
                                    <div class="p-4">
                                        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">
                                            {{ $category }}
                                        </h3>
                                        <ul class="mt-2">
                                            @foreach ($model->rosterOpens->where('category_id', $key) as $ro)
                                                <li class="flex items-top py-1">
                                                    <input id="service_{{ $ro->id }}" type="checkbox"
                                                        value="{{ $ro->id }}" name="services[]"
                                                        class="w-4 h-4 mt-1 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
                                                        {{ in_array($ro->id, $appliedServices) ? 'checked' : '' }} />
                                                    <label for="service_{{ $ro->id }}"
                                                        class="font-medium text-black dark:text-white cursor-pointer pl-2"
                                                        for="service-{{ $ro->service_id }}">{{ $ro->roster_service?->service_title ?? $ro->other_service }}</label>
                                                </li>
                                            @endforeach
                                        </ul>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                    <div class="bg-white dark:bg-boxdark overflow-hidden rounded-md p-6 mt-2">
                        <div class="font-semibold text-2xl  mb-1">
                            {{ $model->lang == 'np' ? 'निबेदन साथ पेश गनु पर्ने कागजातहरु' : 'Required Documents along with Application' }}
                        </div>
                        <p class="italic text-red-600 p-2">Please upload documents or provide your document url</p>

                        @foreach ($model->rosterDocuments as $doc)
                            @php
                                $docs = $appDetails->applicationDocuments
                                    ->where('document_title', $doc->document_title)
                                    ->first();
                            @endphp
                            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 border-b">
                                <div class="mb-2 w-full">
                                    <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
                                    <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 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="http://"
                                        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
                @endif


                <div class="bg-white dark:bg-boxdark overflow-hidden rounded-md p-6 mt-2">
                    <div>
                        {{ ym_textarea([
                            'label' => __('form.Application Details'),
                            'name' => 'cover_letter',
                            'editor' => 'editor',
                            'value' => $appDetails->cover_letter,
                            'required' => true,
                            'enlarge' => true,
                        ]) }}
                    </div>
                    <div class="mb-4">
                        {{ ym_file([
                            'label' => __('form.Application File'),
                            'name' => 'cover_letter_file',
                        ]) }}
                    </div>

                    <x-modal :heading="'Are you sure?'"> Apply </x-modal>
                </div>
        </div>
        {{ html()->closeModelForm() }}
        @endif
        </div>
    </main>

    <script>
        $(document).ready(function() {
            $('input[type="checkbox"][name="services[]"]').change(function() {
                var selectedServices = [];
                $('input[type="checkbox"][name="services[]"]:checked').each(function() {
                    selectedServices.push($(this).val());
                });
                $.ajax({
                    url: '{{ route('organization.rosters.updateRosterApplicationService', $appDetails->id) }}',
                    type: 'POST',
                    data: {
                        services: selectedServices,
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        toastr.success('Service updated');
                    },
                    error: function(response) {
                        $.each(response.responseJSON.errors, function() {
                            $.each(this, function(k, v) {
                                toastr.error('Error: ' + v);
                            });
                        });
                    }
                });
            });
        });
    </script>
    <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.rosters.updateRosterApplicationDocuments', $appDetails->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