@extends('layouts.loginandregistration')

@section('content')

<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">

<div class="container">
<link rel="shortcut icon" type="x-icon" href="Click and Get.png">


   <section class="vh-100 d-flex justify-content-center align-items-center online-shop-background">
    <video autoplay loop muted class="position-fixed top-0 start-0 d-none d-lg-block">
        <source src="{{asset('images/CAPSTONE.mp4')}}" type="video/mp4">
        Your browser does not support the video tag.
    </video>
    <div class="d-block d-lg-none" style="background-image: url('path/to/your/mobile-background-image.jpg'); background-size: cover; background-position: center; width: 100%; height: 100%; position: fixed; top: 0; left: 0;"></div>
    <div class="container">
    <div class="card w-100 ms-auto" style="max-width: 400px; height: 600px;">
        <div class="card-header text-center">
        <a class="navbar-brand" href="{{ url('/') }}" style="font-size: 22px; text-decoration: none; color: inherit;">
    <span style="color: inherit;">Click & Get</span>
</a>
<style>
    .navbar-brand:hover {
    color: blue;
}
</style>
        <img src="{{ asset('images/Click and Get.png') }}" alt="Logo" style="width: 90px; height: 50px; border-radius: 50%;">

        </div>
        <br>
        <center><h4 class="mb-0">{{ __('Login') }}</h4></center>

        @if($errors->any())
                                <div class="alert alert-danger">
                                    <ul>
                                        @foreach ($errors->all() as $error)
                                            <li>{{ $error }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endif
        
        <div class="card-body">
            <p class="mb-4 text-center text-muted">
            </p>
            <form action="{{ route('login') }}" method="POST">
                @csrf
                <div class="mb-3">
                    <input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email" placeholder="Email address">
                    @error('email')
                    <span class="invalid-feedback" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                    @enderror
                </div>
                <div class="mb-3">
                    <input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" required autocomplete="current-password" placeholder="Password">
                    @error('password')
                    <span class="invalid-feedback" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                    @enderror
                </div>
                <div class="mb-3 form-check">
                    <input type="checkbox" class="form-check-input" id="remember">
                    <label class="form-check-label" for="remember">{{ __('Remember Me') }}</label>
                </div>
                <button type="submit" class="btn btn-facebook btn-block">{{ __('Log In') }}</button>
            </form>
            <!-- <div class="mt-3 text-center">
                <a href="{{ route('password.request') }}" class="text-body text-decoration-none">{{ __('Forgot password?') }}</a>
            </div> -->
        </div>
        <div class="card-footer text-center">
            <p class="mb-0">Don't have an account? <a href="{{ url('/register') }}" class="link-danger">{{ __('Sign Up') }}</a></p>
        </div>
    </div>
    </div>

</section>




@endsection
<style>
    .h-custom {
        height: calc(100vh - 73px);
    }

    /* Facebook-inspired styles */
    body {
        background-color: #f0f2f5;
    }

    .card {
        border: none;
        border-radius: 10px;
        box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
    }

    .card-header {
        background-color: #fff;
        border-bottom: none;
        padding: 20px;
    }

    .card-body {
        background-color: #fff;
        padding: 20px;
    }

    .btn-infos {
        background-color: #1877f2;
        border-color: #1877f2;
    }

    .btn-facebook:hover {
        background-color: #1363db;
        border-color: #1363db;
    }

    .link-danger {
        color: #ff3f3f;
    }
    .online-shop-background {
        background-color: #f0f2f5;
        background-image: url('path/to/your/background-image.jpg');
        background-size: cover;
        background-position: center;
    }

    .shop-title {
        font-size: 28px;
        color: #333;
        margin-bottom: 20px;
    }

    .shop-description {
        font-size: 18px;
        color: #666;
        margin-bottom: 30px;
    }

    /* Add more styles as needed */
</style>