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

@section("body")
@php
    $userterm = App\TermsSettings::firstWhere('key', 'user-register-term');
@endphp

<div class="max-w-[760px] 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">{{ __('Guest Checkout') }}</span>
    </nav>
    <h1 class="font-display font-extrabold text-3xl mt-4 mb-2">{{ __('Checkout as Guest') }}</h1>
    <p class="text-slate-500 text-[14px] mb-6">{{ __('Continue with just your name and email — no account needed.') }}</p>
</div>

<section class="max-w-[760px] mx-auto px-4 lg:px-6 pb-12">
    <div class="bg-white rounded-2xl shadow-card p-6 lg:p-8">
        <form method="POST" action="{{ route('ref.guest.register') }}" class="space-y-4" id="guestForm">
            @csrf
            <div>
                <label class="block text-[13px] font-semibold mb-1">{{ __('staticwords.Name') }} <span class="text-rose-500">*</span></label>
                <input required type="text" name="name" value="{{ old('name') }}" class="w-full h-11 px-3 rounded-lg border-2 {{ $errors->has('name') ? 'border-rose-300' : 'border-slate-200' }} focus:border-brand-500 outline-none">
                @error('name')<p class="text-rose-500 text-[12px] mt-1">{{ $message }}</p>@enderror
            </div>

            <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') }}" autofocus 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
                <p class="text-[12px] text-slate-500 mt-1">{{ __('Order updates will be sent to this email.') }}</p>
            </div>

            <label class="flex items-start gap-2 text-[13px] text-slate-700 select-none">
                <input required type="checkbox" name="eula" id="eula" class="mt-0.5 w-4 h-4 rounded border-2 border-slate-300 text-brand-500 focus:ring-brand-500">
                <span>
                    {{ __('I agree to the') }}
                    <button type="button" data-sh-modal-open="termsModal" class="text-brand-600 hover:underline font-semibold">{{ __('terms and conditions') }}</button>
                </span>
            </label>

            <button type="submit" class="register w-full bg-saffron hover:bg-yellow-400 text-deep font-bold py-3.5 rounded-full flex items-center justify-center gap-2 mt-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>

            <p class="text-center text-[13px] text-slate-500 pt-2">
                {{ __('Already have an account?') }}
                <a href="{{ url('login') }}" class="text-brand-600 hover:underline font-semibold">{{ __('Login') }}</a>
            </p>
        </form>
    </div>
</section>

{{-- Terms modal --}}
<div id="termsModal" class="sh-modal" role="dialog" aria-modal="true">
    <div class="sh-modal__backdrop" data-sh-close></div>
    <div class="sh-modal__panel max-w-2xl">
        <div class="flex items-center justify-between p-5 border-b border-slate-100">
            <span class="font-display font-extrabold text-lg">{{ $userterm['title'] ?? __('Terms and Conditions') }}</span>
            <button data-sh-close class="w-9 h-9 grid place-items-center rounded-full hover:bg-slate-100"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 6l12 12M18 6 6 18"/></svg></button>
        </div>
        <div class="p-5 max-h-[500px] overflow-y-auto text-[14px] text-slate-700 leading-relaxed">
            {!! $userterm['description'] ?? '' !!}
        </div>
    </div>
</div>
@endsection

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