@php

$events = App\Models\Event::where('status','active')->limit(4)->get();
@endphp

<div class="container-fluid bg-light pt-5 px-sm-3 px-md-5">
    <div class="row">
        <div class="col-lg-4 col-md-6 mb-5">

            @if(config('settings.site_logo'))
            <img class="img-fluid" src="{{ asset(config('settings.site_logo')) }}" alt="{{ config('settings.site_name') }}" style="width:100px; height:100px;">
            @endif

            <p>{!! config('settings.site_short_desc') !!}</p>
            <div class="d-flex justify-content-start mt-4">
                <a class="btn btn-outline-secondary text-center mr-2 px-0" style="width: 38px; height: 38px;" href="#"><i class="fab fa-twitter"></i></a>
                <a class="btn btn-outline-secondary text-center mr-2 px-0" style="width: 38px; height: 38px;" href="#"><i class="fab fa-facebook-f"></i></a>
                <a class="btn btn-outline-secondary text-center mr-2 px-0" style="width: 38px; height: 38px;" href="#"><i class="fab fa-linkedin-in"></i></a>
                <a class="btn btn-outline-secondary text-center mr-2 px-0" style="width: 38px; height: 38px;" href="#"><i class="fab fa-instagram"></i></a>
                <a class="btn btn-outline-secondary text-center mr-2 px-0" style="width: 38px; height: 38px;" href="#"><i class="fab fa-youtube"></i></a>
            </div>
        </div>

        <div class="col-lg-2 col-md-6 mb-5">
            <h4 class="font-weight-bold mb-4">Quick Links</h4>
            <div class="d-flex flex-column justify-content-start">
                <a class="text-secondary mb-2" href="{{url('/')}}"><i class="fa fa-angle-right text-dark mr-2"></i>Home</a>
                <a class="text-secondary mb-2" href="{{route('about')}}"><i class="fa fa-angle-right text-dark mr-2"></i>About</a>
                <a class="text-secondary mb-2" href="{{route('nagarik')}}"><i class="fa fa-angle-right text-dark mr-2"></i>Nagarik WadaPatra</a>
                <a class="text-secondary" href="{{route('contact')}}"><i class="fa fa-angle-right text-dark mr-2"></i>Contact</a>
            </div>
        </div>
        <div class="col-lg-3 col-md-6">
            <h4 class="text mb-3">Events</h4>
            <div class="row g-2 pt-2">
                @foreach($events as $event)
                <div class="col-4">
                    <img class="img-fluid bg-light p-1" src="{{asset($event->image)}}" alt="">
                </div>
                @endforeach

            </div>
        </div>
        <div class="col-lg-3 col-md-6">
            <h4 class="text mb-3">Newsletter</h4>
            <p>Subscribe to our Newsletter</p>
            <form action="{{route('newsletter.store')}}" method="POST">
                @csrf
                <div class="position-relative mx-auto" style="max-width: 400px;">
                    <input class="form-control border-0 w-100 py-3 ps-4 pe-5"
                        type="email"
                        name="email"
                        placeholder="Your email"
                        required>
                    <button type="submit" class="btn btn-primary py-2 position-absolute top-0 end-0 mt-2 me-2">Subscribe</button>
                </div>
            </form>
        </div>
    </div>
</div>
<div class="container-fluid py-4 px-sm-3 px-md-5">
    <p class="m-0 text-center">
        &copy; <a class="font-weight-bold" href="#">{{ config('settings.site_name') }}</a>. All Rights Reserved.
    </p>
</div>