@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-5 offset-lg-6">
                        <div class="history_head_info">
                            <div class="date">
                                <strong>{!! stripText($detailDescription[0] ?? null) !!}</strong>
                                <span>{!! stripText($detailDescription[1] ?? null) !!}<br> {!! stripText($detailDescription[2] ?? null) !!} </span>
                            </div>
                            <h2>{!! stripText($detailDescription[3] ?? null) !!}</h2>
                            <div class="inf">
                                <h6 class="text-uppercase">{!! stripText($detailDescription[4] ?? null) !!}</h6>
                                <p>{!! stripText($detailDescription[5] ?? null) !!}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('content')
    @if(count($page))
        <section class="our_history section_padding pb-0">
            <div class="container">
                @foreach($page as $history)
                    <div class="items">
                        <div class="row align-items-center">
                            <div class="col-lg-4">
                                <div class="img wow fadeIn" data-wow-duration="2s">
                                    <img src="{{asset($history->image)}}" alt="">
                                </div>
                            </div>
                            <div class="col-lg-1">
                                <div class="history_line wow">
                                     <span class="line_top"></span>
                                    <span class="circle"></span>
                                    <span class="line_bottom"></span>
                                </div>
                            </div>
                            <div class="col-lg-7 d-flex">
                                <div class="info wow fadeIn dashed-li" data-wow-duration="2s">
                                    <h6>{{$history->title}}</h6>
                                    {!! $history->description !!}
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </section>
    @endif

@endsection

@section('inner_js')

@endsection