File: //home/posscale/www/printmanager/resources/views/printer/register.blade.php
<x-main-layout header="">
<style>
.gradient-bg { background: linear-gradient(135deg, #001a4d 0%, #003d99 100%); }
</style>
<div class="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800 py-12 px-4">
<div class="max-w-4xl mx-auto">
<!-- Header -->
<div class="text-center mb-12">
<h1 class="text-4xl font-bold text-gray-900 dark:text-white mb-4">Register Your Business</h1>
<p class="text-lg text-gray-600 dark:text-gray-400">Set up your managed printer services account and get started today</p>
</div>
<!-- Alert Messages -->
@if(session()->has('message'))
<div class="mb-6 rounded-lg bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 p-4">
<div class="flex gap-3">
<svg class="w-5 h-5 text-green-600 dark:text-green-400 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
</svg>
<div class="text-sm text-green-800 dark:text-green-300">{{ session()->get('message') }}</div>
</div>
</div>
@endif
@if(session()->has('ct_errors'))
@php $ct_errors = explode('__', session()->get('ct_errors')); @endphp
<div class="mb-6 rounded-lg bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 p-4">
<div class="flex gap-3">
<svg class="w-5 h-5 text-red-600 dark:text-red-400 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
</svg>
<div class="text-sm text-red-800 dark:text-red-300">
@foreach($ct_errors as $error)
<div>{{ $error }}</div>
@endforeach
</div>
</div>
</div>
@endif
<!-- Form Card -->
<div class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl overflow-hidden">
<form x-data="{
form: $form('post', '{{route('pre-register')}}', {
site_name: '{{old('site_name')??''}}',
sub_domain: '{{old('sub_domain')??''}}',
has_domain: '{{old('has_domain')??''}}',
site_domain: '{{old('site_domain')??''}}',
name:'{{old('name')??''}}',
user_email: '{{old('user_email')??''}}',
password: '',
confirm_password: '',
}).setErrors({{ Js::from($errors->messages()) }}),
hasDomain: {{old('has_domain')?1:0 }},
}" action="{{ route('printer.store')}}" method="POST" class="space-y-8 p-8">
@csrf
<!-- Site Information Section -->
<div>
<div class="flex items-center gap-3 mb-6">
<div class="flex-shrink-0 w-10 h-10 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center">
<svg class="w-6 h-6 text-blue-900 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
</svg>
</div>
<div>
<h2 class="text-2xl font-bold text-gray-900 dark:text-white">Site Information</h2>
<p class="text-sm text-gray-500 dark:text-gray-400">Enter your business details</p>
</div>
</div>
<div class="space-y-6">
<!-- Site Name -->
<div>
<label for="site_name" class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">Site Name</label>
<input x-model="form.site_name" @change="form.validate('site_name')" type="text" name="site_name" id="site_name" placeholder="My Business" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:ring-blue-900 focus:border-transparent dark:focus:ring-blue-400 transition">
<template x-if="form.invalid('site_name')">
<div class="text-red-500 dark:text-red-400 text-sm mt-2" x-text="form.errors.site_name"></div>
</template>
</div>
<!-- Domain Options -->
<div>
<label class="flex items-center gap-3 cursor-pointer">
<input {{old('has_domain')?'checked':''}} value="1" type="checkbox" @change="hasDomain=!hasDomain" name="has_domain" class="w-5 h-5 rounded border-gray-300 text-blue-900 focus:ring-2 focus:ring-blue-900 dark:bg-gray-700 dark:border-gray-600">
<span class="text-sm font-medium text-gray-700 dark:text-gray-300">I have my own domain</span>
</label>
</div>
<!-- Sub Domain Option -->
<div :class="{ 'hidden': hasDomain }">
<label for="sub_domain" class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">Create a subdomain</label>
<div class="flex">
<input x-model="form.sub_domain" @change="form.validate('sub_domain')" type="text" name="sub_domain" id="sub_domain" placeholder="mybusiness" class="flex-1 px-4 py-2 border border-r-0 border-gray-300 dark:border-gray-600 rounded-l-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:ring-blue-900 focus:border-transparent dark:focus:ring-blue-400 transition">
<span class="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-r-lg bg-blue-900 text-white font-medium">{{ env('PARENT_DOMAIN')}}</span>
</div>
<template x-if="form.invalid('sub_domain')">
<div class="text-red-500 dark:text-red-400 text-sm mt-2" x-text="form.errors.sub_domain"></div>
</template>
</div>
<!-- Custom Domain Option -->
<div :class="{ 'hidden': !hasDomain }">
<label for="site_domain" class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">Your Domain</label>
<input x-model="form.site_domain" @change="form.validate('site_domain')" type="text" name="site_domain" id="site_domain" placeholder="example.com" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:ring-blue-900 focus:border-transparent dark:focus:ring-blue-400 transition">
<template x-if="form.invalid('site_domain')">
<div class="text-red-500 dark:text-red-400 text-sm mt-2" x-text="form.errors.site_domain"></div>
</template>
</div>
</div>
</div>
<div class="border-t border-gray-200 dark:border-gray-700"></div>
<!-- User Information Section -->
<div>
<div class="flex items-center gap-3 mb-6">
<div class="flex-shrink-0 w-10 h-10 bg-red-100 dark:bg-red-900 rounded-lg flex items-center justify-center">
<svg class="w-6 h-6 text-red-600 dark:text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
</svg>
</div>
<div>
<h2 class="text-2xl font-bold text-gray-900 dark:text-white">User Information</h2>
<p class="text-sm text-gray-500 dark:text-gray-400">Your account details</p>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Name -->
<div>
<label for="name" class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">Full Name</label>
<input x-model="form.name" @change="form.validate('name')" type="text" name="name" id="name" placeholder="John Doe" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:ring-blue-900 focus:border-transparent dark:focus:ring-blue-400 transition">
<template x-if="form.invalid('name')">
<div class="text-red-500 dark:text-red-400 text-sm mt-2" x-text="form.errors.name"></div>
</template>
</div>
<!-- Email -->
<div>
<label for="user_email" class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">Email Address</label>
<input x-model="form.user_email" @change="form.validate('user_email')" type="email" name="user_email" id="user_email" placeholder="john@example.com" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:ring-blue-900 focus:border-transparent dark:focus:ring-blue-400 transition">
<template x-if="form.invalid('user_email')">
<div class="text-red-500 dark:text-red-400 text-sm mt-2" x-text="form.errors.user_email"></div>
</template>
</div>
<!-- Password -->
<div>
<label for="password" class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">Password</label>
<input x-model="form.password" @change="form.validate('password')" type="password" name="password" id="password" placeholder="••••••••" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:ring-blue-900 focus:border-transparent dark:focus:ring-blue-400 transition">
<template x-if="form.invalid('password')">
<div class="text-red-500 dark:text-red-400 text-sm mt-2" x-text="form.errors.password"></div>
</template>
</div>
<!-- Confirm Password -->
<div>
<label for="confirm_password" class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">Confirm Password</label>
<input x-model="form.confirm_password" @change="form.validate('confirm_password')" type="password" name="confirm_password" id="confirm_password" placeholder="••••••••" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:ring-blue-900 focus:border-transparent dark:focus:ring-blue-400 transition">
<template x-if="form.invalid('confirm_password')">
<div class="text-red-500 dark:text-red-400 text-sm mt-2" x-text="form.errors.confirm_password"></div>
</template>
</div>
</div>
</div>
<!-- Form Actions -->
<div class="flex gap-4 pt-6 border-t border-gray-200 dark:border-gray-700">
<button type="submit" class="flex-1 text-white font-semibold py-3 px-6 rounded-lg transition shadow-lg hover:shadow-xl gradient-bg hover:opacity-90">
<span class="flex items-center justify-center gap-2">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
</svg>
Submit for Review
</span>
</button>
<a href="{{ route('home') }}" class="px-6 py-3 bg-gray-200 dark:bg-gray-700 text-gray-900 dark:text-white font-semibold rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 transition">
Cancel
</a>
</div>
</form>
</div>
</div>
</div>
</x-main-layout>