<?php
require_once __DIR__ . "/../includes/config.php";
session_start_secure();
$user = current_user();
$vet_id = isset($_GET["id"]) ? (int)$_GET["id"] : 0;
$lang  = $user["lang_pref"]  ?? "ar";
$theme = $user["theme_pref"] ?? "light";
?>
<!DOCTYPE html>
<html lang="<?php echo htmlspecialchars($lang); ?>" dir="rtl" data-theme="<?php echo htmlspecialchars($theme); ?>">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="theme-color" content="#1a7f5a">
<title>بيطري — ملف الطبيب</title>
<link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800;900&display=swap" rel="stylesheet">
<style>
:root{
  --green-50:#f0faf5;--green-100:#d6f2e5;--green-200:#aae3cb;
  --green-400:#4aba8a;--green-500:#1a9f6a;--green-600:#1a7f5a;--green-700:#155f44;
  --blue-400:#60a5fa;--blue-500:#3b82f6;--blue-50:#eff6ff;
  --red-500:#ef4444;--amber-400:#fbbf24;--amber-500:#f59e0b;
  --bg:#f7faf9;--bg-card:#fff;--bg-input:#f3f7f5;
  --border:#e0ece7;--text-primary:#0e2d20;--text-sec:#4a7060;--text-muted:#8aaa9a;
  --shadow-sm:0 1px 4px rgba(0,60,30,.06);--shadow-md:0 4px 20px rgba(0,60,30,.10);
  --shadow-lg:0 8px 40px rgba(0,60,30,.15);
  --radius-sm:10px;--radius-md:16px;--radius-lg:24px;
  --nav-height:68px;--transition:.22s cubic-bezier(.4,0,.2,1);
}
[data-theme="dark"]{
  --bg:#0a1a12;--bg-card:#122010;--bg-input:#1a2e1e;
  --border:#1e3828;--text-primary:#e0f2e9;--text-sec:#8abfa0;--text-muted:#4a7060;
  --green-50:#0d1f14;--green-100:#112918;--blue-50:#0a1220;
  --shadow-md:0 4px 20px rgba(0,0,0,.4);--shadow-lg:0 8px 40px rgba(0,0,0,.5);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Tajawal',sans-serif;background:var(--bg);color:var(--text-primary);min-height:100dvh;-webkit-font-smoothing:antialiased;}
button{cursor:pointer;border:none;background:none;font-family:inherit;}
img{max-width:100%;display:block;}
.page-wrap{max-width:480px;margin:0 auto;padding-bottom:calc(var(--nav-height)+20px);}

/* ── HERO ── */
.vet-hero{
  background:linear-gradient(160deg,var(--green-700),var(--green-500) 60%,var(--blue-500));
  padding:20px 20px 0;
  position:relative;overflow:hidden;
}
.vet-hero::before{
  content:'';position:absolute;top:-50px;left:-50px;
  width:200px;height:200px;background:rgba(255,255,255,.06);border-radius:50%;
}
.back-btn{
  display:flex;align-items:center;gap:8px;
  color:rgba(255,255,255,.85);font-size:14px;font-weight:700;
  cursor:pointer;margin-bottom:24px;
  width:fit-content;
}
.back-btn .bi{font-size:20px;}

.vet-hero-body{
  display:flex;gap:16px;align-items:flex-start;
  position:relative;z-index:1;
}
.vet-big-avatar{
  width:84px;height:84px;
  border-radius:24px;flex-shrink:0;
  background:rgba(255,255,255,.2);
  border:3px solid rgba(255,255,255,.4);
  display:flex;align-items:center;justify-content:center;
  font-size:40px;
}
.vet-hero-info{flex:1;}
.vet-hero-name{font-size:20px;font-weight:900;color:#fff;}
.vet-hero-spec{font-size:13px;color:rgba(255,255,255,.8);margin-top:3px;font-weight:600;}
.vet-hero-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;}
.hero-badge{
  display:flex;align-items:center;gap:4px;
  background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.25);
  border-radius:20px;padding:4px 10px;
  font-size:12px;color:#fff;font-weight:600;
  backdrop-filter:blur(4px);
}

