@extends('front.layout.master')
@section('title', __('staticwords.Checkout') . ' | ')

@section('body')
@php
    $allowGuest = isset($genrals_settings) ? ($genrals_settings->guest_login == 1) : (\App\Genral::first()->guest_login ?? 0) == 1;
@endphp

<div class="max-w-[1100px] mx-auto px-4 lg:px-6 pt-5">
    <nav class="breadcrumb-row text-[12px] text-slate-500 flex items-center gap-1.5 leading-none">
        <a href="{{ url('/') }}" class="hover:text-brand-600">{{ __('Home') }}</a>
        <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" class="text-slate-300 shrink-0"><path d="m9 6 6 6-6 6"/></svg>
        <a href="{{ url('cart') }}" class="hover:text-brand-600">{{ __('Cart') }}</a>
        <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" class="text-slate-300 shrink-0"><path d="m9 6 6 6-6 6"/></svg>
        <span class="text-deep font-medium">{{ __('staticwords.CheckoutMethod') }}</span>
    </nav>
    <h1 class="font-display font-extrabold text-3xl mt-4 mb-6">{{ __('staticwords.CheckoutMethod') }}</h1>
</div>

<section class="max-w-[1100px] mx-auto px-4 lg:px-6 grid lg:grid-cols-2 gap-5 pb-12">

    {{-- LEFT: Guest / Register --}}
    <div class="bg-white rounded-2xl shadow-card p-6 lg:p-7">
        <div class="flex items-center gap-3 mb-1">
            <span class="w-9 h-9 grid place-items-center bg-brand-100 text-brand-600 rounded-full font-bold">1</span>
            <h2 class="font-display font-extrabold text-xl">{{ __('staticwords.GuestorRegisterLogin') }}</h2>
        </div>
        <p class="text-slate-500 text-[14px] mt-1 ml-12">{{ __('staticwords.registerwithus') }}:</p>

        <form method="post" action="{{ url('user/process_to_guest') }}" class="mt-5 space-y-3">
            @csrf
            @if($allowGuest)
                <label class="block cursor-pointer">
                    <input type="radio" name="checkValue" value="guest" checked class="peer sr-only">
                    <div class="border-2 border-slate-200 peer-checked:border-brand-500 peer-checked:bg-brand-50/30 rounded-xl p-4 hover:border-brand-300 transition-colors flex items-start gap-3">
                        <div class="w-10 h-10 bg-emerald-100 rounded-lg grid place-items-center text-emerald-600 shrink-0">
                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><circle cx="12" cy="8" r="4"/><path d="M4 22a8 8 0 1 1 16 0"/></svg>
                        </div>
                        <div class="flex-1">
                            <div class="font-semibold text-[15px]">{{ __('staticwords.CheckoutasGuest') }}</div>
                            <div class="text-[12px] text-slate-500 mt-0.5">{{ __('Quick checkout without creating an account') }}</div>
                        </div>
                    </div>
                </label>
            @endif
            <label class="block cursor-pointer">
                <input id="register" type="radio" name="checkValue" value="register" {{ $allowGuest ? '' : 'checked' }} class="peer sr-only">
                <div class="border-2 border-slate-200 peer-checked:border-brand-500 peer-checked:bg-brand-50/30 rounded-xl p-4 hover:border-brand-300 transition-colors flex items-start gap-3">
                    <div class="w-10 h-10 bg-brand-100 rounded-lg grid place-items-center text-brand-600 shrink-0">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M19 8v6M22 11h-6"/></svg>
                    </div>
                    <div class="flex-1">
                        <div class="font-semibold text-[15px]">{{ __('staticwords.Register') }}</div>
                        <div class="text-[12px] text-slate-500 mt-0.5">{{ __('staticwords.Registerandsavetime') }}</div>
                    </div>
                </div>
            </label>

            <ul class="text-[12px] text-slate-500 space-y-1 mt-2 ml-1">
                <li class="flex items-center gap-2"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" class="text-emerald-500"><path d="M5 13l4 4L19 7"/></svg>{{ __('staticwords.Fastandeasycheckout') }}</li>
                <li class="flex items-center gap-2"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" class="text-emerald-500"><path d="M5 13l4 4L19 7"/></svg>{{ __('staticwords.Easyaccesstoyourorderhistoryandstatus') }}</li>
            </ul>

            <button type="submit" class="checkout-continue mt-4 w-full bg-saffron hover:bg-yellow-400 text-deep font-bold py-3 rounded-full flex items-center justify-center gap-2">
                {{ __('staticwords.Continue') }}
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
            </button>
        </form>
    </div>

    {{-- RIGHT: Already registered --}}
    <div class="bg-white rounded-2xl shadow-card p-6 lg:p-7">
        <div class="flex items-center gap-3 mb-1">
            <span class="w-9 h-9 grid place-items-center bg-emerald-100 text-emerald-600 rounded-full font-bold">2</span>
            <h2 class="font-display font-extrabold text-xl">{{ __('staticwords.Alreadyregistered') }}</h2>
        </div>
        <p class="text-slate-500 text-[14px] mt-1 ml-12">{{ __('staticwords.Pleaseloginbelow') }}:</p>

        <form method="POST" action="{{ route('ref.cart.login') }}" class="mt-5 space-y-3">
            @csrf
            <div>
                <label class="block text-[13px] font-semibold mb-1">{{ __('staticwords.eaddress') }} <span class="text-rose-500">*</span></label>
                <input required type="email" name="email" value="{{ old('email') }}" placeholder="{{ __('staticwords.Enteryouremailaddress') }}" class="w-full h-11 px-3 rounded-lg border-2 {{ $errors->has('email') ? 'border-rose-300' : 'border-slate-200' }} focus:border-brand-500 outline-none">
                @error('email')<p class="text-rose-500 text-[12px] mt-1">{{ $message }}</p>@enderror
            </div>
            <div>
                <label class="block text-[13px] font-semibold mb-1">{{ __('staticwords.Password') }} <span class="text-rose-500">*</span></label>
                <input required type="password" name="password" placeholder="••••••••" class="w-full h-11 px-3 rounded-lg border-2 {{ $errors->has('password') ? 'border-rose-300' : 'border-slate-200' }} focus:border-brand-500 outline-none">
                @error('password')<p class="text-rose-500 text-[12px] mt-1">{{ $message }}</p>@enderror
                <a href="{{ route('password.request') }}" class="text-[12px] text-brand-600 hover:underline mt-1 inline-block">{{ __('staticwords.ForgotYourPassword') }}</a>
            </div>
            <button type="submit" class="signin w-full bg-brand-500 hover:bg-brand-600 text-white font-bold py-3 rounded-full flex items-center justify-center gap-2">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4M10 17l5-5-5-5M15 12H3"/></svg>
                {{ __('Login') }}
            </button>
        </form>
    </div>
</section>
@endsection

@section('script')
<script>
$(function(){
    $('form').on('submit', function(){
        var $btn = $(this).find('button[type=submit]');
        if ($btn.length) {
            $btn.prop('disabled', true).html('<i class="fa fa-circle-o-notch fa-spin"></i> ' + ($btn.hasClass('signin') ? '{{ __('staticwords.Login') }}' : '{{ __('staticwords.Continue') }}'));
        }
    });
});
</script>
@endsection