@extends('../layout/' . $layout)

@section('head')
    <title>Login</title>
@endsection

@section('content')
    <div class="container sm:px-10">
        <div class="block xl:grid grid-cols-2 gap-4">
            <!-- BEGIN: Login Info -->
            <div class="hidden xl:flex flex-col min-h-screen">
                <a href="" class="-intro-x flex items-center pt-5">
                    <img alt="ORDERSOBCA" class="w-10" src="{{ asset('dist/images/logo-potrait-round.png') }}">
                    <span class="text-white text-lg ml-1">
                        <span class="font-medium"> MAHKOTA AGRO </span>
                    </span>
                </a>
                <div class="my-auto">
                    <img alt="Laravel Admin Dashboard Starter Kit" class="-intro-x w-1/2 -mt-16"
                        src="{{ asset('dist/images/illustration.svg') }}">
                    <div class="-intro-x text-white font-medium text-4xl leading-tight mt-10">Pesan Barang,<br>Hanya
                        dengan klik.</div>
                    <!-- <div class="-intro-x mt-5 text-lg text-white">PT. Benih Citra Asia</div> -->
                </div>
            </div>
            <!-- END: Login Info -->

            <!-- BEGIN: Login Form -->
            <div class="h-screen xl:h-auto flex py-5 xl:py-0 my-10 xl:my-0">
                <div
                    class="my-auto mx-auto xl:ml-20 bg-white xl:bg-transparent px-5 sm:px-8 py-8 xl:p-0 rounded-md shadow-md xl:shadow-none w-full sm:w-3/4 lg:w-2/4 xl:w-auto">
                    <!-- Add the logo and text here -->
                    <div class="intro-x text-center xl:hidden mb-5">
                        <div class="flex flex-col items-center">
                            <img src="{{ asset('dist/images/logo-lands.png') }}" alt="Logo" class="h-16">
                            <span class="text-black text-lg mt-2">
                                ORDER <span class="font-medium font-bold">BINTANG ASIA</span>
                            </span>
                        </div>
                    </div>
                    <h2 class="intro-x font-bold text-xl xl:text-3xl text-center xl:text-left">Masuk</h2>
                    <form id="login-form" action="{{ route('login') }}" method="POST">
                        <div class="intro-x mt-8">
                            @csrf
                            <input type="text" id="input-email" name="email"
                                class="intro-x login__input input input--lg border border-gray-300 block w-full"
                                placeholder="Nama Pengguna">
                            @if ($errors->has('email'))
                                <div id="error-email" class="input__error w-5/6 text-theme-6 mt-2">
                                    <strong>{{ $errors->first('email') }}</strong>
                                </div>
                            @endif
                            <input type="password" id="input-password" name="password"
                                class="intro-x login__input input input--lg border border-gray-300 block mt-4 w-full"
                                placeholder="Kata Sandi">
                            @if ($errors->has('password'))
                                <div id="error-password" class="input__error w-5/6 text-theme-6 mt-2">
                                    <strong>{{ $errors->first('password') }}</strong>
                                </div>
                            @endif
                        </div>
                        <div class="intro-x flex text-gray-700 text-xs sm:text-s mt-4">
                            <div class="flex items-center mr-auto">
                                <input type="checkbox" class="input border mr-2" id="show-password" onclick="centang()">
                                <label class="cursor-pointer select-none" for="show-password">Lihat Password</label>
                            </div>
                        </div>
                        @if (session()->get('failedAttempts') >= 3)
                            <div class="form-group mt-4">
                                {!! NoCaptcha::renderJs() !!}
                                {!! NoCaptcha::display() !!}
                                @if ($errors->has('g-recaptcha-response'))
                                    <span
                                        class="text-theme-6 mt-2"><strong>{{ $errors->first('g-recaptcha-response') }}</strong></span>
                                @endif
                            </div>
                        @endif
                        <div class="intro-x mt-5 xl:mt-8 xl:flex justify-center xl:justify-start">
                            <button id="btn-login" class="button button--lg w-full text-white bg-theme-1"
                                type="submit">Masuk!</button>
                        </div>
                        <!-- Terms & Conditions Checkbox -->
                        <div class="intro-x mt-5 xl:mt-5 text-gray-700 text-center xl:text-left" hidden>
                            <div class="flex items-center mr-auto">
                                <input type="checkbox" class="input border mr-2" id="cb-tc"
                                    {{ isset($hasLoggedIn) && $hasLoggedIn ? 'checked' : '' }}>
                                <label class="cursor-pointer select-none" for="cb-tc">
                                    Dengan ini saya menyetujui,
                                    <a href="javascript:void(0);" onclick="openModal()" class="text-theme-1"><i>Syarat &
                                            Ketentuan</i></a> yang berlaku.
                                </label>
                            </div>
                        </div>

                        <!-- Custom Tailwind Alert -->
                        <div id="alert-tc"
                            class="hidden mt-4 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative"
                            role="alert">
                            <div class="flex items-center">
                                <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd"
                                        d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
                                        clip-rule="evenodd"></path>
                                </svg>
                                <span class="block sm:inline">Silakan setujui Syarat & Ketentuan
                                    terlebih dahulu.</span>
                                <button type="button" onclick="closeAlert()"
                                    class="absolute top-0 bottom-0 right-0 px-4 py-3">
                                    <svg class="fill-current h-6 w-6 text-red-500" role="button"
                                        xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                                        <path
                                            d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z" />
                                    </svg>
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Terms & Conditions Modal (Placed at the end of the body) -->
    <div id="tc-modal"
        class="absolute top-0 left-0 w-full min-h-screen bg-black bg-opacity-50 flex items-center justify-center hidden z-50 p-4 overflow-auto">
        <div class="bg-white w-11/12 md:w-3/4 max-w-5xl rounded-lg shadow-lg overflow-hidden flex flex-col max-h-[90vh] overflow-auto"
            onclick="event.stopPropagation()">
            <!-- Modal Header -->
            <div class="flex justify-between items-center p-4 border-b bg-gray-200">
                <h2 class="text-lg font-semibold">Syarat & Ketentuan</h2>
                <button onclick="closeModal()" class="text-gray-600 hover:text-gray-900 text-2xl">&times;</button>
            </div>

            <!-- Modal Content: Two-Section Layout -->
            <div class="flex flex-col md:flex-row">
                <!-- Left Section: Summary -->
                <div class="w-full md:w-1/3 p-6 bg-gray-100">
                    <h3 class="font-semibold text-lg">Ringkasan</h3>
                    <p class="text-sm text-gray-600 mt-2">
                        Berikut adalah Syarat dan Ketentuan yang berlaku. Silakan baca dengan teliti sebelum menyetujui
                        layanan ini.
                    </p>
                    <ul class="text-sm text-gray-700 mt-4 list-disc list-inside">
                        <li>Pengertian</li>
                        <li>Keamanan akun</li>
                        <li>Batasan tanggung jawab</li>
                        <li>Hukum yang berlaku</li>
                        <li>Pembaharuan ketentuan</li>
                    </ul>
                </div>

                <!-- Right Section: Full Terms & Conditions -->
                <div class="w-full md:w-2/3 p-6 h-[500px] overflow-y-auto">
                    <p class="text-sm text-gray-700 leading-relaxed">
                        Selamat datang di portal <a href="https://order.benihcitraasia.co.id/login"
                            class="text-blue-500">https://order.benihcitraasia.co.id/login</a>.
                        <br><br>
                        Syarat dan ketentuan yang ditetapkan di bawah ini merupakan perjanjian antara Pengguna ("Anda")
                        dengan PT Benih Citra Asia ("BintangAsia" atau "Kami") yang mengatur hak, kewajiban, dan tanggung
                        jawab Pengguna dalam menggunakan layanan ini.
                        <br><br>
                        <strong>A. Definisi</strong><br>
                        - BintangAsia adalah PT Benih Citra Asia yang menyediakan portal pemesanan benih secara online.<br>
                        - Pengguna adalah pihak yang menggunakan layanan portal ini.<br>
                        - Pembeli adalah Pengguna yang melakukan permintaan atas barang yang dijual melalui portal
                        ini.<br><br>

                        <strong>B. Akun, Password, dan Keamanan</strong><br>
                        - Pengguna harus menjaga keamanan akun mereka.<br>
                        - BintangAsia tidak bertanggung jawab atas penyalahgunaan akun.<br>
                        - Jangan pernah memberikan OTP atau password Anda ke pihak lain.<br><br>

                        <strong>C. Penolakan Jaminan dan Batasan Tanggung Jawab</strong><br>
                        - Layanan diberikan "SEBAGAIMANA ADANYA".<br>
                        - Pengguna membebaskan dari segala tuntutan bentuk kerugian baik materil maupun non materil terhadap
                        PT Benih Citra Asia atas kehilangan data, keterlambatan layanan atau tindakan peretesan yang
                        diakibatkan oleh kelalaian pengguna.<br><br>

                        <strong>D. Pilihan Hukum</strong><br>
                        - Perjanjian ini tunduk pada hukum Republik Indonesia.<br><br>

                        <strong>E. Pembaharuan</strong><br>
                        - Syarat & Ketentuan ini dapat diperbarui sewaktu-waktu tanpa pemberitahuan sebelumnya.
                    </p>
                </div>
            </div>

            <!-- Modal Footer -->
            <div class="p-4 border-t bg-gray-200 text-right">
                <button onclick="closeModal()"
                    class="px-4 py-2 bg-gray-500 text-white rounded hover:bg-gray-600">Tutup</button>
            </div>
        </div>
    </div>