/* Status indicator */
.status-strip{
  display:flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.12);
  padding:10px 16px;margin:16px 0 0;
  border-radius:12px 12px 0 0;
}
.status-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;}
.status-dot.available{background:#4ade80;box-shadow:0 0 0 3px rgba(74,222,128,.3);}
.status-dot.busy{background:var(--amber-400);}
.status-dot.offline{background:#94a3b8;}
.status-text{font-size:13px;color:#fff;font-weight:700;}
.status-sub{font-size:11px;color:rgba(255,255,255,.7);margin-right:auto;}

/* ── ACTION BUTTONS ── */
.action-bar{
  display:flex;gap:10px;
  padding:16px;
  background:var(--bg-card);
  border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:50;
  box-shadow:var(--shadow-sm);
}
.btn-call{
  flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
  background:linear-gradient(135deg,var(--green-700),var(--green-500));
  color:white;border-radius:var(--radius-sm);padding:12px;
  font-size:14px;font-weight:800;
  box-shadow:0 3px 12px rgba(26,127,90,.25);transition:var(--transition);
}
.btn-call:hover{opacity:.9;}
.btn-book{
  flex:2;display:flex;align-items:center;justify-content:center;gap:8px;
  background:linear-gradient(135deg,var(--green-600),var(--green-400));
  color:white;border-radius:var(--radius-sm);padding:12px;
  font-size:15px;font-weight:800;
  box-shadow:0 3px 16px rgba(26,127,90,.3);transition:var(--transition);
}
.btn-book:hover{opacity:.9;transform:translateY(-1px);}
.btn-fav{
  width:46px;height:46px;
  background:var(--bg-input);border-radius:var(--radius-sm);
  display:flex;align-items:center;justify-content:center;
  font-size:20px;transition:var(--transition);
  border:1.5px solid var(--border);
}
.btn-fav.active{background:#fff5f5;border-color:#fca5a5;color:var(--red-500);}

/* ── CONTENT SECTIONS ── */
.section{padding:20px 16px 0;}
.section-title{font-size:16px;font-weight:800;color:var(--text-primary);margin-bottom:14px;}

/* Stats row */
.stats-row{display:flex;gap:10px;}
.stat-box{
  flex:1;background:var(--bg-card);border-radius:var(--radius-md);
  padding:14px 10px;text-align:center;
  border:1px solid var(--border);box-shadow:var(--shadow-sm);
}
.sb-num{font-size:22px;font-weight:900;color:var(--green-600);}
.sb-label{font-size:11px;color:var(--text-muted);font-weight:600;margin-top:2px;}

/* About */
.about-text{
  font-size:14px;line-height:1.7;color:var(--text-sec);
  background:var(--bg-card);border-radius:var(--radius-md);
  padding:16px;border:1px solid var(--border);
}
.read-more{
  color:var(--green-600);font-weight:700;cursor:pointer;
  font-size:13px;margin-top:6px;display:inline-block;
}

/* Services */
.services-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.service-item{
  background:var(--bg-card);border-radius:var(--radius-md);
  padding:14px 12px;border:1px solid var(--border);
  display:flex;align-items:center;gap:10px;
  transition:var(--transition);
}
.service-item:hover{border-color:var(--green-300);}
.si-icon-wrap{
  width:38px;height:38px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-size:20px;flex-shrink:0;
}
.si-text-wrap .si-name{font-size:13px;font-weight:700;color:var(--text-primary);}
.si-text-wrap .si-fee{font-size:11px;color:var(--green-600);font-weight:700;margin-top:2px;}

/* Schedule */
.schedule-grid{display:flex;flex-direction:column;gap:6px;}
.schedule-row{
  display:flex;justify-content:space-between;align-items:center;
  background:var(--bg-card);border-radius:var(--radius-sm);
  padding:12px 14px;border:1px solid var(--border);
}
.sr-day{font-size:14px;font-weight:700;color:var(--text-primary);}
.sr-hours{font-size:13px;color:var(--green-600);font-weight:600;}
.sr-closed{font-size:13px;color:var(--text-muted);}

/* Map section */
.map-placeholder{
  height:160px;
  background:linear-gradient(135deg,var(--green-50),var(--blue-50));
  border-radius:var(--radius-md);
  border:1px solid var(--border);
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:8px;
  cursor:pointer;
  overflow:hidden;
  position:relative;
}
.map-grid{
  position:absolute;inset:0;
  background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);
  background-size:30px 30px;
  opacity:.4;
}
.map-pin{font-size:36px;position:relative;z-index:1;}
.map-addr{font-size:13px;font-weight:700;color:var(--text-sec);position:relative;z-index:1;text-align:center;padding:0 20px;}
.map-link{
  font-size:12px;color:var(--green-600);font-weight:700;
  background:var(--bg-card);border-radius:20px;
  padding:5px 14px;margin-top:4px;
  position:relative;z-index:1;
  border:1px solid var(--green-200);
}

/* Reviews */
.rating-summary{
  display:flex;align-items:center;gap:20px;
  background:var(--bg-card);border-radius:var(--radius-md);
  padding:16px;border:1px solid var(--border);
  margin-bottom:12px;
}
.big-rating{
  font-size:48px;font-weight:900;color:var(--text-primary);
  line-height:1;
}
.rating-detail{flex:1;}
.stars-row{display:flex;align-items:center;gap:6px;margin-bottom:4px;}
.star-bars{flex:1;}
.star-bar-row{display:flex;align-items:center;gap:6px;margin-bottom:4px;}
.star-bar-row span{font-size:11px;color:var(--text-muted);width:10px;text-align:center;}
.star-bar-track{flex:1;height:6px;background:var(--border);border-radius:3px;overflow:hidden;}
.star-bar-fill{height:100%;background:var(--amber-400);border-radius:3px;}
.star-bar-count{font-size:11px;color:var(--text-muted);width:20px;text-align:right;}

.review-card{
  background:var(--bg-card);border-radius:var(--radius-md);
  padding:14px;border:1px solid var(--border);margin-bottom:10px;
}
.review-header{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.review-avatar{
  width:38px;height:38px;border-radius:12px;
  background:var(--green-50);
  display:flex;align-items:center;justify-content:center;
  font-size:18px;flex-shrink:0;
}
.review-name{font-size:14px;font-weight:800;color:var(--text-primary);}
.review-date{font-size:11px;color:var(--text-muted);}
.review-stars{color:var(--amber-400);font-size:13px;margin-bottom:6px;}
.review-text{font-size:13px;color:var(--text-sec);line-height:1.6;}

/* Bottom CTA */
.bottom-cta{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:480px;
  background:var(--bg-card);
  border-top:1px solid var(--border);
  padding:12px 16px;
  padding-bottom:max(12px,env(safe-area-inset-bottom));
  z-index:100;
  box-shadow:0 -4px 20px rgba(0,0,0,.08);
  display:flex;gap:10px;align-items:center;
}
.cta-price{
  flex-shrink:0;
}
.cta-price .price-from{font-size:11px;color:var(--text-muted);font-weight:600;}
.cta-price .price-num{font-size:20px;font-weight:900;color:var(--green-700);}
.cta-price .price-cur{font-size:12px;color:var(--text-sec);}
.btn-cta-book{
  flex:1;
  background:linear-gradient(135deg,var(--green-700),var(--green-500));
  color:white;border-radius:var(--radius-sm);
  padding:14px;font-size:16px;font-weight:800;
  text-align:center;
  box-shadow:0 4px 16px rgba(26,127,90,.3);
  transition:var(--transition);
}
.btn-cta-book:hover{opacity:.9;transform:translateY(-1px);}

/* Report modal */
.modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.5);
  z-index:500;display:none;align-items:flex-end;justify-content:center;
  backdrop-filter:blur(3px);
}
.modal-overlay.open{display:flex;}
.modal-sheet{
  width:100%;max-width:480px;
  background:var(--bg-card);
  border-radius:28px 28px 0 0;
  padding:0 0 32px;
  max-height:90dvh;overflow-y:auto;
  animation:slideUp .35s cubic-bezier(.32,0,.67,0) both;
}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.modal-handle{width:40px;height:4px;background:var(--border);border-radius:2px;margin:14px auto 0;}
.modal-header{display:flex;align-items:center;gap:14px;padding:16px 20px;border-bottom:1px solid var(--border);}
.modal-title{font-size:18px;font-weight:800;flex:1;}
.modal-close{width:34px;height:34px;background:var(--bg-input);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px;cursor:pointer;}
.modal-body{padding:20px;}
.form-input{width:100%;background:var(--bg-input);border:1.5px solid var(--border);border-radius:var(--radius-sm);padding:12px 14px;font-size:14px;color:var(--text-primary);font-family:'Tajawal',sans-serif;transition:var(--transition);}
.form-input:focus{border-color:var(--green-500);background:var(--bg-card);outline:none;box-shadow:0 0 0 3px rgba(26,159,106,.1);}
.form-textarea{width:100%;background:var(--bg-input);border:1.5px solid var(--border);border-radius:var(--radius-sm);padding:12px 14px;font-size:14px;color:var(--text-primary);font-family:'Tajawal',sans-serif;resize:none;min-height:100px;transition:var(--transition);outline:none;}
.form-textarea:focus{border-color:var(--green-500);background:var(--bg-card);box-shadow:0 0 0 3px rgba(26,159,106,.1);}
.form-label{font-size:13px;font-weight:700;color:var(--text-sec);margin-bottom:6px;display:block;}
.btn-primary{width:100%;background:linear-gradient(135deg,var(--green-700),var(--green-500));color:white;border-radius:var(--radius-sm);padding:14px;font-size:16px;font-weight:800;text-align:center;transition:var(--transition);box-shadow:0 4px 16px rgba(26,127,90,.3);margin-top:8px;}
.btn-primary:hover{opacity:.9;}

/* Toast */
#toast{position:fixed;top:16px;left:50%;transform:translateX(-50%);background:var(--bg-card);border-radius:var(--radius-md);padding:14px 20px;display:flex;align-items:center;gap:10px;box-shadow:0 20px 60px rgba(0,0,0,.2);border:1px solid var(--border);font-size:13px;font-weight:700;z-index:9999;opacity:0;pointer-events:none;transition:opacity .3s;width:90%;max-width:360px;}
#toast.show{opacity:1;pointer-events:auto;}
</style>
</head>
<body>

<div id="toast"><span id="ti">✅</span><span id="tm"></span></div>

<!-- Report Modal -->
<div class="modal-overlay" id="report-modal">
  <div class="modal-sheet">
    <div class="modal-handle"></div>
    <div class="modal-header">
      <div class="modal-title">الإبلاغ عن الطبيب</div>
      <div class="modal-close" onclick="closeModal()">✕</div>
    </div>
    <div class="modal-body">
      <div class="form-group" style="margin-bottom:12px;">
        <label class="form-label">سبب الإبلاغ</label>
        <select class="form-input" style="appearance:none;cursor:pointer;">
          <option>معلومات غير صحيحة</option>
          <option>سلوك غير لائق</option>
          <option>احتيال أو نصب</option>
          <option>أخرى</option>
        </select>
      </div>
      <div class="form-group" style="margin-bottom:12px;">
        <label class="form-label">التفاصيل</label>
        <textarea class="form-textarea" placeholder="اكتب تفاصيل إضافية..."></textarea>
      </div>
      <button class="btn-primary" onclick="closeModal();showToast('success','تم إرسال البلاغ، شكراً لك')">إرسال البلاغ</button>
    </div>
  </div>
</div>

<div class="page-wrap">

  <!-- HERO -->
  <div class="vet-hero">
    <div class="back-btn" onclick="history.back()">
      <span class="bi">←</span> رجوع
    </div>
    <div class="vet-hero-body">
      <div class="vet-big-avatar" id="vet-avatar">👨‍⚕️</div>
      <div class="vet-hero-info">
        <div class="vet-hero-name" id="vet-name">د. كريم حداد</div>
        <div class="vet-hero-spec" id="vet-spec">طب الحيوانات الأليفة</div>
        <div class="vet-hero-meta">
          <div class="hero-badge">⭐ 4.9</div>
          <div class="hero-badge">📍 1.2 كم</div>
          <div class="hero-badge">🏥 زيارة منزلية</div>
        </div>
      </div>
    </div>
    <div class="status-strip">
      <div class="status-dot available" id="status-dot"></div>
      <div class="status-text" id="status-text">متاح الآن</div>
      <div class="status-sub" id="status-sub">يقبل طلبات الطوارئ</div>
    </div>
  </div>

  <!-- ACTION BAR -->
  <div class="action-bar">
    <button class="btn-call" onclick="window.location.href='vet-clinic-setup.php'" title='إعداد العيادة'>📞</button>
    <button class="btn-book" onclick="openBookingPage()">📅 احجز موعداً</button>
    <button class="btn-fav" id="fav-btn" onclick="toggleFav()">🤍</button>
  </div>

  <!-- STATS -->
  <div class="section">
    <div class="stats-row">
      <div class="stat-box">
        <div class="sb-num">12</div>
        <div class="sb-label">سنوات خبرة</div>
      </div>
      <div class="stat-box">
        <div class="sb-num">128</div>
        <div class="sb-label">تقييم</div>
      </div>
      <div class="stat-box">
        <div class="sb-num">850+</div>
        <div class="sb-label">حالة علاجية</div>
      </div>
      <div class="stat-box">
        <div class="sb-num" style="color:var(--amber-500);">4.9⭐</div>
        <div class="sb-label">التقييم العام</div>
      </div>
    </div>
  </div>

  <!-- ABOUT -->
  <div class="section">
    <div class="section-title">نبذة عن الطبيب</div>
    <div class="about-text" id="about-text">
      دكتور كريم حداد، طبيب بيطري متخصص في طب الحيوانات الأليفة (القطط والكلاب) منذ أكثر من 12 عاماً. حاصل على دكتوراه في الطب البيطري من جامعة الجزائر، مع تخصص في الجراحة البيطرية الدقيقة ورعاية الحيوانات المزمنة.
      <span id="about-more" style="display:none;"> يمارس عمله في عيادة الشفاء البيطرية بالجزائر العاصمة، ويقدم أيضاً خدمات الزيارة المنزلية لأصحاب الحيوانات في نطاق 15 كلم.</span>
      <div class="read-more" onclick="toggleAbout()">قراءة المزيد ↓</div>
    </div>
  </div>

  <!-- SERVICES -->
  <div class="section">
    <div class="section-title">الخدمات والأسعار</div>
    <div class="services-grid" id="services-grid"></div>
  </div>

  <!-- SCHEDULE -->
  <div class="section">
    <div class="section-title">جدول العمل</div>
    <div class="schedule-grid" id="schedule-grid"></div>
  </div>

  <!-- LOCATION -->
  <div class="section">
    <div class="section-title">موقع العيادة</div>
    <div class="map-placeholder" onclick="showToast('info','يفتح خريطة Google')">
      <div class="map-grid"></div>
      <div class="map-pin">📍</div>
      <div class="map-addr">عيادة الشفاء البيطرية، حيدرة، الجزائر العاصمة</div>
      <div class="map-link">فتح الخريطة ↗</div>
    </div>
  </div>

  <!-- REVIEWS -->
  <div class="section" style="padding-bottom:24px;">
    <div class="section-title">التقييمات</div>
    <div class="rating-summary">
      <div class="big-rating">4.9</div>
      <div class="rating-detail">
        <div class="stars-row">
          <span style="color:var(--amber-400);font-size:18px;">⭐⭐⭐⭐⭐</span>
          <span style="font-size:12px;color:var(--text-muted);">128 تقييم</span>
        </div>
        <div class="star-bars" id="star-bars"></div>
      </div>
    </div>
    <div id="reviews-container"></div>

    <!-- Report link -->
    <div style="text-align:center;margin-top:16px;">
      <span style="font-size:13px;color:var(--text-muted);cursor:pointer;" onclick="document.getElementById('report-modal').classList.add('open')">
        ⚠️ الإبلاغ عن هذا الطبيب
      </span>
    </div>
  </div>

</div><!-- /page-wrap -->

<!-- BOTTOM CTA -->
<div class="bottom-cta">
  <div class="cta-price">
    <div class="price-from">من</div>
    <div class="price-num">2,000 <span class="price-cur">دج</span></div>
  </div>
  <button class="btn-cta-book" onclick="openBookingPage()">📅 احجز الآن</button>
</div>

<script>
// Theme
const th = localStorage.getItem('baitari_theme') || 'light';
document.documentElement.setAttribute('data-theme', th);

// Data
const VET = {
  name: 'د. كريم حداد',
  specialty: 'طب الحيوانات الأليفة',
  rating: 4.9, reviews: 128,
  available: true, emergency: true,
  fee_clinic: 2000, fee_home: 3500,
};

const SERVICES = [
  { icon:'💉', name:'تطعيمات', fee:'500 دج', bg:'#f0fdf4' },
  { icon:'🔬', name:'فحص شامل', fee:'2,000 دج', bg:'#eff6ff' },
  { icon:'🏠', name:'زيارة منزلية', fee:'3,500 دج', bg:'#fff7ed' },
  { icon:'🦷', name:'طب الأسنان', fee:'1,500 دج', bg:'#fdf4ff' },
  { icon:'🔪', name:'جراحة', fee:'من 8,000 دج', bg:'#fff1f2' },
  { icon:'🐾', name:'تغذية ورعاية', fee:'800 دج', bg:'#f0fdf4' },
];

const SCHEDULE = [
  { day:'السبت',    hours:'08:00 – 17:00' },
  { day:'الأحد',    hours:'08:00 – 17:00' },
  { day:'الاثنين',  hours:'09:00 – 18:00' },
  { day:'الثلاثاء', hours:'09:00 – 18:00' },
  { day:'الأربعاء', hours:'09:00 – 18:00' },
  { day:'الخميس',  hours:'09:00 – 16:00' },
  { day:'الجمعة',   hours:null },
];

const REVIEWS = [
  { name:'سارة بن علي', date:'منذ أسبوع', stars:5, avatar:'👩', text:'طبيب ممتاز وصبور مع حيوانات المنزل. شرح لي كل شيء بالتفصيل وماكس تحسّن سريعاً.' },
  { name:'عمر بوعلام', date:'منذ 2 أسبوع', stars:5, avatar:'👨', text:'أحسن تجربة مع طبيب بيطري. العيادة نظيفة والسعر معقول.' },
  { name:'فاطمة حمدي', date:'منذ شهر', stars:4, avatar:'👩‍🦱', text:'خدمة ممتازة والدكتور محترف. أنصح به بشدة لكل أصحاب الحيوانات.' },
];

const STAR_DIST = [80,12,5,2,1]; // 5→1 stars percentages

// Render
function init() {
  // Services
  const sg = document.getElementById('services-grid');
  SERVICES.forEach(s => {
    const el = document.createElement('div');
    el.className = 'service-item';
    el.innerHTML = `
      <div class="si-icon-wrap" style="background:${s.bg}">${s.icon}</div>
      <div class="si-text-wrap">
        <div class="si-name">${s.name}</div>
        <div class="si-fee">${s.fee}</div>
      </div>`;
    sg.appendChild(el);
  });

  // Schedule
  const schg = document.getElementById('schedule-grid');
  const today = new Date().getDay(); // 0=Sun
  const dayIdx = { 'الأحد':0,'الاثنين':1,'الثلاثاء':2,'الأربعاء':3,'الخميس':4,'الجمعة':5,'السبت':6 };
  SCHEDULE.forEach(s => {
    const isToday = dayIdx[s.day] === today;
    const el = document.createElement('div');
    el.className = 'schedule-row';
    el.style.borderColor = isToday ? 'var(--green-400)' : '';
    el.innerHTML = `
      <div class="sr-day" style="color:${isToday?'var(--green-600)':'var(--text-primary)'}">${s.day}${isToday?' (اليوم)':''}</div>
      ${s.hours
        ? `<div class="sr-hours">${s.hours}</div>`
        : `<div class="sr-closed">مغلق</div>`}`;
    schg.appendChild(el);
  });

  // Star bars
  const sb = document.getElementById('star-bars');
  STAR_DIST.forEach((pct, i) => {
    const el = document.createElement('div');
    el.className = 'star-bar-row';
    el.innerHTML = `
      <span>${5-i}</span>
      <div class="star-bar-track"><div class="star-bar-fill" style="width:${pct}%"></div></div>
      <span class="star-bar-count">${Math.round(VET.reviews * pct/100)}</span>`;
    sb.appendChild(el);
  });

  // Reviews
  const rc = document.getElementById('reviews-container');
  REVIEWS.forEach(r => {
    const el = document.createElement('div');
    el.className = 'review-card';
    el.innerHTML = `
      <div class="review-header">
        <div class="review-avatar">${r.avatar}</div>
        <div>
          <div class="review-name">${r.name}</div>
          <div class="review-date">${r.date}</div>
        </div>
      </div>
      <div class="review-stars">${'⭐'.repeat(r.stars)}</div>
      <div class="review-text">${r.text}</div>`;
    rc.appendChild(el);
  });
}

let aboutExpanded = false;
function toggleAbout() {
  aboutExpanded = !aboutExpanded;
  document.getElementById('about-more').style.display = aboutExpanded ? 'inline' : 'none';
  document.querySelector('.read-more').textContent = aboutExpanded ? 'إخفاء ↑' : 'قراءة المزيد ↓';
}

let favActive = false;
function toggleFav() {
  favActive = !favActive;
  const btn = document.getElementById('fav-btn');
  btn.classList.toggle('active', favActive);
  btn.textContent = favActive ? '❤️' : '🤍';
  showToast(favActive ? 'success' : 'info', favActive ? 'تمت الإضافة للمفضلة' : 'تمت الإزالة من المفضلة');
}

function openBookingPage() {
  window.location.href = 'index.php';
}

function closeModal() {
  document.getElementById('report-modal').classList.remove('open');
}
document.getElementById('report-modal').addEventListener('click', e => {
  if (e.target === document.getElementById('report-modal')) closeModal();
});

function showToast(type, msg) {
  const icons = { success:'✅', error:'❌', info:'ℹ️' };
  document.getElementById('ti').textContent = icons[type];
  document.getElementById('tm').textContent = msg;
  const t = document.getElementById('toast');
  t.classList.add('show');
  setTimeout(() => t.classList.remove('show'), 3000);
}

init();
</script>
</body>
</html>
