@extends('vendor.layouts.master')
@section('content')
    <div class="card custom--card">
        <div class="card-body">
            <div class="row dashboard-widget-wrapper justify-content-center">
                <div class="col-lg-12 ">
                    <nav>
                        <div class="nav nav-tabs mb-4 custom--tab tab-two" id="nav-tab" role="tablist">
                            <button class="nav-link active" id="nav-property-tab" data-bs-toggle="tab" data-bs-target="#nav-property" type="button" role="tab" aria-controls="nav-property" aria-selected="true"> <i class="las la-warehouse"></i> @lang('Property Setting')</button>
                            <button class="nav-link" id="nav-investment-tab" data-bs-toggle="tab" data-bs-target="#nav-investment" type="button" role="tab" aria-controls="nav-investment" aria-selected="false"> <i class="las la-seedling"></i> @lang('Investment Setting')</button>
                            <button class="nav-link" id="nav-seo-tab" data-bs-toggle="tab" data-bs-target="#nav-seo" type="button" role="tab" aria-controls="nav-seo" aria-selected="false"> <i class="las la-cogs"></i> @lang('SEO Setting')</button>
                            <button class="nav-link" id="nav-video-tab" data-bs-toggle="tab" data-bs-target="#nav-video" type="button" role="tab" aria-controls="nav-video" aria-selected="false"> <i class="las la-photo-video"></i> @lang('Property Video')</button>
                        </div>
                    </nav>
                    <div class="tab-content" id="nav-tabContent">
                        <div class="tab-pane fade show active" id="nav-property" role="tabpanel" aria-labelledby="nav-property-tab" tabindex="0">
                            <div class="property-details-slider">
                                <div class="property-details-thumb">
                                    <span class="property-details__image" id="property-preview">
                                        <img src="{{ getImage(getFilePath('propertyThumb') . '/' . @$property->thumb_image, getFileSize('propertyThumb')) }}" alt="">
                                    </span>
                                    <div class="property-gallery">
                                        <button type="button" class="property-details__image p-0 ">
                                            <img src="{{ getImage(getFilePath('propertyThumb') . '/' . @$property->thumb_image, getFileSize('propertyThumb')) }}" alt="">
                                        </button>
                                        @foreach ($property->propertyGallery as $gallery)
                                            <button type="button" class="property-details__image p-0 ">
                                                <img src="{{ getImage(getFilePath('propertyGallery') . '/' . @$gallery->image, getFileSize('propertyGallery')) }}" alt="">
                                            </button>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                            <div class="details-content-wrapper row gy-4 justify-content-between">
                                <div class="col-xl-7">
                                    <div class="details-content-item">
                                        <h4 class="details-content-item__title">{{ __(@$property->title) }}</h4>
                                        <p class="location-text">
                                            <span class="icon">
                                                <i class="fa-solid fa-location-dot"></i>
                                            </span>
                                            {{ __(@$property->location->name) }}
                                        </p>
                                        <div class="key-words">
                                            <span class="key-icon"> <i class="fas fa-tags"></i></span>
                                            @foreach ($property->keywords ?? [] as $key => $keyword)
                                                <span class="key-word-text">{{ $key == 0 ? '' : ', ' }}{{ __($keyword) }}</span>
                                            @endforeach
                                        </div>
                                        <div class="property-details">
                                            <h4 class="property-details__title"> @lang('Property Details ')</h4>
                                            <p class="property-details__desc">
                                                @php echo $property->details @endphp
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xl-5">
                                    <div class="location-thumb">
                                        <iframe src="{{ $property->map_url }}" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="nav-investment" role="tabpanel" aria-labelledby="nav-investment-tab" tabindex="0">
                            <div class="row justify-content-center">
                                <div class="col-md-12">
                                    <div class="investment-list-wrapper">
                                        <div class="list-item">
                                            <div class="list-item__top">
                                                <span class="list-item__icon">
                                                    <i class="las la-caret-right"></i>
                                                </span>
                                                <p class="list-item__title"> @lang('Investment Type') </p>
                                            </div>
                                            <h6 class="list-item__number">
                                                {{ $property->getInvestmentType }}
                                            </h6>
                                        </div>
                                        <div class="list-item">
                                            <div class="list-item__top">
                                                <span class="list-item__icon">
                                                    <i class="las la-caret-right"></i>
                                                </span>
                                                <p class="list-item__title"> @lang('Total Apartment Size') </p>
                                            </div>
                                            <h6 class="list-item__number">
                                                {{ @$property->total_apartment_size }} @lang('Sft')
                                            </h6>
                                        </div>
                                        <div class="list-item">
                                            <div class="list-item__top">
                                                <span class="list-item__icon">
                                                    <i class="las la-caret-right"></i>
                                                </span>
                                                <p class="list-item__title"> @lang('Per Square Feet Amount') </p>
                                            </div>
                                            <h6 class="list-item__number">
                                                {{ showAmount($property->per_sft) }}
                                            </h6>
                                        </div>
                                        <div class="list-item">
                                            <div class="list-item__top">
                                                <span class="list-item__icon">
                                                    <i class="las la-caret-right"></i>
                                                </span>
                                                <p class="list-item__title"> @lang('Capital Back') </p>
                                            </div>
                                            <h6 class="list-item__number">
                                                {{ @$property->getCapitalBackStatus }}
                                            </h6>
                                        </div>
                                        <div class="list-item">
                                            <div class="list-item__top">
                                                <span class="list-item__icon">
                                                    <i class="las la-caret-right"></i>
                                                </span>
                                                <p class="list-item__title"> @lang('Profit Back') </p>
                                            </div>
                                            <h6 class="list-item__number">
                                                {{ @$property->getProfitType }}
                                            </h6>
                                        </div>
                                        <div class="list-item">
                                            <div class="list-item__top">
                                                <span class="list-item__icon">
                                                    <i class="las la-caret-right"></i>
                                                </span>
                                                <p class="list-item__title"> @lang('Profit Type') </p>
                                            </div>
                                            <h6 class="list-item__number">
                                                {{ @$property->getProfitType }}
                                            </h6>
                                        </div>
                                        <div class="list-item">
                                            <div class="list-item__top">
                                                <span class="list-item__icon">
                                                    <i class="las la-caret-right"></i>
                                                </span>
                                                <p class="list-item__title"> @lang('Profit Amount Type') </p>
                                            </div>
                                            <h6 class="list-item__number">
                                                {{ @$property->profit_amount_type == 1 ? trans('Fixed') : trans('Percentage') }}
                                            </h6>
                                        </div>
                                        <div class="list-item">
                                            <div class="list-item__top">
                                                <span class="list-item__icon">
                                                    <i class="las la-caret-right"></i>
                                                </span>
                                                <p class="list-item__title"> @lang('Profit Amount') </p>
                                            </div>
                                            <h6 class="list-item__number">
                                                {{ @$property->getProfit }}
                                            </h6>
                                        </div>
                                        <div class="list-item">
                                            <div class="list-item__top">
                                                <span class="list-item__icon">
                                                    <i class="las la-caret-right"></i>
                                                </span>
                                                <p class="list-item__title"> @lang('Profit Distribution') </p>
                                            </div>
                                            <h6 class="list-item__number">
                                                {{ @$property->profit_distribution == 1 ? trans('Manual') : trans('Auto') }}
                                            </h6>
                                        </div>
                                        <div class="list-item">
                                            <div class="list-item__top">
                                                <span class="list-item__icon">
                                                    <i class="las la-caret-right"></i>
                                                </span>
                                                <p class="list-item__title"> @lang('Profit Schedule') </p>
                                            </div>
                                            <h6 class="list-item__number">
                                                {{ @$property->getProfitSchedule }}
                                            </h6>
                                        </div>
                                        <div class="list-item">
                                            <div class="list-item__top">
                                                <span class="list-item__icon">
                                                    <i class="las la-caret-right"></i>
                                                </span>
                                                <p class="list-item__title"> @lang('Profit Return Type') </p>
                                            </div>
                                            <h6 class="list-item__number">
                                                {{ @$property->getProfitReturnType }}
                                            </h6>
                                        </div>
                                        @if ($property->profit_return_type == Status::FIXED_RETURN_DATE)
                                            <div class="list-item">
                                                <div class="list-item__top">
                                                    <span class="list-item__icon">
                                                        <i class="las la-caret-right"></i>
                                                    </span>
                                                    <p class="list-item__title">@lang('Fixed Return Date')</p>
                                                </div>
                                                <h6 class="list-item__number">
                                                    {{ showDateTime($property->fixed_return_date, 'd M Y') }}
                                                </h6>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="tab-pane fade" id="nav-seo" role="tabpanel" aria-labelledby="nav-seo-tab" tabindex="0">
                            <div class="row">
                                <div class="col-md-6">
                                    <ul class="flex-list">
                                        <li>
                                            <b>@lang('Meta Keywords')</b>
                                            <span>
                                                @if (!empty($property->seo_content->keywords))
                                                    @foreach ($property->seo_content->keywords ?? [] as $key => $keyword)
                                                        {{ $key == 0 ? '' : ', ' }} {{ $keyword }}
                                                    @endforeach
                                                @else
                                                    @lang('N/A')
                                                @endif
                                            </span>
                                        </li>
                                        <li>
                                            <b>@lang('Meta Description')</b>
                                            <span>{{ @$property->seo_content->description ?? 'N/A' }}</span>
                                        </li>
                                        <li>
                                            <b>@lang('Social Title')</b>
                                            <span>{{ @$property->seo_content->social_title ?? 'N/A' }}</span>
                                        </li>
                                        <li>
                                            <b>@lang('Social Description')</b>
                                            <span>{{ @$property->seo_content->social_description ?? 'N/A' }}</span>
                                        </li>
                                    </ul>
                                </div>
                                <div class="col-md-6">
                                    <img src="{{ getImage(getFilePath('seo') . '/' . @$property->seo_content->image, getFileSize('seo')) }}" alt="image" class="w-100 rounded-1 property-seo-image">
                                </div>
                            </div>
                        </div>

                        <div class="tab-pane fade" id="nav-video" role="tabpanel" aria-labelledby="nav-video-tab" tabindex="0">
                            <div class="row justify-content-center">
                                <div class="col-md-12 mt-4">
                                    @if (@$property->video)
                                        <iframe width="100%" height="400px" src="{{ convertToEmbedUrl(@$property->video) }}" frameborder="0" allowfullscreen></iframe>
                                    @else
                                        <div class="py-5 text-center">@lang('Video Not Found')</div>
                                    @endif
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="rejectReasonModal" role="dialog" tabindex="-1">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">
                        <span>@lang('Reason for Rejection')</span>
                    </h5>
                    <button class="close" data-bs-dismiss="modal" type="button" aria-label="Close">
                        <i class="las la-times"></i>
                    </button>
                </div>

                <div class="modal-body">
                    <p class="reason-box"></p>
                </div>
                </form>

                <div class="modal-footer">
                    <button type="button" class="btn btn--dark btn--sm" data-bs-dismiss="modal">@lang('Ok')</button>
                </div>
            </div>
        </div>
    </div>

    <x-confirmation-modal />
