@extends('layouts.app')

@section('title', 'Register Restaurant')

@push('styles')
<style>
.reg-page{min-height:calc(100vh - 74px);display:grid;place-items:center;margin-top:-38px;padding:68px 0;background:radial-gradient(circle at 90% 15%,rgba(111,143,91,.15),transparent 25%),#f4f2ec}
.reg-box{width:min(1100px,calc(100% - 28px));display:grid;grid-template-columns:.9fr 1.1fr;overflow:hidden;border:1px solid rgba(17,22,17,.09);border-radius:32px;background:#fff;box-shadow:0 35px 90px rgba(17,22,17,.17);animation:regIn .5s ease}
.reg-photo{min-height:720px;padding:38px;display:flex;flex-direction:column;justify-content:space-between;color:#fff;background:linear-gradient(180deg,rgba(7,12,7,.15),rgba(7,12,7,.91)),url('https://images.unsplash.com/photo-1414235077428-338989a2e8c0?auto=format&fit=crop&w=1500&q=84') center/cover}
.reg-photo h2{max-width:450px;margin:18px 0 12px;font-size:48px;line-height:.97;letter-spacing:-.058em}
.reg-photo p{max-width:450px;color:rgba(255,255,255,.72);line-height:1.7}
.reg-panel{padding:46px 52px;display:flex;align-items:center}
.reg-content{width:100%;max-width:570px;margin:auto}
.reg-logo{width:58px;height:58px;display:grid;place-items:center;margin-bottom:23px;border-radius:19px;color:#fff;background:linear-gradient(145deg,#78956a,#40563a);font-weight:900}
.reg-content h1{margin:0;font-size:41px;letter-spacing:-.055em}
.reg-intro{margin:10px 0 24px;color:#748072}
.reg-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.reg-field{margin-bottom:16px}.reg-field label{display:block;margin-bottom:7px;font-size:13px;font-weight:850}
.reg-wrap{position:relative}.reg-input{width:100%;height:52px;padding:0 44px 0 15px;border:1px solid rgba(17,22,17,.1);border-radius:15px;outline:none;background:#fafaf7}
.reg-input:focus{border-color:#78956a;box-shadow:0 0 0 4px rgba(120,149,106,.11)}
.reg-toggle{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:34px;height:34px;border:0;background:transparent}
.terms{display:flex;align-items:flex-start;gap:9px;margin:5px 0 20px;color:#657063;font-size:12px;line-height:1.5}.terms input{width:auto;margin-top:3px}
.reg-submit{width:100%;height:53px;border:0;border-radius:15px;color:#fff;background:linear-gradient(145deg,#78956a,#40563a);font-weight:900;box-shadow:0 14px 28px rgba(64,86,58,.22)}
.reg-bottom{margin-top:21px;text-align:center;color:#748072;font-size:13px}.reg-bottom a{color:#58794c;font-weight:900}
@keyframes regIn{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
@media(max-width:900px){.reg-box{grid-template-columns:1fr}.reg-photo{min-height:310px}.reg-panel{padding:35px 22px}}
@media(max-width:620px){.reg-grid{grid-template-columns:1fr;gap:0}}
</style>
@endpush

@section('content')
<section class="reg-page">
    <div class="reg-box">
        <div class="reg-photo">
            <div>
                <strong>SMART RESTAURANT PLATFORM</strong>
                <h2>Build your professional restaurant menu.</h2>
                <p>Create your account, add your menu and give customers a premium QR experience.</p>
            </div>
            <div>
                <p>✓ Unique restaurant page and QR code</p>
                <p>✓ Ingredient-based nutrition calculation</p>
                <p>✓ Smart menu search</p>
                <p>✓ Professional mobile interface</p>
            </div>
        </div>

        <div class="reg-panel">
            <div class="reg-content">
                <div class="reg-logo">AI</div>
                <h1>Create your restaurant.</h1>
                <p class="reg-intro">Complete the information below to create your dashboard.</p>

                <form method="POST" action="{{ route('register.store') }}">
                    @csrf

                    <div class="reg-grid">
                        <div class="reg-field">
                            <label for="name">Your name</label>
                            <input id="name" class="reg-input" type="text" name="name"
                                   value="{{ old('name') }}" autocomplete="name"
                                   placeholder="Restaurant owner" required autofocus>
                        </div>

                        <div class="reg-field">
                            <label for="restaurant_name">Restaurant name</label>
                            <input id="restaurant_name" class="reg-input" type="text"
                                   name="restaurant_name" value="{{ old('restaurant_name') }}"
                                   placeholder="Example: Maison Verde" required>
                        </div>
                    </div>

                    <div class="reg-field">
                        <label for="email">Email address</label>
                        <input id="email" class="reg-input" type="email" name="email"
                               value="{{ old('email') }}" autocomplete="email"
                               placeholder="owner@restaurant.com" required>
                    </div>

                    <div class="reg-grid">
                        <div class="reg-field">
                            <label for="password">Password</label>
                            <div class="reg-wrap">
                                <input id="password" class="reg-input" type="password"
                                       name="password" minlength="8" autocomplete="new-password"
                                       placeholder="Minimum 8 characters" required>
                                <button class="reg-toggle" type="button" data-toggle="password">◉</button>
                            </div>
                        </div>

                        <div class="reg-field">
                            <label for="password_confirmation">Confirm password</label>
                            <div class="reg-wrap">
                                <input id="password_confirmation" class="reg-input" type="password"
                                       name="password_confirmation" minlength="8"
                                       autocomplete="new-password" placeholder="Repeat password" required>
                                <button class="reg-toggle" type="button" data-toggle="password_confirmation">◉</button>
                            </div>
                        </div>
                    </div>

                    <label class="terms">
                        <input type="checkbox" name="terms" value="1" {{ old('terms') ? 'checked' : '' }} required>
                        <span>I confirm that the restaurant information is accurate and I agree to use the platform responsibly.</span>
                    </label>

                    <button class="reg-submit" type="submit">Create Restaurant Account</button>
                </form>

                <div class="reg-bottom">
                    Already have an account? <a href="{{ route('login') }}">Sign in</a>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@push('scripts')
<script>
document.querySelectorAll('[data-toggle]').forEach(function(button){
    button.addEventListener('click',function(){
        const input=document.getElementById(this.dataset.toggle);
        input.type=input.type==='password'?'text':'password';
        this.textContent=input.type==='password'?'◉':'×';
    });
});
</script>
@endpush