@extends('layouts.default')

@section('title', 'About us')

@section('content')
<div class="custom-hero-img-ab">
    <div class="container">
        <div class="row my-4">
            <div class="mt-6">
                @if(Auth::check())
                    @if(Auth::user()->isSuperAdmin() || Auth::user()->isTenant() || Auth::user()->isAdmin())
                        <div class="my-2">
                            <div class="edit-icon">
                                <i class="mdi mdi-pencil edit" data-toggle="modal" data-target="#aboutHero"></i>
                            </div>
                        </div>
                    @endif
                @endif
                <h1 class="fw-700 text-center">{{$about_content->hero_section_title ?? "Class of 89'"}}</h1>
                <p class="pt-4 custom-text-center">
                    {{$about_content->hero_section_p ?? "Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet.
                    Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet."}}
                </p>
            </div>
        </div>
    </div>
</div>
<div class="bg-white">
    <div class="container">
        <div class="row justify-content-center my-4">
            <div class="col-12">
                @if(Auth::check())
                    @if(Auth::user()->isSuperAdmin() || Auth::user()->isTenant() || Auth::user()->isAdmin())
                        <div class="my-2">
                            <div class="edit-icon">
                                <i class="mdi mdi-pencil edit" data-toggle="modal" data-target="#aboutProject"></i>
                            </div>
                        </div>
                    @endif
                @endif
                <h3 class="text-center fw-700">
                    {{$about_content->project_section_title ?? "Why the Project?"}}
                </h3>
                <hr class="custom-hr">
            </div>
        </div>
        <div class="row justify-content-center mt-4">
            <div class="col-12 col-lg-6 col-xl-6">
                <div class="mt-4">
                    <p class="pt-4">
                        {!! $about_content->project_section_p ?? "Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet.
                        Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet." !!}
                    </p>
                </div>
            </div>
            <div class="col-12 col-lg-6 col-xl-6">
                <div class="mt-4">
                    <img src="{{$about_content->project_section_img ?? asset('assets/images/about-7.png')}}" alt="" class="w-100 br-12">
                </div>
            </div>
        </div>
    </div>
</div>
<div class="bg-white">
    <div class="container">
        <div class="row justify-content-center my-4">
            <div class="col-12">
                @if(Auth::check())
                    @if(Auth::user()->isSuperAdmin() || Auth::user()->isTenant() || Auth::user()->isAdmin())
                        <div class="my-2">
                            <div class="edit-icon">
                                <i class="mdi mdi-pencil edit" data-toggle="modal" data-target="#trusteeExcos"></i>
                            </div>
                        </div>
                    @endif
                @endif
                <h3 class="text-center fw-700">
                    {{$about_content->trustee_section_title ?? "Trustees and Excos"}}
                </h3>
                <hr class="custom-hr mt-4">
                <div class="mt-4">
                    <p class="text-center">
                        {!! $about_content->trustee_section_p ?? "Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet." !!}
                    </p>
                </div>
            </div>
        </div>
        <div class="row justify-content-center my-4">
            @forelse ($trustees as $trustee)
                <div class="col-12 col-lg-4 col-xl-4">
                    @if(Auth::check())
                        @if(Auth::user()->isSuperAdmin() || Auth::user()->isTenant() || Auth::user()->isAdmin())
                            <div class="d-flex align-items-center justify-content-between">
                                <div class="my-2">
                                    <div class="edit-icon">
                                        <i class="mdi mdi-pencil edit" onclick="showTrustListEdit(`{{$trustee->name}}`, `{{$trustee->bio}}`, `{{$trustee->photo_path}}`, `{{$trustee->id}}`)"></i>
                                    </div>
                                </div>
                                <div class="my-2 {{$last_trustee->id == $trustee->id ? '' : 'd-none'}}">
                                    <div class="edit-icon">
                                        <i class="mdi mdi-plus edit" data-toggle="modal" data-target="#trusteeList"></i>
                                    </div>
                                </div>
                            </div>
                        @endif
                    @endif
                    <div class="d-flex justify-content-center">
                        <img src="{{$trustee->photo_path}}" alt="" class="custom-br-full object-cover h350 w350">
                    </div>
                    <h5 class="mt-4 fw-700 text-center">{{$trustee->name}}</h5>
                    <p class="text-center">{{$trustee->bio}}</p>
                </div>
            @empty
                <div class="text-center">
                    <h6 class="mb-4">There are no {{$about_content->trustee_section_title ?? "Trustees and Excos"}}</h6>
                    @if(Auth::check())
                        @if(Auth::user()->isSuperAdmin() || Auth::user()->isTenant() || Auth::user()->isAdmin())
                            <div class="my-2">
                                <div class="edit-icon">
                                    <i class="mdi mdi-plus edit" data-toggle="modal" data-target="#trusteeList"></i>
                                </div>
                            </div>
                        @endif
                    @endif
                </div>
            @endforelse
        </div>
    </div>
</div>
@include('elements.about-hero')
@include('elements.about-project')
@include('elements.about-trustee-excos')
@include('elements.about-trustee-list')
@include('elements.about-trustee-list-edit')
<script>
    function showTrustListEdit(name, bio, photo, id) {
        $('#name').val(name);
        $('#bio').val(bio);
        $('#excoImagePreview').css('background-image', 'url('+ photo +')');
        $('#trustee-id').val(id);
        $('#saveExcoBtn').prop('disabled', false);

        $('#trusteeListEdit').modal('show');
    }
</script>
@endsection