@extends('front.front_layouts')

@section('content')
    <!-- Breadcrumb Hero -->
    <section class="hero-section">
        <!-- Background Elements -->
        <div class="hero-bg-grid grid-background">
            <div class="hero-orb-primary"></div>
            <div class="hero-orb-secondary"></div>
        </div>

        @if (isset($frontSetting) && $frontSetting->register_background_url)
            <img class="absolute top-1/2 transform -translate-y-1/2 left-0 opacity-20"
                src="{{ $frontSetting->register_background_url }}" alt="">
        @endif

        <div class="hero-content">
            <h1 class="hero-heading animate-on-scroll">
                {{ $frontSetting->register_button_text ?? 'Register' }}
            </h1>

            <div class="hero-divider animate-on-scroll">
                <span class="hero-divider-thin"></span>
                <span class="hero-divider-thick"></span>
                <span class="hero-divider-thin"></span>
            </div>

            <nav class="breadcrumb-pill animate-on-scroll" aria-label="Breadcrumb">
                <svg class="w-4 h-4 text-muted-foreground" fill="none" viewBox="0 0 24 24" stroke="currentColor"
                    stroke-width="1.5">
                    <path stroke-linecap="round" stroke-linejoin="round"
                        d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
                </svg>
                <a href="{{ route('front.index') }}"
                    class="link-muted">{{ $frontSetting->home_text ?? 'Home' }}</a>
                <svg class="breadcrumb-separator" fill="none" viewBox="0 0 24 24" stroke="currentColor"
                    stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
                </svg>
                <span class="text-foreground font-semibold">{{ $frontSetting->register_button_text ?? 'Register' }}</span>
            </nav>
        </div>
    </section>

    <!-- Register Section -->
    <section class="content-section">
        <!-- Decorative background -->
        <div
            class="absolute top-0 right-0 w-[500px] h-[500px] bg-gradient-to-bl from-blue-500/5 via-purple-500/5 to-transparent rounded-full blur-3xl pointer-events-none">
        </div>
        <div
            class="absolute bottom-0 left-0 w-[400px] h-[400px] bg-gradient-to-tr from-purple-500/5 via-blue-500/3 to-transparent rounded-full blur-3xl pointer-events-none">
        </div>

        <!-- Floating decorative dots -->
        <div class="contact-float-dot absolute top-[15%] right-[8%] w-3 h-3 rounded-full bg-[hsl(var(--primary)/0.3)]">
        </div>
        <div class="contact-float-dot absolute bottom-[20%] left-[5%] w-4 h-4 rounded-full border-2 border-[hsl(var(--primary)/0.2)]"
            style="animation-delay: 1s;"></div>
        <div class="contact-float-dot absolute top-[40%] left-[3%] w-2 h-2 rounded-full bg-[hsl(var(--primary)/0.2)]"
            style="animation-delay: 2s;"></div>

        <div class="max-w-6xl mx-auto">
            <div class="register-wrapper animate-on-scroll">
                <div class="register-inner">
                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-0">
                        <!-- Left: Info & Features Side -->
                        <div
                            class="register-info-side relative overflow-hidden rounded-t-[calc(1.5rem-1px)] lg:rounded-l-[calc(1.5rem-1px)] lg:rounded-tr-none p-8 sm:p-10 lg:p-12">
                            <!-- Decorative grid pattern -->
                            <div class="absolute inset-0 opacity-[0.03]"
                                style="background-image: linear-gradient(hsl(var(--foreground)/0.1) 1px, transparent 1px), linear-gradient(90deg, hsl(var(--foreground)/0.1) 1px, transparent 1px); background-size: 40px 40px;">
                            </div>

                            <!-- Decorative glow -->
                            <div
                                class="absolute top-0 right-0 w-[300px] h-[300px] bg-gradient-to-bl from-blue-500/8 via-purple-500/5 to-transparent rounded-full blur-3xl pointer-events-none">
                            </div>

                            <div class="relative z-10">
                                <!-- Badge -->
                                <span
                                    class="inline-flex items-center gap-1.5 px-4 py-2 rounded-full bg-[hsl(var(--foreground)/0.05)] border border-[hsl(var(--border)/0.3)] text-[13px] font-semibold text-foreground mb-6">
                                    <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"
                                        stroke-width="2">
                                        <path stroke-linecap="round" stroke-linejoin="round"
                                            d="M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09Z" />
                                    </svg>
                                    {{ isset($frontSetting) ? $frontSetting->register_badge : __('front.freeForeverToStart') }}
                                </span>

                                <!-- Heading -->
                                <h2 class="section-title text-anime">
                                    {{ isset($frontSetting) ? $frontSetting->register_title : __('front.joinForFree') }}
                                </h2>
                                <p class="section-subtitle">
                                    {{ isset($frontSetting) ? $frontSetting->register_description : __('front.registerSubtitle') }}
                                </p>

                                <!-- Feature Items Grid: 2x4 -->
                                <div class="grid grid-cols-2 gap-x-5 gap-y-4">
                                    @if (isset($frontFeatures) && count($frontFeatures) > 0)
                                        @foreach ($frontFeatures->take(8) as $feature)
                                            <div class="register-feature-item">
                                                <div class="register-feature-icon">
                                                    @if ($feature->image)
                                                        <img src="{{ $feature->image_url }}" alt="{{ $feature->name }}"
                                                            class="w-full h-full object-cover">
                                                    @else
                                                        <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24"
                                                            stroke="currentColor" stroke-width="1.5">
                                                            <path stroke-linecap="round" stroke-linejoin="round"
                                                                d="M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09Z" />
                                                        </svg>
                                                    @endif
                                                </div>
                                                <div class="register-feature-content">
                                                    <span class="register-feature-title">{{ $feature->name }}</span>
                                                    <span
                                                        class="register-feature-subtitle">{{ Str::limit($feature->description, 30) }}</span>
                                                </div>
                                            </div>
                                        @endforeach
                                    @elseif(isset($headerFeatures) && count($headerFeatures) > 0)
                                        @foreach ($headerFeatures->take(8) as $feature)
                                            <div class="register-feature-item">
                                                <div class="register-feature-icon">
                                                    @if ($feature->image)
                                                        <img src="{{ $feature->image_url }}" alt="{{ $feature->name }}"
                                                            class="w-full h-full object-cover">
                                                    @else
                                                        <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24"
                                                            stroke="currentColor" stroke-width="1.5">
                                                            <path stroke-linecap="round" stroke-linejoin="round"
                                                                d="M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09Z" />
                                                        </svg>
                                                    @endif
                                                </div>
                                                <div class="register-feature-content">
                                                    <span class="register-feature-title">{{ $feature->name }}</span>
                                                    <span
                                                        class="register-feature-subtitle">{{ Str::limit($feature->description, 30) }}</span>
                                                </div>
                                            </div>
                                        @endforeach
                                    @endif
                                </div>

                                <!-- Hero Feature Highlights -->
                                @if (isset($frontSetting->header_features) &&
                                        is_array($frontSetting->header_features) &&
                                        count($frontSetting->header_features) > 0)
                                    <div class="mt-10 pt-8 border-t border-[hsl(var(--border)/0.3)]">
                                        <div class="flex items-center gap-5 flex-wrap">
                                            @foreach ($frontSetting->header_features as $featurePoint)
                                                <div class="flex items-center gap-2">
                                                    <svg class="w-4 h-4 text-emerald-400 flex-shrink-0" fill="none"
                                                        viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
                                                        <path stroke-linecap="round" stroke-linejoin="round"
                                                            d="M5 13l4 4L19 7" />
                                                    </svg>
                                                    <span
                                                        class="text-[14px] text-muted-foreground font-medium">{{ $featurePoint }}</span>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                @endif
                            </div>
                        </div>

                        <!-- Right: Register Form Side -->
                        <div class="p-8 sm:p-10 lg:p-12">
                            <div class="mb-8">
                                <h3 class="text-xl font-bold text-foreground mb-2">
                                    {{ isset($frontSetting) ? $frontSetting->register_form_title : __('front.createYourAccount') }}
                                </h3>
                                <p class="text-[14px] text-muted-foreground">
                                    {{ isset($frontSetting) ? $frontSetting->register_form_subtitle : __('front.fillDetailsBelow') }}
                                </p>
                            </div>

                            {{ html()->form('POST', '')->class(['ajax-form'])->id('ajax-register-form')->open() }}
                            <div id="alert"></div>
                            <div class="register-div space-y-5">
                                <!-- Company Name -->
                                <div class="form-group contact-field-group">
                                    <label for="company_name"
                                        class="form-label">
                                        {{ isset($frontSetting) ? $frontSetting->register_company_name_text : __('front.companyName') }}
                                        <span class="text-red-400">*</span>
                                    </label>
                                    <div class="relative">
                                        <span class="contact-input-icon">
                                            <svg class="w-[18px] h-[18px]" fill="none" viewBox="0 0 24 24"
                                                stroke="currentColor" stroke-width="1.5">
                                                <path stroke-linecap="round" stroke-linejoin="round"
                                                    d="M3.75 21h16.5M4.5 3h15M5.25 3v18m13.5-18v18M9 6.75h1.5m-1.5 3h1.5m-1.5 3h1.5m3-6H15m-1.5 3H15m-1.5 3H15M9 21v-3.375c0-.621.504-1.125 1.125-1.125h3.75c.621 0 1.125.504 1.125 1.125V21" />
                                            </svg>
                                        </span>
                                        <input type="text" id="company_name" name="company_name"
                                            placeholder="{{ isset($frontSetting) ? $frontSetting->register_company_name_text : __('front.yourCompanyName') }}"
                                            class="form-control contact-input contact-input--icon" />
                                    </div>
                                </div>

                                <!-- Email -->
                                <div class="form-group contact-field-group">
                                    <label for="company_email"
                                        class="form-label">
                                        {{ isset($frontSetting) ? $frontSetting->register_email_text : __('front.email') }}
                                        <span class="text-red-400">*</span>
                                    </label>
                                    <div class="relative">
                                        <span class="contact-input-icon">
                                            <svg class="w-[18px] h-[18px]" fill="none" viewBox="0 0 24 24"
                                                stroke="currentColor" stroke-width="1.5">
                                                <path stroke-linecap="round" stroke-linejoin="round"
                                                    d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75" />
                                            </svg>
                                        </span>
                                        <input type="email" id="company_email" name="company_email"
                                            value="{{ $actionEmail ?? '' }}"
                                            placeholder="{{ isset($frontSetting) ? $frontSetting->register_email_text : __('front.yourEmailAddress') }}"
                                            class="form-control contact-input contact-input--icon" />
                                    </div>
                                </div>

                                <!-- Password -->
                                <div class="form-group contact-field-group">
                                    <label for="password"
                                        class="form-label">
                                        {{ isset($frontSetting) ? $frontSetting->register_password_text : __('front.password') }}
                                        <span class="text-red-400">*</span>
                                    </label>
                                    <div class="relative">
                                        <span class="contact-input-icon">
                                            <svg class="w-[18px] h-[18px]" fill="none" viewBox="0 0 24 24"
                                                stroke="currentColor" stroke-width="1.5">
                                                <path stroke-linecap="round" stroke-linejoin="round"
                                                    d="M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z" />
                                            </svg>
                                        </span>
                                        <input type="password" id="password" name="password"
                                            placeholder="{{ isset($frontSetting) ? $frontSetting->register_password_text : __('front.createPassword') }}"
                                            class="form-control contact-input contact-input--icon" />
                                    </div>
                                </div>

                                <!-- Confirm Password -->
                                <div class="form-group contact-field-group">
                                    <label for="confirm_password"
                                        class="form-label">
                                        {{ isset($frontSetting) ? $frontSetting->register_confirm_password_text : __('front.confirmPassword') }}
                                        <span class="text-red-400">*</span>
                                    </label>
                                    <div class="relative">
                                        <span class="contact-input-icon">
                                            <svg class="w-[18px] h-[18px]" fill="none" viewBox="0 0 24 24"
                                                stroke="currentColor" stroke-width="1.5">
                                                <path stroke-linecap="round" stroke-linejoin="round"
                                                    d="M4.5 12.75l6 6 9-13.5" />
                                            </svg>
                                        </span>
                                        <input type="password" id="confirm_password" name="confirm_password"
                                            placeholder="{{ isset($frontSetting) ? $frontSetting->register_confirm_password_text : __('front.confirmYourPassword') }}"
                                            class="form-control contact-input contact-input--icon" />
                                    </div>
                                </div>

                                <!-- Agree Checkbox -->
                                <div class="form-group flex items-start gap-3">
                                    <input type="checkbox" id="condition" name="condition"
                                        class="form-control register-checkbox" />
                                    <label for="condition"
                                        class="text-[14px] text-muted-foreground leading-relaxed cursor-pointer">
                                        @if (isset($frontSetting) && $frontSetting->register_agree_url)
                                            <a href="{{ $frontSetting->register_agree_url }}" target="_blank"
                                                class="text-foreground hover:underline font-medium">
                                                {{ $frontSetting->register_agree_text ?? __('front.agreeToTerms') }}
                                            </a>
                                        @else
                                            {{ __('front.iAgreeTo') }} <a
                                                href="{{ route('front.page', 'terms-and-conditions') }}"
                                                class="text-foreground hover:underline font-medium">{{ __('front.termsOfService') }}</a>
                                            {{ __('front.and') }} <a href="{{ route('front.page', 'privacy-policy') }}"
                                                class="text-foreground hover:underline font-medium">{{ __('front.privacyPolicy') }}</a>
                                        @endif
                                    </label>
                                </div>

                                <!-- Submit -->
                                <button type="submit" onclick="register();return false"
                                    class="contact-submit-btn btn-primary w-full inline-flex items-center justify-center gap-2.5 px-8 py-3.5 text-[15px] font-semibold rounded-xl group">
                                    <span>{{ isset($frontSetting) ? $frontSetting->register_submit_button_text : __('front.signUp') }}</span>
                                    <svg class="w-4 h-4 transition-transform duration-300 group-hover:translate-x-1"
                                        fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                        <path stroke-linecap="round" stroke-linejoin="round"
                                            d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" />
                                    </svg>
                                </button>
                            </div>
                            {{ html()->form()->close() }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('scripts')
    <script>
        "use strict";

        function register() {
            art.sendXhr({
                url: "{{ route('front.register.save') }}",
                type: "POST",
                file: true,
                container: "#ajax-register-form",
                disableButton: true,
                messageLocation: 'inline',
                success: function(response) {
                    if (response.status == 'success') {
                        jQuery('.register-div').remove();
                    }
                }
            });
        }
    </script>
@endsection