@extends('frontend_landing_page.master')

@section('content')

@php 
        $allpage = DB::table('all_page_images')->where('id', 1)->first(); 
    @endphp

<style>
    .display{
        display: none!important;
    }
</style>

<div class="container-fluid pt-5 bg-primary hero-header">
        <div class="container pt-5">
            <div class="row g-5 pt-5">
                <div class="col-lg-6 align-self-center text-center text-lg-start mb-lg-5">
                    <h1 class="display-4 text-white mb-4 animated slideInRight">About Us</h1>
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb justify-content-center justify-content-lg-start mb-0">
                            <li class="breadcrumb-item"><a class="text-white" href="{{ URL('/')}}">Home</a></li>
                            
                            <li class="breadcrumb-item text-white active" aria-current="page">About Us</li>
                        </ol>
                    </nav>
                </div>
                <div class="col-lg-6 align-self-end text-center text-lg-end">
                    <img class="img-fluid" src="{{ URL::to($allpage->image) }}" alt="image" style="max-height: 300px;">
                </div>
            </div>
        </div>
    </div>
    <!-- Hero End -->


    <!-- Full Screen Search Start -->
    <div class="modal fade" id="searchModal" tabindex="-1">
        <div class="modal-dialog modal-fullscreen">
            <div class="modal-content" style="background: rgba(20, 24, 62, 0.7);">
                <div class="modal-header border-0">
                    <button type="button" class="btn btn-square bg-white btn-close" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <div class="modal-body d-flex align-items-center justify-content-center">
                    <div class="input-group" style="max-width: 600px;">
                        <input type="text" class="form-control bg-transparent border-light p-3"
                            placeholder="Type search keyword">
                        <button class="btn btn-light px-4"><i class="bi bi-search"></i></button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Full Screen Search End -->

    @php 
    $about = DB::table('about_us')->where('id', 1)->first(); 
    $landing = DB::table('landing_pages')->where('id', 1)->first(); 
    @endphp


    <!-- About Start -->
 <div class="container-fluid py-5">
        <div class="container">
            <div class="row g-5 align-items-center">
                <div class="col-lg-6 wow fadeIn" data-wow-delay="0.1s">
                    <div class="about-img">
                        <img class="img-fluid" src="{{ URL::to($about->image) }}" alt="{{ $about->title}}">
                    </div>
                </div>
                <div class="col-lg-6 wow fadeIn" data-wow-delay="0.5s">
                    <div class="btn btn-sm border rounded-pill text-primary px-3 mb-3">About Us</div>
                    <h1 class="mb-4">{{ $about->title}}</h1>
                    <p class="mb-4">{{$about->paragraph_one }}</p>
                    <p class="mb-4">{{$about->paragraph_two }}</p>
                    <div class="row g-3">
                        <div class="col-sm-6">
                            <h6 class="mb-3"><i class="fa fa-check text-primary me-2"></i>{{ $about->achievement_one}}</h6>
                            <h6 class="mb-0"><i class="fa fa-check text-primary me-2"></i>{{ $about->achievement_two}}</h6>
                        </div>
                        <div class="col-sm-6">
                            <h6 class="mb-3"><i class="fa fa-check text-primary me-2"></i>{{ $about->achievement_three}}</h6>
                            <h6 class="mb-0"><i class="fa fa-check text-primary me-2"></i>{{ $about->achievement_four}}</h6>
                        </div>
                    </div>
                    <div class="d-flex align-items-center mt-4">
                        
                        <a class="btn btn-outline-primary btn-square me-3" href="{{ $landing->facebook}}" target="_blank"><i class="fab fa-facebook-f"></i></a>
                        <a class="btn btn-outline-primary btn-square me-3" href="{{ $landing->twitter}}" target="_blank"><i class="fab fa-twitter"></i></a>
                        <a class="btn btn-outline-primary btn-square me-3" href="{{ $landing->instagram}}" target="_blank"><i class="fab fa-instagram"></i></a>
                        <a class="btn btn-outline-primary btn-square" href="{{ $landing->linkedin}}" target="_blank"><i class="fab fa-linkedin-in"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- About End -->
        
    <script>
$('input[name="phone"]').keypress(
    function(event) {
        if (event.keyCode == 46 || event.keyCode == 8) {
            //do nothing
        } else {
            if (event.keyCode < 48 || event.keyCode > 57) {
                event.preventDefault();
            }
        }
    }
);
</script>

@endsection