@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>
    <main class="main-content  mt-0">
        <section>
            <div class="page-header min-vh-100" id="main-container">
                <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 form-container-col">
                            <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" id="form-title">Selamat Datang</h4>
                                    <p class="mb-0" id="form-subtitle">Masukkan Username Dan Password</p>
                                </div>
                                <div class="card-body">
                                    {{-- LOGIN FORM --}}
                                    <form role="form" method="POST" action="{{ route('login.perform') }}" id="login-form">
                                        @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
                                        <div class="text-center">
                                            <button type="submit"
                                                class="btn btn-lg btn-primary btn-lg w-100 mt-4 mb-0">Masuk</button>
                                        </div>
                                    </form>

                                    {{-- REGISTER FORM (Hidden by default) --}}
                                    <form role="form" method="POST" action="{{ route('register.perform') }}" id="register-form" class="d-none">
                                        @csrf
                                        <div class="flex flex-col mb-2 input-group">
                                            <input type="text" name="name" class="form-control form-control-lg" placeholder="Nama Lengkap" aria-label="Name">
                                            <span class="input-group-text"><i class="fas fa-id-card"></i></span>
                                        </div>
                                        <div class="flex flex-col mb-2 input-group">
                                            <input type="email" name="email" class="form-control form-control-lg" placeholder="Email" aria-label="Email">
                                            <span class="input-group-text"><i class="fas fa-envelope"></i></span>
                                        </div>
                                        <div class="flex flex-col mb-2 input-group">
                                            <input type="text" name="username" class="form-control form-control-lg lower notspace" placeholder="Username" aria-label="Username">
                                            <span class="input-group-text"><i class="fas fa-user"></i></span>
                                        </div>
                                        <div class="flex flex-col mb-2 input-group">
                                            <input type="password" name="password" id="register_password" class="form-control form-control-lg" placeholder="Password" aria-label="Password">
                                            <span class="input-group-text"><i class="fas fa-lock"></i></span>
                                        </div>
                                        <div class="flex flex-col mb-2 input-group">
                                            <input type="password" name="password_confirmation" id="register_password_confirmation" class="form-control form-control-lg" placeholder="Konfirmasi Password" aria-label="Confirm Password">
                                            <span class="input-group-text"><i class="fas fa-lock"></i></span>
                                        </div>
                                        <div class="form-check form-switch mb-3">
                                            <input class="form-check-input" type="checkbox" id="showPasswordCheck">
                                            <label class="form-check-label" for="showPasswordCheck">Lihat Password</label>
                                        </div>
                                        <div class="text-center">
                                            <button type="submit" class="btn btn-lg btn-primary btn-lg w-100 mt-4 mb-0">Daftar</button>
                                        </div>
                                    </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 img-container-col">
                            <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 opacity-6"></span>
                                
                                <div id="img-content-login">
                                    <h4 class="mt-5 text-white font-weight-bolder position-relative">"{{ @$setup_app->company }}"</h4>
                                    <div class="list-group-item border-0 p-2 mb-2 bg-gray-100 border-radius-lg">
                                        <h6 class="mb-1 text-sm">{{ @$setup_app->address }}</h6>
                                        <h6 class="mb-1 text-sm">{{ @$setup_app->city . ' - ' . @$setup_app->province }}</h6>
                                    </div>
                                    <h6 class="mb-3 text-sm text-white position-relative">{{ @$setup_app->description }}</h6>
                                    <p class="text-white position-relative">Belum punya akun?</p>
                                    <button class="btn bg-white mt-2 position-relative" id="btn-to-register" style="color: teal; font-weight: bold;">Daftar</button>
                                </div>
                                <div id="img-content-register" class="d-none">
                                    <h4 class="mt-5 text-white font-weight-bolder position-relative">"{{ @$setup_app->company }}"</h4>
                                    <div class="list-group-item border-0 p-2 mb-2 bg-gray-100 border-radius-lg">
                                        <h6 class="mb-1 text-sm">{{ @$setup_app->address }}</h6>
                                        <h6 class="mb-1 text-sm">{{ @$setup_app->city . ' - ' . @$setup_app->province }}</h6>
                                    </div>
                                    <h6 class="mb-3 text-sm text-white position-relative">{{ @$setup_app->description }}</h6>
                                    <p class="text-white position-relative">Sudah punya akun?</p>
                                    <button class="btn bg-white mt-2 position-relative" id="btn-to-login" style="color: teal; font-weight: bold;">Masuk</button>
                                </div>

                                <div class="list-group-item border-0 p-2 mb-2 bg-gray-100 border-radius-lg d-none">
                                    <h6 class="mb-1 text-sm">{{ @$setup_app->address }}</h6>
                                    <h6 class="mb-1 text-sm">{{ @$setup_app->city . ' - ' . @$setup_app->province }}</h6>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <style>
        .form-container-col {
            transition: all 0.6s ease-in-out;
            z-index: 2;
        }
        .img-container-col {
            transition: all 0.6s ease-in-out;
            z-index: 10;
        }
        
        /* Register Mode State */
        .sign-up-mode .form-container-col {
            transform: translateX(200%); 
        }
        .sign-up-mode .img-container-col {
            transform: translateX(-100%);
        }
        
        /* Custom Teal Switch */
        /* Custom Teal Switch */
        .form-switch .form-check-input:checked {
            background-color: #008080 !important;
            border-color: #008080 !important;
        }

        /* Adjust for smaller screens where layout stacks */
        @media (max-width: 991px) {
            .sign-up-mode .form-container-col { transform: none; }
            .sign-up-mode .img-container-col { transform: none; }
            .img-container-col { display: none !important; }
        }
    </style>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const btnRegister = document.getElementById('btn-to-register');
            const btnLogin = document.getElementById('btn-to-login');
            const container = document.getElementById('main-container');
            const formContainer = document.querySelector('.form-container-col');
            const imgContainer = document.querySelector('.img-container-col');

            const loginForm = document.getElementById('login-form');
            const registerForm = document.getElementById('register-form');
            const title = document.getElementById('form-title');
            const subtitle = document.getElementById('form-subtitle');
            
            const imgLoginContent = document.getElementById('img-content-login');
            const imgRegisterContent = document.getElementById('img-content-register');

            // Timeout matches half of CSS transition (0.6s) -> 300ms
            // This ensures content swap happens behind the "curtain"
            const TRANSITION_DELAY = 300;

            if(btnRegister) {
                btnRegister.addEventListener('click', function(e) {
                    e.preventDefault();
                    container.classList.add('sign-up-mode');
                    
                    setTimeout(() => {
                        loginForm.classList.add('d-none');
                        registerForm.classList.remove('d-none');
                        title.innerText = "Buat Akun Baru";
                        subtitle.innerText = "Lengkapi data diri anda";
                        
                        imgLoginContent.classList.add('d-none');
                        imgRegisterContent.classList.remove('d-none');
                    }, TRANSITION_DELAY); 
                });
            }

            if(btnLogin) {
                btnLogin.addEventListener('click', function(e) {
                    e.preventDefault();
                    container.classList.remove('sign-up-mode');
                    
                    setTimeout(() => {
                        registerForm.classList.add('d-none');
                        loginForm.classList.remove('d-none');
                        title.innerText = "Selamat Datang";
                        subtitle.innerText = "Masukkan Username Dan Password";
                        
                        imgRegisterContent.classList.add('d-none');
                        imgLoginContent.classList.remove('d-none');
                    }, TRANSITION_DELAY);
                });
            }

            // Show/Hide Password Logic
            const showPasswordCheck = document.getElementById('showPasswordCheck');
            if(showPasswordCheck) {
                showPasswordCheck.addEventListener('change', function() {
                    const type = this.checked ? 'text' : 'password';
                    document.getElementById('register_password').type = type;
                    document.getElementById('register_password_confirmation').type = type;
                });
            }
        });

    </script>
    {{-- SweetAlert Logic --}}
    @if(session('status') == 'success')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            Swal.fire({
                title: 'Berhasil!',
                text: "{{ session('message') }}",
                icon: 'success',
                confirmButtonText: 'OK'
            });
        });
    </script>
    @endif
    @if($errors->any() && old('name'))
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // If register errors, switch to register view immediately
            const container = document.getElementById('main-container');
            const loginForm = document.getElementById('login-form');
            const registerForm = document.getElementById('register-form');
            const title = document.getElementById('form-title');
            const subtitle = document.getElementById('form-subtitle');
            const imgLoginContent = document.getElementById('img-content-login');
            const imgRegisterContent = document.getElementById('img-content-register');

            container.classList.add('sign-up-mode');
            loginForm.classList.add('d-none');
            registerForm.classList.remove('d-none');
            title.innerText = "Buat Akun Baru";
            subtitle.innerText = "Lengkapi data diri anda";
            imgLoginContent.classList.add('d-none');
            imgRegisterContent.classList.remove('d-none');
        });
    </script>
    @endif
@endsection