@extends('web.layouts.layout')
@section('content')

    <main>

        <!-- Start pg_header -->
        @include('web.layouts.header')

            <!-- ---------- pg_news ----------- -->
            <section class="pg_news section_padding">
                <div class="container">
                    <h2 class="mb-4"> {{__('web.news')}} </h2>
                    
                    @if(count($articles) == 0)
                    <div class="alert alert-warning rounded-0 mt-4 text-center fs-4" role="alert">
                        {{__('web.not_exist_news')}}
                    </div>
                    @else
                    <div class="news">
                        @foreach($articles as $row)
                            <div class="post_item">
                                <div class="post_card">
                                    <div class="img">
                                        <img src="{{$row->url_image}}" alt="" class="img_cover">
                                    </div>
                                    <div class="info">
                                        <div class="date mb-3 small">
                                            <span class="icon me-1 subColor"> <i class="far fa-calendar-day"></i> </span>
                                            <span> {{$row->date_time}} </span>
                                        </div>
                                        <h6 class="title"> {{$row->name}} </h6>
                                        <span class="plus"> <i class="far fa-plus"></i> </span>
                                    </div>
                                </div>
                                <div class="post_details">
                                    <div class="container">
                                        <div class="cont">
                                            <div class="row gx-lg-5 align-items-center">
                                                <div class="col-lg-4">
                                                    <div class="img">
                                                        <img src="{{$row->url_image}}" alt="">
                                                    </div>
                                                </div>
                                                <div class="col-lg-8">
                                                    <div class="info">
                                                        <h4> {{$row->name}} </h4>
                                                        <div class="date mb-3 small">
                                                            <span class="icon me-1 subColor"> <i class="far fa-calendar-day"></i> </span>
                                                            <span> {{$row->date_time}} </span>
                                                        </div>
                                                        <div class="text">
                                                            {!! $row->description !!}
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <span class="clss"><i class="fal fa-times"></i></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                    @endif
                </div>
            </section>

            <!-- ---------- approach ----------- -->


        </main>


    </main>


@section('inject_js')

    <script>

        // ---------- company_info -----------
        $(".post_item .post_card").on("click", function() {
            var infoOfset = $(this).parent().offset().left,
                contOfset = $(".container").offset().left;
            $(this).addClass("card_plus").parent().siblings().find(".post_card").removeClass("card_plus");

            $(this).siblings(".post_details").css({
                left: -infoOfset
            });

            $(".post_details").removeClass("show");
            $(this).siblings(".post_details").addClass("show");
        })

        $(".post_details .clss").on("click", function() {
            $(".post_details").removeClass("show");
            $(".post_card").removeClass("card_plus");
        })

        $(".post_item").delegate(".card_plus .plus","click", function() {
            $(".post_details").removeClass("show");
            $(".post_card").removeClass("card_plus");
        })

    </script>

@endsection
