@extends('Frontend.layout.main')


@section('head')

<title>{{$pageData->meta_title() ?? 'Eldiar'}}</title>
<meta content="{{$pageData->meta_description() ?? 'Eldiar'}}" name="description">
<meta content="{{$pageData->meta_keyword() ?? 'Eldiar'}}" name="keywords">

<meta property="og:title" content="{{$pageData->meta_title() ?? 'Eldiar'}}" />
<meta property="og:description" content="{{ $pageData->meta_description() ?? 'Eldiar' }}" />
@endsection


@section('content')
<div class="design_stdBnr">
    @include('Frontend.inc.banners')
</div>
<section class="keepfirst">
    <div class="container">
        <div class="row">
            <ul class="aboutul">

            <li> <a href="{{url('/')}}"> HOME</a> </li> /
                <li>Life Style</li>
            </ul>
        </div>
    </div>
</section>
<div class="container">

    <div class="row" data-aos="fade-up">
        <div class="col-lg-12 aboutstu">
            <h1> {{$pageData->subtitle()?? 'Life Style'}}
            </h1>
            {!!$pageData->content ?? ''!!}
            
        </div>
    </div>
    @foreach($styles as $key => $category)
        @if($key % 2 == 0)
            <div class="row" id="#{{ $category->slug }}" data-aos="fade-up">

                <div class="col-lg-6 p-0">
                    <img src="{{ url('/storage/styles/banners/'.$category->banner_image) }}"
                        class="stutban" alt="add-image">
                </div>
                <div class="col-lg-6 p-0">
                    <div class="sudio1">
                        <span>{{$key + 1}}</span>
                        <h2>{{ $category->title }}

                        </h2>
                    </div>
                    <div class="sudio2">
						<div>
                        {!!$category->description!!}
                      
                       <a href="{{ url('/products/?style='.$category->slug) }}"><button
                                class="btn mazinbtn1">EXPLORE ALL</button></a> </div>
                                <!-- <button class="btn mazinbtn2 request-info" category-name="{{$category->title}}" category-id ="{{$category->id}}">REQUEST FOR MORE
                            INFO</button> -->
                    </div>

                </div>
            </div>
        @else
            <div class="row" id="#{{ $category->slug }}" data-aos="fade-up">


                <div class="col-lg-6 p-0">
                    <div class="sudio1">
                    <span>{{$key + 1}}</span>
                        <h2>{!!$category->title !!}


                        </h2>
                    </div>
                    <div class="sudio2">
                    <div>
                    
                        {!!$category->description!!}
                            
                          <p>  <a href="{{ url('/products/?style='.$category->slug) }}"><button
																									   class="btn mazinbtn1">EXPLORE ALL</button></a></p>
                        
                    </div>
                     
                    </div>

                </div>
                <div class="col-lg-6 p-0">
                    <img src="{{ url('/storage/styles/banners/'.$category->banner_image) }}"
                        class="stutban" alt="add-image">
                </div>
            </div>
        @endif

    @endforeach



    </section>
</div>
<br><br><br>

<!-- Button to Open the Modal -->


<!-- The Modal -->
<!-- <div class="modal" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">

            <div class="modal-header">
                <h4 class="modal-title">REQUEST FOR MORE INFO</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <div class="modal-body">
                <form method="post" action="{{url('/design-enquiry')}}">
                    <div class="row contactweb">
                        <div class="col-lg-12">
                            <div class="form-group">
                            @csrf
                                 <input type="hidden" class="form-control" placeholder="Categoty" id ="category" name="category">
                                 <input type="hidden" class="form-control" placeholder="Categoty" id ="category-id" name="category-id">

                                <input type="text" class="form-control" placeholder="Name" name="name" required>
                            </div>
                        </div>
                        <div class="col-lg-12">
                            <div class="form-group">
                                <input type="text" class="form-control" id="email" placeholder="Enter email"
                                    name="email" required>
                            </div>
                        </div>
                        <div class="col-lg-12">
                            <div class="form-group">
                                <input type="text" class="form-control" placeholder="Contact Number" name="phone" required>
                            </div>
                        </div>

                        <div class="col-lg-12">
                            <div class="form-group">
                                <textarea type="text" class="form-control" placeholder="Message" name="message" required></textarea>
                            </div>
                        </div>
                        <div class="col-md-12">
                             <script src='https://www.google.com/recaptcha/api.js' type="text/javascript"></script>
                                   <div id="captchaerrNL" class="ErrorMessage" style="display:none"></div>
                                   <div class="g-recaptcha captcha " data-callback="imNotARobot" data-sitekey="{{config('settings.google_recaptcha_key')}}">
                             </div>
                        </div>
                        <br>

                        <div class="col-lg-12">
                            <div class="form-group">
                                <button type="submit" class="btn mazinbtn2">Submit</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div> -->




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


@endsection
@section('script')

<script type="text/javascript">
// $(document).ready(function(){

// $('.request-info').click(function(){
//     var cat_id =$(this).attr('category-id');
//     var category  =$(this).attr('category-name');

//     $('#category-id').val(cat_id);
//     $('#category').val(category);
//     $('#myModal').modal('show');

// })

// })

</script>
@endsection