@extends('front.layout')
@section('header')
    @php
        $content = changeForm($page->body);
    @endphp
    <link rel="stylesheet" href="/front/assets/css/pages/about.css" />
    <link rel="stylesheet" href="/front/assets/css/pages/contact.css" />
    <link rel="stylesheet" href="/front/assets/css/pages/index.css" />
    <title>{{ $page->seo_title }}</title>
    <meta name="description" content="{{ $page->meta_description }}">
    <meta name="keyword" content="{{ $page->meta_keyword }}">
    <link rel="canonical" href="{{ $page->canonical ?: str_replace('http://', 'https://', Request::url()) }}">
    <style>
        .order-sec{
            font-size: 16px;
            font-weight: 300;
            color: #1E1E1E;
            line-height: 32px;
        }
        @media screen and (min-width: 1024px) {
            .order-sec{
                margin: 0 150px;
            }

        }

        @media screen and (min-width: 768px) {
            .image-banner::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 70%;
                background: linear-gradient(to bottom, black 0%, rgba(0, 0, 0, 0.5) 50%, transparent 100%);
                pointer-events: none;
            }
            .image-banner img{
                height: 400px;
                object-fit: cover;
            }
        }

        @media screen and (max-width: 768px) {
            .image-banner img{
                height: 490px;
                object-fit: cover;
                width: 100% !important;
            }
        }

        p{
            font-size: 16px;
            font-weight: 300;
            color: #1E1E1E;
            line-height: 32px;
        }

        .bout-hero__content h1 {
            font-weight: 800;
            font-size: 32px;
            line-height: 40px;
            border-bottom: 3px solid #FF9A1E;
            padding-bottom: 8px;
            display: inline-block;
        }

        .bout-hero__content h2 {
            font-weight: 600;
            font-size: 28px;
            line-height: 30px;
            border-bottom: 3px solid #FF9A1E;
            padding-bottom: 8px;
            display: inline-block;
        }
        @media screen and (max-width: 767px) {
            .bout-hero__content img{
                width: 100%;
                height: auto;
            }
        }





        .section-title h1 {
            font-weight: 800;
            font-size: 28px;
            line-height: 40px;
            border-bottom: 3px solid #FF9A1E;
            padding-bottom: 8px;
            display: inline-block;
        }

        .section-title h2 {
            font-weight: 600;
            font-size: 24px;
            line-height: 30px;
            border-bottom: 3px solid #FF9A1E;
            padding-bottom: 8px;
            display: inline-block;
        }



        .breadcrumbs {
            padding: 0 5px 0 5px;
            border-radius: 2px;
            margin-bottom: 15px;
            display: flex !important;
        }

        @media only screen and (max-width: 768px) {
            .section-title {
                span {
                    font-size: 11px !important;
                }
            }
        }

        .main-menu > ul > li {
            > a {
                color: white;
            }
        }
        .contact-us-ways__content header img{
            width: 38px !important;
            height: 38px !important;
        }

        .simple-text h2{
            font-size: 28px;
            font-weight: 800;
            margin-top: 60px;
            margin-bottom: 60px;
            color: #1E1E1E;
            text-align: center;
            display: block;
            border-bottom: unset !important;
        }
        .image-banner h1{
            font-size: 40px !important;
        }
        @media screen and (max-width: 768px) {
            .about-companey {
                margin-top: 20px;
            }
        }

        @media screen and (max-width: 768px) {
            .section-title h1{
                font-size: 20px !important;
            }
        }
        .home-news__minimal-section img, .home-news__hero img{
            height: auto !important;
        }
    </style>
