@extends('frontend.layouts.app')
@section('page_content')
<link rel='stylesheet' href="{{asset('frontend/vendor/slick/slick.css')}}">
<section class="page_banner">
    <div class="project_banner">
        <div class="image">
            <img src="{{ asset($project->banner_image ?? 'frontend/images/project_banner.png') }}">
        </div>
        <div class="project_banner_desc">
            <div class="container">
                <div class="row">
                    <div class="col-12 d_flex">
                        <div class="left">
                            <h2>{{LangTranslate::translate($project->name, $project->ar_name)}}</h2>
                            <p>{{LangTranslate::translate($project->location, $project->ar_location)}}</p>
                        </div>
                        <div class="right">
                            <a href="#intro"><i class="fa fa-angle-down"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>    
<div class="inner_page_with_banner">
    <section class="breadcrumb_sec container">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{route('index')}}">Home</a></li>
            <li class="breadcrumb-item"><a href="{{route('projects')}}">Projects</a></li>
            <li class="breadcrumb-item active">{{LangTranslate::translate($project->name, $project->ar_name)}}</li>
        </ol>
    </section>
    <section class="main_content">
        <div class="project_intro pt-3 pb-5" id="intro">
            <div class="container pb-lg-3">
                <div class="row">
                    <div class="col-lg-8">
                        <h2 class="pr-lg-5">{{LangTranslate::translate($project->head_line_title ?? '', $project->ar_head_line_title ?? '')}}</h2>
                        <p class="pr-lg-5">{!!LangTranslate::translate($project->description ?? '', $project->ar_description ?? '')!!}</p>
                        @if(count($project->specifications) > 0)
                            <div class="row d-flex">
                                @foreach($project->specifications as $key => $specification)
                                    @if($specification->theme == 'green-bg')
                                        <div class="col-md-4">
                                            <div class="box {{$specification->theme ?? 'green-bg'}}">
                                                <div>
                                                    <p class="{{$specification->title_font_size ?? ''}}">{{LangTranslate::translate($specification->title ?? '', $specification->ar_title ?? '')}}</p>
                                                    <span class="{{$specification->name_font_size ?? ''}} lg">{{LangTranslate::translate($specification->name ?? '', $specification->ar_name ?? '')}}</span>
                                                    <p class="{{$specification->value_font_size ?? ''}} caption">{{LangTranslate::translate($specification->value ?? '',$specification->ar_value ?? '')}}</p>
                                                </div>
                                                <div class="icon">
                                                    <img src="{{asset('ledray_icons/'.$specification->icon)}}">
                                                </div>
                                            </div>
                                        </div>
                                    @else
                                        <div class="col-md-4">
                                            <div class="box {{$specification->theme ?? 'white-bg'}}">
                                                <div>
                                                    <span class="{{$specification->title_font_size ?? ''}} sm">{{LangTranslate::translate($specification->title ?? '', $specification->ar_title ?? '')}}</span>
                                                    <p class="{{$specification->name_font_size ?? ''}}">{{LangTranslate::translate($specification->name ?? '', $specification->ar_name ?? '')}}</p>
                                                    <p class="{{$specification->value_font_size ?? ''}}">{{LangTranslate::translate($specification->value ?? '',$specification->ar_value ?? '')}}</p>
                                                </div>
                                                <div class="icon">
                                                    <img src="{{asset('ledray_icons/'.$specification->icon)}}">
                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                @endforeach
                            </div>
                        @endif
                        
                    </div>
                </div>
            </div>
        </div>

        @if(count($project->galleryImages) > 0)
            <div class="gray_bg py-5">
                <div class="container py-lg-5">
                    <div class="row">
                        <div class="col-12">
                            <div class="project-slider-for slider">
                                @foreach($project->galleryImages as $gkey => $galleryImage)
                                    <div class="main_img">
                                        <img src="{{asset($galleryImage->image)}}">
                                    </div>
                                @endforeach
                            </div>
                            <div class="project_slider-nav slider">
                                @foreach($project->galleryImages as $ikey => $igalleryImage)
                                    <div class="item-slick">
                                        <img src="{{asset($igalleryImage->image)}}">
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endif
    </section>
</div>  
    <script src="{{asset('frontend/vendor/slick/slick.min.js')}}"></script>
    <script src="{{asset('frontend/js/slick_custom.js')}}"></script>
    <script>
        $(window).scroll(function () {
            var scroll = $(window).scrollTop();
            if (scroll >= 120) {
                $(".desktop_menu").addClass("desktop_menu_fixed");
            } else {
                $(".desktop_menu").removeClass("desktop_menu_fixed");
            }
        });
    
        $('.project-slider-for').slick({
            slidesToShow: 1,
            slidesToScroll: 1,
            fade: true, 
            asNavFor: '.project_slider-nav',
            arrows: true, 
            nextArrow: '<a class="prev"><i class="icon-right-arrow"></i></a>',
            prevArrow: '<a class="next"><i class="icon-left-arrow"></i></a>',   

        });

        // $('.project_slider-nav').slick({
        //     slidesToShow: 5,
        //     slidesToScroll: 1,
        //     asNavFor: '.project-slider-for',
        //     dots: false,
        //     centerMode: true,
        //     focusOnSelect: true,
        //     arrows: false,
        //     variableWidth: false,
        //     
        // });
        $('.project_slider-nav').slick({
            slidesToShow: 5,
            slidesToScroll: 1,
            vertical:true,
            asNavFor: '.project-slider-for',
            dots: false,
            arrows: false, 
            focusOnSelect: true,
            verticalSwiping:true,
        });
    </script>
@endsection