@endsection


@push('style-lib')
    <link rel="stylesheet" href="{{ asset('assets/vendor/css/lib/slick.css') }}">
@endpush

@push('script-lib')
    <script src="{{ asset('assets/vendor/js/lib/magnific-popup.min.js') }}"></script>
    <script src="{{ asset('assets/vendor/js/lib/slick.min.js') }}"></script>
@endpush


@push('script')
    <script>
        (function($) {
            "use strict";
            $('.reasonBtn').on('click', function() {
                var modal = $('#rejectReasonModal');
                modal.find('.reason-box').html(($(this).data('reason')));
                modal.modal('show');
            });

            $(document).on('click', '.property-gallery .property-details__image', function() {
                var image = $(this).find('img').attr('src');
                $('#property-preview').html('<img src="' + image + '" alt="">');

            })

            $(".property-gallery").slick({
                slidesToShow: 8,
                arrows: true,
                prevArrow: "<button type='button' class='slick-prev pull-left'><i class='fa fa-angle-left' aria-hidden='true'></i></button>",
                nextArrow: "<button type='button' class='slick-next pull-right'><i class='fa fa-angle-right' aria-hidden='true'></i></button>",


                responsive: [{
                        breakpoint: 768,
                        settings: {
                            arrows: false,
                            centerMode: true,
                            centerPadding: '40px',
                            slidesToShow: 3
                        }
                    },
                    {
                        breakpoint: 480,
                        settings: {
                            arrows: false,
                            centerMode: true,
                            centerPadding: '40px',
                            slidesToShow: 1
                        }
                    }
                ]
            })

        })(jQuery);
    </script>
