<?php
/**
 * Public Booking Page - Select Meeting Type
 *
 * @package Freelance_Studio
 */

if (!defined('ABSPATH')) {
    exit;
}

$meeting_types = $data['meeting_types'];
$business = $data['business'];
$page_title = $data['page_title'];
$page_description = $data['page_description'];
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="robots" content="noindex, nofollow">
    <title><?php echo esc_html($page_title); ?></title>
    <?php include JEEB_FS_PLUGIN_DIR . 'includes/views/public/booking/booking-styles.php'; ?>
</head>
<body class="fs-booking-page">
    <div class="fs-booking-container">
        <header class="fs-booking-header">
            <?php if ($business['business_logo']): ?>
                <img src="<?php echo esc_url($business['business_logo']); ?>" alt="<?php echo esc_attr($business['business_name']); ?>" class="fs-booking-logo">
            <?php endif; ?>
            <h1><?php echo esc_html($page_title); ?></h1>
            <?php if ($page_description): ?>
                <p class="fs-booking-description"><?php echo esc_html($page_description); ?></p>
            <?php endif; ?>
        </header>
        
        <div class="fs-meeting-types-list">
            <?php 
            $permalink_structure = get_option('permalink_structure');
            foreach ($meeting_types as $type): 
                if (empty($permalink_structure)) {
                    // Plain permalinks
                    $type_url = add_query_arg(array('fs_booking' => '1', 'fs_meeting_type' => $type->slug), home_url('/'));
                } else {
                    // Pretty permalinks
                    $type_url = home_url('/book/' . $type->slug);
                }
            ?>
                <a href="<?php echo esc_url($type_url); ?>" class="fs-meeting-type-item" style="--type-color: <?php echo esc_attr($type->color); ?>">
                    <div class="fs-meeting-type-color"></div>
                    <div class="fs-meeting-type-content">
                        <h2><?php echo esc_html($type->name); ?></h2>
                        <?php if ($type->description): ?>
                            <p class="fs-type-description"><?php echo esc_html($type->description); ?></p>
                        <?php endif; ?>
                        <div class="fs-type-meta">
                            <span class="fs-type-duration">
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <circle cx="12" cy="12" r="10"></circle>
                                    <polyline points="12,6 12,12 16,14"></polyline>
                                </svg>
                                <?php echo  esc_html( FS_Meeting_Type::get_duration_display($type->duration) ); ?>
                            </span>
                            <span class="fs-type-location">
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
                                    <circle cx="12" cy="10" r="3"></circle>
                                </svg>
                                <?php echo  esc_html( FS_Meeting_Type::get_location_display($type->location_type) ); ?>
                            </span>
                            <?php if ($type->price): ?>
                                <span class="fs-type-price">
                                    $<?php echo number_format($type->price, 2); ?>
                                </span>
                            <?php endif; ?>
                        </div>
                    </div>
                    <div class="fs-meeting-type-arrow">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <polyline points="9,18 15,12 9,6"></polyline>
                        </svg>
                    </div>
                </a>
            <?php endforeach; ?>
        </div>
        
        <footer class="fs-booking-footer">
            <p><?php echo esc_html($business['business_name']); ?></p>
        </footer>
    </div>
</body>
</html>
