@extends('layouts.auth')
@section('title', 'Sign In')

@section('content')
    <div class="mb-8">
        <h2 class="font-display text-2xl font-bold text-surface-900 tracking-tight">Welcome back</h2>
        <p class="mt-1.5 text-sm text-surface-500">Sign in to your {{ $companySetting?->name }} account</p>
    </div>

    @if($errors->any())
        <div class="mb-6 flex items-start gap-3 rounded-xl border border-red-200 bg-red-50 p-4">
            <svg class="mt-0.5 w-4 h-4 shrink-0 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
            </svg>
            <ul class="space-y-0.5 text-sm text-red-700">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <form
        method="POST"
        action="{{ route('login.store') }}"
        x-data="{ loading: false }"
        @submit="loading = true"
        class="enhanced-form space-y-5"
    >
        @csrf

        <x-input
            name="email"
            label="Email address"
            type="email"
            :value="old('email')"
            placeholder="you@example.com"
            required
        />

        <div>
            <div class="mb-1.5 flex items-center justify-between">
                <label for="password" class="form-label mb-0">
                    Password <span class="text-red-500">*</span>
                </label>
                <a href="{{ route('password.request') }}"
                   class="text-xs font-medium text-primary-600 hover:text-primary-700">
                    Forgot password?
                </a>
            </div>
            <div class="relative" x-data="{ show: false }">
                <input
                    :type="show ? 'text' : 'password'"
                    id="password"
                    name="password"
                    placeholder="********"
                    required
                    class="form-input pr-12 {{ $errors->has('password') ? 'form-input-error' : '' }}"
                />
                <button
                    type="button"
                    @click="show = !show"
                    class="absolute inset-y-0 right-0 flex items-center px-3 text-surface-400 transition-colors hover:text-surface-600"
                    :aria-label="show ? 'Hide password' : 'Show password'"
                >
                    <svg x-show="!show" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
                    </svg>
                    <svg x-show="show" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" style="display:none;">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"/>
                    </svg>
                </button>
            </div>
            @error('password')
                <p class="mt-1.5 text-xs text-red-600">{{ $message }}</p>
            @enderror
        </div>

        <label class="flex cursor-pointer items-center gap-2">
            <input
                type="checkbox"
                name="remember"
                class="rounded-md border-surface-300 text-primary-600 focus:ring-primary-500"
            />
            <span class="text-sm text-surface-600">Remember me for 30 days</span>
        </label>

        <button
            type="submit"
            class="btn-primary w-full justify-center py-2.5 shadow-glow"
            :disabled="loading"
        >
            <svg x-show="loading" class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24" style="display:none;">
                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/>
            </svg>
            <span x-text="loading ? 'Signing in...' : 'Sign in'">Sign in</span>
        </button>

    </form>
@endsection