@extends('layouts.page')

@section('content')
    <div class="page-wrapper">
        <section class="banner-section">
            <div class="main-slider-carousel owl-carousel owl-theme">
                @if (is_countable($sliders))
                    @foreach ($sliders as $key => $slider)
                        @if ($slider->image != '')
                            @php
                                $image = asset(Storage::url('public/sliders')) . '/' . $slider->image;
                            @endphp
                        @endif

                        <div class="slide" style="background-image:url('{{ asset($image) }}')">
                            <div class="auto-container">
                                <div class="content-column">
                                    <div class="inner-column">
                                        <div class="title">{{ $slider->sub_title }}</div>
                                        <h1>
                                            {!! $slider->title !!}
                                        </h1>
                                        <div class="text">
                                            {{ $slider->description }}
                                        </div>
                                        <div class="btns-box">
                                            <a href="{{ $slider->url }}" class="theme-btn btn-style-one">
                                                <span class="txt">{{ $slider->button_text }} <i
                                                        class="arrow flaticon-right"></i></span>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                @endif
            </div>
        </section>

        <section class="services-section">
            <div class="auto-container">
                <div class="inner-container">
                    <div class="row clearfix">
                        @foreach ($practiceAreas as $area)
                            <div class="services-block col-lg-6 col-md-12 col-sm-12">
                                <div class="inner-box wow {{ $loop->even ? 'fadeInRight' : 'fadeInLeft' }} min-h-220"
                                    data-wow-delay="0ms" data-wow-duration="1500ms">
                                    <div class="content">
                                        @php
                                            $icon = 'public/sections/' . $area->alias . '/' . $area->image;

                                            if (Storage::exists($icon)) {
                                                $icon = asset(Storage::url($icon));
                                            } else {
                                                $icon = null;
                                            }
                                        @endphp

                                        <div class="icon">
                                            @if ($icon)
                                                <img src="{{ $icon }}" alt=""
                                                    class="img-fluid section-icon">
                                            @endif
                                        </div>
                                        <h4><a href="{{ $area->link }}">{{ $area->title }}</a></h4>
                                        <div class="text">{{ $area->sub_title }}</div>
                                    </div>
                                    <a href="{{ $area->link }}" class="arrow flaticon-right"></a>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </section>

        @php
            $subSections = isset($sections[0]->sub_sections) ? $sections[0]->sub_sections : null;
            $subSections2 = isset($sections[1]->sub_sections) ? $sections[1]->sub_sections : null;
            $subSections3 = isset($sections[2]->sub_sections) ? $sections[2]->sub_sections : null;
            $subSections4 = isset($sections[3]->sub_sections) ? $sections[3]->sub_sections : null;
        @endphp

        <section class="counter-section bg-light">
            <div class="image-layer"></div>
            <div class="auto-container">
                <div class="sec-title light centered ">
                    <h2 class="head-color">{{ $sections[1]['title'] }}</h2>
                    <div class="about-text">
                        {!! $sections[1]['description'] !!}
                    </div>
                </div>
                <div class="fact-counter">
                    <div class="row clearfix">
                        @if (count($subSections2))
                            @foreach ($subSections2 as $item)
                                <div class="column counter-column col-lg-4 col-md-6 col-sm-12">
                                    <div class="inner wow {{ $loop->odd ? 'fadeInLeft' : 'fadeInRight' }}"
                                        data-wow-delay="0ms" data-wow-duration="1500ms">
                                        <div class="content">
                                            <div class="icon flaticon-briefcase"></div>
                                            <div class="count-outer count-box">
                                                <span class="count-text" data-speed="2500"
                                                    data-stop="{{ $item->sub_title }}">0</span><sup>+</sup>
                                            </div>
                                            <h6 class="counter-title">{{ $item->title }}</h6>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        @endif
                    </div>
                </div>
            </div>
        </section>

        <section class="testimonial-section " style="background-image: url(images/background/pattern-3.png)">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-6 blue-bg">
                        <div class="sec-title centered">
                            <h2 class="w-color">{{ $sections[2]['title'] }}</h2>
                        </div>
                        <div class="inner-container">
                            <div class="single-item-carousel owl-carousel owl-theme">
                                @if (count($subSections3))
                                    @foreach ($subSections3 as $item)
                                        <div class="testimonial-block">
                                            <div class="inner-box">
                                                <div class="author-image">
                                                    @php
                                                        $photo = NULL;

                                                        if ($item->image != NULL) {
                                                            $photo = asset(Storage::url('public/sections/homepage/' . $item->image));
                                                        }
                                                    @endphp

                                                    <img src="{{ $photo }}" alt="photo" />
                                                </div>
                                                <span class="quote-icon flaticon-quote-1"></span>
                                                <div class="text">{{ $item->description }}</div>
                                                <div class="name">{{ $item->title }}</div>
                                            </div>
                                        </div>
                                    @endforeach
                                @endif
                            </div>
                        </div>
                    </div>
                    <div id="consultation-form-div" class="col-lg-6 free-consultation">
                        <div class="inner-column">
                            <div class="sec-title">
                                <h2>Request Consultation</h2>
                            </div>
                            <div>
                                @if(Session::has('message'))
                                    <p class="alert {{ Session::get('alert-class', 'alert-info') }} flash-msg">{{ Session::get('message') }}</p>
                                @endif
                                <p id="custom-alert" class="alert alert-info d-none"></p>
                            </div>
                            <div class="default-form">
                                <form method="post" action="{{ route('web.save-consultation') }}">
                                    @csrf
                                    <div class="row clearfix">
                                        <div class="col-lg-6 col-md-6 col-sm-12 form-group">
                                            <input type="text" name="first_name" placeholder="First Name" required>
                                        </div>
                                        <div class="col-lg-6 col-md-6 col-sm-12 form-group">
                                            <input type="text" name="last_name" placeholder="Last Name" required>
                                        </div>
                                        <div class="col-lg-12 col-md-12 col-sm-12 form-group">
                                            <input type="text" name="phone" placeholder="Phone" required>
                                        </div>
                                        <div class="col-lg-12 col-md-12 col-sm-12 form-group">
                                            <textarea name="message" placeholder="Message"></textarea>
                                        </div>
                                        <div class="col-lg-12 col-md-12 col-sm-12 form-group">
                                            <button class="theme-btn btn-style-two" type="submit" name="submit-form"><span class="txt">Submit Now <i class="arrow flaticon-right"></i></span></button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <div class="clearfix"></div>

        <!-- <section class="clients-section">
            <div class="auto-container">
                <div class="sec-title centered">
                    <h2>{{-- $sections[3]['title'] --}}</h2>
                    <div class="text">{{-- $sections[3]['description'] --}}</div>
                </div>
                <div class="inner-container">
                    <div class="sponsors-outer">
                        <ul class="sponsors-carousel owl-carousel owl-theme">
                            if (count($subSections4))
                                foreach ($subSections4 as $item)
                                    php
                                        $icon = 'public/sections/homepage/' . $item->image;

                                        if (Storage::exists($icon)) {
                                            $icon = asset(Storage::url($icon));
                                        } else {
                                            $icon = NULL;
                                        }
                                    endphp

                                    <li class="slide-item"><figure class="image-box"><a href="#"><img src="{{-- $icon --}}" alt=""></a></figure></li>
                                endforeach
                            endif
                        </ul>
                    </div>
                </div>
            </div>
        </section> -->
    </div>

    <script src="{{ asset('js/jquery.js') }}"></script>

    <script>
        let bookmark = '#{{ session("bookmark") }}';

        $(document).ready(function() {
            $("html, body").animate({ scrollTop: $(bookmark).offset().top - 100 });
        });

    </script>
@endsection