@extends('web.layouts.container')

@section('header')
    <section class="inner_header">
        <div class="inner_back">
            <img src="{{asset($detail->header_image)}}" alt="">
        </div>
        <div class="inner_info">
            <div class="container h-100">
                <div class="row align-items-end h-100">
                    <div class="col-lg-3 offset-lg-7">
                        <div class="about_head_info csr_head">
                            {!! $detail->header_description !!}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('content')
    <section class="csr section_padding pb-0">
        <div class="container">
            <div class="section_head">
                <h3>{{__('csrs.head')}}</h3>
            </div>
        </div>
        <div class="text_back m-0">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-lg-6">
                        <p>{!! $detail->description_1 !!} </p>
                    </div>
                    <div class="col-lg-6">
                        <p>{!! $detail->description_2 !!} </p>
                    </div>
                </div>
            </div>
        </div>
    </section>
    
    @if(count($page))
    <style>
            .csr_new .csr_card{
                position: relative;
            }
            /* .csr_new .csr_card::after{
                position: absolute;
                content: "";
                right: 0;
                top: 0;
                width: 70%;
                height: 100%;
                background-color: #f5f5f5;
            } */
            .csr_new .csr_card:last-of-type{
                margin-bottom: 0;
            }
            .csr_new .csr_card:nth-of-type(even)::after{
                right: auto;
                left: 0;
            }
            .csr_new .csr_card:nth-of-type(even) .row{
                flex-direction: row-reverse;
            }

            .csr_new .csr_card:nth-of-type(even) .info{
                padding-inline-start: 0;
                padding-inline-end: 30px;
            }
            
            .csr_new .csr_card .img{
                height: 350px;
                position: relative;
                z-index: 10;
                /*border: 10px solid #fff;*/
            }
            .csr_new .csr_card .img img{
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
            .csr_new .csr_card .info{
                position: relative;
                z-index: 10;
                padding-inline-start: 30px;
            }
            .csr_new .csr_card .info h3 {
                font-size: 25px;
                margin-bottom: 20px;
            }
            .csr_new .csr_card .info .text {
                font-size: 14px;
                margin-top: 10px;
                color: #000;
            }
            .csr_new .csr_card .info a {
                font-size: 16px;
                margin-top: 20px;
                /*text-decoration: underline;*/
            }
        </style>
        <section class="csr_init section_padding pb-0">
            <div class="container">
                <div class="section_head">
                    <h3>{{__('csrs.hint')}}</h3>
                </div>
                <!--<div class="content">-->
                <!--    <div class="row">-->
                <!--        @foreach($page as $csr)-->
                <!--            <div class="col-lg-4">-->
                                
                <!--                <div class="items">-->
                <!--                    <a href="{{ $csr->url ?:'#' }}" target="_blank" title="{{ strip_tags($csr->description) }}">-->
                <!--                        <div class="img">-->
                <!--                            <img src="{{asset($csr->image)}}" alt="{{ strip_tags($csr->description) }}" />-->
                <!--                        </div>-->
                <!--                        <p>{{ strip_tags($csr->description) }}</p>-->
                <!--                    </a>-->
                <!--                </div>-->
                <!--            </div>-->
                <!--        @endforeach-->
                <!--    </div>-->
                <!--</div>-->
                

                <!-- -------------- csr --------------- -->
                <section class="csr_new">
                    @foreach($page as $i=> $csr)
                    <div class="csr_card mb-5">
                        <div class="row align-items-center">
                            <div class="col-lg-6">
                                <div class="img">
                                    <img src="{{ asset($csr->image?:'assets/web/images/csr_new/'.(1+$i).'.png') }}" alt="{{ $csr->title }}">
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="info">
                                    <h3> {{ $csr->title }} </h3>
                                    <div class="text"> {{ strip_tags($csr->description) }} </div>
                                    <a href="{{ $csr->url ?:'#' }}" title="{{ $csr->title }}" target="_blank"> {{ __('csrs.visit') }} <i class="fas fa-caret-right ml-2"></i> </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </section>
            </div>
        </section>
    @endif

@endsection

@section('inner_js')

@endsection