<?php

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

global $wpdb;
$services_table = $wpdb->prefix . 'yatoon_services';
$images_table   = $wpdb->prefix . 'yatoon_service_images';
$services       = $wpdb->get_results("SELECT id, name, category, image_url, is_active FROM $services_table ORDER BY sort_order ASC, name ASC");
$booking_page   = get_option('yatoon_booking_page_url', '');

function ycs_opt( $key, $default = '' ) {
 return get_option($key, $default); }
function ycs_checked( $key, $default = '1' ) {
 checked(ycs_opt($key, $default), '1'); }
function ycs_sel( $key, $val, $default = '' ) {
 selected(ycs_opt($key, $default), $val); }
?>
<div class="wrap" id="yatoon-catalog-wrap">
<h1><?php esc_html_e( 'Catalog & Gallery Settings 🖼️', 'yatoon-booking-system' ); ?></h1>
<p style="color:#6b7280;margin-top:0;"><?php esc_html_e( 'Control how', 'yatoon-booking-system' ); ?> <code><?php esc_html_e( '[yatoon_catalog]', 'yatoon-booking-system' ); ?></code> and <code><?php esc_html_e( '[yatoon_gallery]', 'yatoon-booking-system' ); ?></code> <?php esc_html_e( 'shortcodes behave on your site.', 'yatoon-booking-system' ); ?></p>

