@extends('front.template.header')
@section('content')
<div id="content" class="site-content ">
            <!---about--->
            <section class="about-section">
               <!--===============spacing==============-->
               <div class="pd_top_90"></div>
               <!--===============spacing==============-->
               <div class="container">


                  <article class="clearfix service type-service status-publish has-post-thumbnail hentry">
                     
                     <div class="row no-space">
                        <div class="col-lg-3 col-md-12 col-sm-12 col-xs-12 mb-5 mb-lg-5 mb-xl-0 ps-0 ps-lg-0 pe-0 pe-lg-0 pe-xl-3">
                        <section class="contact_form_box_all type_two">
                              <div class="contact_form_box_inner">
                                 <div class="contact_form_shortcode" style="max-width: 100%; padding: 20px;">

                           <div class="title_all_box style_one dark_color">
                              <div class="title_sections left">
                                 <div class="before_title">Service Details</div>
                                 <!-- <div class="title">{{ $service->title }}</div> -->
                                 <p>{{ $service->subtitle }}</p>
                              </div>
                           </div>
                           <div class="simple_image_boxes mb-4">
                              <img src="{{ $service->other_image ? asset('storage/services/' . $service->other_image) : '#' }}" class="object-fit-cover-center position-static" alt="image">
                           </div>
                           <div class="description_box">
                              <p>{!! \Illuminate\Support\Str::words($service->description, 60, '...') !!}</p>
                              @if (str_word_count($service->description) > 60)
                                 <button type="button" class="wpcf7-form-control theme-btn one has-spinner wpcf7-submit mt-3" id="readMoreBtn">Read More</button>
                              @endif
                           </div>
                           <!--===============spacing==============-->
                           <!-- <div class="pd_bottom_25"></div> -->
                           <!--===============spacing==============-->
                           <!-- <div class="icon_box_all style_one">
                              <div class="icon_content ">
                                 <div class="icon">
                                    <img src="{{ asset('front/assets/images/icon-image-nike.png') }}" class="img-fluid svg_image" alt="icon png">
                                 </div>
                                 <div class="txt_content">
                                    <h3>
                                        @if(!empty($service->details[0]->title))
                                       <a href="#" target="_blank" rel="nofollow">{{ $service->details[0]->title }}</a>
                                       @endif
                                    </h3>
                                    @if(!empty($service->details[0]->content))
                                    <p>{!! $service->details[0]->content !!}</p>
                                    @endif 
                                </div>
                              </div>
                           </div> -->
                           <!--===============spacing==============-->
                           <!-- <div class="pd_bottom_25"></div> -->
                           <!--===============spacing==============-->
                           </div></div></section>
                        </div>
                        <div class="col-lg-9 col-md-12 col-sm-12 col-xs-12 ps-0 ps-lg-0 pe-0 pe-lg-0 ps-xl-3">
                           
                        <section class="contact_form_box_all type_two">
                           <div class="contact_form_box_inner">
                              <div class="contact_form_shortcode" style="max-width: 100%;">
                                 @if(session('success'))
                                       <div class="alert alert-success alert-dismissible fade show" role="alert">
                                          {{ session('success') }}
                                          <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                             <span aria-hidden="true">&times;</span>
                                          </button>
                                       </div>
                                 @endif

                                 <!-- Error Message -->
                                 @if(session('error'))
                                       <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                          {{ session('error') }}
                                          <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                             <span aria-hidden="true">&times;</span>
                                          </button>
                                       </div>
                                 @endif
                                 
                              <form action="{{ route('services.booking.store') }}" method="post" class="wpcf7-form init" enctype="multipart/form-data">
                                 @csrf
                                 <input type="hidden" name="service_id" value="{{ $service->id }}">

                                 <div class="heading">
                                    <h4>Basic Details</h4>
                                 </div>

                                 <div class="_form">
                                    <div class="row">
                                          @foreach ($formfields as $index => $field)
                                             <div class="col-lg-6" data-field-id="{{ $field->field_id }}">
                                                <div class="form-group">
                                                      <label for="field_{{ $index }}">{{ $field['label'] }}</label>

                                                      <!-- TEXT INPUT -->
                                                      @if ($field['type'] === 'text')
                                                         <input type="text" name="booking_fields[{{ $index }}]" 
                                                               id="field_{{ $index }}" class="form-control" 
                                                               placeholder="{{ $field['label'] }} *" required >

                                                      <!-- TEXTAREA -->
                                                      @elseif ($field['type'] === 'textarea')
                                                         <textarea name="booking_fields[{{ $index }}]" 
                                                                  id="field_{{ $index }}" class="form-control" 
                                                                  rows="3" placeholder="{{ $field['label'] }} *" required></textarea>

                                                      <!-- DROPDOWN SELECT (UPDATED) -->
                                                      @elseif ($field['type'] === 'select')
                                                         <select name="booking_fields[{{ $index }}]" id="field_{{ $index }}" class="form-select" >
                                                            <option value="">Select an option</option>
                                                            @foreach ($attributeOptions[$field->id] ?? [] as $key => $value)
                                                                  <option value="{{ $key }}">{{ $value }}</option>
                                                            @endforeach
                                                         </select>

                                                      <!-- RADIO BUTTONS -->
                                                      @elseif ($field['type'] === 'radio' && !empty($field['options']))
                                                         <div>
                                                            @foreach (explode(',', $field['options']) as $option)
                                                                  <div class="form-check">
                                                                     <input class="form-check-input" type="radio" 
                                                                           name="booking_fields[{{ $index }}]" 
                                                                           id="radio_{{ $index }}_{{ $option }}" value="{{ $option }}">
                                                                     <label class="form-check-label" for="radio_{{ $index }}_{{ $option }}">
                                                                        {{ ucfirst($option) }}
                                                                     </label>
                                                                  </div>
                                                            @endforeach
                                                         </div>

                                                      <!-- CHECKBOXES -->
                                                      @elseif ($field['type'] === 'checkbox' && !empty($field['options']))
                                                         <div>
                                                            @foreach (explode(',', $field['options']) as $option)
                                                                  <div class="form-check">
                                                                     <input class="form-check-input" type="checkbox" 
                                                                           name="booking_fields[{{ $index }}][]" 
                                                                           id="checkbox_{{ $index }}_{{ $option }}" value="{{ $option }}">
                                                                     <label class="form-check-label" for="checkbox_{{ $index }}_{{ $option }}">
                                                                        {{ ucfirst($option) }}
                                                                     </label>
                                                                  </div>
                                                            @endforeach
                                                         </div>

                                                      <!-- FILE UPLOAD WITH IMAGE PREVIEW -->
                                                      @elseif ($field['type'] === 'file')
                                                         @php
                                                            
                                                            $allowedTypes = !empty($field['file_types']) ? implode(',', array_map('trim', explode(',', $field['file_types']))) : 'image/*, .pdf, .doc, .docx';
                                                            
                                                         @endphp
                                                        <div class="d-flex justify-content-between">
                                                            <label style="visibility:hidden;">{{ $field['label'] }}</label>
                                                            <a id="viewFile_{{ $index }}" href="#" class="d-inline-flex align-items-center" 
                                                               data-fancybox data-caption="Uploaded File" style="visibility: hidden;">
                                                               <i class="icon-eye me-1"></i> Preview
                                                            </a>&nbsp;&nbsp;
                                                            <button type="button" id="removeFile_{{ $index }}" class="btn btn-danger btn-sm" style="display: none;" 
                                                                  onclick="removeSelectedFile('{{ $index }}')">
                                                               <i class="icon-trash"></i>
                                                            </button>
                                                         </div>

                                                         <input type="file" name="booking_fields[{{ $index }}]" id="field_{{ $index }}" 
                                                               class="form-control file-input" accept="{{ $allowedTypes ?? 'image/*, .pdf, .doc, .docx' }}"
                                                               onchange="previewFile(event, 'viewFile_{{ $index }}', 'removeFile_{{ $index }}', '{{ $allowedTypes }}')">

                                                         <div class="help-block with-errors"></div>
                                                         <!-- <input type="file" name="booking_fields[{{ $index }}]" 
                                                               id="field_{{ $index }}" class="form-control file-input" 
                                                               accept="{{ $field['file_types'] ?? 'image/*' }}" 
                                                               onchange="previewImage(event, 'preview_{{ $index }}')">

                                                         <div>
                                                            <img id="preview_{{ $index }}" class="img-fluid" 
                                                                  style="position: static; height: 215px; object-fit: cover; display: none;">
                                                         </div> -->
                                                      @endif

                                                      <div class="help-block with-errors"></div>
                                                </div>
                                             </div>
                                          @endforeach
                                    </div>
                                 </div>

                                 <div>
                                    <button type="submit" class="wpcf7-form-control has-spinner wpcf7-submit w-100">Submit</button>
                                 </div>
                              </form>

                              </div>
                           </div>
                        </section>
                        <style>
                           input::file-selector-button {
                              height: 56px;
                              border: none;
                              margin: 0;
                              padding: 0;
                           }
                           .page_header_default {
                              min-height: 274px;
                              padding: 40px 0px 40px;
                           }
                           .fancybox-slide>*{
                              transform: none !important;
                           }
                        </style>
                           <!-- <div class="icon_box_all style_one">
                              <div class="icon_content ">
                                 <div class="icon">
                                    <img src="{{ asset('front/assets/images/icon-image-nike.png') }}" class="img-fluid svg_image" alt="icon png">
                                 </div>
                                 <div class="txt_content">
                                    <h3>
                                       @if(!empty($service->details[1]->title))
                                       <a href="#" target="_blank" rel="nofollow">{{ $service->details[1]->title }}</a>
                                       @endif
                                    </h3>
                                    @if(!empty($service->details[1]->content))
                                    <p>{!! $service->details[1]->content !!}</p>
                                    @endif 
                                 </div>
                              </div>
                           </div> -->
                           <!--===============spacing==============-->
                           <!-- <div class="pd_bottom_25"></div> -->
                           <!--===============spacing==============-->
                           <!-- <div class="icon_box_all style_one">
                              <div class="icon_content ">
                                 <div class="icon">
                                    <img src="{{ asset('front/assets/images/icon-image-nike.png') }}" class="img-fluid svg_image" alt="icon png">
                                 </div>
                                 <div class="txt_content">
                                    <h3>
                                       @if(!empty($service->details[2]->title))
                                       <a href="#" target="_blank" rel="nofollow">{{ $service->details[2]->title }}</a>
                                       @endif
                                       
                                    </h3>
                                    @if(!empty($service->details[2]->content))
                                    <p>{!! $service->details[2]->content !!}</p>
                                    @endif 
                                   
                                 </div>
                              </div>
                           </div> -->
                           <!--===============spacing==============-->
                           <!-- <div class="pd_bottom_25"></div> -->
                           <!--===============spacing==============-->
                           <!-- <h3> @if(!empty($service->details[3]->title)) {{ $service->details[3]->title }} @endif</h3> -->
                           <!--===============spacing==============-->
                           <!-- <div class="pd_bottom_15"></div> -->
                           <!--===============spacing==============-->
                           <!-- <p>@if(!empty($service->details[3]->content)) {!! $service->details[3]->content !!} @endif</p> -->
                        </div>
                     </div>
                     <!--===============spacing==============-->
                     <!-- <div class="pd_bottom_25"></div> -->
                     <!--===============spacing==============-->
                     <!-- <h3>Service Benefits</h3> -->
                       <!--===============spacing==============-->
                       <!-- <div class="pd_bottom_25"></div> -->
                       <!--===============spacing==============-->
                     <!-- <div class="faq_section type_two">
                        <div class="block_faq">
                           <div class="accordion">
                              <dl>
                              @foreach ($service->faqs ?? [null] as $index => $faq)
                                 <dt class="faq_header {{ $index === 0 ? 'active' : '' }}">
                                    {{ $faq->question }}<span class="icon-play"></span>
                                 </dt>
                                 <dd class="accordion-content hide " style="display: {{ $index === 0 ? 'block' : 'none' }};">
                                    <p>
                                       {{ $faq->answer }}               
                                    </p>
                                 </dd>
                                 @endforeach
                              </dl>
                           </div>
                        </div>
                     </div> -->
                  </article>
               </div>
               <!--===============spacing==============-->
               <!-- <div class="pd_bottom_70"></div> -->
               <!--===============spacing==============-->
            </section>
            <!---about end--->
            <!---service--->
            <section class="service-icon-section bg_light_1" style="display: none">
            <!--===============spacing==============-->
            <div class="pd_top_90"></div>
            <!--===============spacing==============-->
               <div class="container">
                  <div class="row">
                     <div class="col-lg-12">
                        <div class="title_all_box style_one text-center dark_color">
                           <div class="title_sections">
                              <div class="before_title">Our Business</div>
                              <h2 class="title">Stand Out From The Rest</h2>
                           </div>
                           <!--===============spacing==============-->
                           <div class="pd_bottom_20"></div>
                           <!--===============spacing==============-->
                        </div>
                     </div>
                  </div>
                  <div class="row">
                     <div class="col-xl-4 col-lg-6 col-md-12 col-sm-12 col-xs-12">
                        <div class="simple_image_boxes parallax_cover height_264px">
                              <img src="{{ asset('front/assets/images/icon-img-ab-1.jpg') }}" class="simp_img cover-parallax" alt="image">
                        </div>
                        <!--===============spacing==============-->
                        <div class="pd_bottom_20"></div>
                        <!--===============spacing==============-->
                        <div class="icon_box_all style_three">
                           <div class="icon_content ">
                              <div class="icon">
                                 <span class=" icon-bow-and-arrow"></span>
                              </div>
                              <div class="txt_content">
                                 <h3><a href="#" target="_blank" rel="nofollow">Our Mission</a></h3>
                                 <p>Equal blame belongs to those who fail in their duty through weakness of will which
                                    the same as saying.</p>
                              </div>
                           </div>
                        </div>
                     </div>
                     <div class="col-xl-4 col-lg-6 col-md-12 col-sm-12 col-xs-12 mt-4 mt-lg-0 mt-xl-0">
                        <div class="icon_box_all style_three">
                           <div class="icon_content ">
                              <div class="icon">
                                 <span class=" icon-growth"></span>
                              </div>
                              <div class="txt_content">
                                 <h3><a href="#" target="_blank" rel="nofollow">Our Core Values</a></h3>
                                 <p>Equal blame belongs to those who fail in their duty through weakness of will which
                                    the same as saying.</p>
                                 <ul>
                                    <li>Integrity</li>
                                    <li>Commitment to excellence</li>
                                    <li>Consumer focus</li>
                                    <li>Accountability</li>
                                    <li>Inclusiveness</li>
                                 </ul>
                                 <div class="btn_left">
                                    <a href="#" target="_blank" rel="nofollow" class="theme-btn one">Read More</a>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                     <div class="col-xl-4 col-lg-6 col-md-12 col-sm-12 col-xs-12 mt-4 mt-lg-4 mt-xl-0">
                        <div class="icon_box_all style_three">
                           <div class="icon_content ">
                              <div class="icon">
                                 <span class=" icon-binoculars"></span>
                              </div>
                              <div class="txt_content">
                                 <h3><a href="#" target="_blank" rel="nofollow">Our Vision</a></h3>
                                 <p>Equal blame belongs to those who fail in their duty through weakness of will which
                                    the same as saying.</p>
                              </div>
                           </div>
                        </div>
                        <!--===============spacing==============-->
                        <div class="pd_bottom_20"></div>
                        <!--===============spacing==============-->
                        <div class="simple_image_boxes  height_264px">
                           <img src="{{ asset('front/assets/images/icon-img-ab-2.jpg') }}" class="simp_img img-fluid" alt="image">
                        </div>
                     </div>
                  </div>
               </div>
            <!--===============spacing==============-->
            <div class="pd_top_90"></div>
            <!--===============spacing==============-->
            </section>




     

   <!-- <div class="bottom-action-main">
      <div class="container">
         <div class="d-flex justify-content-between">
            <div class="left-area">
               <h4>{{ $service->title }}</h4>
               <p class="price-level">
                  AED 
                  {{ number_format($minPrice, 0) }}
                  {{ $minPrice == round($minPrice) ? '.00' : '' }}
                  -
                  {{ number_format($maxPrice, 0) }}
                  {{ $maxPrice == round($maxPrice) ? '.00' : '' }}
               </p>
            </div>
            <div>
               <a href="{{ route('services.booking', $service->id) }}" class="wpcf7-form-control theme-btn one has-spinner wpcf7-submit w-100">Book Now</a>
            </div>
         </div>
      </div>
   </div> -->
   <div class="modal fade" id="fullDescriptionModal" tabindex="-1" aria-labelledby="fullDescriptionModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="fullDescriptionModalLabel">Full Description</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p id="fullDescription">{!! $service->description !!}</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
   </div>
      @endsection