@extends('landing page.main')
@section('content')

    <head>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

    </head>

    <!-- Page Title -->
    <div class="page-title-area">
        <div class="d-table">
            <div class="d-table-cell">
                <div class="container">
                    <div class="title-item">
                        <h2>Masuk</h2>
                        <ul>
                            <li>
                                <a href="/">Home</a>
                            </li>
                            <li>
                                <i class='bx bx-chevrons-right'></i>
                            </li>
                            <li>
                                <span>Masuk</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End Page Title -->

    <!-- User Form -->
    <div class="user-form-area ptb-100">
        <div class="container">
            <div class="user-item">
                <h2>Masuk</h2>

                <!-- Tampilkan pesan error jika ada -->
                @if (session('error'))
                    <div class="alert alert-danger">
                        {{ session('error') }}
                    </div>
                @endif

                <form method="POST" action="{{ route('login') }}">
                    @csrf
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="form-group">
                                <x-input-label for="email" :value="__('Email')" class="form-label" />
                                <x-text-input id="email" class="form-control" type="text" name="email"
                                    :value="old('email')" required autofocus />
                                <x-input-error :messages="$errors->get('email')" class="mt-2" />
                            </div>
                        </div>

                        <div class="col-lg-12">
                            <div class="form-group">
                                <x-input-label for="password" :value="__('Kata Sandi')" class="form-label" />
                                <x-text-input id="password" class="form-control" type="password" name="password" required
                                    autocomplete="current-password" />
                                <x-input-error :messages="$errors->get('password')" class="mt-2" />
                            </div>
                        </div>

                        <!-- Forgot Password Link -->
                        <div class="col-lg-12">
                            <div class="form-group">
                                @if (Route::has('password.request'))
                                <a class="underline text-sm text-gray-600 hover:text-gray-900 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" href="{{ route('password.request') }}">
                                    {{ __('Lupa kata sandi?') }}
                                </a>
                            @endif
                
                            </div>
                        </div>

                        <div class="col-lg-12">
                            <button type="submit" class="btn cmn-btn">Masuk</button>
                            <span>atau belum punya akun?</span>
                            @if (Route::has('register'))
                                <a href="{{ route('register') }}">Daftar</a> <span>dulu</span>
                            @endif
                        </div>



                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- End User Form -->

    <!-- DaisyUI Modal -->
    <dialog id="errorModal" class="modal">
        <div class="modal-box">
            <h3 class="text-lg font-bold">Login Error</h3>
            <p class="py-4">{{ session('error') }}</p>
            <div class="modal-action">
                <button class="btn" onclick="document.getElementById('errorModal').close()">Close</button>
            </div>
        </div>
    </dialog>

@section('scripts')
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // Tampilkan modal jika ada session error
        @if (session('error'))
            document.getElementById('errorModal').showModal();
        @endif
    </script>
@endsection
@endsection
