@extends("frontend.layouts.app")

@section("title")
    {{ app_name() }}
@endsection

@section("content")
<section class="profile-sec inner-page">
  <div class="container">
    <div class="row">
      <div class="col-sm-8 left-box">
        <h2>{{ $broker->title }}</h2>
        <p>{!! $broker->description !!}</p>
        <div class="btn-box mt-3 mb-5">
          <a href="#" class="btn btn-primary"> Contact Now</a>
        </div>
        @php
            $videoId = null;
            $youtubeUpload = $broker->brokerUploads->whereNotNull('youtube_link')->first(); // Get first YouTube record

            if ($youtubeUpload && preg_match('/(?:youtu\.be\/|youtube\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|e(?:mbed)?)\/|\S*?[?&]v=))([^"&?\/\s]{11})/i', $youtubeUpload->youtube_link, $matches)) {
                $videoId = $matches[1];
            }
        @endphp
        @if($videoId)
            <div class="embed-responsive" style="width: auto; height: 450px; overflow: hidden;">
                <iframe class="embed-responsive-item" 
                        src="https://www.youtube.com/embed/{{ $videoId }}" 
                        allowfullscreen 
                        frameborder="0" 
                        style="width: 100%; height: 100%; object-fit: cover;">
                </iframe>
            </div>
        @else
            <p>YouTube video unavailable.</p>
        @endif
      </div>

      <div class="col-sm-4 right-box">
        <div class="profile-info box-1 mb-3">
          <div class="info-top d-flex align-items-center">
            <figure class="me-3">
              <img src="{{ asset($broker->avatar) }}" alt="" class="">
            </figure>
            <div class="content">
              <h3>{{ $broker->contact_name }}</h3>
              <p>{{ $broker->introduction }}</p>
              <p>{{ $broker->company_name }}</p>
            </div>
          </div>
          <div class="info-mid mt-3">
            <div class="rating">
              @for ($i = 1; $i <= 5; $i++)
                <i class="fas fa-star {{ $i <= $broker->average_stars ? 'text-warning' : 'text-muted' }}"></i>
              @endfor
              <span>{{ $broker->average_stars }} stars</span><!-- Greyed out for 4/5 rating -->
            </div>
            <p>({{ count($broker->reviews) }} reviews)</p>
          </div>
          <div class="info-bottom d-flex">
            <a href="tel:{{ $broker->enquire_now }}" class="btn btn-outline-primary" style="width: 50%;">Enquire now</a>
            <a href="tel:{{ $broker->whatsapp }}" class="btn btn-outline-success" style="width: 50%;"><i class="fa-brands fa-whatsapp"></i> Whatsapp</a>
          </div>
        </div>

        <div class="profile-info box-2 mb-3">
          <div class="icon-box d-flex align-items-center mb-3">
            <i class="fa-solid fa-phone me-2"></i>
            <p><a href="tel:{{ $broker->mobile }}">{{ $broker->mobile }}</a></p>
          </div>
          <div class="icon-box d-flex align-items-center mb-3">
            <i class="fa-solid fa-envelope me-2"></i>
            <p><a href="mailto:{{ $broker->email }}">{{ $broker->email }}</a></p>
          </div>
          <div class="icon-box d-flex align-items-center mb-3">
            <i class="fa-solid fa-earth-americas me-2"></i>
            <p><a href="{{ $broker->website }}" target="_blank">{{ $broker->website }}</a></p>
          </div>
        </div>

        <div class="profile-info box-3">
          <div class="time-info mb-3">
            <p><b>Operates in:</b><br> {{ $broker->state }}</p>
            <div class="info d-flex align-items-center">
              <i class="fa-regular fa-calendar-days me-2"></i>
              <p><b>Opening Hours:</b><br>Mon - Fri : {{ $broker->opening_hours }}</p>
            </div>
          </div>
          <div class="shedule-info mb-3">
            <p><b>Deals in:</b><br> {{ $broker->deals_in }}</p>
          </div>
          <div class="address-info">
            <p><b>Location:</b></p>
            <div class="info d-flex align-items-center">
              <img src="{{asset('images/address-icon.png')}}" alt="" class="me-2">
              <p>{{ $broker->address }}, {{ $broker->city }}, {{ $broker->state }}, {{ $broker->postcode }}, United States</p>
            </div>
          </div>
        </div>

        <!-- Social Media Icons -->
        <div class="social-icons mt-4 text-center">
          <a href="{{ $broker->linkedin }}" target="_blank" class="me-3">
            <i class="fab fa-linkedin fa-2x" style="color: #0077b5;"></i>
          </a>
          <a href="{{ $broker->facebook }}" target="_blank" class="me-3">
            <i class="fab fa-facebook fa-2x" style="color: #3b5998;"></i>
          </a>
          <a href="{{ $broker->instagram }}" target="_blank" class="me-3">
            <i class="fab fa-instagram fa-2x" style="color: #e4405f;"></i>
          </a>
          <a href="{{ $broker->youtube }}" target="_blank">
            <i class="fab fa-youtube fa-2x" style="color: #ff0000;"></i>
          </a>
        </div>

      </div>

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


