<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Create Account - Winery</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html, body {
            height: 100%;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
        }

        .wrap {
            min-height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 2rem;
        }

        .card {
            width: 100%;
            max-width: 1000px;
            background: white;
            border-radius: 16px;
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
            overflow: hidden;
        }

        .card-header {
            background: linear-gradient(135deg, #89b4d9 0%, #a8cce5 100%);
            padding: 2rem;
            text-align: center;
            color: #1a365d;
        }

        .card-header h1 {
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.75rem;
        }

        .card-header p {
            font-size: 1.1rem;
            opacity: 0.9;
        }

        .card-body {
            padding: 2.5rem;
        }

        .alert {
            padding: 1rem 1.25rem;
            border-radius: 8px;
            margin-bottom: 1.5rem;
            font-size: 0.95rem;
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .alert-success {
            background: #c6f6d5;
            color: #22543d;
            border-left: 4px solid #48bb78;
        }

        .alert-error {
            background: #fff5f5;
            color: #742a2a;
            border-left: 4px solid #fc8181;
        }

        .alert ul {
            margin: 0;
            padding-left: 1.25rem;
        }

        .alert li {
            margin: 0.25rem 0;
        }

        form {
            display: flex;
            flex-direction: column;
            gap: 2rem;
        }

        .form-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1.5rem;
        }

        .form-group {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        .form-group-full {
            grid-column: 1 / -1;
        }

        label {
            font-size: 0.9rem;
            font-weight: 600;
            color: #2d3748;
        }

        input[type="text"],
        input[type="email"],
        input[type="password"] {
            width: 100%;
            padding: 0.875rem 1rem;
            border: 2px solid #e2e8f0;
            border-radius: 8px;
            font-size: 1rem;
            transition: all 0.2s;
            background: #f7fafc;
        }

        input[type="text"]:focus,
        input[type="email"]:focus,
        input[type="password"]:focus {
            outline: none;
            border-color: #89b4d9;
            background: white;
        }

        .form-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-top: 1.5rem;
            border-top: 2px solid #e2e8f0;
            gap: 1rem;
        }

        .footer-link {
            color: #4299e1;
            text-decoration: none;
            font-size: 0.95rem;
            font-weight: 600;
            transition: color 0.2s;
        }

        .footer-link:hover {
            color: #2b6cb0;
            text-decoration: underline;
        }

        .btn {
            padding: 0.875rem 1.75rem;
            border-radius: 8px;
            border: none;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
        }

        .btn-primary {
            background: linear-gradient(135deg, #89b4d9 0%, #a8cce5 100%);
            color: #1a365d;
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(137, 180, 217, 0.4);
        }

        .info-section {
            background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
            padding: 1.5rem;
            border-radius: 12px;
            border: 2px solid #e2e8f0;
            margin-bottom: 2rem;
        }

        .info-section h3 {
            font-size: 1.1rem;
            color: #2d3748;
            margin-bottom: 0.75rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .info-section p {
            color: #718096;
            font-size: 0.95rem;
            line-height: 1.6;
        }

        @media (max-width: 768px) {
            .form-grid {
                grid-template-columns: 1fr;
            }

            .card-header h1 {
                font-size: 2rem;
            }

            .card-body {
                padding: 1.5rem;
            }

            .form-footer {
                flex-direction: column;
                align-items: stretch;
            }

            .btn-primary {
                width: 100%;
            }
        }
    </style>
</head>
<body>
<div class="wrap">
    <div class="card">
        <div class="card-header">
            <h1>
                <svg style="width: 40px; height: 40px;" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M6 3v11c0 3.87 3.13 7 7 7s7-3.13 7-7V3H6zm12 2v2H6V5h12zm-7 14c-2.76 0-5-2.24-5-5v-5h10v5c0 2.76-2.24 5-5 5z"/>
                    <circle cx="13" cy="11" r="1"/>
                </svg>
                Winery
            </h1>
            <p>Join our wine management system</p>
        </div>

        <div class="card-body">
            @if(session('status'))
                <div class="alert alert-success">
                    <svg style="width: 20px; height: 20px;" 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>
                    {{ session('status') }}
                </div>
            @endif

            @if($errors->any())
                <div class="alert alert-error">
                    <svg style="width: 20px; height: 20px; flex-shrink: 0;" 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>
                    <ul>
                        @foreach($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <div class="info-section">
                <h3>
                    <svg style="width: 20px; height: 20px;" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/>
                    </svg>
                    Create Your Account
                </h3>
                <p>Fill in the form below to create a new account and start managing your winery operations.</p>
            </div>

            <form method="POST" action="{{ route('register.store') }}">
                @csrf
                
                <div class="form-grid">
                    <div class="form-group form-group-full">
                        <label for="name">Full Name</label>
                        <input 
                            id="name"
                            name="name" 
                            type="text"
                            placeholder="Enter your full name" 
                            value="{{ old('name') }}" 
                            required
                            autofocus
                        />
                    </div>

                    <div class="form-group">
                        <label for="username">Username</label>
                        <input 
                            id="username"
                            name="username" 
                            type="text"
                            placeholder="Choose a username" 
                            value="{{ old('username') }}" 
                            required
                        />
                    </div>

                    <div class="form-group">
                        <label for="email">Email Address</label>
                        <input 
                            id="email"
                            name="email" 
                            type="email"
                            placeholder="Enter your email" 
                            value="{{ old('email') }}" 
                            required
                        />
                    </div>

                    <div class="form-group">
                        <label for="password">Password</label>
                        <input 
                            id="password"
                            name="password" 
                            type="password"
                            placeholder="Create a password" 
                            required
                        />
                    </div>

                    <div class="form-group">
                        <label for="password_confirmation">Confirm Password</label>
                        <input 
                            id="password_confirmation"
                            name="password_confirmation" 
                            type="password"
                            placeholder="Confirm your password" 
                            required
                        />
                    </div>
                </div>

                <div class="form-footer">
                    <a href="{{ route('login') }}" class="footer-link">
                        ← Already have an account? Sign in
                    </a>
                    <button type="submit" class="btn btn-primary">
                        <svg style="width: 20px; height: 20px;" fill="currentColor" viewBox="0 0 20 20">
                            <path d="M8 9a3 3 0 100-6 3 3 0 000 6zM8 11a6 6 0 016 6H2a6 6 0 016-6zM16 7a1 1 0 10-2 0v1h-1a1 1 0 100 2h1v1a1 1 0 102 0v-1h1a1 1 0 100-2h-1V7z"/>
                        </svg>
                        Create Account
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
</body>
</html>
