@extends('layouts.main')

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

@section('content')
    <div class="w-full grid gap-5 lg:gap-7.5 mx-auto">
        <div class="card">
            <div class="card-header py-5 flex-wrap">
                <div class="card-title flex flex-row gap-1.5">
                    <button id="tab-laporan" class="btn btn-sm btn-primary">Laporan</button>
                    <button id="tab-hasil" class="btn btn-sm btn-light">Hasil Inspeksi</button>
                </div>
                <div class="flex items-wrap gap-2.5">
                    <a href="{{ route('laporan-penilai-jaminan.index') }}" class="btn btn-xs btn-info"><i
                            class="ki-filled ki-exit-left"></i>
                        Back</a>
                </div>
            </div>
        </div>
        <div class="card-body">
            @php
                $permohonan_id = request()->segment(3);
                $dokumen_id = request()->segment(4);
                $jenis_jaminan_id = request()->segment(5);
            @endphp

            <div id="laporan" class="tab-content">
                <div class="floating-button">
                    <a href="penilai/print-out-laporan/{{ $permohonan_id }}/{{ $dokumen_id }}/{{ $jenis_jaminan_id }}"  class="btn btn-primary">
                        Cetak Laporan
                        <i class="ki-filled ki-printer"></i>
                    </a>
                </div>

                @php
                    $laporan = [
                        'sederhana' => 'lpj::penilai.components.print-out-sederhana',
                        'standar' => 'lpj::penilai.components.print-out-standar',
                        'resume' => 'lpj::penilai.components.print-resume',
                        'memo' => 'lpj::penilai.components.print-memo',
                        'rap' => 'lpj::penilai.components.print-out-rap',
                        'call-report' => 'penilai.components.print-out-call-report',
                    ];
                @endphp
                @if (array_key_exists($lpj->type_penilai, $laporan))
                    @include($laporan[$lpj->type_penilai])
                @else
                    <p>Tipe laporan tidak ditemukan.</p>
                @endif
            </div>
            <div id="hasil-inspeksi" class="tab-content hidden-tab">
                <div class="floating-button">
                    <a href="surveyor/print-out-inspeksi/{{ $permohonan_id }}/{{ $dokumen_id }}/{{ $jenis_jaminan_id }}"
                        class="btn btn-primary">
                        Cetak Laporan
                        <i class="ki-filled ki-printer"></i>
                    </a>
                </div>
                @include('lpj::surveyor.components.print-out.main')
            </div>
        </div>

        <script>
            document.addEventListener('DOMContentLoaded', () => {
                const tabLaporan = document.getElementById('tab-laporan');
                const tabHasil = document.getElementById('tab-hasil');
                const laporanContent = document.getElementById('laporan');
                const hasilContent = document.getElementById('hasil-inspeksi');

                tabLaporan.addEventListener('click', () => {
                    tabLaporan.classList.add('btn-primary');
                    tabLaporan.classList.remove('btn-light');
                    tabHasil.classList.add('btn-light');
                    tabHasil.classList.remove('btn-primary');
                    laporanContent.classList.remove('hidden-tab');
                    hasilContent.classList.add('hidden-tab');
                });

                tabHasil.addEventListener('click', () => {
                    tabHasil.classList.add('btn-primary');
                    tabHasil.classList.remove('btn-light');
                    tabLaporan.classList.add('btn-light');
                    tabLaporan.classList.remove('btn-primary');
                    laporanContent.classList.add('hidden-tab');
                    hasilContent.classList.remove('hidden-tab');
                });
            });
        </script>

        <style>
            .hidden-tab {
                display: none;
            }

            .floating-button {
                position: fixed;
                bottom: 20px;
                right: 20px;
                z-index: 1000;
            }

            .floating-button .btn {
                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
                border-radius: 50px;
                padding: 10px 20px;
            }

            .floating-button .btn:hover {
                transform: scale(1.05);
                transition: transform 0.2s ease-in-out;
            }
        </style>

        {{-- @include('lpj::surveyor.js.utils') --}}
    @endsection