:root {
    --brand-main-color: var(--main-color);
    --text-white: #ffffff;
}

body {
    background-color: #f0f0f0;
    //  background-color: #f5f5f5;
}

section{
    scroll-margin-top: 15px;
}
.cursor-zoom-in {
    cursor: zoom-in;
}

.section-title {
    font-weight: 600;
    font-size: 18px;
}

header {
    h1 {
        font-size: clamp(1rem, 0.8239rem + 0.5634vw, 1.5rem);
        font-weight: 600;
    }

    #more-images {
        .owl-nav {
            display: block !important;
        }
        svg {
            width: 18px;
            height: 18px;
            fill: var(--text-white);
        }
        .owl-prev,
        .owl-next {
            position: absolute;
            top: calc(50% - 25px);
            background-color: var(--brand-main-color);
            padding: 0px !important;
            height: 36px;
            width: 36px;
            border-radius: 50%;
        }
        .owl-prev {
            left: -13px;
        }
        .owl-next {
            right: -13px;
        }
    }
}

///////////////////////////////////

#price {
    margin-top: -10px;
    font-size: 28px;
}

.currency-icon {
    svg {
        fill: #28a745 !important;
        width: 24px;
        height: 24px;
    }
}

//////////////////////////////////

.details {
    .detail-item {
        //   text-align: center;
    }
    .icon {
        font-weight: 500;
        color: rgb(87, 87, 87);
        svg,
        img {
            width: 22px;
            height: 22px;
        }
    }
    .value {
        font-weight: 500;
        display: inline-block;
    }
}

/////////////////////////////////
#location {
    iframe {
        height: 300px !important;
        width: 100% !important;
        border-radius: var(--border-radius);
        margin-top: 20px;
    }
}

/////////////////////////////////

#features,#amenities{
    .icon {
        background-color: var(--second-color);
        padding: 5px;
        display: inline-block;
        position: relative;
        width: 18px;
        height: 18px;
        border-radius: 3px;
        svg {
            fill: #fff;
            width: 14px;
            height: 14px;
            position: absolute;
            right: 2px;
            top: 2px;
        }
    }
}















@extends('main.layouts.master')
@section('title', $row->title)
@section('css')
    <link rel="stylesheet" href="{{ asset('assets/plugins/owl-carousel/owl.carousel.min.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/css/pages/property/show.css') }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.css" />
