@extends('frontend.layouts.master')

@section('content')
<style>

    #toast-container > .toast {
    font-size: 14px;
    padding: 15px 20px 15px 50px;
}
    .toast-top-right {
        right: 12px;
        top: 12px;
    }
</style>
<div class="banner gmcs-banner">
    <section class="banner-sec">
        <img src="{{asset('frontend/images/hero-2.jpg')}}" class="img-fluid" alt="">
        {{-- <div class="container">
            <nav aria-label="breadcrumb" class="page-menu">
                <h2>{{$facility->title}}</h2>
                <ul class="breadcrumb">
                    <li><a href="{{ route('home') }}">Home</a></li>
                    <li><a href="{{ route('facilities.index') }}">Facilities & Services</a></li>
                    <li>{{$facility->title}}</li>
                </ul>
            </nav>
        </div> --}}
        <div class="container">
            <nav aria-label="breadcrumb" class="page-menu">
                <h2>{{$facility->title}}</h2>
                <ul class="breadcrumb">
                    <li><a href="{{route('frontend.home')}}">Home</a></li>
                    <li><a href="{{route('frontend.facilities')}}">Faciliteis & Services</a></li>
                    <li>{{$facility->title}}</li>
                </ul>
            </nav>
        </div>
    </section>
</div>
<div class="single-facility gmcs-sf">
    <div class="container">
        <section class="sf-sec">
            <div class="section-intro">
                <div class="section-title">
                    <h2>{{$facility->title}}</h2>
                </div>
            </div>
            <article>
                <p>{!! strip_tags($facility->first_description) !!}</p>
                <div class="facility-gallery my-5">
                    <div class="row">
                        <div class="col-md-3 col-6">
                            <figure>
                                <a href="{{ asset('frontend/images/library.png') }}" data-fancybox="images-preview">
                                    <img src="{{ Storage::url($facility->first_image) }}" class="img-fluid" alt="">
                                </a>
                            </figure>
                        </div>
                        <div class="col-md-3 col-6">
                            <figure>
                                <a href="{{ asset('frontend/images/news2.jpg') }}" data-fancybox="images-preview">
                                    <img src="{{ Storage::url($facility->second_image) }}" class="img-fluid" alt="">
                                </a>
                            </figure>
                        </div>
                        <div class="col-md-3 col-6">
                            <figure>
                                <a href="{{ asset('frontend/images/event.jpg') }}" data-fancybox="images-preview">
                                    <img src="{{ Storage::url($facility->third_image) }}" class="img-fluid" alt="">
                                </a>
                            </figure>
                        </div>
                        <div class="col-md-3 col-6">
                            <figure>
                                <a href="{{ asset('frontend/images/story1.png') }}" data-fancybox="images-preview">
                                    <img src="{{ Storage::url($facility->fourth_image) }}" class="img-fluid" alt="">
                                </a>
                            </figure>
                        </div>
                    </div>
                </div>
                <p>{!! strip_tags($facility->second_description) !!}</p>
            </article>
        </section>
    </div>
</div>

@include('frontend.includes.quickcontact')

@endsection


@section('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

{{-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> --}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<script>
    $(document).ready(function() {
        @if(session('success'))
            toastr.options = {
                "closeButton": true,
                "debug": false,
                "newestOnTop": false,
                "progressBar": true,
                "positionClass": "toast-top-right",
                "preventDuplicates": true,
                "onclick": null,
                "showDuration": "300",
                "hideDuration": "1000",
                "timeOut": "7000", // Toast will be visible for 7 seconds
                "extendedTimeOut": "1000",
                "showEasing": "swing",
                "hideEasing": "linear",
                "showMethod": "fadeIn",
                "hideMethod": "fadeOut"
            };
            toastr.success("{{ session('success') }}");
            $('html, body').animate({
                scrollTop: $(".quick-contact").offset().top
            }, 1000);
        @endif
    });
</script>
{{-- @section('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>

<script>
    $(document).ready(function() {
        @if(session('success'))
            toastr.options = {
                "closeButton": true,
                "debug": false,
                "newestOnTop": false,
                "progressBar": true,
                "positionClass": "toast-top-center",
                "preventDuplicates": true,
                "onclick": null,
                "showDuration": "300",
                "hideDuration": "1000",
                "timeOut": "5000",
                "extendedTimeOut": "1000",
                "showEasing": "swing",
                "hideEasing": "linear",
                "showMethod": "fadeIn",
                "hideMethod": "fadeOut"
            };
            toastr.success("{{ session('success') }}");
            $('html, body').animate({
                scrollTop: $(".quick-contact").offset().top
            }, 1000);
        @endif
    });
</script> --}}
@endsection