@endsection
@section('content')

    <div class="image-banner">
        @php

            if ($page instanceof \App\Models\Page){
                $desktopSrc = $page->image ?? $page->mobile_src ?? '6.jpg';
                $mobileSrc = $page->mobile_src ?? $page->image ?? '4.png';
            }else{
                $desktopSrc = '6.jpg';
                $mobileSrc =  '4.png';
            }

        @endphp

        <picture>
            <source srcset="/{{ $mobileSrc }}" media="(max-width: 600px)">
            <source srcset="/{{ $desktopSrc }}">
            <img src="/{{ $desktopSrc }}" class="d-block w-100" alt="{{ $page->title }}">
        </picture>

        @if(!$page instanceof \App\Models\News)
            <div>
                <h1>
                    <div class="container">{{ $page->title }}</div>
                </h1>
            </div>
        @endif

    </div>
    <div class="container p-2 pt-0">
        @if($page instanceof \App\Models\News)

        <div class="about-companey">
            <header class="section-title row">
                <div class="col-md-8 col-12">
                    <div>
                        <h1>
                            {{ $page->title }}
                        </h1>
                        @if(!empty($page->abstract))
                        <p class="mt-2" style="opacity:0.85">{{ $page->abstract }}</p>
                        @endif
                    </div>
                </div>
                <div class="col-md-4 col-12 px-3">
                    <img  src="/{{ $page->image }}" class="d-block w-100" style="border-radius: 6px" height="auto" alt="{{ $page->title }}" />
                </div>


            </header>
        </div>
        @endif


        <div class="bout-hero__content px-3 @if(!($page instanceof \App\Models\News)) mt-4 @endif">
            {!! $content !!}
        </div>


            @if(($page instanceof \App\Models\News))
                <hr style="width: 100%">
                <div class="about-companey" style="margin-top: 30px">
                    <header class="section-title row">
                        <div class="col-12">
                            <div class="mb-0">
                                <ol class="breadcrumbs" itemscope="" itemtype="http://schema.org/BreadcrumbList">
                                    <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
                                        <a itemscope="" itemtype="http://schema.org/Thing" itemprop="item" itemid="/" href="/" class="d-flex" >
                                            <span itemprop="name" style="opacity: 0.7">{{ trans('translate.main_page') }}</span>
                                            <span class="mx-2">/</span>
                                        </a>
                                        <meta itemprop="position" content="1" />
                                    </li>
                                    <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
                                        <a itemscope="" itemtype="http://schema.org/Thing" itemprop="item" itemid="/news" href="/news/" class="d-flex">
                                            <span itemprop="name" style="opacity: 0.7">{{ trans('translate.news_and_articles') }}</span>
                                            <span class="mx-2">/</span>
                                        </a>
                                        <meta itemprop="position" content="2" />
                                    </li>
                                    <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
                                        <span itemprop="name" >{{ $page->title }}</span>
                                        <meta itemprop="position" content="3" />
                                    </li>
                                </ol>
                            </div>
                            <div class="d-flex">
                                @if(@$page->category->title)
                                    <div class="d-flex mx-2">
                                        <span><i class="fas fa-tags"></i> دسته بندی:</span>
                                        <span class="mx-1">{{ $page->category->title }}</span>
                                    </div>
                                @endif
                                <div class="d-flex mx-2">
                                    <span><i class="fas fa-calendar"></i> تاریخ انتشار:</span>
                                    <span class="mx-1">
                                        {{ app()->getLocale() != 'fa' ? \Carbon\Carbon::parse(@$page->published_at ?? $page->created_at)->format('Y-m-d') : jdate(@$page->published_at ?? $page->created_at)->format('Y-m-d') }}
                                    </span>
                                </div>
{{--                                <div class="d-flex mx-2">--}}
{{--                                    <span><i class="fas fa-eye"></i> تعداد بازدید:</span>--}}
{{--                                    <span class="mx-1">{{ $page->view }}</span>--}}
{{--                                </div>--}}
                            </div>
                        </div>
                    </header>
                </div>

                <hr style="width: 100%">

                <header class="section-title mb-3">
                    <div>
                        <h2>
                            {{ __('translate.related_news') }}
                        </h2>
                    </div>
                </header>
                <div class="row justify-content-between">
                    @foreach($newsRelated as $item)
                    <div class="col-12 col-md-6">
                            <a href="{{ getFirstSegment() }}{{ $item->slug }}" class="home-news__minimal-section d-flex align-items-center justify-content-between">
                                <img src="/{{ $item->image }}" width="118" height="133" class="d-block" alt="title" />

                                <div class="home-news__minimal-section__content flex-grow-1">
                                    <h3>
                                        {{ $item->title }}
                                    </h3>

                                    <p>
                                        {{ $item->meta_description }}
                                    </p>

                                    <div class="d-flex align-items-center justify-content-between">
                                        @if(@$item->category->title)
                                            <button class="site-btn btn-no-hover" href="/index.html">
                                                {{ $item->category->title }}
                                            </button>
                                        @endif

                                    </div>
                                </div>
                            </a>
                    </div>
                    @endforeach
                </div>
            @endif
    </div>
@endsection