@extends('layouts.master')
@section('body_id', 'about_us_page')
@section('content')

    <!-- start breadcrumb -->
    <section class="breadcrumb_main_area margin-bottom-80">
        <div class="container-fluid">
            <div class="row">
                <div class="breadcrumb_main nice_title">
                    <h2>{{ $about->title ?? 'About US' }}</h2>
                    <!-- special offer start -->
                    <div class="special_offer_main">
                        <div class="container">
                            <div class="special_offer_sub">
                                <img src="{{ asset('assets/img/special-offer-yellow-main.png')}}" alt="img">
                            </div>
                        </div>
                    </div>
                    <!-- end offer start -->
                </div>
            </div>
        </div>
    </section>
    <!-- end breadcrunb -->

    <!-- start our room facilities -->
    <section class="our_room_facilities_area">
        <div class="container">
            <div class="our_room_facilities margin-bottom-70">
                <div class="facilities_top_para">
                    <p>
                        {!! nl2br(e($about->top_description ?? 'Semper ac dolor vitae msan. Cras interdum hendreritnia Phasellus accumsan rna vitae molestie interdum.')) !!}
                    </p>
                </div>
                <div class="facilities_main_part">
                    <div class="section_title margin-top-80 margin-bottom-35">
                        <h5>Our Room Facilities</h5>
                    </div>
                    <div class="row">
                        <div class="facilities_name clearfix margin-bottom-45">
                            @foreach($facilities->chunk(2) as $chunk)
                                <div class="col-lg-2 col-md-2 col-sm-3 col-xs-6">
                                    <ul class="single_facilities_name clearul">
                                        @foreach($chunk as $facility)
                                            <li>
                                                <img src="{{ asset($facility->icon) }}" alt="{{ $facility->name }}"
                                                    style="width: 40px; height: 30px; object-fit: contain;">
                                                <p>{{ $facility->name }}</p>
                                            </li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endforeach

                            <div class="col-lg-2 col-md-2 col-sm-1 col-xs-12">
                                <div class="single_facilities_name clearfix">
                                    <a href="{{ route('booking.index') }}" class="btn btn-warning btn-md">Book Room</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-12 col-md-12">
                            <div class="about_us_thumb margin-bottom-75">
                                @if(isset($about->main_image))
                                    <img src="{{ asset($about->main_image) }}" alt="About Thumb">
                                @else
                                    <img src="{{ asset('assets/img/about-us-thumb.jpg')}}" alt="Default Thumb">
                                @endif
                                <p>
                                    {!! nl2br(e($about->bottom_description ?? 'Semper ac dolor vitae msan. Cras interdum hendreritnia Phasellus accumsan rna vitae molestie interdum.')) !!}
                                </p>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </section>
    <!-- end our room facilities -->

@endsection