@endsection

@section('script')
    <!-- <script src="https://www.google.com/recaptcha/api.js" async defer></script> -->
    <!-- <script src="https://www.google.com/recaptcha/enterprise.js" async defer></script> -->
    <!-- <script src="{{ asset('assets/js/jquery.min.js') }}"></script> -->
    <!-- <script src="{{ asset('assets/js/toastr.min.js') }}"></script> -->
    <script>
        //set default checkbox to checked
        // document.addEventListener("DOMContentLoaded", function() {
        // const cb = document.getElementById("cb-tc");
        //if (cb) {
        //    cb.checked = false;
        //}
        //});
        //$(document).ready(function() {

        //    document.addEventListener("DOMContentLoaded", function() {
        //        const checkbox = document.getElementById("cb-tc");
        //        const agreed = localStorage.getItem("agreedToTerms");

        //       if (agreed === "true") {
        //           checkbox.checked = true;
        //          checkbox.required = false; // Remove required if already agreed
        //       }

        //       checkbox.addEventListener("change", function() {
        //           if (checkbox.checked) {
        //               localStorage.setItem("agreedToTerms", "true");
        //               checkbox.required = false;
        //           } else {
        //               localStorage.removeItem("agreedToTerms");
        //               checkbox.required = true;
        //           }
        //       });
        //   });

        // document.addEventListener("DOMContentLoaded", function () {
        //         var loginForm = document.getElementById("login-form");
        //         var tcCheckbox = document.getElementById("cb-tc");
        //         var errorMessage = document.getElementById("error-tc");
        //         var txtEmail = document.getElementById("input-email");
        //         var txtPassword = document.getElementById("input-password");
        //         var btnLogin = document.getElementById("btn-login");

        //         // Click event for the login button
        //         // btnLogin.addEventListener("click", function () {
        //         //     // Remove previous error styles
        //         //     $('#login-form').find('.input').removeClass('border-theme-6');
        //         //     $('#login-form').find('.input__error').html('');

        //         //     // Show loading animation inside button
        //         //     $('#btn-login').html('<i data-loading-icon="oval" data-color="white" class="w-5 h-5 mx-auto"></i>').svgLoader();
        //         // });

        //         // Submit event for the form
        //         loginForm.addEventListener("submit", function (event) {
        //             // Prevent form submission if email or password is empty
        //             if (txtEmail.value.trim() === "" || txtPassword.value.trim() === "") {
        //                 event.preventDefault(); // Stop form submission

        //                 if (txtEmail.value.trim() === "") {
        //                     txtEmail.classList.add("border-theme-6"); // Add error styling
        //                     txtEmail.nextElementSibling.innerHTML = "Email is required.";
        //                 }

        //                 if (txtPassword.value.trim() === "") {
        //                     txtPassword.classList.add("border-theme-6"); // Add error styling
        //                     txtPassword.nextElementSibling.innerHTML = "Password is required.";
        //                 }
        //             }

        //             // Prevent form submission if the checkbox is not checked
        //             if (!tcCheckbox.checked) {
        //                 event.preventDefault(); // Stop form submission
        //                 errorMessage.classList.remove("hidden"); // Show error message
        //                 errorMessage.innerHTML = "You must agree to the terms and conditions.";
        //             } else {
        //                 errorMessage.classList.add("hidden"); // Hide error message
        //             }
        //         });
        // });

        // document.getElementById("login-form").addEventListener("submit", function(event) {
        //     var tcCheckbox = document.getElementById("cb-tc");
        //     var errorMessage = document.getElementById("error-tc");
        //     var txtEmail = document.getElementById("input-email");
        //     var txtPassword = document.getElementById("input-password");

        //     $('#btn-login').on('click', function() {
        //         $('#login-form').find('.input').removeClass('border-theme-6')
        //         $('#login-form').find('.input__error').html('')
        //         $('#btn-login').html('<i data-loading-icon="oval" data-color="white" class="w-5 h-5 mx-auto"></i>').svgLoader()
        //     })
        // });

        // async function login() {
        //     // Reset state
        //     $('#login-form').find('.input').removeClass('border-theme-6')
        //     $('#login-form').find('.input__error').html('')

        //     // Post form
        //     let email = $('#input-email').val()
        //     let password = $('#input-password').val()
        //     // let rememberMe = $('#input-remember-me').val()

        //     // Loading state
        //     $('#btn-login').html('<i data-loading-icon="oval" data-color="white" class="w-5 h-5 mx-auto"></i>').svgLoader()
        //     // await helper.delay(1500)

        //     axios.post(`/auth`, {
        //         email: email,
        //         password: password
        //     }).then(res => {
        //         console.log(res);
        //         location.reload()
        //         // location.href = '/dashboard'
        //         // console.log(res['info']);
        //     }).catch(err => {
        //         $('#btn-login').html('Login')
        //         // for (const [key, val] of Object.entries(err.response.data.errors)) {
        //         //     $(`#input-${key}`).addClass('border-theme-6')
        //         //     $(`#error-${key}`).html(val)
        //         // }
        //     })

        // }

        //})

        function showPDFModal() {
            document.getElementById('pdfModal').classList.remove('hidden');
        }

        function closePDFModal() {
            document.getElementById('pdfModal').classList.add('hidden');
        }

        function openModal() {
            document.getElementById('tc-modal').classList.remove('hidden');
        }

        function closeModal() {
            document.getElementById('tc-modal').classList.add('hidden');
        }

        function centang() {
            if (document.getElementById('show-password').checked === true) {
                document.getElementById('input-password').type = 'text'
            } else {
                document.getElementById('input-password').type = 'password'
            }
        }

        function closeAlert() {
            document.getElementById('alert-tc').classList.add('hidden');
        }

        // Validasi checkbox sebelum submit form
        document.addEventListener("DOMContentLoaded", function() {
            const loginForm = document.getElementById("login-form");
            const tcCheckbox = document.getElementById("cb-tc");
            const alertTC = document.getElementById("alert-tc");

            // Check if user has logged in before (bypass validation)
            const hasLoggedIn = {{ isset($hasLoggedIn) && $hasLoggedIn ? 'true' : 'false' }};

            // loginForm.addEventListener("submit", function(event) {
            //     // Bypass validation if user has logged in before
            //     if (hasLoggedIn) {
            //         alertTC.classList.add('hidden');
            //         return; // Allow form submission
            //     }

            //     // Normal validation for first-time users
            //     if (!tcCheckbox.checked) {
            //         event.preventDefault();
            //         alertTC.classList.remove('hidden');
            //         // Scroll ke alert
            //         alertTC.scrollIntoView({
            //             behavior: 'smooth',
            //             block: 'center'
            //         });
            //     } else {
            //         alertTC.classList.add('hidden');
            //     }
            // });

            // Hide alert saat checkbox dicentang
            tcCheckbox.addEventListener("change", function() {
                if (tcCheckbox.checked) {
                    alertTC.classList.add('hidden');
                }
            });
        });
    </script>
@endsection