@extends('layouts.public')

@section('title', 'Login | KunciLink | Social Unlock & Link in Bio Indonesia')

@section('meta_description')
Masuk ke akun KunciLink - platform social unlock terpercaya di Indonesia. Akses dashboard, kelola shortlink, dan tingkatkan engagement media sosial Anda dengan mudah.
@endsection

@section('content')
<div class="max-w-md mx-auto px-4 py-12">
    <div class="text-center mb-8">
        <a href="/" class="flex items-center justify-center mb-6 text-2xl font-semibold text-gray-900">
            <img class="w-8 h-8 mr-2" src="{{ asset('favicon.ico?v=2') }}" alt="logo">
            KunciLink
        </a>
        <h1 class="text-2xl font-bold text-gray-900 mb-2">Masuk ke Akun Anda</h1>
        <p class="text-gray-600">Akses dashboard dan kelola link Anda</p>
    </div>

    <!-- QRIS Payment Notice -->
    @if(session('redirect_after_login') && strpos(session('redirect_after_login'), '/payment/qris/') !== false)
    <div class="mb-6 p-4 bg-blue-50 border border-blue-200 rounded-lg">
        <div class="flex">
            <div class="flex-shrink-0">
                <svg class="h-5 w-5 text-blue-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                    <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" />
                </svg>
            </div>
            <div class="ml-3">
                <h3 class="text-sm font-medium text-blue-800">Pembayaran QRIS</h3>
                <div class="mt-2 text-sm text-blue-700">
                    <p>Anda perlu masuk ke akun KunciLink untuk menyelesaikan pembayaran QRIS Anda. Setelah login, Anda akan secara otomatis dialihkan ke halaman pembayaran.</p>
                </div>
            </div>
        </div>
    </div>
    @endif
    <!-- End QRIS Payment Notice -->

    <div class="bg-white rounded-lg shadow-sm border p-8">
        {{-- Tampilkan error validasi --}}
        @if ($errors->any())
            <div class="mb-4 p-4 bg-red-50 border border-red-200 rounded-lg">
                <div class="text-sm text-red-600">
                    {{ $errors->first() }}
                </div>
            </div>
        @endif

        {{-- FORM LOGIN --}}
        <form class="space-y-6" action="{{ route('login') }}" method="POST">
            @csrf

            <div>
                <label for="email" class="block mb-2 text-sm font-medium text-gray-700">
                    Email atau Username
                </label>
                <input type="text" name="email" id="email"
                    class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5"
                    value="{{ old('email') }}" required autofocus>
            </div>

            <div>
                <label for="password" class="block mb-2 text-sm font-medium text-gray-700">
                    Password
                </label>
                <input type="password" name="password" id="password"
                    class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5"
                    required>
            </div>

            <div class="flex items-center justify-between">
                <div class="flex items-center h-5">
                    <input id="remember" name="remember" type="checkbox"
                        class="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-primary-300">
                    <label for="remember" class="ml-2 text-sm text-gray-500">Ingatkan saya</label>
                </div>
                @if (Route::has('password.request'))
                    <a href="{{ route('password.request') }}" class="text-sm text-primary-600 hover:underline">
                        Lupa password?
                    </a>
                @endif
            </div>

            <button type="submit"
                class="w-full text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center">
                Masuk
            </button>
        </form>

        {{-- Pemisah --}}
        <div class="flex items-center gap-2 mt-6 opacity-60">
            <hr class="flex-1 opacity-40">
            <span class="text-sm text-gray-500">atau</span>
            <hr class="flex-1 opacity-40">
        </div>

        {{-- Tombol Login Google --}}
        <a href="{{ route('google.login') }}@if(request('redirect'))?redirect={{ request('redirect') }}@endif" id="gSignInWrapper" style="cursor: pointer;">
            <div id="customBtn1" class="flex items-center justify-center gap-4 py-3 rounded-lg bg-blue-500 hover:bg-blue-600 mt-4 transition-colors">
                <img width="20" src="{{ asset('img/google.svg') }}" alt="Google Icon">
                <span class="font-medium text-white">Continue with Google</span>
            </div>
        </a>

        {{-- Link ke Register --}}
        <div class="text-center mt-6">
            <p class="text-sm text-gray-500">
                Belum punya akun? 
                <a href="{{ route('register') }}" class="text-primary-600 hover:underline font-medium">Daftar</a>
            </p>
        </div>
    </div>
    
    {{-- Social Sharing Section --}}
    <div class="mt-8">
        @include('components.social-sharing-buttons', [
            'showTitle' => true,
            'shareTitle' => 'Bagikan KunciLink.id',
            'class' => 'my-4',
            'title' => 'Login KunciLink.id - Social Unlock Platform',
            'description' => 'Bergabung dengan KunciLink.id - Platform social unlock terbaik Indonesia untuk YouTuber, influencer & content creator.'
        ])
    </div>
</div>
@endsection