@extends('layouts.public')

@section('title', $property->title . ' - ' . $variant->variant_type . ' Floor Plan')

@section('content')
<section class="breadcumb-section3 p-0">
    <div class="breadcrumb-overlay"></div>
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="breadcumb-style1">
                    <h2 class="title text-white">{{ $property->title }} - {{ $variant->variant_type }}</h2>
                    <div class="breadcumb-list">
                        <a class="text-white" href="{{ route('home') }}">Home</a>
                        <a class="text-white" href="{{ route('properties.index') }}">Properties</a>
                        <a class="text-white" href="{{ route('property.show', $property->slug) }}">Property Details</a>
                        <a class="text-white" href="#">Floor Plan</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="pt60 pb60">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="floor-plan-details bg-white bdrs12 p30 mb30 overflow-hidden default-box-shadow1">
                    <div class="row">
                        <div class="col-md-8 mb-md-0 mb-4">
                            <h3 class="floor-plan-title mb20">{{ $property->title }} - {{ $variant->variant_type }} Floor Plan</h3>
                            <div class="floor-plan-features mb20">
                                <div class="row">
                                    @if($variant->bedrooms)
                                    <div class="col-6 col-md-3 mb10">
                                        <div class="feature-item d-flex align-items-center">
                                            <span class="flaticon-bed icon me-2"></span>
                                            <div class="feature-content">
                                                <h6 class="feature-title mb-1">Bedrooms</h6>
                                                <p class="feature-value mb-0">{{ $variant->bedrooms }}</p>
                                            </div>
                                        </div>
                                    </div>
                                    @endif

                                    @if($variant->bathrooms)
                                    <div class="col-6 col-md-3 mb10">
                                        <div class="feature-item d-flex align-items-center">
                                            <span class="flaticon-shower icon me-2"></span>
                                            <div class="feature-content">
                                                <h6 class="feature-title mb-1">Bathrooms</h6>
                                                <p class="feature-value mb-0">{{ $variant->bathrooms }}</p>
                                            </div>
                                        </div>
                                    </div>
                                    @endif

                                    @if($variant->plot_area)
                                    <div class="col-6 col-md-3 mb10">
                                        <div class="feature-item d-flex align-items-center">
                                            <span class="flaticon-blueprint icon me-2"></span>
                                            <div class="feature-content">
                                                <h6 class="feature-title mb-1">Plot Area</h6>
                                                <p class="feature-value mb-0">{{ $variant->plot_area }} {{ $variant->plot_area_unit }}</p>
                                            </div>
                                        </div>
                                    </div>
                                    @endif

                                    @if($variant->carpet_area)
                                    <div class="col-6 col-md-3 mb10">
                                        <div class="feature-item d-flex align-items-center">
                                            <span class="flaticon-expand icon me-2"></span>
                                            <div class="feature-content">
                                                <h6 class="feature-title mb-1">Carpet Area</h6>
                                                <p class="feature-value mb-0">{{ $variant->carpet_area }} {{ $variant->carpet_area_unit }}</p>
                                            </div>
                                        </div>
                                    </div>
                                    @endif
                                </div>
                            </div>

                            <div class="floor-plan-description">
                                <p>View the detailed floor plan for {{ $variant->variant_type }} of {{ $property->title }}. The floor plan shows the layout and dimensions of the property, including room configuration and spatial arrangement.</p>

                                <div class="floor-plan-cta mt30">
                                    <a href="{{ route('property.show', $property->slug) }}" class="ud-btn btn-white2">
                                        <i class="fal fa-arrow-left-long me-2"></i> Back to Property Details
                                    </a>
                                    <a href="{{ route('enquiries.whatsapp', $property->id) }}" class="ud-btn btn-thm" target="_blank">
                                        <i class="fab fa-whatsapp me-2"></i> Enquire Now
                                    </a>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="floor-plan-price-card bdrs12 bgc-thm-light p20">
                                @if($variant->price_on_request)
                                    <h4 class="text-center">Price on Request</h4>
                                @else
                                    <h4 class="text-center">₹{{ number_format($variant->price) }}</h4>
                                @endif

                                <div class="d-grid gap-2 mt20">
                                    <button type="button" class="ud-btn btn-thm" data-bs-toggle="modal" data-bs-target="#enquiryModal">
                                        <span class="flaticon-email me-2"></span> Send Enquiry
                                    </button>
                                    <a href="{{ route('tour.create', $property->slug) }}" class="ud-btn btn-white2">
                                        <span class="flaticon-calendar me-2"></span> Schedule Tour
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="floor-plan-image bg-white bdrs12 p30 mb30 overflow-hidden default-box-shadow1">
                    <h4 class="mb20">Floor Plan</h4>
                    @if($variant->floor_plan_image)
                    <div class="floor-plan-img text-center">
                        <img src="{{ asset('uploads/properties/floor_plans/' . $variant->floor_plan_image) }}" alt="{{ $variant->variant_type }} Floor Plan" class="img-fluid">
                    </div>
                    @else
                    <div class="alert alert-warning">No floor plan image available for this unit type.</div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Enquiry Modal -->