@endpush


@push('style')
    <style>
        .property-seo-image {
            border: 1px solid #e7e7e7;
        }

        .flex-list {
            border: 1px solid #e7e7e7;
            border-radius: 5px;
        }

        .flex-list li {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 5px;
            border-bottom: 1px solid #e7e7e7;
            padding: 10px;
            flex-wrap: wrap;
        }

        .flex-list li b {
            font-weight: 600;
        }

        .flex-list li:last-child {
            border-bottom: none;
        }

        .nav-tabs .nav-item.show .nav-link,
        .nav-tabs .nav-link.active {
            color: #212529c9;
            background-color: #fff;
            border-color: #dee2e6 #dee2e6 #fff;
        }

        .nav-tabs .nav-link {
            color: #212529c9;
        }

        @media(max-width: 380px) {
            .nav-link {
                padding: 8px 7px;
                font-size: 12px;
            }
        }

        .property-details-slider {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
        }

        @media screen and (max-width: 575px) {
            .property-details-slider {
                -webkit-box-orient: vertical;
                -webkit-box-direction: normal;
                -ms-flex-direction: column;
                flex-direction: column;
            }
        }

        .property-details-slider .slick-list {
            padding: 0 !important;
        }

        .property-details-thumb {
            width: 100%;
            margin: 0 !important;
            text-align: center;
        }

        @media screen and (max-width: 575px) {
            .property-details-thumb {
                width: 100%;
            }
        }

        @media screen and (max-width: 991px) {
            .property-details__thumb .slick-track {
                text-align: center;
            }
        }

        .property-details__image {
            background: #f5f5f5;
            border-radius: 10px;
            overflow: hidden;
        }

        .property-details__image img {
            width: 100%;
            -o-object-fit: cover;
            object-fit: cover;
            height: 385px;
            border-radius: 8px
        }

        .property-gallery {
            margin-top: 10px;
        }

        .property-gallery .property-details__image {
            border-radius: 4px;
            margin-inline: 5px;
            border: 1px solid #000;
        }

        .property-gallery .property-details__image img {
            height: 80px;
            object-fit: cover;
            border-radius: 5px;

        }

        .property-details-gallery {
            width: 180px;
            display: grid;
            grid-template-rows: repeat(3, 120px);
            gap: 10px;
            margin-left: 15px;
        }

        @media screen and (max-width: 575px) {
            .property-details-gallery {
                width: 100%;
                grid-template-rows: unset;
                gap: 10px;
                grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
                margin-left: 0;
            }
        }

        @media screen and (max-width: 575px) and (max-width: 424px) {
            .property-details-gallery {
                grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
            }
        }

        .property-details-gallery .popup-img {
            position: relative;
            overflow: hidden;
            cursor: pointer;
            -webkit-transition: 0.3s linear;
            transition: 0.3s linear;
            width: 180px !important;
            border-radius: 10px;
        }

        @media screen and (max-width: 767px) {
            .property-details-gallery .popup-img {
                width: 160px !important;
            }
        }

        @media screen and (max-width: 575px) {
            .property-details-gallery .popup-img {
                width: 100% !important;
                height: 100% !important;
            }

            .slick-initialized.slick-slider {
                margin: 0 !important;
            }
        }

        .property-details-gallery .popup-img img {
            width: 100%;
            height: 100%;
            -webkit-transition: 0.3s linear;
            transition: 0.3s linear;
        }

        .property-details-gallery .popup-img .text-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            color: hsl(var(--white));
            background: hsl(var(--black)/0.4);
        }

        .slick-arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            z-index: 1;
            width: 30px;
            height: 30px;
            font-size: 20px;
            color: hsl(var(--white));
            border: 1px solid currentColor;
            background: #e7e7e7;
            color: #1f1f1f;
            transition: all 0.3s;

        }

        .slick-arrow::before {
            display: none;
        }

        .slick-arrow:hover {
            background: hsl(var(--base));
            color: hsl(var(--white))
        }

        .slick-arrow:focus {
            background: #e7e7e7;
            color: #1f1f1f;
        }

        .slick-prev {
            left: 20px;
        }

        .slick-next {
            right: 20px;
        }

        .tab-two .nav-link.active {
            background: hsl(var(--base));
            color: hsl(var(--white));
            border: 0;
        }

        .tab-two .nav-link {
            padding: 10px 20px;
        }

        @media screen and (max-width: 1199px) {
            .tab-two .nav-link {
                padding: 7px 12px !important;
                font-size: 14px;
            }
        }

        .tab-two {
            justify-content: flex-start;
            border-radius: 0;
        }

        .details-content-wrapper {
            margin-top: 15px;
        }

        .details-content-item__title {
            margin-bottom: 8px;
        }

        .location-text {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .location-text .icon {
            color: hsl(var(--base));
        }

        .key-words {
            display: flex;
            align-items: center;
            margin-top: 5px;
            flex-wrap: wrap;
            gap: 5px;
        }

        .key-icon {
            color: hsl(var(--base));
            margin-right: 10px;
        }


        .property-details {
            border-top: 1px solid hsl(var(--black)/.1);
            margin-top: 20px;
            padding-top: 20px;
        }

        .property-details__title {
            margin-bottom: 10px;
        }

        .location-thumb {
            overflow: hidden;
            flex-shrink: 0;
            border-radius: 8px;
            height: 250px;
        }

        .location-thumb iframe {
            width: 100%;
            height: 100%;
        }

        .investment-list-wrapper {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 16px;
        }

        .list-item {
            background: hsl(var(--white));
            padding: 10px;
            border-radius: 6px;
            box-shadow: 0 0 5px hsl(var(--black)/.04);
            position: relative;
            z-index: 1;
            overflow: hidden;
            transition: 0.3s linear;
        }

        .list-item::after {
            position: absolute;
            content: "";
            right: 0;
            bottom: 0;
            width: 20px;
            height: 20px;
            background: hsl(var(--base));
            filter: blur(50px);
            z-index: -1;
            transition: 0.3s linear;
        }

        .list-item:hover::after {
            width: 30px;
            height: 30px;
            filter: blur(30px);
        }

        .list-item__top {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 5px;
        }

        .list-item__number {
            margin-bottom: 0;
            font-size: 16px;
        }
    </style>
@endpush
