@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($news->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($news->title ?? '', $news->ar_title ?? '')}}</h2>
                            <p>{!!Str::limit(LangTranslate::translate($news->short_description ?? '',$news->ar_short_description ?? ''),50)!!}</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('news')}}">News</a></li>
            <li class="breadcrumb-item active">{{LangTranslate::translate($news->title ?? '', $news->ar_title ?? '')}}</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($news->title ?? '', $news->ar_title ?? '')}}</h2>
                        <p class="pr-lg-5">{!! LangTranslate::translate($news->long_description ?? '', $news->ar_long_description ?? '') !!}</p>                    
                    </div>
                </div>
            </div>
        </div>
    </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