<%- include('partials/head') %>
<div id="doctor-app" data-id="<%= id %>">
  <p v-if="error" class="banner error">{{ error }}</p>
  <p v-if="notice" class="banner ok">{{ notice }}</p>
  <p v-if="!doctor && !error">Loading…</p>

  <section v-if="doctor">
    <div class="hero">
      <img v-if="mainImage" class="portrait" :src="imageUrl(mainImage)" alt="">
      <span v-else class="portrait empty"></span>
      <div class="hero-main">
        <h1>{{ doctor.full_name }} <span v-if="doctor.bmdc_number" class="badge">BMDC {{ doctor.bmdc_number }}</span></h1>
        <p class="lead">{{ doctor.specialty_name || doctor.specialty || 'No specialty' }}<span v-if="doctor.department_name" class="muted"> · {{ doctor.department_name }}</span></p>
        <p v-if="doctor.designation">{{ doctor.designation }}</p>
        <p v-if="doctor.workplace" class="muted">{{ doctor.workplace }}</p>
        <p v-if="doctor.qualifications" class="muted">{{ doctor.qualifications }}</p>
        <code class="muted">{{ doctor.doctor_id }}</code>
        <p v-if="doctor.review && doctor.review.state === 'pending' && !doctor.review.group_id && doctor.review.missing.length" class="warn">Not complete yet. Missing: {{ doctor.review.missing.join(', ') }}.</p>
      </div>
      <div class="hero-actions">
        <template v-if="doctor.review">
          <button v-if="doctor.review.state === 'pending' && !doctor.review.group_id" class="btn primary" :disabled="confirming" @click="confirmThis">{{ doctor.review.missing.length ? '✓ Confirm anyway' : '✓ Confirm' }}</button>
          <a v-else-if="doctor.review.state === 'pending'" class="btn" :href="'/refine/groups/' + doctor.review.group_id">In a duplicate group: review it</a>
          <a v-else-if="doctor.review.refined_id" class="btn" :href="'/refined/' + doctor.review.refined_id">✓ {{ doctor.review.state === 'merged' ? 'Merged' : 'Confirmed' }}: open refined</a>
        </template>
        <button class="btn primary" @click="showEdit = !showEdit">{{ showEdit ? 'Close edit' : '✏ Edit' }}</button>
        <a v-if="preferredUrl" class="btn" :href="preferredUrl" target="_blank" rel="noopener noreferrer">View source ↗</a>
        <button class="btn danger" @click="removeDoctor">Delete doctor</button>
      </div>
    </div>

    <div v-if="showEdit" class="card">
      <h3>Edit details</h3>
      <row-editor :row="doctor" :fields="detailFields" @save="saveDoctor"></row-editor>
      <div class="pickers">
        <lookup-picker label="Specialty" path="specialties" :id="doctor.specialty_id" :name="doctor.specialty_name" @pick="pickLookup('specialty_id', $event)"></lookup-picker>
        <lookup-picker label="Department" path="departments" :id="doctor.department_id" :name="doctor.department_name" @pick="pickLookup('department_id', $event)"></lookup-picker>
      </div>
      <p v-if="preferredUrl" class="muted">Preferred source: <code>{{ preferredUrl }}</code></p>
    </div>

    <div class="section-head">
      <h2>Chambers <small>({{ doctor.chambers.length }})</small></h2>
      <button class="btn" @click="showAddChamber = !showAddChamber">{{ showAddChamber ? 'Cancel' : '+ Add chamber' }}</button>
    </div>
    <div v-if="showAddChamber" class="card">
      <row-editor :row="{}" :fields="chamberFields" is-new @save="addChamber"></row-editor>
    </div>
    <p v-if="!doctor.chambers.length" class="muted">No chambers yet.</p>

    <div class="chamber-grid">
      <article v-for="c in doctor.chambers" :key="c.chamber_id" class="chamber-card" :class="{ wide: expanded[c.chamber_id] }">
        <h3>{{ c.chamber_name || '(no name)' }}</h3>
        <p class="muted">{{ [c.address, c.district].filter(Boolean).join(' · ') || 'No address' }}</p>
        <div class="days"><span v-for="d in daysOf(c)" :key="d.name" :class="['day', d.state]" :title="d.state">{{ d.name }}</span></div>
        <p>🕒 <span v-if="timesOf(c)">{{ timesOf(c) }}</span><span v-else class="muted">time not set</span></p>
        <p>💰 <span :class="{ missing: feeOf(c) === 'not set' }">{{ feeOf(c) }}</span> &nbsp; 📞 <span v-if="phonesOf(c)">{{ phonesOf(c) }}</span><span v-else class="missing">missing</span></p>
        <p v-if="c.visiting_hours" class="muted small">As written: {{ c.visiting_hours }}</p>
        <div class="card-actions">
          <button class="btn" @click="toggleChamber(c)">{{ expanded[c.chamber_id] ? 'Close' : '✏ Edit' }}</button>
          <button class="btn danger" @click="removeChamber(c)">🗑 Delete</button>
        </div>

        <div v-if="expanded[c.chamber_id]" class="edit-area">
          <h4>Chamber</h4>
          <row-editor :row="c" :fields="chamberFields" @save="saveChamber(c, $event)" no-delete></row-editor>
          <h4>Phones</h4>
          <row-editor v-for="p in c.phones" :key="p.phone_id" :row="p" :fields="phoneFields" @save="saveChild('phones', p.phone_id, $event)" @delete="removeChild('phones', p.phone_id)"></row-editor>
          <row-editor :row="{}" :fields="phoneFields" is-new @save="addChild('phones', c, $event)"></row-editor>
          <h4>Open days <small class="muted">(? = unknown)</small> <span v-if="c.schedule" :class="['pill', c.schedule.parse_status]">{{ c.schedule.parse_status }}</span></h4>
          <row-editor :row="c.schedule || {}" :fields="dayFields" no-delete @save="saveSchedule(c, $event)"></row-editor>
          <h4>Time slots</h4>
          <row-editor v-for="s in c.slots" :key="s.slot_id" :row="s" :fields="slotFields" @save="saveChild('slots', s.slot_id, $event)" @delete="removeChild('slots', s.slot_id)"></row-editor>
          <row-editor :row="{ end_day_offset: 0 }" :fields="slotFields" is-new @save="addChild('slots', c, $event)"></row-editor>
          <h4>Fees</h4>
          <row-editor v-for="f in c.fees" :key="f.fee_id" :row="f" :fields="feeFields" @save="saveChild('fees', f.fee_id, $event)" @delete="removeChild('fees', f.fee_id)"></row-editor>
          <row-editor :row="{}" :fields="feeFields" is-new @save="addChild('fees', c, $event)"></row-editor>
        </div>
      </article>
    </div>

    <details class="section">
      <summary>Other sources and images <small>({{ doctor.profiles.length }} profiles)</small></summary>
      <div v-for="p in doctor.profiles" :key="p.source_profile_id" class="card">
        <div class="profile-head">
          <img v-if="p.image_file_name" class="thumb big" :src="imageUrl(p.image_file_name)" alt="">
          <span v-else class="thumb big empty"></span>
          <div>
            <b>{{ p.source_site }}</b>
            <span :class="['pill', p.image_status]">{{ p.image_status || 'no image info' }}</span>
            <a v-if="safe(p.source_url)" :href="safe(p.source_url)" target="_blank" rel="noopener noreferrer">View ↗</a>
            <p v-if="p.image_error" class="muted">{{ p.image_error }}</p>
            <label class="upload">Replace image <input type="file" accept="image/jpeg,image/png,image/webp" @change="uploadImage(p, $event)"></label>
          </div>
        </div>
        <row-editor :row="p" :fields="profileFields" @save="saveProfile(p, $event)" @delete="removeProfile(p)"></row-editor>
      </div>
      <div class="card">
        <h3>Add profile</h3>
        <row-editor :row="{}" :fields="profileFields" is-new @save="addProfile"></row-editor>
      </div>
    </details>

    <details class="section" @toggle="onToggle('duplicates', $event)">
      <summary>Possible duplicates <small>(candidates, not confirmed)</small></summary>
      <p v-if="duplicatesLoaded && !duplicates.length">No candidates.</p>
      <ul class="hits">
        <li v-for="d in duplicates" :key="d.review_id"><a :href="'/doctors/' + d.other_doctor_id"><b>{{ d.other_name }}</b></a> <span class="muted">{{ d.reason }}</span></li>
      </ul>
    </details>

    <details class="section" @toggle="onToggle('history', $event)">
      <summary>History</summary>
      <p v-if="historyLoaded && !history.length">No recorded changes for this doctor.</p>
      <table v-if="history.length" class="table">
        <thead><tr><th>When</th><th>Who</th><th>What</th><th>Table</th><th>Record</th></tr></thead>
        <tbody><tr v-for="h in history" :key="h.id"><td>{{ h.created_at }}</td><td>{{ h.username }}</td><td><span :class="['pill', h.action]">{{ h.action }}</span></td><td>{{ h.table_name }}</td><td><code>{{ h.record_id }}</code></td></tr></tbody>
      </table>
    </details>
  </section>
</div>
<%- include('partials/foot') %>
<script src="/static/doctor-summary.js"></script>
<script src="/static/confirm-helpers.js"></script>
<script src="/static/doctor.js"></script>
</body></html>
