@extends('themes.one.master')

@php
    $aboutUs = ($pageSettingsBySlug ?? collect())->get('about-us');
    $title = transField($aboutUs, 'title') ?? __('About Us');
    $descHtml = transField($aboutUs, 'description') ?? "";
@endphp


@section('title', $title)

@section('style')
    <style>
        .team{position:relative!important;background:#fff!important;border-radius:14px!important;box-shadow:0 6px 20px rgba(0,0,0,.06)!important;height:100%!important;display:flex!important;flex-direction:column!important;overflow:hidden!important;transition:transform .2s ease,box-shadow .2s ease!important}
        .team:hover{transform:translateY(-6px)!important;box-shadow:0 14px 32px rgba(0,0,0,.10)!important}

        .team .team-img{position:relative!important;top:auto!important;left:auto!important;transform:none!important;margin:0!important;width:100%!important;aspect-ratio:16/11!important}
        @supports not (aspect-ratio: 1/1){
            .team .team-img{height:220px!important}
        }
        .team .team-img img{width:100%!important;height:100%!important;object-fit:cover!important;display:block!important}

        .team .team-info{padding:18px 18px 20px!important;display:flex!important;flex-direction:column!important;align-items:center!important;gap:6px!important;flex:1 1 auto!important;text-align:center!important}

        .team .team-name{display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important;font-weight:700!important;font-size:1.05rem!important;margin:0!important;text-decoration:none!important}

        .team .team-leader{margin:2px 0 8px!important;important;font-weight:600!important;font-size:.92rem!important;display:-webkit-box!important;-webkit-line-clamp:1!important;-webkit-box-orient:vertical!important;overflow:hidden!important}

        .team .team-info ul{margin-top:auto!important;display:flex!important;gap:10px!important;padding:0!important;justify-content:center!important}
        .team .team-info ul li{list-style:none!important}
        /* .team .team-info ul li a{width:38px!important;height:38px!important;border-radius:50%!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;background:#f3f5f9!important;color:#1b224b!important;transition:background .2s ease,transform .2s ease,color .2s ease!important} */
        .team .team-info ul li a:hover{background:#2b6cb0!important;color:#fff!important;transform:translateY(-2px)!important}

        /* Grid spacing */
        .row .col-lg-4,.row .col-md-6,.row .col-sm-6{margin-bottom:24px!important}

        /* Make all columns equal height rows */
        .row{align-items:stretch!important}
    </style>
@endsection

@section('content')

<!--=================================
    inner-header -->
    @if(!empty($banner))
        <section class="inner-banner bg-overlay-black-70 bg-holder" style="background-image: url('');">
        <div class="container">
            <div class="row d-flex justify-content-center">
            <div class="col-md-12">
                <div class="text-center">
                <h1 class="text-white">{{ transField($banner, 'title') }}</h1>
                </div>
                <div class="d-flex justify-content-center ">
                <ol class="breadcrumb mb-0 p-0">
                <li class="breadcrumb-item"><a href="index.html">{{ __('Home') }}</a></li>
                <li class="breadcrumb-item active"><span>{{ $title }}</span></li>
                </ol>
                </div>
            </div>
            </div>
        </div>
        </section>
    @else
        <section class="inner-banner bg-overlay-black-70 bg-holder" style="background-image: url('assets/themes/one/images/bg/04.jpg');">
            <div class="container">
                <div class="row d-flex justify-content-center">
                <div class="col-md-12">
                    <div class="text-center">
                    <h1 class="text-white">{{ $title }}</h1>
                    </div>
                    <div class="d-flex justify-content-center ">
                    <ol class="breadcrumb mb-0 p-0">
                    <li class="breadcrumb-item"><a href="{{ url('/') }}">{{ __('Home') }}</a></li>
                    <li class="breadcrumb-item active"><span>{{ $title }}</span></li>
                    </ol>
                    </div>
                </div>
                </div>
            </div>
        </section>
    @endif
    <!--=================================
    inner-header -->

    <!--=================================
    about -->
    @isset($aboutUsDetail)
        <section class="space-ptb bgsection" style="background-image: url(''); background-size:100%;">
        <div class="container">
            <div class="row align-items-center">
            <div class="col-xl-6 col-lg-9">
                <div class="section-title mb-4">
                <h2 class="title">
                    <span class="text-primary">{{ transField($aboutUsDetail, 'title') }}</span>
                </h2>

                @if(!empty($aboutUsDetail['title2']))
                    <p class="lead">{{ transField($aboutUsDetail, 'title2') }}</p>
                @endif

                <div id="aboutShort" class="mb-0">
                    <b style="font-weight:500">{!! transField($aboutUsDetail, 'short_desc') !!}</b>
                </div>

                <div id="aboutLong" class="border-0 shadow-sm d-none mt-3">
                    <b style="font-weight:500">{!! transField($aboutUsDetail, 'long_desc') !!}</b>
                </div>
                </div>

                <button type="button"
                        class="btn btn-primary btn-round"
                        id="aboutToggle"
                        aria-expanded="false"
                        aria-controls="aboutLong">
                {{ __('Read More') }}
                </button>
            </div>
            </div>
        </div>
        </section>
    @endisset
    <!--=================================
    about -->

    <!--=================================
    counter -->
    @if(!empty($counts))
        <section class="space-ptb bg-dark">
        <div class="container">
            <div class="row">