@extends("website.layouts.layout")

@section("title")
About
@endsection

@section("body")
    <div class="flex flex-col-reverse md:flex-row gap-4">
        <div class="flex flex-1 flex-col gap-y-10 md:items-start">
            <div class="w-full mb-4 shadow-md rounded-md p-4">
                <h1 class="font-semibold text-2xl mb-4">About Us</h1>
                {{ $settings ? $settings->about_us : null }}
            </div>

            <div class="w-full mb-4 shadow-md rounded-md p-4">
                <h1 class="font-semibold text-2xl mb-4">Mission</h1>
                {{ $settings ? $settings->mission : null }}
            </div>

            <div class="w-full mb-10 shadow-md rounded-md p-4">
                <h1 class="font-semibold text-2xl mb-4">Vision</h1>
                {{ $settings ? $settings->vision : null }}
            </div>
        </div>

        <div class="flex flex-1 flex-col md:items-end md:mb-7">
            <div class="relative w-full h-full mx-auto">
                @foreach ($sliders as $key => $slider)
                    <div class="slide h-full relative">
                        <img class="w-full h-full object-cover"
                            src="/storage/{{ $slider->image }}">
                    </div>
                @endforeach

                <!-- The dots -->
                {{-- <div class="flex justify-center items-center absolute bottom-4 inset-x-0 space-x-5">
                    @foreach ($sliders as $key => $slider)
                        <div class="dot w-4 h-4 rounded-full cursor-pointer" onclick="currentSlide({{ $key + 1 }})"></div>
                    @endforeach
                </div> --}}
            </div>
        </div>
    </div>

{{--    <div class="flex justify-center mb-10">--}}
{{--        <h1 class="font-semibold text-2xl uppercase">Our DepartmentTeam</h1>--}}
{{--    </div>--}}

{{--    @if ($members->count() > 0)--}}
{{--        <div class="flex flex-wrap justify-center gap-2">--}}
{{--            @foreach ($members as $member)--}}
{{--                <div class="w-60 shadow-lg rounded-md p-3">--}}
{{--                    <img src="/storage/{{ $member->image }}" alt="Image of {{ $member->name }}" class="w-full h-56 mx-auto rounded-md mb-2">--}}

{{--                    <p class="flex justify-center">{{ $member->name }}</p>--}}
{{--                    <p class="flex justify-center font-semibold">{{ $member->designation }}</p>--}}
{{--                </div>--}}
{{--            @endforeach--}}
{{--        </div>--}}
{{--    @endif--}}

    @section('js')
        <script type="text/javascript" src="{{ asset('assets/js/slider.js') }}"></script>
    @endsection
@endsection