@extends('layouts.app')

@section('title', 'লগইন')

@section('styles')
<style>
    .login-container {
        min-height: 100vh;
        background: linear-gradient(135deg, #1a5f7a, #2a9d8f);
    }
    
    .login-card {
        border-radius: 15px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    }
    
    .login-logo {
        font-family: 'SolaimanLipi', sans-serif;
        font-size: 2.5rem;
        font-weight: bold;
        color: #1a5f7a;
    }
</style>
@endsection

@section('content')
<div class="login-container d-flex align-items-center justify-content-center">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-6 col-lg-5">
                <div class="card login-card">
                    <div class="card-body p-5">
                        <div class="text-center mb-4">
                            <h2 class="login-logo mb-3">আমবাগান যুব কল্যাণ সমিতি</h2>
                            <h5 class="text-muted">লগইন করুন</h5>
                        </div>
                        
                        @if ($errors->any())
                        <div class="alert alert-danger">
                            <ul class="mb-0">
                                @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                        @endif
                        
                        <form method="POST" action="{{ route('login') }}">
                            @csrf
                            
                            <div class="mb-3">
                                <label for="phone" class="form-label">ফোন নম্বর বা ইমেইল</label>
                                <input type="text" class="form-control @error('phone') is-invalid @enderror" 
                                       id="phone" name="phone" value="{{ old('phone') }}" required autofocus>
                                @error('phone')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            
                            <div class="mb-3">
                                <label for="password" class="form-label">পাসওয়ার্ড</label>
                                <input type="password" class="form-control @error('password') is-invalid @enderror" 
                                       id="password" name="password" required>
                                @error('password')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            
                            <div class="mb-3 form-check">
                                <input type="checkbox" class="form-check-input" id="remember" name="remember">
                                <label class="form-check-label" for="remember">মনে রাখুন</label>
                            </div>
                            
                            <div class="d-grid gap-2">
                                <button type="submit" class="btn btn-primary btn-lg">
                                    <i class="fas fa-sign-in-alt me-2"></i>লগইন
                                </button>
                            </div>
                            
                            <div class="mt-3 text-center">
                                <a href="{{ route('password.request') }}" class="text-decoration-none">
                                    পাসওয়ার্ড ভুলে গেছেন?
                                </a>
                            </div>
                            
                            <hr class="my-4">
                            
                            <div class="text-center">
                                <p class="mb-2">নতুন সদস্য?</p>
                                <a href="{{ route('members.create') }}" class="btn btn-outline-primary">
                                    <i class="fas fa-user-plus me-1"></i>সদস্য নিবন্ধন করুন
                                </a>
                            </div>
                        </form>
                    </div>
                </div>
                
                <div class="text-center mt-4 text-white">
                    <p>&copy; {{ date('Y') }} আমবাগান যুব কল্যাণ সমিতি। সকল স্বত্ব সংরক্ষিত।</p>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection