@php
    use Carbon\Carbon;
@endphp
@section('title', 'Proses Amandemen')
@section('styles')
    <link rel="stylesheet" href="{{ asset('assets/admin/vendor/libs/bootstrap-daterangepicker/bootstrap-daterangepicker.css') }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.15.2/css/selectize.bootstrap5.min.css" integrity="sha512-Ars0BmSwpsUJnWMw+KoUKGKunT7+T8NGK0ORRKj+HT8naZzLSIQoOSIIM3oyaJljgLxFi0xImI5oZkAWEFARSA==" crossorigin="anonymous" referrerpolicy="no-referrer">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4/dist/fancybox.min.css">
    <style>
        .tbody-self-assessment p {
            margin-bottom: 0px !important;
        }
    </style>
@endsection
<div>
    <div class="row g-3 pb-3">
        @foreach ($research_categories as $item)
            <div class="col-12 col-lg-4">
                <div class="card h-100 {{ $item->id != $research_category_id ? 'bg-secondary' : '' }}" @if ($item->id == $research_category_id) style="background-color: {{ $item->background_color }}" @endif>
                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-9">
                                <h3 class="mb-0 fw-bold text-white">
                                    @if ($item->name != 'Manusia Sebagai Subyek')
                                        Penelitian<br>
                                    @endif
                                    {{ $item->name }}
                                </h3>
                                <div class="mt-2" wire:key="{{ rand() }}">
                                    @if ($item->id != $research_category_id)
                                        <button class="btn {{ $item->id != $research_category_id ? 'btn-white' : '' }} btn-lg" wire:click="changeResearchCategory('{{ $item->id }}')">Pilih Ini <i class="fa-solid fa-circle-check fa-fw ms-2"></i></button>
                                    @else
                                        <button class="btn btn-white btn-lg" disabled>Dipilih <i class="fa-solid fa-circle-check fa-fw ms-2"></i></button>
                                    @endif
                                </div>
                            </div>
                            <div class="col-3">
                                <img src="{{ asset('storage/' . $item->image) }}" class="w-100" style="height: 130px;" loading="lazy">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-12">
                            <div class="form-label">Judul Penelitian <span class="text-danger">*</span></div>
                            <input type="text" class="form-control" placeholder="Judul Penelitian..." wire:model="research_title" autofocus>
                        </div>
                        <div class="col-12">
                            <div class="form-label">Judul Penelitian Bhs. Inggris <span class="text-danger">*</span></div>
                            <input type="text" class="form-control" placeholder="Judul Penelitian Bhs. Inggris..." wire:model="research_title_en">
                        </div>
                        <div class="col-12">
                            <div class="form-label">Tempat / Lembaga Penelitian <span class="text-danger">*</span></div>
                            <input type="text" class="form-control" placeholder="Tempat / Lembaga Penelitian..." wire:model="research_place">
                        </div>
                        <div class="col-6">
                            <div class="form-label">Tanggal Mulai <span class="text-danger">*</span></div>
                            <input type="text" x-data x-ref="input" x-init="$($refs.input).daterangepicker({
                                showDropdowns: true,
                                singleDatePicker: true,
                                autoApply: true,
                                autoUpdateInput: true,
                                timePicker: false,
                                startDate: '{{ !$research_start_date ? Carbon::now()->format('d/m/Y') : $research_start_date }}',
                                locale: {
                                    format: 'DD/MM/YYYY',
                                    cancelLabel: 'Clear'
                                },
                            }).on('apply.daterangepicker', function(e, picker) {
                                @this.set('research_start_date', $('#research_start_date').val());
                                $('#research_start_date').val(picker.startDate.format('DD/MM/YYYY'));
                            });" id="research_start_date" placeholder="DD/MM/YYYY" class="form-control">
                        </div>
                        <div class="col-6">
                            <div class="form-label">Tanggal Selesai <span class="text-danger">*</span></div>
                            <input type="text" x-data x-ref="input" x-init="$($refs.input).daterangepicker({
                                showDropdowns: true,
                                singleDatePicker: true,
                                autoApply: true,
                                autoUpdateInput: true,
                                timePicker: false,
                                startDate: '{{ !$research_end_date ? Carbon::now()->format('d/m/Y') : $research_end_date }}',
                                locale: {
                                    format: 'DD/MM/YYYY',
                                    cancelLabel: 'Clear'
                                },
                            }).on('apply.daterangepicker', function(e, picker) {
                                @this.set('research_end_date', $('#research_end_date').val());
                                $('#research_end_date').val(picker.startDate.format('DD/MM/YYYY'));
                            });" id="research_end_date" placeholder="DD/MM/YYYY" class="form-control">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12" x-data="{ card_fullscreen: 'false' }">
            <div :class="card_fullscreen ? 'card card-action' : 'card card-action card-fullscreen'">
                <div class="card-header align-items-center gap-3">
                    <div>
                        <h5 class="card-title mb-0">Protokol</h5>
                    </div>
                    <div class="ms-auto text-end justify-content-end">
                        <div><i class="fa-solid fa-expand fa-fw cursor-pointer" x-on:click="card_fullscreen = ! card_fullscreen"></i></div>
                    </div>
                </div>
                <div class="card-body">
                    <ol class="mb-0" style="padding-left: 1.1rem;" wire:key="research_category_{{ $research_category_id }}">
                        @foreach ($research_questions as $result)
                            <li class="{{ !$loop->last ? 'mb-3' : '' }}">
                                <p class="mb-1">{{ $result->title }}
                                    @if ($result->is_required)
                                        <span class="text-danger">*</span>
                                    @endif
                                </p>
                                @if (in_array($result->input_type, ['text', 'color', 'email', 'tel', 'time']))
                                    <input type="{{ $result->input_type }}" class="form-control @if ($validated == true && $research_answers[$result->id]['answer'] == null) is-invalid @endif" maxlength="191" wire:model="research_answers.{{ $result->id }}.answer" placeholder="Silahkan Isi Jawaban Disini...">
                                @elseif ($result->input_type == 'textarea')
                                    <textarea class="form-control @if ($validated == true && $research_answers[$result->id]['answer'] == null) is-invalid @endif" wire:model="research_answers.{{ $result->id }}.answer" placeholder="Silahkan Isi Jawaban Disini..." style="min-height: 100px; overflow-y: hidden; resize: vertical;" x-data x-init="
                                         const resize = () => {
                                             $el.style.height = 'auto';
                                             $el.style.height = Math.max(100, $el.scrollHeight) + 'px';
                                         };
                                         $nextTick(resize);
                                         setTimeout(resize, 50);
                                         setTimeout(resize, 200);
                                         setTimeout(resize, 600);
                                     " x-on:input="
                                         $el.style.height = 'auto';
                                         $el.style.height = Math.max(100, $el.scrollHeight) + 'px';
                                     ">{{ $research_answers[$result->id]['answer'] ?? '' }}</textarea>
                                @elseif($result->input_type == 'radio')
                                    @foreach ($result->researchQuestionAnswers as $ans => $item)
                                        <div class="form-check {{ $loop->last ? 'mb-2' : 'mb-0' }}">
                                            <input class="form-check-input @if ($validated == true && $research_answers[$result->id]['answer'] == null) is-invalid @endif" type="radio" name="answers.{{ $result->id }}.answer" wire:model="research_answers.{{ $result->id }}.answer" id="{{ Str::slug($result->title, '_') }}_{{ $ans }}" value="{{ $item->answer }}">
                                            <label class="form-check-label" for="{{ Str::slug($result->title, '_') }}_{{ $ans }}">{{ $item->answer }}</label>
                                        </div>
                                    @endforeach
                                @elseif($result->input_type == 'checkbox')
                                    @foreach ($result->researchQuestionAnswers as $ans => $item)
                                        <div class="form-check {{ $loop->last ? 'mb-2' : 'mb-0' }}">
                                            <input class="form-check-input @if ($validated == true && $research_answers[$result->id]['answer'] == null) is-invalid @endif" type="checkbox" name="answers.{{ $result->id }}.answer" wire:model="research_answers.{{ $result->id }}.answer" id="{{ Str::slug($result->title, '_') }}_{{ $ans }}" value="{{ $item->answer }}">
                                            <label class="form-check-label" for="{{ Str::slug($result->title, '_') }}_{{ $ans }}">{{ $item->answer }}</label>
                                        </div>
                                    @endforeach
                                @elseif($result->input_type == 'date')
                                    <input type="text" x-data x-ref="input" x-init="$($refs.input).daterangepicker({
                                        showDropdowns: true,
                                        singleDatePicker: true,
                                        autoApply: true,
                                        autoUpdateInput: true,
                                        timePicker: false,
                                        startDate: '{{ !$research_answers[$result->id]['answer'] ? Carbon::now()->format('d/m/Y') : $research_answers[$result->id]['answer'] }}',
                                        locale: {
                                            format: 'DD/MM/YYYY',
                                            cancelLabel: 'Clear'
                                        },
                                    }).on('apply.daterangepicker', function(e, picker) {
                                        @this.set('research_answers.{{ $result->id }}.answer', $('#{{ Str::slug($result->title, '_') }}_{{ $ans }}').val());
                                        $('#{{ Str::slug($result->title, '_') }}_{{ $ans }}').val(picker.startDate.format('DD/MM/YYYY'));
                                    });" id="{{ Str::slug($result->title, '_') }}_{{ $ans }}" placeholder="DD/MM/YYYY" class="form-control">
                                @elseif($result->input_type == 'file')
                                    <div x-data="{ isUploading: false, progress: 0 }" x-on:livewire-upload-start="isUploading = true" x-on:livewire-upload-finish="isUploading = false" x-on:livewire-upload-error="isUploading = false" x-on:livewire-upload-progress="progress = $event.detail.progress">
                                        <div class="input-group">
                                            <input type="file" wire:model.live="research_answers.{{ $result->id }}.answer" class="form-control @if ($validated == true && ($research_answers[$result->id]['answer'] == null || $research_answers[$result->id]['old_file_uploaded'] != null)) is-invalid @endif" accept=".pdf,.png,.jpeg,.jpg,.webp">
                                            <button class="btn btn-{{ array_key_exists($result->id, $research_answers) && ($research_answers[$result->id]['answer'] != null || $research_answers[$result->id]['old_file_uploaded'] != null) ? 'info' : 'secondary' }} btn-sm" @if (array_key_exists($result->id, $research_answers) && ($research_answers[$result->id]['answer'] != null || $research_answers[$result->id]['old_file_uploaded'] != null)) data-fancybox data-src="{{ $research_answers[$result->id]['answer']?->temporaryUrl() ?? asset('storage/' . $research_answers[$result->id]['old_file_uploaded']) }}" @else disabled @endif>Pratinjau <i class="fa-regular fa-eye fa-fw ms-2"></i></button>
                                        </div>
                                        <div x-show="isUploading">
                                            <progress max="100" x-bind:value="progress"></progress>
                                        </div>
                                    </div>
                                @elseif($result->input_type == 'command')
                                    <p class="mb-0 fs-7"><i class="fa-regular fa-circle-info fa-fw me-1"></i> Di Atas Ini Adalah Kalimat Perintah !</p>
                                @endif
                            </li>
                        @endforeach
                    </ol>
                </div>
            </div>
        </div>
        @if ($system_setting_cached->is_use_self_assessment)
            <div class="col-12" x-data="{ card_fullscreen: 'false' }">
                <div :class="card_fullscreen ? 'card card-action' : 'card card-action card-fullscreen'">
                    <div class="card-header align-items-center gap-3">
                        <div>
                            <h5 class="card-title mb-0">Self Assessment</h5>
                        </div>
                        <div class="ms-auto text-end justify-content-end">
                            <div><i class="fa-solid fa-expand fa-fw cursor-pointer" x-on:click="card_fullscreen = ! card_fullscreen"></i></div>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="row g-3" x-data="{ section: '{{ array_key_first($research_self_assessments) }}' }">
                            <div class="col-12">
                                <div class="d-flex align-items-center gap-3 pb-3 mb-3" style="overflow-x: auto;white-space:nowrap;">
                                    @foreach ($research_self_assessments as $key => $section)
                                        <div class="text-center cursor-pointer" x-on:click="section = '{{ $key }}'">
                                            <center style="min-width: 100px;">
                                                <div :class="section == '{{ $key }}' ? 'custom-badge active' : 'custom-badge'">{{ $loop->iteration }}</div>
                                                <p class="pt-2 mb-0 fw-semibold" style="color: black;">{{ $section['title'] ?? 'Belum Ada Judul' }}</p>
                                            </center>
                                        </div>
                                        @if (!$loop->last)
                                            <div class="text-center">
                                                <i class="fa-regular fa-chevron-right fa-fw"></i>
                                            </div>
                                        @endif
                                    @endforeach
                                </div>
                            </div>
                            @foreach ($research_self_assessments as $key => $section)
                                <div class="col-12" x-show="section == '{{ $key }}'" x-transition>
                                    <div class="mb-3">
                                        <small class="card-text text-uppercase">Judul Bagian</small>
                                        <h3 class="mb-0 fw-bold text-black">{{ $section['title'] }}</h3>
                                    </div>
                                    <table class="table table-bordered" style="white-space: initial;">
                                        <thead class="table-light">
                                            <tr>
                                                <th class="text-center">#</th>
                                                <th colspan="3">Pertanyaan</th>
                                                <th class="text-center" style="width: 202px;">Jawaban</th>
                                            </tr>
                                        </thead>
                                        <tbody class="tbody-self-assessment">
                                            @foreach ($section['questions'] as $index => $question)
                                                <tr>
                                                    <td rowspan="{{ count($question['details']) + 1 }}" class="text-center align-top">{{ $key + 1 }}.{{ $index + 1 }}</td>
                                                    <td colspan="3">
                                                        <p class="mb-0">{!! $question['question'] !!}</p>
                                                    </td>
                                                    <td class="text-center">
                                                        <div class="form-check form-check-inline">
                                                            <input class="form-check-input" type="radio" name="research_self_assessments.{{ $key }}.questions.{{ $index }}.is_true" wire:model="research_self_assessments.{{ $key }}.questions.{{ $index }}.is_true" id="is-true-{{ $question['self_assessment_question_id'] }}-yes" value="1">
                                                            <label class="form-check-label" for="is-true-{{ $question['self_assessment_question_id'] }}-yes">Ya</label>
                                                        </div>
                                                        <div class="form-check form-check-inline">
                                                            <input class="form-check-input" type="radio" name="research_self_assessments.{{ $key }}.questions.{{ $index }}.is_true" wire:model="research_self_assessments.{{ $key }}.questions.{{ $index }}.is_true" id="is-true-{{ $question['self_assessment_question_id'] }}-no" value="0">
                                                            <label class="form-check-label" for="is-true-{{ $question['self_assessment_question_id'] }}-no">Tidak</label>
                                                        </div>
                                                    </td>
                                                </tr>
                                                @foreach ($question['details'] as $detail_key => $detail_question)
                                                    <tr>
                                                        <td class="text-center align-top">{{ $key + 1 }}.{{ $index + 1 }}.{{ $detail_key + 1 }}</td>
                                                        <td colspan="2">
                                                            <p class="mb-0">{!! $detail_question['question'] !!}</p>
                                                        </td>
                                                        <td class="text-center">
                                                            <div class="form-check form-check-inline">
                                                                <input class="form-check-input" type="radio" name="research_self_assessments.{{ $key }}.questions.{{ $index }}.details.{{ $detail_key }}.is_true" wire:model="research_self_assessments.{{ $key }}.questions.{{ $index }}.details.{{ $detail_key }}.is_true" id="answer-{{ $detail_question['self_assessment_question_id'] }}-yes" value="1">
                                                                <label class="form-check-label" for="answer-{{ $detail_question['self_assessment_question_id'] }}-yes">Ya</label>
                                                            </div>
                                                            <div class="form-check form-check-inline">
                                                                <input class="form-check-input" type="radio" name="research_self_assessments.{{ $key }}.questions.{{ $index }}.details.{{ $detail_key }}.is_true" wire:model="research_self_assessments.{{ $key }}.questions.{{ $index }}.details.{{ $detail_key }}.is_true" id="answer-{{ $detail_question['self_assessment_question_id'] }}-no" value="0">
                                                                <label class="form-check-label" for="answer-{{ $detail_question['self_assessment_question_id'] }}-no">Tidak</label>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        @endif
        <div class="{{ $is_use_informed_consent ? 'col-6' : 'col-12' }}">
            <div class="card h-100">
                <div class="card-header d-flex align-items-center gap-3">
                    <div>
                        <h5 class="card-title mb-0">Proposal Penelitian <span class="text-danger">*</span></h5>
                    </div>
                </div>
                <div class="card-body">
                    <div class="d-flex align-items-center gap-3">
                        @if ($proposal || $proposal_old)
                            <div>
                                <div class="avatar" data-fancybox data-src="{{ $proposal ? $proposal->temporaryUrl() : asset('storage/' . $proposal_old) }}" style="width: 64px;height: 64px;">
                                    <img src="{{ asset('assets/image/pdf.jpg') }}" class="rounded-circle shadow" style="object-fit: cover;width: 64px;height: 64px;" loading="lazy">
                                </div>
                            </div>
                        @endif
                        <div class="flex-fill">
                            <div x-data="{ uploading: false, progress: 0 }" x-on:livewire-upload-start="uploading = true" x-on:livewire-upload-finish="uploading = false" x-on:livewire-upload-error="uploading = false" x-on:livewire-upload-progress="progress = $event.detail.progress">
                                <input type="file" wire:model.live="proposal" class="form-control @error('proposal') is-invalid @enderror @if ($validated == true && ($proposal_old == null && $proposal == null)) is-invalid @endif" accept=".pdf,.png,.jpeg,.jpg,.webp">
                                @error('proposal')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                                <div x-show="uploading">
                                    <progress max="100" x-bind:value="progress"></progress>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @if ($is_use_informed_consent)
            <div class="col-6">
                <div class="card h-100">
                    <div class="card-header d-flex align-items-center gap-3">
                        <div>
                            <h5 class="card-title mb-0">Informed Consent <span class="text-danger">*</span></h5>
                        </div>
                        @if ($template_informed_consent)
                            <div class="ms-auto text-end justify-content-end">
                                <a href="{{ asset('storage/' . $template_informed_consent) }}" class="link-info">Unduh Template <i class="fa-solid fa-download fa-fw ms-2"></i></a>
                            </div>
                        @endif
                    </div>
                    <div class="card-body">
                        <div class="d-flex align-items-center gap-3">
                            @if ($informed_consent || $informed_consent_old)
                                <div>
                                    <div class="avatar" data-fancybox data-src="{{ $informed_consent ? $informed_consent->temporaryUrl() : asset('storage/' . $informed_consent_old) }}" style="width: 64px;height: 64px;">
                                        <img src="{{ asset('assets/image/pdf.jpg') }}" class="rounded-circle shadow" style="object-fit: cover;width: 64px;height: 64px;" loading="lazy">
                                    </div>
                                </div>
                            @endif
                            <div class="flex-fill">
                                <div x-data="{ uploading: false, progress: 0 }" x-on:livewire-upload-start="uploading = true" x-on:livewire-upload-finish="uploading = false" x-on:livewire-upload-error="uploading = false" x-on:livewire-upload-progress="progress = $event.detail.progress">
                                    <input type="file" wire:model.live="informed_consent" class="form-control @error('informed_consent') is-invalid @enderror @if ($validated == true && ($informed_consent == null && $informed_consent_old == null)) is-invalid @endif" accept=".pdf,.png,.jpeg,.jpg,.webp">
                                    @error('informed_consent')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                    <div x-show="uploading">
                                        <progress max="100" x-bind:value="progress"></progress>
                                    </div>
                                </div>
                                <small class="text-secondary">File Informed Consent Yang Telah Diisi</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endif
    </div>
    <div class="sticky-bottom py-3" wire:key="{{ rand() }}" style="background-color: #f8f7fa;">
        <div class="d-flex gap-3">
            <div>
                <a class="btn btn-danger" href="/penelitian/{{ $research_id ?? Session::get('research_id') }}"><i class="fa-solid fa-arrow-left fa-fw me-2"></i> Kembali</a>
            </div>
            <div class="ms-auto">
                @if (config('app.env') != 'production')
                    <button class="btn btn-primary" wire:click="flash()">Flash <i class="fa-solid fa-bolt ms-2"></i></button>
                @endif
                <button class="btn btn-success" wire:click="save()">Simpan <i class="fa-solid fa-circle-check ms-2"></i></button>
            </div>
        </div>
    </div>
</div>
@push('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.15.2/js/selectize.min.js" integrity="sha512-IOebNkvA/HZjMM7MxL0NYeLYEalloZ8ckak+NDtOViP7oiYzG5vn6WVXyrJDiJPhl4yRdmNAG49iuLmhkUdVsQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4/dist/fancybox.umd.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js" defer></script>
@endpush