@extends('layouts.app')

@section('content')
    <main>

        <!-- page title area start  -->
        <section class="page-title-area" data-background="{{asset('assets/img/bg/page-title-bg.jpg')}}">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-lg-8">
                        <div class="page-title-wrapper">
                            <h1 class="page-title mb-10">Room</h1>
                        </div>
                        <div class="breadcrumb-menu">
                            <nav aria-label="Breadcrumbs" class="breadcrumb-trail breadcrumbs">
                                <ul class="trail-items">
                                    <li class="trail-item trail-begin"><span><a href="{{url('/')}}">home</a></span></li>
                                    <li class="trail-item trail-end"><span>Room</span></li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- page title area end  -->


        <!-- rooms area starts here-->
        <section class="glo-room-area-2 glo-room-bg fix pt-110 mt-120 pb-120">
            <div class=" container">
                <div class="row">
                    <div class="col-12">
                        <div class="intro-title-wrapper text-center mb-75" data-reveal>
                            <div class="intro-subtitle">
                                <span>Rooms</span>
                            </div>
                            <div class="intro-title">
                                <h2>Types Of Room</h2>
                            </div>
                        </div>
                    </div>
                    <div class="col-12">
                        <div class="glo-room-area-wrapper">
                            <div class="row">
                                @foreach($rooms as $room)
                                    <div class="col-12 col-md-6">
                                        <div class="glo-room-details">
                                            <div class="glo-room-details-thumb glo-room-details-thumb-2"
                                                 data-reveal="left">
                                                <a href="{{route('room', $room->id)}}">
                                                    <div class="img-hover" data-tilt>
                                                        <img src="{{asset('assets/img/room/room-1.jpg')}}" alt="room">
                                                    </div>
                                                </a>
                                            </div>
                                            <div class="glo-room-details-content" data-reveal>
                                                <p>Price: &#x20a6;{{number_format($room->price, 2)}}</p>
                                                <h3><a href="{{route('room', $room->id)}}">{{$room->name}}</a></h3>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                            <div class="row">
                                <div class="col-12">
                                    <div class="glo-availibility-btn d-flex justify-content-center text-center"
                                         data-reveal>
                                        <a href="{{route('rooms')}}"
                                           class="glo-btn-anim"><span>Check Availability</span></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- rooms area ends here-->

    </main>
@endsection
