@extends('layouts.main')

@section('breadcrumbs')
    {{ Breadcrumbs::render(request()->route()->getName()) }}
@endsection
@section('content')
@include('lpj::assetsku.includenya')
    <div class="w-full grid gap-5 lg:gap-7.5 mx-auto">
        @include('lpj::component.detail-jaminan', ['backLink' => 'penilaian.index'])

        <div class="card border border-agi-100 pb-2.5">
            <div class="card-header bg-agi-50" id="basic_settings">
                <h3 class="card-title">
                    Form Assignment
                </h3>
            </div>

            <div class="card-body">
                <form id="form-assignment"  class="">
                    @if (isset($penilaian->nomor_registrasi))
                        @method('PUT')
                    @endif
                    @csrf
                    <div class="pl-1 grid gap-2.5">
                        <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
                            <label class="form-label max-w-56">
                                Penilai yang Dilakukan oleh
                            </label>

                            <input type="hidden" name="nomor_registrasi"
                                value="{{ $penilaian->nomor_registrasi ?? $permohonan->nomor_registrasi }}">
                            <div class="flex flex-wrap items-baseline w-full">
                                <input class="input" type="hidden" name="jenis_penilaian_id"
                                    value="{{ $jenisPenilaian->id }}">
                                <input class="input  @error('jenis_penilaian_id') border-danger bg-danger-light @enderror"
                                    type="text" value="{{ $jenisPenilaian->name }}" readonly>
                                @error('jenis_penilaian_id')
                                    <em class="alert text-danger text-sm">{{ $message }}</em>
                                @enderror
                            </div>
                        </div>

                        <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
                            <label class="form-label max-w-56">
                                Tim Penilai yang di tunjuk
                            </label>
                            <div class="flex flex-wrap items-baseline w-full">
                                <input class="input" type="hidden" name="teams_id" value="{{ $regionName->id }}">
                                <input class="input  @error('teams_id') border-danger bg-danger-light @enderror"
                                    type="text" value="{{ $regionName->name }}" readonly>
                                @error('teams_id')
                                    <em class="alert text-danger text-sm">{{ $message }}</em>
                                @enderror
                            </div>
                        </div>
                        <div
                            class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5 {{ $penilaianTeam->isEmpty() ? '' : 'hidden' }}">
                            <label class="form-label max-w-56">
                                Pilih Surveyor dan Penilai
                            </label>
                            <div class="flex flex-wrap items-baseline w-full">
                                <div class="input-group w-full">
                                    <select id="surveyor_selection" name="surveyor_selection"
                                        class="tomselect input @error('surveyor_selection') border-danger bg-danger-light @enderror w-full">
                                        <option value="">Pilih Surveyor dan Penilai</option>
                                        <option value="penilai_dan_surveyor">Penilai dan Surveyor Sama</option>
                                        <option value="berbeda">Berbeda</option>
                                    </select>
                                </div>
                                    <em id="error-surveyor_selection" class="alert text-danger text-sm"></em>

                            </div>
                        </div>

                        <div id="same_surveyor_penilai" class="hidden">
                            <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
                                <label class="form-label max-w-56">
                                    Surveyor dan Penilai yang di tunjuk
                                </label>
                                <div class="flex flex-wrap items-baseline w-full">
                                    <div class="input-group w-full">
                                        <select id="penilai_surveyor_id" name="penilai_surveyor_id"
                                            class="input tomselect @error('penilai_surveyor_id') border-danger bg-danger-light @enderror w-full">
                                            <option value="">Pilih Surveyor dan Penilai</option>
                                            @foreach ($teamPenilai as $item)
                                                <option value="{{ $item->id }}">{{ $item->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>

                                        <em id="error-penilai_surveyor_id" class="alert text-danger text-sm"></em>

                                </div>
                            </div>
                        </div>


                        <div id="different_surveyor_penilai" class="{{ $penilaianTeam->isNotEmpty() ? '' : 'hidden' }}">
                            <div class="grid gap-2.5">

                                @if (
                                    $penilaianTeam->isNotEmpty() &&
                                        $penilaianTeam->contains(fn($item) => $item->role == 'surveyor' && is_null($item->user_id)))
                                    <div id="surveyorId" class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
                                        <label class="form-label max-w-56">
                                            Surveyor yang di tunjuk
                                        </label>
                                        <div class="flex flex-wrap items-baseline w-full">
                                            <div class="input-group w-full">
                                                <select id="surveyor_id" name="surveyor_id"
                                                    class="tomselect input @error('surveyor_id') border-danger bg-danger-light @enderror w-full">
                                                    <option value="">Pilih Surveyor</option>
                                                    @foreach ($teamPenilai as $item)
                                                        <option value="{{ $item->id }}">{{ $item->name }}</option>
                                                    @endforeach

                                                    @if ($penilaianTeam->isEmpty())
                                                        <option value="pilih_dari_region">pilih dari region berdeda
                                                        </option>
                                                    @endif
                                                </select>
                                            </div>

                                                <em id="error-surveyor_id" class="alert text-danger text-sm"></em>

                                        </div>
                                    </div>
                                @elseif($penilaianTeam->isEmpty())
                                    <div id="surveyorId" class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
                                        <label class="form-label max-w-56">
                                            Surveyor yang di tunjuk
                                        </label>
                                        <div class="flex flex-wrap items-baseline w-full">
                                            <div class="input-group w-full">
                                                <select id="surveyor_id" name="surveyor_id"
                                                    class="tomselect input @error('surveyor_id') border-danger bg-danger-light @enderror w-full">
                                                    <option value="">Pilih Surveyor</option>
                                                    @foreach ($teamPenilai as $item)
                                                        <option value="{{ $item->id }}">{{ $item->name }}</option>
                                                    @endforeach

                                                    @if ($penilaianTeam->isEmpty())
                                                        <option value="pilih_dari_region">Pilih Surveyor Dari Region
                                                        </option>
                                                    @endif
                                                </select>
                                            </div>

                                                <em id="error-surveyor_id" class="alert text-danger text-sm"></em>

                                        </div>
                                    </div>
                                @endif


                                <div id="surveyorRegion" class="hidden items-baseline flex-wrap lg:flex-nowrap gap-2.5">
                                    <label class="form-label max-w-56">
                                        Pilih Region
                                    </label>
                                    <div class="flex flex-wrap items-baseline w-full">
                                        <div class="input-group w-full">
                                            <select id="surveyor_region_id" name="surveyor_region_id"
                                                class="tomselect input @error('surveyor_region_id') border-danger bg-danger-light @enderror w-full">
                                                <option value="">Pilih Region</option>

                                                @if (isset($updateTeamPenilai))
                                                    @foreach ($updateTeamPenilai as $item)
                                                        <option value="{{ $item->regions->id }}">
                                                            {{ $item->regions->name }}</option>
                                                    @endforeach
                                                @endif
                                            </select>
                                        </div>

                                            <em id="error-surveyor_region_id" class="alert text-danger text-sm"></em>

                                    </div>
                                </div>


                                @if (
                                    $penilaianTeam->isNotEmpty() &&
                                        $penilaianTeam->contains(fn($item) => $item->role == 'penilai' && is_null($item->user_id)))
                                    <div id="penilaiId" class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
                                        <label class="form-label max-w-56">
                                            Penilai yang di tunjuk
                                        </label>
                                        <div class="flex flex-wrap items-baseline w-full">
                                            <div class="input-group w-full">
                                                <select id="penilai_id" name="penilai_id"
                                                    class="input tomselect @error('penilai_id') border-danger bg-danger-light @enderror w-full">
                                                    <option value="">Pilih Penilai</option>
                                                    @foreach ($teamPenilai as $item)
                                                        <option value="{{ $item->id }}">{{ $item->name }}</option>
                                                    @endforeach
                                                    @if ($penilaianTeam->isEmpty())
                                                        <option value="pilih_dari_region">pilih dari region berdeda
                                                        </option>
                                                    @endif
                                                </select>
                                            </div>
                                            <em id="error-penilai_id" class="alert text-danger text-sm"></em>
                                        </div>
                                    </div>
                                @elseif($penilaianTeam->isEmpty())
                                    <div id="penilaiId" class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
                                        <label class="form-label max-w-56">
                                            Penilai yang di tunjuk
                                        </label>
                                        <div class="flex flex-wrap items-baseline w-full">
                                            <div class="input-group w-full">
                                                <select id="penilai_id" name="penilai_id"
                                                    class="input tomselect @error('penilai_id') border-danger bg-danger-light @enderror w-full">
                                                    <option value="">Pilih Penilai</option>
                                                    @foreach ($teamPenilai as $item)
                                                        <option value="{{ $item->id }}">{{ $item->name }}</option>
                                                    @endforeach
                                                    @if ($penilaianTeam->isEmpty())
                                                        <option value="pilih_dari_region">Pilih Penilai Dari Region
                                                        </option>
                                                    @endif
                                                </select>
                                            </div>
                                                <em id="error-penilai_id" class="alert text-danger text-sm"></em>
                                        </div>
                                    </div>
                                @endif
                                <div id="penilaiRegion" class="hidden items-baseline flex-wrap lg:flex-nowrap gap-2.5">
                                    <label class="form-label max-w-56">
                                        Pilih Region
                                    </label>
                                    <div class="flex flex-wrap items-baseline w-full">
                                        <div class="input-group w-full">
                                            <select id="penilai_region_id" name="penilai_region_id"
                                                class="tomselect input @error('penilai_region_id') border-danger bg-danger-light @enderror w-full">
                                                <option value="">Pilih Region</option>

                                                @if (isset($updateTeamPenilai))
                                                    @foreach ($updateTeamPenilai as $item)
                                                        <option value="{{ $item->regions->id }}">
                                                            {{ $item->regions->name }}</option>
                                                    @endforeach
                                                @endif
                                            </select>
                                        </div>
                                            <em id="error-penilai_region_id" class="alert text-danger text-sm"></em>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
                            <label class="form-label max-w-56">
                                Tanggal assign
                            </label>

                            <div class="flex flex-wrap items-baseline w-full">
                                <input class="input @error('tanggal_kunjungan') border-danger bg-danger-light @enderror"
                                    type="datetime-local" name="tanggal_kunjungan"
                                    value="{{ isset($penilaian->tanggal_kunjungan) ? \Carbon\Carbon::createFromTimestamp($penilaian->tanggal_kunjungan)->format('Y-m-d\TH:i') : '' }}">

                                    <em id="error-tanggal_kunjungan" class="alert text-danger text-sm"></em>
                            </div>
                        </div>


                        <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
                            <label class="form-label max-w-56">
                                Catatan
                            </label>
                            <div class="flex flex-wrap items-baseline w-full">
                                <textarea class="textarea @error('keterangan') border-danger bg-danger-light @enderror" rows="3" name="keterangan">{{ $permohonan->registrasi_catatan ? $permohonan->registrasi_catatan . "\n\n" : "" }}{{ $penilaian->keterangan ?? '' }}</textarea>
                            </div>

                                <em id="error-keterangan" class="alert text-danger text-sm"></em>

                        </div>
                    </div>
                    <div class="flex justify-end card-footer mt-2">
                        <button type="button" onclick="submitAssignment()" class="btn btn-success">
                            Aprove
                        </button>

                        <button type="button" data-modal-toggle="#modal_revisi" class="btn btn-warning ml-3">
                            Revisi
                        </button>

                    </div>
                </form>
            </div>
        </div>
    </div>


    <div class="modal" data-modal="true" id="modal_revisi"">
        <div class="modal-content max-w-[600px] top-[10%]">
            <div class="modal-header">
                <h3 class="modal-title">Revisi</h3>
                <button class="btn btn-xs btn-icon btn-light" data-modal-dismiss="true">
                    <i class="ki-outline ki-cross"></i>
                </button>
            </div>
            <div class="modal-body">
                <form
                    action="{{ route('penilaian.revisi', $penilaian->nomor_registrasi ?? $permohonan->nomor_registrasi) }}"
                    method="POST" enctype="multipart/form-data" id="revisiForm">
                    @csrf
                    @method('PUT')

                    <input type="hidden" name="action" value="revisi">
                    <input type="hidden" name="nomor_registrasi"
                        value="{{ $penilaian->nomor_registrasi ?? $permohonan->nomor_registrasi }}">

                    <div class="pl-1 grid gap-2.5">
                        <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
                            <label class="form-label max-w-56">Dokumen Revisi</label>
                            <div class="flex flex-wrap items-baseline w-full">
                                <input id="dokumen"
                                    class="file-input @error('dokumen') border-danger bg-danger-light @enderror"
                                    type="file" name="dokumen">
                                @error('dokumen')
                                    <em class="alert text-danger text-sm">{{ $message }}</em>
                                @enderror
                            </div>
                        </div>

                        <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
                            <label class="form-label max-w-56">Catatan</label>
                            <div class="flex flex-wrap items-baseline w-full">
                                <textarea id="keterangan" class="textarea @error('keterangan') border-danger bg-danger-light @enderror"
                                    rows="3" name="keterangan"></textarea>
                                @error('keterangan')
                                    <em class="alert text-danger text-sm">{{ $message }}</em>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="modal-footer justify-end mt-2">
                        <div class="flex gap-4">
                            <button type="button" class="btn btn-light" data-modal-dismiss="true">Cancel</button>
                            <button id="btnSubmit" type="submit" class="btn btn-primary"
                                data-modal-dismiss="true">Submit</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

@endsection
@push('scripts')
    <script>
        document.getElementById('surveyor_selection').addEventListener('change', function() {
            const selectedValue = this.value;
            const sameSurveyorPenilai = document.getElementById('same_surveyor_penilai');
            const differentSurveyorPenilai = document.getElementById('different_surveyor_penilai');

            if (selectedValue === 'penilai_dan_surveyor') {
                sameSurveyorPenilai.classList.remove('hidden');
                differentSurveyorPenilai.classList.add('hidden');
            } else if (selectedValue === 'berbeda') {
                sameSurveyorPenilai.classList.add('hidden');
                differentSurveyorPenilai.classList.remove('hidden');

            } else {
                sameSurveyorPenilai.classList.add('hidden');
                differentSurveyorPenilai.classList.add('hidden');
            }
        });


        document.getElementById('surveyor_id').addEventListener('change', function() {
            const selectedValue = this.value;
            const surveyorRegion = document.getElementById('surveyorRegion');

            if (selectedValue === 'pilih_dari_region') {
                surveyorRegion.classList.remove('hidden');
                surveyorRegion.classList.add('flex');
            } else {
                surveyorRegion.classList.add('hidden');
            }
        });

        document.getElementById('penilai_id').addEventListener('change', function() {
            const selectedValue = this.value;
            const penilaiRegion = document.getElementById('penilaiRegion');

            if (selectedValue === 'pilih_dari_region') {
                penilaiRegion.classList.remove('hidden');
                penilaiRegion.classList.add('flex');
            } else {
                penilaiRegion.classList.add('hidden');
            }
        });


        document.addEventListener('DOMContentLoaded', function() {
            const revisiForm = document.getElementById('revisiForm');
            const btnSubmit = document.getElementById('btnSubmit');

            btnSubmit.addEventListener('click', function(event) {
                // Cegah form dari pengiriman default
                event.preventDefault();

                // Ambil nilai dari input dan textarea
                const dokumenRevisi = document.getElementById('dokumen').value;
                const keteranganRevisi = document.getElementById('keterangan').value.trim();

                // Bersihkan pesan kesalahan sebelumnya
                document.querySelectorAll('.alert.text-danger').forEach(el => el.remove());

                // Validasi: jika ada field kosong, tampilkan pesan kesalahan
                let isValid = true;

                if (!dokumenRevisi) {
                    const errorMessage = document.createElement('em');
                    errorMessage.className = 'alert text-danger text-sm';
                    errorMessage.innerText = 'Dokumen Revisi harus diisi.';
                    document.getElementById('dokumen').parentElement.appendChild(errorMessage);
                    isValid = false; // Set isValid ke false
                }

                if (!keteranganRevisi) {
                    const errorMessage = document.createElement('em');
                    errorMessage.className = 'alert text-danger text-sm';
                    errorMessage.innerText = 'Catatan harus diisi.';
                    document.getElementById('keterangan').parentElement.appendChild(errorMessage);
                    isValid = false; // Set isValid ke false
                }

                // Jika semua field valid, kirim form
                if (isValid) {
                    revisiForm.submit();
                }
            });
        });


        function submitAssignment() {
            const formElement = $('#form-assignment')[0];
            const formData = new FormData(formElement);


            const urlAssignment =
                "{{ isset($penilaian->nomor_registrasi) ? route('penilaian.update', $permohonan) : route('penilaian.store') }}";

            $.ajax({
                url: urlAssignment,
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                success: function(response) {
                    if (response.success) {
                        window.location.href =
                            '{{ route('penilaian.index') }}';
                        toastrSuccessBuild(response.message);
                    } else {

                        showErrorMessages(response.errors);
                    }
                    console.log(response);
                },
                error: function(xhr) {
                    // Handle errors from the server
                    toastrErrorBuild(xhr.responseJSON.message);
                    showErrorMessages(xhr.responseJSON?.errors);
                    console.error('Error occurred:', xhr.statusText);
                    console.log('Response:', xhr.responseText);
                },
                complete: function() {
                    // Re-enable the button and hide the spinner
                    $('#saveButton').prop('disabled', false);
                    $('#saveButtonText').show();
                    $('#saveButtonSpinner').hide();
                }
            });
        }

        function showErrorMessages(errors) {
            $('.alert').text('');
            if (errors) {
                $.each(errors, function(key, value) {
                    $(`#error-${key}`).text(value[0]);
                });
            }
        }
    </script>
@endpush