<style>
#yatoon-catalog-wrap *{box-sizing:border-box;}
#yatoon-catalog-wrap .ycs-cols{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:16px;}
#yatoon-catalog-wrap .ycs-panel{background:#fff;border:1px solid #e5e7eb;border-radius:10px;overflow:hidden;margin-bottom:16px;}
#yatoon-catalog-wrap .ycs-head{padding:13px 18px;border-bottom:1px solid #f3f4f6;background:#fafafa;}
#yatoon-catalog-wrap .ycs-head h2{margin:0;font-size:14px;font-weight:600;color:#111827;}
#yatoon-catalog-wrap .ycs-head p{margin:2px 0 0;font-size:12px;color:#9ca3af;}
#yatoon-catalog-wrap .ycs-body{padding:16px 18px;}
#yatoon-catalog-wrap .ycs-row{margin-bottom:14px;display:flex;flex-direction:column;gap:4px;}
#yatoon-catalog-wrap .ycs-row label{font-size:13px;font-weight:600;color:#374151;}
#yatoon-catalog-wrap .ycs-row select,
#yatoon-catalog-wrap .ycs-row input[type=text],
#yatoon-catalog-wrap .ycs-row input[type=number]{padding:7px 10px;border:1px solid #d1d5db;border-radius:6px;font-size:14px;width:100%;}
#yatoon-catalog-wrap .ycs-row input[type=number]{width:120px;}
#yatoon-catalog-wrap .ycs-check{display:flex;align-items:center;gap:7px;font-size:13px;color:#374151;cursor:pointer;margin-bottom:8px;}
#yatoon-catalog-wrap .ycs-check input{width:15px;height:15px;cursor:pointer;}
#yatoon-catalog-wrap .ycs-hint{font-size:11px;color:#9ca3af;margin-top:2px;}
#yatoon-catalog-wrap .ycs-code{background:#f3f4f6;padding:10px 14px;border-radius:8px;font-family:monospace;font-size:12px;color:#374151;line-height:1.9;}
#yatoon-catalog-wrap .ycs-svc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;margin-top:10px;}
#yatoon-catalog-wrap .ycs-svc-card{border:1px solid #e5e7eb;border-radius:8px;overflow:hidden;font-size:12px;}
#yatoon-catalog-wrap .ycs-svc-img{width:100%;aspect-ratio:1;object-fit:cover;background:#f9fafb;display:block;}
#yatoon-catalog-wrap .ycs-svc-img-ph{width:100%;aspect-ratio:1;background:#f3f4f6;display:flex;align-items:center;justify-content:center;color:#d1d5db;font-size:22px;}
#yatoon-catalog-wrap .ycs-svc-info{padding:7px 10px;}
#yatoon-catalog-wrap .ycs-svc-name{font-weight:600;color:#111827;margin-bottom:1px;}
#yatoon-catalog-wrap .ycs-svc-count{color:#9ca3af;font-size:11px;}
#yatoon-catalog-wrap .ycs-svc-add{display:block;text-align:center;padding:5px;background:#f9fafb;border-top:1px solid #f3f4f6;color:#374151;text-decoration:none;font-size:11px;font-weight:600;}
#yatoon-catalog-wrap .ycs-svc-add:hover{background:#f3f4f6;}
#yatoon-catalog-wrap .ycs-inline{display:flex;align-items:center;gap:10px;}
#yatoon-catalog-wrap .ycs-inline input[type=number]{width:90px;}
@media(max-width:860px){#yatoon-catalog-wrap .ycs-cols{grid-template-columns:1fr;}}
</style>

<form method="post">
<?php wp_nonce_field('yatoon_catalog_settings'); ?>
<input type="hidden" name="yatoon_catalog_save" value="1">

<div class="ycs-cols">
<div>

<!-- CATALOG settings -->
<div class="ycs-panel">
    <div class="ycs-head">
        <h2><?php esc_html_e( '[yatoon_catalog] - Service Card Grid', 'yatoon-booking-system' ); ?></h2>
        <p><?php esc_html_e( 'Shortcode to show all services as image cards with a Book button.', 'yatoon-booking-system' ); ?></p>
    </div>
    <div class="ycs-body">
        <div class="ycs-row">
            <label><?php esc_html_e( 'Default columns', 'yatoon-booking-system' ); ?></label>
            <select name="catalog_cols" style="width:120px;">
                <?php foreach(array(2,3,4,5) as $c): ?>
                <option value="<?php echo esc_attr( $c ); ?>" <?php ycs_sel('yatoon_catalog_cols',(string) $c,'3');?>><?php echo esc_html( $c ); ?> columns</option>
                <?php endforeach;?>
            </select>
        </div>
        <div class="ycs-row">
            <label><?php esc_html_e( 'Book button text', 'yatoon-booking-system' ); ?></label>
            <input type="text" name="book_label" value="<?php echo esc_attr(ycs_opt('yatoon_catalog_book_label','Book Now'));?>">
        </div>
        <div class="ycs-row">
            <label><?php esc_html_e( 'Show on each card', 'yatoon-booking-system' ); ?></label>
            <label class="ycs-check"><input type="checkbox" name="show_price" <?php ycs_checked('yatoon_catalog_show_price');?>> <?php esc_html_e( 'Price', 'yatoon-booking-system' ); ?></label>
            <label class="ycs-check"><input type="checkbox" name="show_duration" <?php ycs_checked('yatoon_catalog_show_duration');?>> <?php esc_html_e( 'Duration', 'yatoon-booking-system' ); ?></label>
            <label class="ycs-check"><input type="checkbox" name="show_desc" <?php ycs_checked('yatoon_catalog_show_desc');?>> <?php esc_html_e( 'Description snippet', 'yatoon-booking-system' ); ?></label>
            <label class="ycs-check"><input type="checkbox" name="show_tabs" <?php ycs_checked('yatoon_catalog_show_tabs');?>> <?php esc_html_e( 'Category filter tabs', 'yatoon-booking-system' ); ?></label>
            <label class="ycs-check"><input type="checkbox" name="catalog_popup" <?php ycs_checked('yatoon_catalog_popup');?>> <?php esc_html_e( 'Open booking in popup', 'yatoon-booking-system' ); ?></label>
        </div>
        <div class="ycs-code">
            <?php esc_html_e( '[yatoon_catalog]', 'yatoon-booking-system' ); ?><br>
            <?php esc_html_e( '[yatoon_catalog cols="4" category="Manicures"]', 'yatoon-booking-system' ); ?>
        </div>
    </div>
</div>

<!-- GALLERY settings -->
<div class="ycs-panel">
    <div class="ycs-head">
        <h2><?php esc_html_e( '[yatoon_gallery] - Photo Gallery', 'yatoon-booking-system' ); ?></h2>
        <p><?php esc_html_e( 'Auto-pulls images uploaded in each service\'s Gallery Images.', 'yatoon-booking-system' ); ?></p>
    </div>
    <div class="ycs-body">
        <div class="ycs-row">
            <label><?php esc_html_e( 'Display mode', 'yatoon-booking-system' ); ?></label>
            <select name="gallery_mode" style="width:160px;">
                <option value="grid" <?php ycs_sel('yatoon_gallery_mode','grid','grid');?>><?php esc_html_e( 'Grid (multiple columns)', 'yatoon-booking-system' ); ?></option>
                <option value="slider" <?php ycs_sel('yatoon_gallery_mode','slider','grid');?>><?php esc_html_e( 'Slider (full-width carousel)', 'yatoon-booking-system' ); ?></option>
            </select>
        </div>
        <div class="ycs-row">
            <label><?php esc_html_e( 'Columns', 'yatoon-booking-system' ); ?> <span style="font-weight:400;color:#9ca3af;"><?php esc_html_e( '(grid mode, desktop)', 'yatoon-booking-system' ); ?></span></label>
            <div class="ycs-inline">
                <input type="number" name="gallery_cols" value="<?php echo esc_attr(ycs_opt('yatoon_gallery_cols','5'));?>" min="2" max="8">
                <span class="ycs-hint"><?php esc_html_e( 'Phone: 2 cols · Tablet: 3 cols · Desktop: this', 'yatoon-booking-system' ); ?></span>
            </div>
        </div>
        <div class="ycs-row">
            <label><?php esc_html_e( 'Image ratio', 'yatoon-booking-system' ); ?></label>
            <select name="gallery_ratio" style="width:180px;">
                <option value="1/1" <?php ycs_sel('yatoon_gallery_ratio','1/1','1/1');?>><?php esc_html_e( 'Square (1:1)', 'yatoon-booking-system' ); ?></option>
                <option value="4/3" <?php ycs_sel('yatoon_gallery_ratio','4/3','1/1');?>><?php esc_html_e( 'Landscape (4:3)', 'yatoon-booking-system' ); ?></option>
                <option value="3/4" <?php ycs_sel('yatoon_gallery_ratio','3/4','1/1');?>><?php esc_html_e( 'Portrait (3:4) - best for nail art', 'yatoon-booking-system' ); ?></option>
                <option value="16/9" <?php ycs_sel('yatoon_gallery_ratio','16/9','1/1');?>><?php esc_html_e( 'Wide (16:9)', 'yatoon-booking-system' ); ?></option>
            </select>
        </div>
        <div class="ycs-row">
            <label><?php esc_html_e( 'Gap between images (px)', 'yatoon-booking-system' ); ?></label>
            <input type="number" name="gallery_gap" value="<?php echo esc_attr(ycs_opt('yatoon_gallery_gap','6'));?>" min="0" max="24" style="width:90px;">
        </div>
        <div class="ycs-row">
            <label><?php esc_html_e( 'Options', 'yatoon-booking-system' ); ?></label>
            <label class="ycs-check"><input type="checkbox" name="gallery_lightbox" <?php ycs_checked('yatoon_gallery_lightbox');?>> <?php esc_html_e( 'Lightbox on click (full-screen view)', 'yatoon-booking-system' ); ?></label>
            <label class="ycs-check"><input type="checkbox" name="gallery_captions" <?php ycs_checked('yatoon_gallery_captions','0');?>> <?php esc_html_e( 'Show service name on image', 'yatoon-booking-system' ); ?></label>
        </div>
        <div class="ycs-row">
            <label><?php esc_html_e( 'Slider height', 'yatoon-booking-system' ); ?> <span style="font-weight:400;color:#9ca3af;"><?php esc_html_e( '(slider mode only)', 'yatoon-booking-system' ); ?></span></label>
            <input type="text" name="gallery_height" value="<?php echo esc_attr(ycs_opt('yatoon_gallery_height','460px'));?>" style="width:120px;" placeholder="460px">
        </div>
        <div class="ycs-row">
            <label><?php esc_html_e( 'Auto-play', 'yatoon-booking-system' ); ?> <span style="font-weight:400;color:#9ca3af;"><?php esc_html_e( '(slider mode)', 'yatoon-booking-system' ); ?></span></label>
            <label class="ycs-check"><input type="checkbox" name="gallery_autoplay" <?php ycs_checked('yatoon_gallery_autoplay');?>> <?php esc_html_e( 'Enable auto-play', 'yatoon-booking-system' ); ?></label>
            <div class="ycs-inline" style="margin-top:4px;">
                <span style="font-size:13px;color:#374151;"><?php esc_html_e( 'Speed:', 'yatoon-booking-system' ); ?></span>
                <input type="number" name="gallery_interval" value="<?php echo esc_attr(ycs_opt('yatoon_gallery_interval','3500'));?>" min="1000" max="10000" step="500">
                <span class="ycs-hint"><?php esc_html_e( 'milliseconds (3500 = 3.5s)', 'yatoon-booking-system' ); ?></span>
            </div>
        </div>
        <div class="ycs-row">
            <label><?php esc_html_e( 'Book button text', 'yatoon-booking-system' ); ?></label>
            <input type="text" name="gallery_book_label" value="<?php echo esc_attr(ycs_opt('yatoon_gallery_book_label','Book Now'));?>">
            <span class="ycs-hint"><?php esc_html_e( 'Shown on hover over each image (links to booking page)', 'yatoon-booking-system' ); ?></span>
        </div>
        <div class="ycs-code">
            <?php esc_html_e( '[yatoon_gallery] - all services', 'yatoon-booking-system' ); ?><br>
            <?php esc_html_e( '[yatoon_gallery category="Custom Design"]', 'yatoon-booking-system' ); ?><br>
            <?php esc_html_e( '[yatoon_gallery service_id="5" mode="slider"]', 'yatoon-booking-system' ); ?>
        </div>
        <?php if (!$booking_page): ?>
        <div style="background:#fef3c7;border:1px solid #fcd34d;border-radius:8px;padding:10px 14px;margin-top:12px;font-size:13px;color:#92400e;">
            <?php esc_html_e( 'Warning: Set your Booking Page URL in', 'yatoon-booking-system' ); ?> <a href="admin.php?page=yatoon-booking-system"><?php esc_html_e( 'Settings', 'yatoon-booking-system' ); ?></a> <?php esc_html_e( 'so the Book button works.', 'yatoon-booking-system' ); ?>
        </div>
        <?php else: ?>
        <div style="background:#f0fdf4;border:1px solid #bbf7d0;border-radius:8px;padding:10px 14px;margin-top:12px;font-size:13px;color:#166534;">
            <span aria-hidden="true">&#10003;</span> <?php esc_html_e( 'Booking page:', 'yatoon-booking-system' ); ?> <strong><?php echo esc_html($booking_page); ?></strong>
        </div>
        <?php endif; ?>
    </div>
</div>

<button type="submit" class="button button-primary" style="padding:9px 32px;font-size:14px;"><?php esc_html_e( 'Save All Settings', 'yatoon-booking-system' ); ?></button>

</div>

<!-- Right: service gallery overview -->
<div>
<div class="ycs-panel">
    <div class="ycs-head">
        <h2><?php esc_html_e( 'Gallery Photos per Service', 'yatoon-booking-system' ); ?></h2>
        <p><?php esc_html_e( 'Click "+ Add photos" to upload images for that service.', 'yatoon-booking-system' ); ?></p>
    </div>
    <div class="ycs-body">
        <div class="ycs-svc-grid">
            <?php foreach ($services as $svc):
                $count = intval($wpdb->get_var($wpdb->prepare("SELECT COUNT(*) FROM $images_table WHERE service_id = %d", $svc->id)));
            ?>
            <div class="ycs-svc-card" <?php echo !$svc->is_active ? 'style="opacity:.5;"' : ''; ?>>
                <?php if ($svc->image_url): ?>
                    <img class="ycs-svc-img" src="<?php echo esc_url($svc->image_url); ?>" alt="">
                <?php else: ?>
                    <div class="ycs-svc-img-ph">📷</div>
                <?php endif; ?>
                <div class="ycs-svc-info">
                    <div class="ycs-svc-name"><?php echo esc_html(mb_strimwidth($svc->name, 0, 22, '...')); ?></div>
                    <div class="ycs-svc-count"><?php echo esc_html( $count ); ?> photo<?php echo $count !== 1 ? 's' : ''; ?></div>
                </div>
                <a href="admin.php?page=sbs-services" class="ycs-svc-add"><?php esc_html_e( '+ Add photos', 'yatoon-booking-system' ); ?></a>
            </div>
            <?php endforeach; ?>
        </div>
    </div>
</div>
</div>
</div>
</form>
</div>
