@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')

    @include('Frontend.inc.banners')
    <section class="keepfirst">
        <div class="container"> 
        <div class="row">
        <ul class="aboutul">
        <li> <a href="{{url('/')}}"> HOME</a> </li> /

        <li><a href="{{url('/design-studio')}}"> DESIGN STUDIO </a></li>/
        <li style=" text-transform: uppercase;" >{{$category->title}}</li> 

        </ul>
        </div>
        </div>
    </section>
    <section>
        <div class="container">
        <div class="row">
    <div class="col-md-12 col-lg-12">
        <h1 class="mb-4">{{$category->title}}</h1>
         <div class="row">
        
        <div class="clearfix"></div>
        @foreach ($images as $image)
            <div class="col-md-4 col-lg-4">
                    <div class="product-grid imagew">
                        <div class="product-image">
                            <a target="_blank" href="{{url('/design-studio/'.$category->slug.'/'.$image->id)}}" class="image">
                                <img class="pic-1" src="{{ url('/storage/designprojects/banners/'.$image->image) }}" alt="add-image">
                                <img class="pic-2" src="{{ url('/storage/designprojects/banners/'.$image->image) }}" alt="add-image">
                            </a>
                        
                        
                        </div>
                    <div class="product-content">

                    
                            <h3 class="title"> 
                            <button class="btn mazinbtn2 request-info"  project-id ="{{$image->id}}">
                    REQUEST FOR MORE
                            INFO</button> <br><br>
                            
                            <a href="#">{{$image->title}}</a></h3>
                           
                            <div class="price">
                            <small>
                            {{strip_tags($image->description)}}
                            </small>
                            
                            </div>
                        </div> 
                    </div>
            </div>

            @endforeach

            @php
            $count = count($images);
            @endphp
                      
             @if($count  == '0')
             <div class="col-md-12 col-lg-12">

            {!!$category->description	 ?? ''!!} 
                </div>
            @endif
            
            
            </div>
        </div>

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

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

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

            <!-- Modal body -->
            <div class="modal-body">
            @if ($errors->any())
                <div class=”alert alert-danger”>
                    <ul style="color:red;">
                            @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                            @endforeach
                    </ul>
                </div>
              @endif
                <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" value="design_project" name="type">
                                 <input type="hidden" class="form-control" placeholder="Categoty" id ="project_id" value="{{old('project_id')}}" name="project_id">

                                <input type="text" class="form-control"  value="{{old('name')}}" placeholder="Name" name="name" required >
                            </div>
                        </div>
                        <div class="col-lg-12">
                            <div class="form-group">
                                <input type="text" class="form-control" id="email"  value="{{old('email')}}" placeholder="Enter email"
                                    name="email" required>
                            </div>
                        </div>
                        <div class="col-lg-12">
                            <div class="form-group">
                                <input type="number" class="form-control"  value="{{old('phone')}}" placeholder="Contact Number" name="phone"      onkeypress="if(this.value.length>16)  return false;" required>
                            </div>
                        </div>

                        <div class="col-lg-12">
                            <div class="form-group">
                                <input type="text" name="country" class="form-control"  value="{{old('country')}}" placeholder="Country" required>
                            </div>
                        
                        </div>

                        <div class="col-lg-12">
                            <div class="form-group">
                                <textarea type="text" class="form-control" placeholder="Message" name="message" required>{{old('message')}}</textarea>
                            </div>
                        </div>
                        <br>
                        <div class="col-lg-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>
                        <div class="col-lg-12">
                            <p></p>
                        </div>

                        <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')@section('script')

@if ($errors->any())
    <script>
    
    $('#myModal').modal('show');

    </script>

@endif

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

$('.request-info').click(function(){
    var project_id =$(this).attr('project-id');

    $('#project_id').val(project_id);

    $('#myModal').modal('show');

})

})

</script>
@endsection