@extends('layouts.public')

@section('title', $product->name . ' - Car Rental')

@section('head-extra')
<style>
  .product-card, .booking-card, .related-card {
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 18px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
  }
  .product-card, .booking-card { padding: 24px; }
  .main-photo { width: 100%; height: 420px; object-fit: cover; border-radius: 14px; background: #eef2f7; }
  .thumb-photo { width: 100%; height: 90px; object-fit: cover; border-radius: 10px; background: #eef2f7; }
  .price-line { font-size: 1.2rem; font-weight: 700; }
  .related-card { overflow: hidden; height: 100%; }
  .related-card img { width: 100%; height: 150px; object-fit: cover; background: #eef2f7; }
  .related-body { padding: 16px; }
  .estimate-box {
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 14px 16px;
  }
</style>
@endsection

@section('content')
<div class="container py-5">
  <div class="mb-4">
    <a href="{{ route('car-rental.index') }}" class="text-decoration-none text-muted">
      <i class="ti tabler-arrow-left me-1"></i> Back to car rental listing
    </a>
  </div>

  <div class="row g-4">
    <div class="col-lg-7">
      <div class="product-card">
        @php $mainPhoto = $product->photos->first(); @endphp
        @if($mainPhoto)
          <img src="{{ asset($mainPhoto->path) }}" alt="{{ $product->name }}" class="main-photo mb-3">
        @else
          <div class="d-flex align-items-center justify-content-center main-photo mb-3 text-muted fw-semibold">No Image</div>
        @endif

        @if($product->photos->count() > 1)
          <div class="row g-2 mb-3">
            @foreach($product->photos->take(4) as $photo)
              <div class="col-3">
                <img src="{{ asset($photo->path) }}" alt="{{ $product->name }}" class="thumb-photo">
              </div>
            @endforeach
          </div>
        @endif

        <div class="d-flex align-items-start justify-content-between gap-3 mb-3">
          <div>
            <span class="badge bg-label-primary mb-2">{{ $category->name }}</span>
            <h1 class="h3 mb-1">{{ $product->name }}</h1>
            <div class="text-muted">
              {{ $product->is_available ? 'Available for online booking' : 'Currently unavailable for selected dates' }}
            </div>
          </div>
          <div class="price-line text-end">
            ${{ number_format((float) $product->display_price, 2) }}
            <div class="small text-muted fw-normal">{{ str_replace('_', ' ', $product->display_rate_type ?? 'per_booking') }}</div>
          </div>
        </div>

        <div class="mb-3">
          {!! nl2br(e(trim((string) $product->description))) !!}
        </div>

        @if($product->tags->isNotEmpty())
          <div>
            @foreach($product->tags as $tag)
              <span class="badge bg-label-secondary me-1 mb-1">{{ $tag->name }}</span>
            @endforeach
          </div>
        @endif
      </div>
    </div>

    <div class="col-lg-5">
      <div class="booking-card">
        <h2 class="h4 mb-3">Book This Vehicle</h2>
        <form method="GET" action="{{ route('car-rental.checkout') }}" id="carRentalBookingForm">
          <input type="hidden" name="product_id" value="{{ $product->id }}">

          <div class="mb-3">
            <label class="form-label">Start</label>
            <input type="datetime-local" class="form-control" name="start" id="startInput" required
                   value="{{ request('start', now()->addHour()->format('Y-m-d\TH:i')) }}">
          </div>

          <div class="mb-3">
            <label class="form-label">End</label>
            <input type="datetime-local" class="form-control" name="end" id="endInput" required
                   value="{{ request('end', now()->addHours(4)->format('Y-m-d\TH:i')) }}">
          </div>

          <div class="mb-3">
            <label class="form-label">Discount Code</label>
            <input type="text" class="form-control" name="discount_code" id="discountCodeInput" value="{{ request('discount_code') }}" placeholder="Optional">
          </div>

          <div class="estimate-box mb-3" id="estimateBox">
            <div class="d-flex justify-content-between"><span>Estimated total</span><strong id="estimateTotal">--</strong></div>
            <div class="small text-muted mt-1" id="estimateMeta">Choose your start and end time to calculate pricing.</div>
          </div>

          <button type="submit" class="btn btn-primary w-100" {{ $product->is_available ? '' : 'disabled' }}>
            Continue to Checkout
          </button>
        </form>
      </div>
    </div>
  </div>

  @if($relatedProducts->isNotEmpty())
    <div class="mt-5">
      <h3 class="h4 mb-3">More Car Rental Listings</h3>
      <div class="row g-4">
        @foreach($relatedProducts as $relatedProduct)
          @php $relatedPhoto = $relatedProduct->photos->first(); @endphp
          <div class="col-md-6 col-xl-3">
            <div class="related-card">
              @if($relatedPhoto)
                <img src="{{ asset($relatedPhoto->path) }}" alt="{{ $relatedProduct->name }}">
              @else
                <div class="d-flex align-items-center justify-content-center" style="height:150px;background:#eef2f7;">No Image</div>
              @endif
              <div class="related-body">
                <div class="fw-semibold mb-2">{{ $relatedProduct->name }}</div>
                <a href="{{ route('car-rental.show', $relatedProduct->hash_id) }}" class="btn btn-outline-primary btn-sm w-100">Open Listing</a>
              </div>
            </div>
          </div>
        @endforeach
      </div>
    </div>
  @endif
</div>
@endsection

@section('page-script')
<script>
  document.addEventListener('DOMContentLoaded', function () {
    const startInput = document.getElementById('startInput');
    const endInput = document.getElementById('endInput');
    const discountCodeInput = document.getElementById('discountCodeInput');
    const estimateTotal = document.getElementById('estimateTotal');
    const estimateMeta = document.getElementById('estimateMeta');

    async function refreshEstimate() {
      if (!startInput.value || !endInput.value) {
        return;
      }

      const startDate = new Date(startInput.value);
      const endDate = new Date(endInput.value);
      if (!(endDate > startDate)) {
        estimateTotal.textContent = '--';
        estimateMeta.textContent = 'End time must be after the start time.';
        return;
      }

      estimateMeta.textContent = 'Calculating...';

      const response = await fetch('{{ route('car-rental.calculate-price') }}', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        body: JSON.stringify({
          product_id: {{ $product->id }},
          start: startInput.value.replace('T', ' '),
          end: endInput.value.replace('T', ' '),
          discount_code: discountCodeInput.value || null
        })
      });

      const data = await response.json();
      if (!response.ok) {
        estimateTotal.textContent = '--';
        estimateMeta.textContent = data.message || 'Pricing could not be calculated for the selected dates.';
        return;
      }

      estimateTotal.textContent = '$' + data.total;
      estimateMeta.textContent = (data.rate_label || 'Estimated pricing') + ' including taxes and discounts.';
    }

    startInput.addEventListener('change', refreshEstimate);
    endInput.addEventListener('change', refreshEstimate);
    discountCodeInput.addEventListener('change', refreshEstimate);

    refreshEstimate();
  });
</script>
@endsection