@extends('frontend::layouts.subpage')

@section('content')
    <div class="subpage-content">
        <div class="breadcrumb breadcrumb-section">
            <div class="container">
                <nav aria-label="breadcrumb">
                    <h3 class="inline breadcrumb-title">{{ !empty($data['menu']['name']) ? $data['menu']['name'] : '' }}</h3>
                    <ol class="breadcrumb">
                        <li><a href="{{ mwz_route('frontend.index') }}"><i class="fa fa-home"></i></a> </li>
                        <li class="breadcrumb-item active" aria-current="page">
                            {{ !empty($data['menu']['name']) ? $data['menu']['name'] : '' }}
                        </li>
                    </ol>
                </nav>
            </div>
        </div>
        <section class="subpage-about row-bottom min-h-70">
            <div class="wrap-content-info">
                <div class="container">
                    <div class="row">
                        @if (!empty($data['detail']['detail']))
                            <div class="col-md-12 center content-about">
                                <div class="box-sm">
                                    <div class="col-md-12 col-image" id="content-leadership">
                                        {!! $data['detail']['detail'] !!}
                                    </div>
                                </div>
                            </div>
                        @endif
                        @if (!empty($data['list']))
                            <div class="col-md-12 center content-about">
                                <div class="box-sm">
                                    <div class="col-md-12 col-image" id="card-leadership">
                                        <div class="card-leadership">
                                            <div class="row">
                                                @foreach ($data['list'] as $k => $item)
                                                    <div class="col-12" style="padding-top: 50px !important;">
                                                        <div class="card-leadership-item d-flex flex-column flex-md-row">
                                                            @if ($k % 2 != 1)
                                                                <div class="card-leadership-image" style="flex: 0 0 300px;">
                                                                    <img class="w-100" src="{{ $item['image'] ?? '' }}" alt="{{ $item['name'] ?? '' }}">
                                                                </div>
                                                            @endif
                                                            <div class="card-leadership-content px-md-4 mt-3 mt-md-0">
                                                                <h4 class="leader-name">{{ $item['name'] ?? '' }}</h4>
                                                                <h5 class="leader-position">{{ $item['position'] ?? '' }}</h5>
                                                                <p class="leader-bio">{!! $item['detail'] ?? '' !!}</p>
                                                            </div>
                                                            @if ($k % 2 == 1)
                                                                <div class="card-leadership-image" style="flex: 0 0 300px;">
                                                                    <img class="w-100" src="{{ $item['image'] ?? '' }}" alt="{{ $item['name'] ?? '' }}">
                                                                </div>
                                                            @endif
                                                        </div>
                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </section>
    </div>
@endsection