@extends('front.layouts.master')

@section('content')
<!-- banner section start -->

<section id="inner-header">
  <div class="container">
    <div class="row">
      <div class="col-lg-12">
        <div class="inner-breadcrumb">
          <h2>Doctor Details</h2>
          <ul>
            <li class="breadcrumb-item font-medium text-light"><a href="{{ route('front.home') }}">Home</a></li>
            <li class="breadcrumb-item font-medium text-light"><a href="{{ route('front.our-doctors') }}">Our Doctors</a></li>
            <li>
              <p>{{ $doctor->name }}</p>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</section>
<!-- banner section end -->

<section class="mt-4">
  <div class="container">
    <!-- ── Profile card ── -->

    <div class="card border rounded-3 mb-3 p-3">
      <div class="d-flex flex-column flex-lg-row align-items-lg-center gap-3">

        <!-- Doctor Image -->
        <div class="flex-shrink-0">
          <img src="{{ !empty($doctor->image) ? image($doctor->image, DOCTOR_PATH) : asset('front/assets/img/doc-1.png') }}"
            class="dd-photo border" alt="{{ $doctor->name }}">
        </div>

        <!-- Doctor Details -->
        <div class="flex-grow-1">
          <h1 class="h5 fw-bold mb-1">{{ $doctor->name ?? '' }}</h1>
          @if ($doctor->id == 1)
            <strong style="font-size:14px;">(Director of Laparoscopy, Bariatric, Robotic and G.I surgery in Fortis Hospital, Jalandhar)</strong>
          @endif

          <p class="text-muted mb-2">
            {{ $doctor->designations ?? '' }}
          </p>

          <!-- Specialties -->
          <div class="d-flex flex-wrap gap-2 mb-3">
            @foreach($services as $ser)
            <span class="badge rounded-pill bg-secondary fw-normal">
              {{ $ser ?? '' }}
            </span>
            @endforeach
          </div>

          <!-- Meta -->
          <div class="d-flex flex-wrap gap-4 text-muted">
            <div class="d-flex align-items-center p-stlyed">
              <i class="fa-solid fa-briefcase me-2"></i>
              {!! $doctor->experience ?? '' !!}
            </div>

            <!-- Uncomment if needed -->
            <!--
                <div class="d-flex align-items-center">
                    <i class="fa-solid fa-location-dot me-2"></i>
                    <span>Ludhiana, Punjab</span>
                </div>
                -->
          </div>
        </div>

        <!-- Right Side Button -->
        <div class="ms-lg-auto align-self-center mt-3 mt-lg-0">
          @if(isset($doctor->opd_days) && $doctor->opd_days !='')
          <a href="{{ route('front.book-appointment', ['doctor' => $doctor->id]) }}"
            class="btn btn-main px-4 py-2">
            <i class="fa-solid fa-calendar-days me-2"></i>
            Book Appointment
          </a>
          @endif
        </div>

      </div>
    </div>

    <!-- ── Main two-column layout ── -->
    <div class="row g-3 pb-3">
      <!-- Left -->
      <div class="col-md-8 d-flex flex-column gap-3">
        <!-- About – remove card if no description -->
        <div class="card border rounded-3 p-3">
          <p class="text-uppercase text-muted fw-semibold mb-2">About</p>
          <p class="mb-0 text-secondary">
            {!! $doctor->description ?? '' !!}

          </p>
        </div>
        <!-- /col-md-8 -->


        <!-- /col-md-4 -->
      </div>
      <!-- Right -->
      <div class="col-md-4 d-flex flex-column gap-3">
        <!-- Call – remove if no phone -->
        <div class="card border rounded-3 p-3 text-center">
          <p class="text-uppercase text-muted mb-1">Emergency / Enquiry</p>
          <a
            href="tel:01812272829"
            class="text-dark fw-bold text-decoration-none fs-5">
            <i class="bi bi-telephone-fill text-danger"></i> 0181 5020610
          </a>
        </div>

        <!-- Personal info – remove any row whose data is missing -->
        <div class="card border rounded-3 p-3">
          <p class="text-uppercase text-muted fw-semibold mb-2">
            Personal Info
          </p>
          <ul class="list-group list-group-flush">
            <li
              class="list-group-item px-0 py-2 border-0 border-bottom d-flex gap-2">
              <i class="bi bi-envelope text-muted mt-1"></i>
              <div>
                <div class="text-muted">Email</div>
                <div class="text-break">{{ $doctor->email ?? ''}}</div>
              </div>
            </li>
            {{-- <li
              class="list-group-item px-0 py-2 border-0 border-bottom d-flex gap-2">
              <i class="bi bi-gender-female text-muted mt-1"></i>
              <div>
                <div class="text-muted">Gender</div>
                <div>{{ $doctor->gender ?? ''}}</div>
              </div>
            </li> --}}

          </ul>
        </div>
      </div>
      <!-- /row -->
    </div>
</section>
@endsection
@section('frontend_bottom_script')
@if(!empty($doctor->schema_json))
<script type="application/ld+json">
  {!! $doctor->schema_json !!}
  </script>
@endif
@endsection