<div class="modal fade" id="enquiryModal" tabindex="-1" aria-labelledby="enquiryModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="enquiryModalLabel">Send Enquiry - {{ $variant->variant_type }}</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <form id="enquiry-form">
        @csrf
        <input type="hidden" name="property_id" value="{{ $property->id }}">
        <input type="hidden" name="variant_type" value="{{ $variant->variant_type }}">
        <div class="modal-body">
          <div class="mb20">
            <label class="heading-color ff-heading fw600 mb10">Your Name</label>
            <input type="text" class="form-control" id="name" name="name" required>
          </div>
          <div class="mb20">
            <label class="heading-color ff-heading fw600 mb10">Email Address</label>
            <input type="email" class="form-control" id="email" name="email" required>
          </div>
          <div class="mb20">
            <label class="heading-color ff-heading fw600 mb10">Phone Number</label>
            <input type="tel" class="form-control" id="phone" name="phone" required>
          </div>
          <div class="mb20">
            <label class="heading-color ff-heading fw600 mb10">Message</label>
            <textarea class="form-control" id="message" name="message" rows="3">Hi, I am interested in the {{ $variant->variant_type }} of {{ $property->title }}.</textarea>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="ud-btn btn-white" data-bs-dismiss="modal">Close</button>
          <button type="submit" class="ud-btn btn-thm">Send Enquiry<i class="fal fa-arrow-right-long"></i></button>
        </div>
      </form>
    </div>
  </div>
</div>
@endsection

@section('styles')
<style>
  /* Floor Plan Page Specific Styles */
  .breadcumb-section3 {
    background-image: url("{{ asset('images/background/compare-bg.jpg') }}");
    background-size: cover;
    background-position: center;
    padding: 80px 0;
    position: relative;
  }

  .breadcumb-section3::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
  }

  .breadcumb-style1 {
    position: relative;
    z-index: 1;
    padding: 30px 0;
  }

  .floor-plan-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--thm-base);
  }

  .floor-plan-features .feature-item .icon {
    font-size: 24px;
    color: var(--thm-base);
  }

  .floor-plan-features .feature-title {
    font-size: 14px;
    color: #6c757d;
  }

  .floor-plan-features .feature-value {
    font-size: 16px;
    font-weight: 600;
  }

  .floor-plan-description {
    line-height: 1.6;
    color: #6c757d;
  }

  .floor-plan-price-card {
    border: 1px solid #eee;
  }

  .floor-plan-price-card h4 {
    font-size: 24px;
    font-weight: 700;
    color: var(--thm-base);
  }

  .floor-plan-img {
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 20px;
    background-color: #f9f9f9;
  }
</style>
@endsection

@section('scripts')
<script>
  // Enquiry Form Submission
  document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('enquiry-form').addEventListener('submit', function(e) {
      e.preventDefault();

      const formData = new FormData(this);

      fetch("{{ route('enquiries.store') }}", {
        method: 'POST',
        body: formData,
        headers: {
          'X-CSRF-TOKEN': "{{ csrf_token() }}",
          'Accept': 'application/json'
        }
      })
      .then(response => response.json())
      .then(data => {
        if (data.success) {
          alert(data.message);
          $('#enquiryModal').modal('hide');
          document.getElementById('enquiry-form').reset();

          if (data.redirect) {
            window.location.href = data.redirect;
          }
        } else {
          alert('Something went wrong. Please try again.');
        }
      })
      .catch(error => {
        console.error('Error:', error);
        alert('An error occurred. Please try again.');
      });
    });
  });
</script>
@endsection