<?php
/**
 * Template Name: Dreams Template Bookings
 */

$current_user = wp_get_current_user();


get_header();
// Enqueue WordPress media scripts for media uploader
wp_enqueue_media();
// Enqueue flatpickr for calendar date picker
wp_enqueue_style('flatpickr', 'https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css', [], null);
wp_enqueue_script('flatpickr', 'https://cdn.jsdelivr.net/npm/flatpickr', [], null, true);

// Fetch branches (service_branch terms)
$branches = get_terms([
  'taxonomy' => 'service_branch',
  'hide_empty' => false,
]);
$default_branch_id = 0;
$default_branch_title = '';
$default_branch_location = '';
$default_branch_image = 'https://via.placeholder.com/60x60.png?text=Logo';
if (!is_wp_error($branches) && !empty($branches)) {
  $default = $branches[0];
  $default_branch_id = (int) $default->term_id;
  $default_branch_title = $default->name;
  // Use term description as location placeholder; adjust if you store address in term meta
  $default_branch_location = term_description($default->term_id, 'service_branch');
  if (!$default_branch_location) { $default_branch_location = ''; }
  // Try to get an image from term meta (branch_image_id or thumbnail_id) else fallback
  $img_id = (int) get_term_meta($default->term_id, 'branch_image_id', true);
  if (!$img_id) { $img_id = (int) get_term_meta($default->term_id, 'thumbnail_id', true); }
  if (!$img_id) { $img_id = (int) get_term_meta($default->term_id, 'image_id', true); }
  if ($img_id) {
    $url = wp_get_attachment_image_url($img_id, 'thumbnail');
    if ($url) { $default_branch_image = $url; }
  }
}
?>
<style>
  .ds-loading-wrapper { position: relative; }
  .ds-loading-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
  }
  .ds-loading-overlay.d-none { display: none !important; }
  .ds-spinner {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 5px solid var(--primary);
    border-top-color: #fff;
    animation: ds-spin 0.8s linear infinite;
  }
  @keyframes ds-spin { to { transform: rotate(360deg); } }
  .ds-inline-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 2.5rem 1rem;
    color: var(--primary);
  }
</style>
<<<<<<< HEAD
<div class="container py-5">

  <!-- Back Button -->
  <a href="#" class="text-decoration-none text-dark d-flex align-items-center mb-3">
    <i class="bi bi-arrow-left me-2"></i> <?php esc_html_e('Back', 'dreams-ai'); ?>
  </a>

  <!-- ai Header -->
  <div class="card rounded position-relative z-1 mb-0">
    <div class="ai-card card-body d-flex justify-content-between align-items-center">
      <div class="d-flex align-items-center">
        <div class="avatar avatar-lg">
          <img id="ds-branch-image" src="<?php echo esc_url($default_branch_image); ?>" alt="<?php echo esc_attr($default_branch_title ?: 'Branch'); ?>" class="me-3 rounded-circle" >
=======
<div class="content">
<div class="container">
<div class="row">

 <div class="col-lg-10 mx-auto">
 

  <div class="mb-4">
								<a href="<?php echo esc_url(home_url('/')); ?>" class="fs-16 fw-medium"><i class="ti ti-arrow-narrow-left me-1"></i><?php esc_html_e('Back', 'dreams-ai'); ?></a>
							</div>
              

  <!-- ai Header -->
  <div class="card bg-light mb-4">
    <div class="ai-card card-body d-flex align-items-center justify-content-between flex-wrap gap-2">
      <div class="d-flex align-items-center flex-wrap gap-3">
        <div class="avatar avatar-xl">
          <img id="ds-branch-image" src="<?php echo esc_url($default_branch_image); ?>" alt="<?php echo esc_attr($default_branch_title ?: 'Branch'); ?>" class="rounded-circle" >
