<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Sign in - 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: 900px;
            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-info {
            background: #e6f2ff;
            color: #0c5460;
            border-left: 4px solid #4299e1;
        }

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

        form {
            display: grid;
            grid-template-columns: 1fr;
            gap: 2rem;
        }

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

        .form-section {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }

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

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

        input[type="text"],
        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="password"]:focus {
            outline: none;
            border-color: #89b4d9;
            background: white;
        }

        .checkbox-group {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin-top: 0.5rem;
        }

        input[type="checkbox"] {
            width: 18px;
            height: 18px;
            cursor: pointer;
        }

        .checkbox-label {
            font-size: 0.95rem;
            color: #4a5568;
            font-weight: 400;
            cursor: pointer;
        }

        .button-group {
            display: flex;
            gap: 1rem;
            margin-top: 0.5rem;
        }

        .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;
            flex: 1;
        }

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

        .btn-secondary {
            background: #f7fafc;
            color: #4a5568;
            border: 2px solid #e2e8f0;
        }

        .btn-secondary:hover {
            background: #edf2f7;
        }

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

        .info-panel h3 {
            font-size: 1.25rem;
            color: #2d3748;
            margin-bottom: 0.75rem;
        }

        .info-panel p {
            color: #718096;
            line-height: 1.6;
            margin-bottom: 1rem;
        }

        .info-panel ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .info-panel li {
            color: #4a5568;
            padding: 0.5rem 0;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .info-panel li:before {
            content: "🍇";
        }

        .footer-link {
            text-align: center;
            margin-top: 1.5rem;
            padding-top: 1.5rem;
            border-top: 2px solid #e2e8f0;
            color: #718096;
            font-size: 0.95rem;
        }

        .footer-link a {
            color: #4299e1;
            text-decoration: none;
            font-weight: 600;
        }

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

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

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

            .card-body {
                padding: 1.5rem;
            }

            .button-group {
                flex-direction: column;
            }
        }
    </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>Welcome back to our wine management system</p>
        </div>

        <div class="card-body">
            @if(session('status'))
                <div class="alert alert-info">
                    <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>
                    {{ session('status') }}
                </div>
            @endif

            @if($errors->any())
                <div class="alert alert-error">
                    <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 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>
                    The provided credentials do not match our records.
                </div>
            @endif

            <form method="POST" action="{{ route('login.attempt') }}">
                @csrf
                
                <div class="form-grid">
                    <div class="form-section">
                        <div class="form-group">
                            <label for="username">Username</label>
                            <input 
                                id="username" 
                                name="username" 
                                type="text" 
                                placeholder="Enter your username" 
                                value="{{ old('username') ?? request()->cookie('remember_username') }}"
                                required
                                autofocus
                            />
                        </div>

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

                        <div class="checkbox-group">
                            <input 
                                type="checkbox" 
                                id="remember" 
                                name="remember" 
                                @if(request()->cookie('remember_username')) checked @endif
                            />
                            <label for="remember" class="checkbox-label">Remember me on this device</label>
                        </div>

                        <div class="button-group">
                            <button class="btn btn-primary" type="submit">
                                <svg style="width: 20px; height: 20px;" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M3 3a1 1 0 011 1v12a1 1 0 11-2 0V4a1 1 0 011-1zm7.707 3.293a1 1 0 010 1.414L9.414 9H17a1 1 0 110 2H9.414l1.293 1.293a1 1 0 01-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0z" clip-rule="evenodd"/>
                                </svg>
                                Sign in
                            </button>
                            <a href="{{ route('register') }}" class="btn btn-secondary">Create account</a>
                        </div>
                    </div>

                    <div class="info-panel">
                        <h3>Welcome Back!</h3>
                        <p>Sign in to access your winery management dashboard and continue your wine production journey.</p>
                        <ul>
                            <li>Manage your vineyard</li>
                            <li>Track wine production</li>
                            <li>Monitor inventory</li>
                            <li>Process orders</li>
                        </ul>
                    </div>
                </div>

                <div class="footer-link">
                    Or view our <a href="{{ route('catalog.index') }}">wine catalog</a> as a guest
                </div>
            </form>
        </div>
    </div>
</div>
</body>
</html>

