@extends('layouts.main')

@section('breadcrumbs')
    {{ Breadcrumbs::render(request()->route()->getName()) }}
@endsection

@push('styles')
    <style>
        .modal {
            width: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
@endpush


@section('content')
    <div class="w-full grid gap-5 lg:gap-7.5 mx-auto">
        <div class="card">
            <div class="card-header" id="advanced_settings_appearance">
                <h3 class="card-title">
                    Data Permohonan
                </h3>
                <div class="flex items-center gap-2">
                    <a href="{{ route('penilaian.index') }}" class="btn btn-xs btn-info"><i class="ki-filled ki-exit-left"></i>
                        Back</a>
                </div>
            </div>
            <div class="card-body lg:py-7.5 grid grid-cols-3">
                <div class="mb-5">
                    <h3 class="text-md font-medium text-gray-900">
                        Nomor Register Permohonan:
                    </h3>
                    <span class="text-2sm text-gray-700">
                        {{ $permohonan->nomor_registrasi }}
                    </span>
                </div>

                <div class="mb-5">
                    <h3 class="text-md font-medium text-gray-900">
                        Pemohon:
                    </h3>
                    <span class="text-2sm text-gray-700">
                        {{ $permohonan->user->nik }} | {{ $permohonan->user->name }} | {{ $permohonan->user->branch->name }}
                    </span>
                </div>

                <div class="mb-5">
                    <h3 class="text-md font-medium text-gray-900">
                        Tujan Permohonan:
                    </h3>
                    <span class="text-2sm text-gray-700">
                        {{ $permohonan->tujuanPenilaian->name }}
                    </span>
                </div>

            </div>
        </div>

        <div class="card min-w-full">
            <div class="card-header">
                <h3 class="card-title">
                    Detail Debutur
                </h3>
            </div>
            <div class="card-table scrollable-x-auto pb-3">
                <div class="grid grid-cols-1 xl:grid-cols-2 gap-5 lg:gap-7.5">
                    <div class="col-span-1">
                        <table class="table align-middle text-sm text-gray-500">
                            <tr>
                                <td class="py-2 text-gray-600 font-normal">
                                    Name
                                </td>
                                <td class="py-2 text-gray-800 font-normaltext-sm">
                                    {{ $permohonan->debiture->name ?? '' }}
                                </td>
                            </tr>
                            <tr>
                                <td class="py-3">
                                    Email
                                </td>
                                <td class="py-3 text-gray-700 text-2sm font-normal">
                                    {{ $permohonan->debiture->email ?? '' }}
                                </td>
                            </tr>
                            <tr>
                                <td class="py-3">
                                    Phone
                                </td>
                                <td class="py-3 text-gray-700 text-2sm font-normal">
                                    {{ $permohonan->debiture->phone ?? '' }}
                                </td>
                            </tr>

                            <tr>
                                <td class="py-3 text-gray-600 font-normal">
                                    Address
                                </td>
                                <td class="py-3 text-gray-700 text-sm font-normal">
                                    {{ $permohonan->debiture->address ?? '' }}
                                </td>
                            </tr>
                            <tr>
                                <td class="py-3 text-gray-600 font-normal">
                                    &nbsp;
                                </td>
                                <td class="py-3 text-gray-700 text-sm font-normal">
                                    {{ $permohonan->debiture->village->name ?? '' }},
                                    {{ $permohonan->debiture->district->name ?? '' }},
                                    {{ $permohonan->debiture->city->name ?? '' }},
                                    {{ $permohonan->debiture->province->name ?? '' }} -
                                    {{ $permohonan->debiture->village->postal_code ?? '' }}
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div class="col-span-1">
                        <table class="table align-middle text-sm text-gray-500">
                            <tr>
                                <td class="py-3 text-gray-600 font-normal">
                                    Cabang
                                </td>
                                <td class="py-2 text-gray-800 font-normaltext-sm">
                                    {{ $permohonan->debiture->branch->name ?? '' }}
                                </td>
                            </tr>
                            <tr>
                                <td class="py-3 text-gray-600 font-normal">
                                    CIF
                                </td>
                                <td class="py-2 text-gray-800 font-normaltext-sm">
                                    {{ $permohonan->debiture->cif ?? '' }}
                                </td>
                            </tr>
                            <tr>
                                <td class="py-3 text-gray-600 font-normal">
                                    Nomor Rekening
                                </td>
                                <td class="py-3 text-gray-700 text-sm font-normal">
                                    {{ $permohonan->debiture->nomor_rekening ?? '' }}
                                </td>
                            </tr>
                            <tr>
                                <td class="py-3">
                                    NPWP
                                </td>
                                <td class="py-3 text-gray-700 text-2sm font-normal">
                                    {{ $permohonan->debiture->npwp ?? '' }}
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="card min-w-full">
            <div class="card-header">
                <h3 class="card-title">
                    Data Jaminan
                </h3>
            </div>
            <div data-accordion="true">
                @foreach ($permohonan->debiture->documents as $dokumen)
                    <div class="accordion-item [&:not(:last-child)]:border-b border-b-gray-200" data-accordion-item="true"
                        id="accordion_1_item_1">
                        <button class="accordion-toggle py-4 group mx-8" data-accordion-toggle="#accordion_1_content_1">
                            <span class="text-base text-gray-900 font-medium">
                                Jaminan {{ $loop->index + 1 }}
                            </span>
                            <i class="ki-outline ki-plus text-gray-600 text-2sm accordion-active:hidden block">
                            </i>
                            <i class="ki-outline ki-minus text-gray-600 text-2sm accordion-active:block hidden">
                            </i>
                        </button>
                        <div class="accordion-content hidden" id="accordion_1_content_1">
                            <div class="card-body lg:py-7.5 grid grid-cols-2">
                                <div class="mb-5">
                                    <h3 class="text-md font-medium text-gray-900">
                                        Pemilik Jaminan:
                                    </h3>
                                    <span class="text-2sm text-gray-700">
                                        {{ $dokumen->pemilik->name ?? '' }}
                                    </span>
                                </div>
                                <div class="mb-5">
                                    <h3 class="text-md font-medium text-gray-900">
                                        Jenis Jaminan:
                                    </h3>
                                    <span class="text-2sm text-gray-700">
                                        {{ $dokumen->jenisJaminan->name ?? '' }}
                                    </span>
                                </div>
                                <div class="mb-5">
                                    <h3 class="text-md font-medium text-gray-900">
                                        Hubungan Pemilik Jaminan:
                                    </h3>
                                    <span class="text-2sm text-gray-700">
                                        {{ $dokumen->pemilik->hubungan_pemilik->name ?? '' }}
                                    </span>
                                </div>
                                <div class="mb-5">
                                    <h3 class="text-md font-medium text-gray-900">
                                        Alamat Pemilik Jaminan:
                                    </h3>
                                    <span class="text-2sm text-gray-700">
                                        {{ $dokumen->pemilik->address ?? '' }},
                                        <br> {{ $dokumen->pemilik->village->name ?? '' }},
                                        {{ $dokumen->pemilik->district->name ?? '' }},
                                        {{ $dokumen->pemilik->city->name ?? '' }},
                                        {{ $dokumen->pemilik->province->name ?? '' }} -
                                        {{ $dokumen->pemilik->village->postal_code ?? '' }}
                                    </span>
                                </div>
                            </div>
                            <div class="card-table scrollable-x-auto pb-3">
                                <table class="table align-middle text-sm text-gray-500">
                                    @foreach ($dokumen->detail as $detail)
                                        <tr>
                                            <td class="py-2 text-gray-600 font-normal max-w-[100px]">
                                                {{ $loop->index + 1 }}. {{ $detail->jenisLegalitasJaminan->name }}
                                            </td>
                                            <td class="py-2 text-gray-800 font-normaltext-sm">
                                                {{ $detail->name ?? '' }}
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="py-3  max-w-[100px]">
                                                Dokumen Jaminan
                                            </td>
                                            <td class="py-3 text-gray-700 text-2sm font-normal">
                                                @if (isset($detail->dokumen_jaminan))
                                                    <a href="{{ route('debitur.jaminan.download', ['id' => $permohonan->debiture->id, 'dokumen' => $detail->id]) }}"
                                                        class="badge badge-sm badge-outline mt-2">{{ basename($detail->dokumen_jaminan) }}
                                                        <i class="ki-filled ki-cloud-download"></i></a>
                                                @endif
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="py-3  max-w-[100px]">
                                                Keterangan
                                            </td>
                                            <td class="py-3 text-gray-700 text-2sm font-normal">
                                                {{ $detail->keterangan ?? '' }}
                                            </td>
                                        </tr>
                                    @endforeach
                                </table>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>

        <div class="card pb-2.5">
            <div class="card-header" id="basic_settings">
                <h3 class="card-title">
                    Form Assignment
                </h3>

            </div>

            <div class="card-body">
                <form
                    action="{{ isset($penilaian->nomor_registrasi) ? route('penilaian.update', $permohonan) : route('penilaian.store') }}"
                    method="POST" 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">
                                <select
                                    class="input tomselect w-full @error('jenis_penilaian_id') border-danger bg-danger-light @enderror"
                                    name="jenis_penilaian_id" id="jenis_penilaian_id">
                                    <option value="">Jenis Penilaian</option>

                                    @foreach ($jenisPenilaian as $item)
                                        @if (isset($penilaian->nomor_registrasi))
                                            <option value="{{ $item->id }}"
                                                {{ $penilaian->teams_id == $item->id ? 'selected' : '' }}>
                                                {{ $item->name }}</option>
                                        @else
                                            <option value="{{ $item->id }}">{{ $item->name }}</option>
                                        @endif
                                    @endforeach
                                </select>
                                @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">
                                <select
                                    class="input tomselect  w-full @error('teams_id') border-danger bg-danger-light @enderror"
                                    name="teams_id" id="teams_id">
                                    <option value="">Pilih Tim Penilai</option>
                                    @foreach ($teamPenilai as $item)
                                        @if (isset($penilaian->nomor_registrasi))
                                            <option value="{{ $item->id }}"
                                                {{ $penilaian->teams_id == $item->id ? 'selected' : '' }}>
                                                {{ $item->regions->name }}</option>
                                        @else
                                            <option value="{{ $item->id }}">{{ $item->regions->name }}</option>
                                        @endif
                                    @endforeach
                                </select>
                                @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">
                            <label class="form-label max-w-56">
                                Surveyor yang di tunjuk
                            </label>
                            <div class="flex flex-wrap items-baseline w-full">
                                <select id="surveyor_id" name="surveyor_id"
                                    class="input select  @error('surveyor_id') border-danger bg-danger-light @enderror  w-full">
                                    <option value="">Pilih Surveyor</option>
                                </select>

                                @error('surveyor_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">
                                Penilai yang di tunjuk
                            </label>
                            <div class="flex flex-wrap items-baseline w-full">
                                <select id="penilaian_id" name="penilaian_id"
                                    class="input select @error('penilaian_id') border-danger bg-danger-light @enderror  w-full">
                                    <option value="">Pilih Penilai</option>
                                </select>
                                @error('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">
                                Surveyor dan penilai yang di tunjuk
                            </label>
                            <div class="flex flex-wrap items-baseline w-full">
                                <select id="penilai_surveyor_id" name="penilai_surveyor_id"
                                    class="input select  @error('penilai_surveyor_id') border-danger bg-danger-light @enderror  w-full">
                                    <option value="">Pilih Surveyor dan Penilai</option>
                                </select>
                                @error('penilai_surveyor_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">
                                Jadwal Kunjungan
                            </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') : '' }}">
                                @error('tanggal_kunjungan')
                                    <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 class="textarea  @error('keterangan') border-danger bg-danger-light  @enderror" rows="3"
                                    type="text" name="keterangan">{{ $penilaian->keterangan ?? '' }}</textarea>
                            </div>
                            @error('keterangan')
                                <em class="alert text-danger text-sm">{{ $message }}</em>
                            @enderror
                        </div>
                    </div>
                    <div class="flex justify-end card-footer mt-2">
                        <button type="submit" 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 fade" data-modal="true" id="modal_revisi" data-backdrop="static" data-keyboard="false">
        <div class="modal-content">
            <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">Submit</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection
@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            let teamsSelect = document.getElementById('teams_id');
            let penilaiSelect = document.getElementById('penilaian_id');
            let surveyorSelect = document.getElementById('surveyor_id');
            let penilaiSurveyorSelect = document.getElementById('penilai_surveyor_id');

            let selectedSurveyorId = @json($penilaian->surveyor_id ?? null);
            let selectedPenilaiId = @json($penilaian->penilaian_id ?? null);
            let selectedPenilaiSurveyorId = @json($penilaian->penilai_surveyor_id ?? null);

            function fetchPenilai(teamId) {
                penilaiSelect.innerHTML = '<option value="">Pilih Penilai</option>';
                surveyorSelect.innerHTML = '<option value="">Pilih Surveyor</option>';
                penilaiSurveyorSelect.innerHTML = '<option value="">Pilih Penilai Surveyor</option>';

                if (teamId) {
                    fetch(`/penilaian/getUserTeams/${teamId}`)
                        .then(response => response.json())
                        .then(data => {
                            if (data && data.length > 0) {
                                data.forEach((user) => {
                                    let optionPenilai = document.createElement('option');
                                    let optionSurveyor = document.createElement('option');
                                    let optionPenilaiSurveyor = document.createElement('option');

                                    optionPenilai.value = user.id;
                                    optionSurveyor.value = user.id;
                                    optionPenilaiSurveyor.value = user.id;

                                    optionPenilai.text = user.name;
                                    optionSurveyor.text = user.name;
                                    optionPenilaiSurveyor.text = user.name;

                                    // Tambahkan pengguna ke semua select
                                    penilaiSelect.appendChild(optionPenilai);
                                    surveyorSelect.appendChild(optionSurveyor);
                                    penilaiSurveyorSelect.appendChild(optionPenilaiSurveyor);

                                    if (selectedPenilaiId && selectedPenilaiId == user.id) {
                                        optionPenilai.selected = true;
                                    }
                                    if (selectedSurveyorId && selectedSurveyorId == user.id) {
                                        optionSurveyor.selected = true;
                                    }
                                    if (selectedPenilaiSurveyorId && selectedPenilaiSurveyorId == user
                                        .id) {
                                        optionPenilaiSurveyor.selected = true;
                                    }
                                });
                            } else {
                                let noUserOption = document.createElement('option');
                                noUserOption.value = '';
                                noUserOption.text = 'Tidak ada pengguna yang sesuai.';
                                penilaiSelect.appendChild(noUserOption);
                                surveyorSelect.appendChild(noUserOption.cloneNode(true));
                                penilaiSurveyorSelect.appendChild(noUserOption.cloneNode(true));
                            }
                        })
                        .catch(error => {
                            console.error('Error fetching team members:', error);
                            let errorOption = document.createElement('option');
                            errorOption.value = '';
                            errorOption.text = 'Terjadi kesalahan.';
                            penilaiSelect.appendChild(errorOption);
                            surveyorSelect.appendChild(errorOption.cloneNode(true));
                            penilaiSurveyorSelect.appendChild(errorOption.cloneNode(true));
                        });
                } else {
                    let defaultOption = document.createElement('option');
                    defaultOption.value = '';
                    defaultOption.text = 'Pilih tim terlebih dahulu.';
                    penilaiSelect.appendChild(defaultOption);
                    surveyorSelect.appendChild(defaultOption.cloneNode(true));
                    penilaiSurveyorSelect.appendChild(defaultOption.cloneNode(true));
                }
            }

            teamsSelect.addEventListener('change', function() {
                let teamId = this.value;
                fetchPenilai(teamId);
            });

            let selectedTeamId = teamsSelect.value;
            if (selectedTeamId) {
                fetchPenilai(selectedTeamId);
            }
        });
    </script>

<script>
    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();
            }
        });
    });
</script>
@endpush