@extends('customer.layouts.app')
@section('title')
    Pages
@endsection
@section('css')
    <link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
    <style>

        .select2-results__option--selectable {
            color: black !important;
        }
    </style>
@endsection
@section('content')
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="card" style="background: black;">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-4">
                                <ul class="list-group">
                                    @foreach ($pages as $page)
                                        <li class="list-item "><a class="@if ($item->id == $page->page_id && empty($amenity_id)) active @endif"
                                                href="{{ url('customer/page/single/' . $page->page_id) }}">{{ $page->name }}</a>
                                        </li>
                                    @endforeach
                                </ul>
                                @if (count($amenities) > 0)
                                    <h2 style="color:#d98732;">Amenities</h2>
                                    <ul class="list-group">
                                        @foreach ($amenities as $amty)
                                            <li class="list-item "><a
                                                    class="@if ($amty->id == $amenity_id) active @endif"
                                                    href="{{ url('customer/page/single/' . $item->id . '?amenity=' . $amty->id) }}">{{ $amty->name }}</a>
                                            </li>
                                        @endforeach

                                    </ul>
                                @endif
                            </div>
                            <div class="col-8">
                                @if (!empty($amenity))
                                    <input type="hidden" class="amenity_id" value="{{ $amenity->id }}">
                                    <h1 style="color:#d98732;">{{ $amenity->name }}</h1>
                                    <p>{{ $amenity->long_description }}</p>
                                    @if ($amenity->close_amenity->count() > 0)
                                        <form action="">
                                            <div class="row">
                                                <div class="col-7">
                                                    <div id="amenity_calendar"></div>
                                                </div>
                                                <div class="col-5">
                                                    <div class="form-group amenity-date-time hidden">
                                                        <label> What Time?</label>
                                                        <select class="select2 form-control amenity_date_available_time">
    
                                                        </select>
                                                    </div>
                                                    <div class="form-group how_long hidden">
                                                        <label>How Long?</label>
                                                        <select class="select2 form-control amenity_how_long">
    
                                                        </select>
                                                    </div>
                                                    <div class="form-group amenity_notes hidden">
                                                        <label>Your Notes?</label>
                                                        <textarea rows="5" class="form-control notes" name="notes"></textarea>
                                                    </div>
                                                    <div class="form-group amenity_notes hidden">
                                                        <button type="button" class="btn btn-warning text-uppercase">Make Resservation</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </form>
                                    @endif
                                @elseif(!empty($item))
                                    <h1 style="color:#d98732;">{{ $item->title }}</h1>
                                    @if ($doc != '')