@extends('template-layout.app')
@section('content')
@include('header')
	<!-- Header End -->

    <!-- Page Header Start -->
    <div class="page-header dark-section">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-12">
                    <!-- Page Header Box Start -->
                    <div class="page-header-box">
                        <h1 class="text-anime-style-3" data-cursor="-opaque">Branch</h1>
                        <nav class="wow fadeInUp">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="index.html">home</a></li>
                                <li class="breadcrumb-item active" aria-current="page">Branch</li>
                            </ol>
                        </nav>
                    </div>
                    <!-- Page Header Box End -->
                </div>
            </div>
        </div>
    </div>
    <!-- Page Header End -->

<section class="branch-page">
  <div class="container">

    <div class="branch-head">
      <h2 class="branch-title">Our Branches</h2>
      <p class="branch-subtitle">
        Visit the nearest branch for quick service, genuine parts, and expert support.
      </p>
    </div>

    <div class="branch-grid">

      <!-- Card 1 -->
@foreach ($branches as $branch)


      <article class="branch-card">
        <div class="branch-top">
          <div class="branch-name">
            <h3>{{ $branch->BN_Name }}</h3>

          </div>


        </div>

        <div class="branch-body">
          <div class="branch-info">

            <div class="info-row">
              <span class="ico">
                <!-- phone -->
                <svg viewBox="0 0 24 24" width="18" height="18"><path fill="currentColor" d="M6.62 10.79a15.05 15.05 0 006.59 6.59l2.2-2.2a1 1 0 011.01-.24c1.12.37 2.33.57 3.58.57a1 1 0 011 1V20a1 1 0 01-1 1A17 17 0 013 4a1 1 0 011-1h3.5a1 1 0 011 1c0 1.25.2 2.46.57 3.58a1 1 0 01-.24 1.01l-2.21 2.2z"/></svg>
              </span>
              <div class="info-text">
                <strong>{{ $branch->BN_phone1 }}</strong> <span class="sep">|</span> <strong>{{ $branch->BN_phone2 }}</strong>
              </div>
            </div>

            <div class="info-row">
              <span class="ico">
                <!-- mail -->
                <svg viewBox="0 0 24 24" width="18" height="18"><path fill="currentColor" d="M20 4H4a2 2 0 00-2 2v12a2 2 0 002 2h16a2 2 0 002-2V6a2 2 0 00-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>
              </span>
              <div class="info-text">
                <a href="mailto:{{ $branch->BN_Email }}">{{ $branch->BN_Email }}</a>
              </div>
            </div>

            <div class="info-row">
              <span class="ico">
                <!-- location -->
                <svg viewBox="0 0 24 24" width="18" height="18"><path fill="currentColor" d="M12 2a7 7 0 00-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 00-7-7zm0 9.5A2.5 2.5 0 1114.5 9 2.5 2.5 0 0112 11.5z"/></svg>
              </span>
              <div class="info-text">
            {{ $branch->BN_Location }}
              </div>
            </div>

            <div class="timing-row">
              <span class="time-ico">⏰</span>
              <span class="timing-text">Timing: <strong>{{ $branch->BN_Time }}</strong></span>
            </div>

            <div class="branch-actions">
              <a class="btn-primary" href="#">Branch Services</a>

            </div>
          </div>

          <div class="branch-map">
            <iframe
              src="{{ $branch->BN_MapLink }}"
              loading="lazy"
              referrerpolicy="no-referrer-when-downgrade"
              title="Al Jaddaf Branch Map">
            </iframe>
          </div>
        </div>
      </article>
@endforeach


    </div>
  </div>
</section>
<h1 class="text-center mb-5">{{ $meta_data->meta_title }}</h1>
    <!-- Our FAQs Section End -->

    <!-- Footer Main Start -->
@include('footer')

@endsection