@extends('layouts.pelanggan')

@section('title', 'Daftar Akun')

@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">
                Buat akun untuk mulai memesan tiket
            </p>

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

                @csrf

                {{-- Nama Lengkap --}}
                <div class="mb-5">

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

                    <div class="relative">

                        <input
                            type="text"
                            name="nama_lengkap"
                            value="{{ old('nama_lengkap') }}"
                            placeholder="Masukkan nama lengkap"
                            required
                            autofocus
                            class="w-full pl-4 pr-4 py-3 rounded-xl border border-slate-300 focus:outline-none focus:ring-4 focus:ring-blue-100 focus:border-blue-500 transition @error('nama_lengkap') border-red-400 @enderror">

                    </div>

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

                </div>

                {{-- Nomor Telepon --}}
                <div class="mb-5">

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

                    <div class="relative">

                        <input
                            type="tel"
                            name="no_telepon"
                            value="{{ old('no_telepon') }}"
                            placeholder="08xxxxxxxxxx"
                            required
                            class="w-full pl-4 pr-4 py-3 rounded-xl border border-slate-300 focus:outline-none focus:ring-4 focus:ring-blue-100 focus:border-blue-500 transition @error('no_telepon') border-red-400 @enderror">

                    </div>

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

                </div>

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

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

                    <div class="relative">

                        <input
                            type="email"
                            name="email"
                            value="{{ old('email') }}"
                            placeholder="Masukkan email"
                            required
                            class="w-full pl-4 pr-4 py-3 rounded-xl border border-slate-300 focus:outline-none focus:ring-4 focus:ring-blue-100 focus:border-blue-500 transition @error('email') border-red-400 @enderror">

                    </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">

                        <input
                            id="password"
                            type="password"
                            name="password"
                            placeholder="Masukkan kata sandi"
                            required
                            minlength="8"
                            class="w-full pl-4 pr-12 py-3 rounded-xl border border-slate-300 focus:outline-none focus:ring-4 focus:ring-blue-100 focus:border-blue-500 transition @error('password') border-red-400 @enderror">

                        <button
                            type="button"
                            onclick="togglePassword('password', 'iconPassword')"
                            class="absolute right-4 top-1/2 -translate-y-1/2 text-gray-500 hover:text-blue-600 transition">
                            <svg id="iconPassword" class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"/>
                                <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                            </svg>
                        </button>

                    </div>

                    <p class="text-gray-400 text-xs mt-2">Minimal 8 karakter</p>

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

                </div>

                {{-- Konfirmasi Password --}}
                <div class="mb-6">

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

                    <div class="relative">

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

                        <button
                            type="button"
                            onclick="togglePassword('password_confirmation', 'iconPasswordConfirm')"
                            class="absolute right-4 top-1/2 -translate-y-1/2 text-gray-500 hover:text-blue-600 transition">
                            <svg id="iconPasswordConfirm" class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"/>
                                <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                            </svg>
                        </button>

                    </div>

                </div>

                {{-- Daftar --}}
                <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">

                    Buat Akun

                </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>

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

                Sudah punya akun?

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

                    Masuk sekarang

                </a>

            </p>

        </div>

    </div>

</div>

<script>

function togglePassword(inputId, iconId){

    const input = document.getElementById(inputId);
    const icon = document.getElementById(iconId);

    if(input.type === 'password'){
        input.type = 'text';
        icon.innerHTML = `<path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 001.934 12c1.292 4.338 5.31 7.5 10.066 7.5.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88" />`;
    }else{
        input.type = 'password';
        icon.innerHTML = `<path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>`;
    }

}

</script>

@endsection