@extends('layouts.pelanggan')

@section('title', 'Masuk')

@section('content')

<div class="min-h-screen bg-gradient-to-br from-slate-100 via-blue-50 to-white flex items-center justify-center px-4 py-8">

    <div class="w-full max-w-md">

        <div class="bg-white rounded-3xl shadow-xl border border-slate-200 p-8">

            {{-- Logo --}}
            <div class="flex justify-center mb-4">

                <img
                    src="{{ asset('icons/logo.png') }}"
                    alt="Logo PT Bilah Pane Putra"
                    class="w-40 h-40 object-contain">

            </div>

            {{-- Judul --}}
            <h4 class="text-2xl font-bold text-center text-blue-900">
    PT. Bilah Pane Putra
</h4>

<p class="text-center text-gray-700 mt-2 mb-8">
    Login untuk melanjutkan perjalananmu
</p>

            <form method="POST" action="{{ route('pelanggan.login.post') }}">

                @csrf

                {{-- Email --}}
<div class="mb-5">

    <label class="block mb-2 text-sm font-semibold text-slate-700">
        Email / Nomor Telepon
    </label>

    <div class="relative">

    <i class="fa-solid fa-envelope absolute left-4 top-1/2 -translate-y-1/2 text-xl"></i>

    <input
        type="email"
        name="email"
        value="{{ old('email') }}"
        placeholder="Masukkan email"
        required
        autofocus
        class="w-full h-14 pl-14 pr-4 rounded-2xl border border-slate-300 focus:outline-none focus:ring-4 focus:ring-blue-100 focus:border-gray-500 transition">

</div>

    @error('email')
        <p class="text-red-500 text-sm mt-2">
            {{ $message }}
        </p>
    @enderror

</div>

                {{-- Password --}}
<div class="mb-5">

    <label class="block mb-2 text-sm font-semibold text-slate-700">
        Kata Sandi
    </label>

    <div class="relative">

        <!-- Icon Password -->
        <i class="fa-solid fa-lock absolute left-5 top-1/2 -translate-y-1/2 text-gray-400"></i>

        <input
            id="password"
            type="password"
            name="password"
            placeholder="Masukkan kata sandi"
            required
            class="w-full pl-14 pr-14 py-3 rounded-xl border border-slate-300 focus:outline-none focus:ring-4 focus:ring-blue-100 focus:border-blue-500 transition">

        <!-- Tombol Lihat Password -->
        
    </div>

</div>
                {{-- Login --}}
                <button
type="submit"
class="w-full h-14 rounded-xl bg-blue-600 text-white font-semibold text-lg shadow-lg hover:bg-blue-700 transition">

    Login

</button>

            </form>

            {{-- Divider --}}
            <div class="flex items-center my-6">

                <div class="flex-1 border-t border-gray-300"></div>

                <span class="mx-4 text-gray-500 text-sm">

                    atau

                </span>

                <div class="flex-1 border-t border-gray-300"></div>

            </div>

            {{-- Register --}}
            <p class="text-center text-gray-600 text-sm">

                Belum punya akun?

                <a href="{{ route('pelanggan.daftar') }}"
                   class="text-blue-700 font-semibold hover:underline">

                    Daftar sekarang

                </a>

            </p>

        </div>

    </div>

</div>

<script>

function togglePassword(){

    const password = document.getElementById('password');
    const eyeIcon = document.getElementById('eyeIcon');

    if(password.type === 'password'){
        password.type = 'text';
        eyeIcon.classList.remove('fa-eye');
        eyeIcon.classList.add('fa-eye-slash');
    }else{
        password.type = 'password';
        eyeIcon.classList.remove('fa-eye-slash');
        eyeIcon.classList.add('fa-eye');
    }

}

</script>

@endsection