@endsection
@section('content')


    <header id="gallery">
        <div class="container">

            <h1 class="my-4">{{ $row->title }}</h1>

            <div class="box mb-2 p-1 shadow-none">
                <a href="{{ propertyImage($row->main_image, 'large') }}" data-fancybox="group" data-caption="">
                    <img class="img-fluid cursor-zoom-in radius" src="{{ propertyImage($row->main_image, 'large') }}"
                        alt="">
                </a>
            </div><!-- end box -->

            @if (count($row->attachments) != 0)
                <section id="more-images">
                    <div class="owl-carousel">
                        @foreach ($row->attachments as $img)
                            <div class="item">
                                <a href="{{ propertyImage('attachments/' . $img->attachment_name, 'large') }}"
                                    data-fancybox="group" data-caption="">
                                    <div class="box p-1 shadow-none">
                                        <img class="radius "
                                            src="{{ propertyImage('attachments/' . $img->attachment_name, 'small') }}"
                                            loading="lazy">
                                    </div><!-- end box -->
                                </a>
                            </div>
                        @endforeach
                    </div>
                </section><!-- end more-images -->
            @endif


        </div>
    </header><!-- header -->

    <section id="price">
        <div class="container">
            <div class="text-success font-weight-bold">
                <span class="d-inline-block">{{ number_format($row->price) }}</span>
                <span class="currency-icon">
                    {!! currency_icon() !!}
                </span>
            </div>
        </div><!-- container -->
    </section><!-- price -->

    <section id="desc">
        <div class="container mt-2">
            <div class="box px-0">
                <h4 class="section-title px-4">الوصف</h4>
                <hr>
                <div class="px-4">
                    @php
                        $desc = $row->description;
                        $short = mb_substr($desc, 0, 150);
                        $hasMore = mb_strlen($desc) > 150;
                    @endphp

                    {!! nl2br(e($short)) !!}

                    @if ($hasMore)
                        <span class="dots">...</span>
                        <span class="more d-none">{!! nl2br(e(mb_substr($desc, 150))) !!}</span>
                        <a href="javascript:void(0)" class="show-more">عرض المزيد</a>
                    @endif
                </div><!-- px -->
            </div><!-- box -->
        </div><!-- container -->
    </section>

    <section id="details" class="details">
        <div class="container">
            <div class="box px-0">
                <h4 class="section-title px-4">التفاصيل</h4>
                <hr>
                <div class="px-4">
                    <div class="row">

                        @foreach ($details as $item)
                            @if ($item['value'])
                                <div class="col-md-4 col-sm-6 col-12 my-2">
                                    <div class="detail-item">

                                        <span class="icon">
                                            {!! $item['icon'] !!}
                                            <span class="px-1">{{ $item['name'] }}</span> :
                                        </span>

                                        <span class="value">
                                            <span>{{ $item['value'] . $item['text'] }}</span>
                                        </span>

                                    </div><!-- detail-item -->
                                </div><!-- col -->
                            @endif
                        @endforeach


                    </div><!-- row -->
                </div><!-- px -->
            </div><!-- box -->
        </div><!-- container -->
    </section>

    <section id="location" class="details">
        <div class="container mt-4">
            <div class="box px-0">
                <h4 class="section-title px-4">الموقع</h4>
                <hr>
                <div style="margin-top: -10px" class="px-4">

                    @if ($row->google_map_iframe)
                        {!! $row->google_map_iframe !!}
                    @endif

                </div><!-- px -->
            </div><!-- box -->
        </div><!-- container -->
    </section>

    <section id="features">
        <div class="container mt-2">
            <div class="box px-0">
                <h4 class="section-title px-4">المميزات</h4>
                <hr>
                <div class="px-4">
                    <div class="row">
                        @foreach ($row->features as $feature)
                            <div class="col-md-4 col-6 mb-2">
                                <div class="d-flex align-items-center">
                                    <span class="icon">
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
                                            <path
                                                d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z" />
                                        </svg>
                                    </span>
                                    <span class="pr-2 font-weight-500">{{ $feature->name }}</span>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div><!-- px -->
            </div><!-- container -->
    </section>

    <section id="amenities">
        <div class="container mt-2">
            <div class="box px-0">
                <h4 class="section-title px-4">وسائل الراحة</h4>
                <hr>
                <div class="px-4">
                    <div class="row">
                        @foreach ($row->amenities as $amenitie)
                            <div class="col-md-4 col-6 mb-2">
                                <div class="d-flex align-items-center">
                                    <span class="icon">
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
                                            <path
                                                d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z" />
                                        </svg>
                                    </span>
                                    <span class="pr-2 font-weight-500">{{ $amenitie->name }}</span>
                                </div>
                            </div>
                        @endforeach
                    </div>

                </div><!-- box -->
            </div><!-- container -->
    </section>


@endsection
@section('js')

    <script src="{{ asset('assets/css/pages/property/show.css') }}"></script>

    <script src="{{ asset('assets/plugins/owl-carousel/owl.carousel.min.js') }}"></script>
    <script>
        $(document).ready(function() {

            $(document).on("click", ".show-more", function() {
                let parent = $(this).closest(".px-4");
                parent.find(".dots").hide();
                parent.find(".more").removeClass("d-none");
                $(this).text("عرض أقل").removeClass("show-more").addClass("show-less");
            });

            $(document).on("click", ".show-less", function() {
                let parent = $(this).closest(".px-4");
                parent.find(".dots").show();
                parent.find(".more").addClass("d-none");
                $(this).text("عرض المزيد").removeClass("show-less").addClass("show-more");
            });

        });


        $("#more-images .owl-carousel").owlCarousel({
            loop: false,
            margin: 5,
            nav: false,
            dots: false,
            autoplay: true,
            autoplayTimeout: 4000,
            autoplaySpeed: 1000,
            smartSpeed: 1000,
            autoplayHoverPause: true,
            rtl: true,
            responsive: {
                0: {
                    items: 2,
                },
                500: {
                    items: 3,
                },
                1000: {
                    items: 6,
                },
            },
        });
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.js"></script>

@endsection
