@extends('layouts.app')

@section('content')
    <div class="container position-sticky z-index-sticky top-0">
        <div class="row">
            <div class="col-12">
                @include('layouts.navbars.guest.navbar')
            </div>
        </div>
    </div>

    <style>
        .scrollable-content {
            max-height: 300px;
            /* Tinggi area scroll */
            overflow-y: auto;
            /* Aktifkan scroll jika konten melebihi tinggi */
            padding-right: 10px;
            /* Tambahkan padding untuk scrollbar */
        }

        .scrollable-content::-webkit-scrollbar {
            width: 6px;
            /* Lebar scrollbar */
        }

        .scrollable-content::-webkit-scrollbar-thumb {
            background: #028284;
            /* Warna scrollbar */
            border-radius: 10px;
            /* Bentuk melengkung scrollbar */
        }

        .scrollable-content::-webkit-scrollbar-track {
            background: #f1f1f1;
            /* Warna latar belakang track scrollbar */
        }

        .footer-container {
            background-color: #f8f9fa;
            padding: 15px;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            text-align: center;
        }

        .footer-container p {
            margin: 0 0 10px 0;
            font-weight: bold;
            color: #000;
        }

        .footer-container button {
            font-size: 14px;
            padding: 10px 20px;
            border-radius: 6px;
        }

        .glass {
            background: rgba(255, 255, 255, .7) !important;
        }

        button.btn.rounded-circle {
            transition: all .25s ease;
        }

        button.btn.rounded-circle:hover {
            transform: scale(1.1);
        }

        .btn-primary:hover {
            filter: brightness(0.95);
        }

        /* geser dikit tombol close ke kanan */
        .end-2 {
            right: .75rem;
        }
    </style>

    <main class="main-content mt-0">
        <section>
            <div class="page-header min-vh-100">
                <div class="container">
                    <div class="row">
                        <div class="col-xl-4 col-lg-5 col-md-7 d-flex flex-column mx-lg-0 mx-auto">
                            <img src="{{ asset('/storage' . '/' . @$setup_app->logo_large) }}"
                                class="navbar-brand-img pb-3 pt-5 h-50 w-50 rounded mx-auto d-block" alt="main_logo">
                            <div class="card card-plain">
                                <div class="card-header pb-0 text-start">
                                    <h4 class="font-weight-bolder">Selamat Datang di E-Permit</h4>
                                    <p class="mb-0">Masukkan username Dan Password</p>
                                </div>
                                <div class="card-body">
                                    <form role="form" method="POST" action="{{ route('login.perform') }}">
                                        @csrf
                                        @method('post')
                                        <div class="flex flex-col mb-2 input-group">
                                            <input type="text" name="username"
                                                class="form-control form-control-lg lower notspace" key="true"
                                                placeholder="Username" aria-label="Name" value="">
                                            <span class="input-group-text" id="button-addon"
                                                style="border-color:#d2d6da;"><i class="fas fa-user"
                                                    style="cursor: pointer;"></i></span>
                                        </div>
                                        @error('username')
                                            <p class='text-danger text-xs'> {{ $message }} </p>
                                        @enderror

                                        <div class="flex flex-col mb-2 input-group pass">
                                            <input type="password" name="password" class="form-control form-control-lg"
                                                placeholder="Password" aria-label="Password" value=""
                                                aria-describedby="button-addon">
                                            <span class="input-group-text" id="button-addon"
                                                style="border-color:#d2d6da;"><i class="fas fa-eye showpass"
                                                    style="cursor: pointer;"></i></span>
                                        </div>
                                        @error('password')
                                            <p class="text-danger text-xs"> {{ $message }} </p>
                                        @enderror

                                        <!-- Teks "Lupa Password?" yang bisa diklik -->
                                        <p class="mb-0">
                                            <b><a href="#" data-bs-toggle="modal"
                                                    data-bs-target="#forgotPasswordModal">Lupa Password?</a></b>
                                        </p>

                                        <div class="text-center">
                                            <button type="submit"
                                                class="btn btn-lg btn-primary btn-lg w-100 mt-4 mb-0">Masuk</button>
                                        </div>
                                        <br>

                                        <!-- Teks "Daftar Disini" yang bisa diklik -->
                                        <p class="mb-0">Tidak Memiliki Akun ? <b><a href="#" data-bs-toggle="modal"
                                                    data-bs-target="#registerModal">Daftar Disini</a></b></p>
                                    </form>
                                </div>
                            </div>
                        </div>
                        <div
                            class="col-6 d-lg-flex d-none h-100 my-auto pe-0 position-absolute top-0 end-0 text-center justify-content-center flex-column">
                            <div class="position-relative bg-gradient-primary h-100 m-3 px-7 border-radius-lg d-flex flex-column justify-content-center overflow-hidden"
                                style="background-image: url('{{ asset('/storage' . '/' . @$setup_app->cover_out) }}'); background-size: cover;">

                                <span class="mask bg-gradient-primary" style="opacity:.25;"></span>

                                <h4 class="mt-5 text-white font-weight-bolder position-relative text-center">
                                    Buku Panduan MSJ E-Permit
                                </h4>


                                <div class="p-3 bg-white border-radius-lg shadow-lg position-relative text-start glass">
                                    <!-- Scrollable Q&A Section -->
                                    <div class="scrollable-content">
                                        @foreach ($panduan as $item)
                                            <div class="mb-3">
                                                <div class="d-flex">
                                                    <h5 class="text-primary font-weight-bold me-2 mb-0">Q:</h5>
                                                    <p class="text-dark mb-0">{{ $item->pertanyaan }}</p>
                                                </div>
                                                <div class="d-flex">
                                                    <h5 class="text-primary font-weight-bold me-2 mb-0">A:</h5>
                                                    <p class="text-dark mb-0">{{ $item->jawaban }}</p>
                                                </div>
                                                <hr>
                                            </div>
                                        @endforeach

                                    </div>
                                    <!-- Footer -->
                                    <div class="footer-container">
                                        <p>Selengkapnya dapat di unduh dibawah ini</p>
                                        <button onclick="generatePDF()"
                                            class="btn btn-primary text-white font-weight-bold">Unduh Panduan
                                            E-Permit</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            </div>
        </section>
    </main>

    <!-- === FLOATING BUTTON & MODAL untuk MOBILE === -->
    <button class="btn btn-primary rounded-circle shadow position-fixed d-lg-none"
        style="bottom:1rem; right:1rem; width:3.5rem; height:3.5rem; z-index:1050;" data-bs-toggle="modal"
        data-bs-target="#panduanModal">
        <i class="fas fa-book-open"></i>
    </button>

    <div class="modal fade" id="panduanModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <!-- HEADER -->
                <div class="modal-header bg-primary justify-content-center position-relative">
                    <h5 class="modal-title m-0 text-center text-white">Panduan MSJ E-Permit</h5>
                    <button type="button" class="btn-close text-white position-absolute end-2 top-50 translate-middle-y"
                        data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <!-- BODY -->
                <div class="modal-body" style="max-height:60vh; overflow:auto;">
                    @foreach ($panduan as $item)
                        <p><strong>Q:</strong> {{ $item->pertanyaan }}</p>
                        <p><strong>A:</strong> {{ $item->jawaban }}</p>
                        <hr>
                    @endforeach
                </div>

                <!-- FOOTER: tombol di tengah -->
                <div class="modal-footer justify-content-center">
                    <button onclick="generatePDF()" class="btn btn-primary px-4">
                        Unduh Panduan
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Include pdfMake -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.4/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.4/vfs_fonts.js"></script>

    <script>
        function generatePDF() {
            const data = @json($panduan); // Data yang sudah difilter dari database
            const currentDateTime = new Date().toLocaleString(); // Mendapatkan tanggal dan waktu saat ini

            // Definisi dokumen PDF
            const docDefinition = {
                content: [
                    // Header Logo dan Nama Perusahaan
                    {
                        columns: [{
                                image: 'data:image/png;base64,{{ $logo_base64 }}',
                                width: 50,
                            },
                            {
                                text: 'PT MULTI SPUNINDO JAYA Tbk',
                                style: 'companyName',
                                alignment: 'center',
                                margin: [0, 15, 0, 0],
                            },
                        ],
                    },
                    {
                        text: '________________________________________________________________________',
                        alignment: 'center',
                        margin: [0, 10, 0, 10]
                    },

                    // Judul Buku Panduan
                    {
                        text: 'BUKU PANDUAN MSJ PERMIT',
                        style: 'header',
                        alignment: 'center'
                    },
                    {
                        text: `Diunduh pada: ${currentDateTime}`,
                        style: 'subheader',
                        alignment: 'center'
                    },

                    // Spasi sebelum konten
                    {
                        text: '\n\n'
                    },

                    // Daftar Pertanyaan dan Jawaban
                    ...data.map((item, index) => [{
                            text: `${index + 1}. Pertanyaan : ${item.pertanyaan}`,
                            style: 'question'
                        },
                        {
                            text: `Jawaban: ${item.jawaban}`,
                            style: 'answer'
                        },
                        {
                            text: '________________________________________________________________________',
                            style: 'separator'
                        },
                    ]),
                ],

                styles: {
                    // Header Styles
                    header: {
                        fontSize: 18,
                        bold: true,
                        alignment: 'center',
                        margin: [0, 0, 0, 10],
                    },
                    subheader: {
                        fontSize: 12,
                        alignment: 'center',
                        margin: [0, 0, 0, 20],
                    },
                    companyName: {
                        fontSize: 14,
                        bold: true,
                        alignment: 'center',
                    },

                    // Question and Answer Styles
                    question: {
                        fontSize: 14,
                        bold: true,
                        margin: [0, 10, 0, 0],
                    },
                    answer: {
                        fontSize: 12,
                        margin: [0, 0, 0, 10],
                    },
                    separator: {
                        fontSize: 10,
                        alignment: 'center',
                        margin: [0, 5, 0, 15],
                    },
                },

                defaultStyle: {
                    font: 'Roboto',
                },
            };

            // Generate dan unduh file PDF
            pdfMake.createPdf(docDefinition).download('Panduan E-Permit.pdf');
        }
    </script>


    @foreach ($narahubung_lupa as $item)
        <!-- Modal untuk pop-up Lupa Password -->
        <div class="modal fade" id="forgotPasswordModal" tabindex="-1" aria-labelledby="forgotPasswordModalLabel"
            aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <!-- Menambahkan kelas modal-dialog-centered untuk posisi tengah -->
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="forgotPasswordModalLabel">Lupa Passwords</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body text-center">
                        <p><b>Jika anda lupa password </b>, silahkan hubungi Admin K3 pada kontak Whatsapp
                            {{ $item->Nomor_HP }} atau chat langsung dengan menekan tombol dibawah ini.</p>
                        <button type="button" class="btn btn-success mt-2 mb-2"
                            onclick="window.open('{{ $item->whatsapp_url }}', '_blank');">
                            Chat Admin K3 Whatsapp
                        </button>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
                    </div>
                </div>
            </div>
        </div>
    @endforeach




    @foreach ($narahubung_daftar as $item)
        <!-- Modal untuk pop-up Lupa Password -->
        <div class="modal fade" id="registerModal" tabindex="-1" aria-labelledby="registerModalLabel"
            aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <!-- Menambahkan kelas modal-dialog-centered untuk posisi tengah -->
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="registerModalLabel">Daftar Akun</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body text-center">
                        <p><b>Jika anda ingin membuat akun </b>, silahkan hubungi Admin K3 pada kontak Whatsapp
                            {{ $item->Nomor_HP }} atau chat langsung dengan menekan tombol dibawah ini.</p>
                        <button type="button" class="btn btn-success mt-2 mb-2"
                            onclick="window.open('{{ $item->whatsapp_url }}', '_blank');">
                            Chat Admin K3 Whatsapp
                        </button>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
                    </div>
                </div>
            </div>
        </div>
    @endforeach
@endsection