<section class="our-team inner-page">
  <div class="container">
    <div class="row">
      <div class="col-sm-12 heading">
        <h2>Meet Our Team</h2>
      </div>
      @foreach($broker->teams as $team)
      <div class="col-sm-4">
        <div class="team-box">
          <div class="team-head col-sm-12 mb-2">
          <figure><img src="{{asset($team->profile_image)}}" alt="" style="border-radius: 50%;"></figure>
          <h3>{{$team->name}}</h3>
          </div>
          <div class=" col-sm-12 left"><p>{{$team->designation}}</p></div>
          <div class=" col-sm-12 right mt-3"><a href="{{$team->facebook}}"><i class="fa-brands fa-facebook-f"></i></a><a href="{{$team->linkedin}}"><i class="fa-brands fa-linkedin-in"></i></a></div>
        </div>
      </div>
      @endforeach
    </div>
  </div>
</section>

<section class="highlight-sec inner-page">
    <div class="container">
      <div class="row">
        <div class="col-sm-12">
          <h2>Gallery</h2>
        </div>
        <div class="owl-carousel" id="owl-demo-3">
            @foreach($broker->brokerUploads as $upload)
                @if($upload->photo)  <!-- Check if it's an image -->
                <div class="item black">
                        <img src="{{ asset($upload->photo) }}" alt="Image" style="width: 900px; height: 450px; object-fit: cover;">
                </div>
                @endif
            @endforeach
        </div>
      </div>
    </div>
</section>



<section class="testimonial-sec inner-page">
    <div class="container">
        <div class="row">
            <div class="heading col-sm-12 ">
                <h2 class="text-center">What Our Client Say About Us</h2>
            </div>
            <div class="col-sm-12">
                <div class="owl-carousel owl-theme" id="owl-demo-1">
                    @foreach($broker->reviews as $review)
                    <div class="item">
                        <div class="item-box">
                            <div class="item-content">
                                <div class="rating">
                                    @for ($i = 1; $i <= 5; $i++)
                                        <i class="fas fa-star {{ $i <= $review->stars ? 'text-warning' : 'text-muted' }}"></i>
                                      @endfor
                                </div>
                                <p>“{{ $review->client_review }}”</p>
                            </div>
                            <div class="box-bottom">
                                <figure>
                                    <img src="{{ asset($review->client_image) }}" alt="">
                                </figure>
                                <div>
                                    <h4>{{ $review->client_name }}</h4>
                                    <p>{{ $review->client_designation }}</p>
                                </div>
                            </div>
                        </div>

                    </div>
                    @endforeach
                </div>
            </div>


        </div>
    </div>
</section>
@endsection