>>>>>>> development
        </div>
        <div>
          <h3 id="ds-branch-title" class="fw-bold mb-1"><?php echo esc_html($default_branch_title ?: __('Select Branch', 'dreams-ai')); ?></h3>
          <p id="ds-branch-location" class="mb-0 text-muted small"><?php echo esc_html($default_branch_location); ?></p>
        </div>
      </div>
      <div>
        <select id="ds-branch-select" class="form-select">
          <?php if (empty($branches) || is_wp_error($branches)) : ?>
            <option value="" selected><?php esc_html_e('No branches found', 'dreams-ai'); ?></option>
          <?php else: foreach ($branches as $b):
            $loc = term_description($b->term_id, 'service_branch');
            $opt_img = 'https://via.placeholder.com/60x60.png?text=Logo';
            $bid = (int) $b->term_id;
            $oid = (int) get_term_meta($bid, 'branch_image_id', true);
            if (!$oid) { $oid = (int) get_term_meta($bid, 'thumbnail_id', true); }
            if (!$oid) { $oid = (int) get_term_meta($bid, 'image_id', true); }
            if ($oid) {
              $u = wp_get_attachment_image_url($oid, 'thumbnail');
              if ($u) { $opt_img = $u; }
            }
            ?>
            <option value="<?php echo (int)$b->term_id; ?>" <?php selected($default_branch_id, (int)$b->term_id); ?> data-title="<?php echo esc_attr($b->name); ?>" data-location="<?php echo esc_attr(wp_strip_all_tags($loc)); ?>" data-image="<?php echo esc_url($opt_img); ?>"><?php echo esc_html($b->name); ?></option>
          <?php endforeach; endif; ?>
        </select>
      </div>
    </div>
  </div>

  

  <!-- Category Tabs -->
    <div class="mt-4">
        <h4 class="fw-bold mb-3"><?php esc_html_e('Browse Services', 'dreams-ai'); ?></h4>
        <div class="ds-loading-wrapper">
          <div id="ds-category-tabs" class="nav category-tabs mb-4 gap-2">
            <!-- Filled via AJAX based on selected branch -->
          </div>
          <div id="ds-category-loader" class="ds-loading-overlay d-none" aria-hidden="true">
            <span class="ds-spinner" role="status"></span>
          </div>
        </div>
    </div>

  <hr class="my-4" />

  <!-- Services Grid -->
  <div class="ds-loading-wrapper">
    <div class="row g-3" id="ds-services-grid"></div>
    <div id="ds-services-loader" class="ds-loading-overlay d-none" aria-hidden="true">
      <span class="ds-spinner" role="status"></span>
    </div>
  </div>

  <!-- Summary Bar -->
 <div id="ds-summary-bar" class="border-top mt-3 pt-3 d-flex align-items-center justify-content-between" style="position:sticky; bottom:0; background:#fff; z-index:10; display:none;">
    <div class="d-flex flex-wrap gap-4">
        <div><strong><?php esc_html_e('Services :', 'dreams-ai'); ?></strong> <span id="ds-summary-count">0</span></div>
        <div><strong><?php esc_html_e('Duration :', 'dreams-ai'); ?></strong> <span id="ds-summary-duration">0h 0m</span></div>
        <div><strong><?php esc_html_e('Est. Total :', 'dreams-ai'); ?></strong> <span id="ds-summary-total">0</span></div>
    </div>
    <button type="button" id="ds-summary-continue" class="btn btn-primary">
        <?php esc_html_e('Add to Cart', 'dreams-ai'); ?>
    </button>
</div>

  <!-- Right-side Booking Drawer -->
  <div id="ds-booking-drawer" class="ds-drawer" style="position:fixed; top:0; right:-420px;">
    <div id="ds-booking-drawer-body" class="p-3"></div>
  </div>
  <div id="ds-drawer-overlay" style="display:none; position:fixed; inset:0; background:rgba(0,0,0,0.3); z-index:1040;"></div>

</div>
<<<<<<< HEAD

=======
</div>
</div>
</div>
>>>>>>> development
<?php get_footer(); ?>