<?php
// phpcs:ignoreFile
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>Catalog & Gallery Settings 🖼️</h1>
<p style="color:#6b7280;margin-top:0;">Control how <code>[yatoon_catalog]</code> and <code>[yatoon_gallery]</code> shortcodes behave on your site.</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>[yatoon_catalog] - Service Card Grid</h2>
        <p>Shortcode to show all services as image cards with a Book button.</p>
    </div>
    <div class="ycs-body">
        <div class="ycs-row">
            <label>Default columns</label>
            <select name="catalog_cols" style="width:120px;">
                <?php foreach([2,3,4,5] as $c): ?>
                <option value="<?php echo $c;?>" <?php ycs_sel('yatoon_catalog_cols',(string)$c,'3');?>><?php echo $c;?> columns</option>
                <?php endforeach;?>
            </select>
        </div>
        <div class="ycs-row">
            <label>Book button text</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>Show on each card</label>
            <label class="ycs-check"><input type="checkbox" name="show_price" <?php ycs_checked('yatoon_catalog_show_price');?>> Price</label>
            <label class="ycs-check"><input type="checkbox" name="show_duration" <?php ycs_checked('yatoon_catalog_show_duration');?>> Duration</label>
            <label class="ycs-check"><input type="checkbox" name="show_desc" <?php ycs_checked('yatoon_catalog_show_desc');?>> Description snippet</label>
            <label class="ycs-check"><input type="checkbox" name="show_tabs" <?php ycs_checked('yatoon_catalog_show_tabs');?>> Category filter tabs</label>
            <label class="ycs-check"><input type="checkbox" name="catalog_popup" <?php ycs_checked('yatoon_catalog_popup');?>> Open booking in popup</label>
        </div>
        <div class="ycs-code">
            [yatoon_catalog]<br>
            [yatoon_catalog cols="4" category="Manicures"]
        </div>
    </div>
</div>

<!-- GALLERY settings -->
<div class="ycs-panel">
    <div class="ycs-head">
        <h2>[yatoon_gallery] - Photo Gallery</h2>
        <p>Auto-pulls images uploaded in each service's Gallery Images.</p>
    </div>
    <div class="ycs-body">
        <div class="ycs-row">
            <label>Display mode</label>
            <select name="gallery_mode" style="width:160px;">
                <option value="grid" <?php ycs_sel('yatoon_gallery_mode','grid','grid');?>>Grid (multiple columns)</option>
                <option value="slider" <?php ycs_sel('yatoon_gallery_mode','slider','grid');?>>Slider (full-width carousel)</option>
            </select>
        </div>
        <div class="ycs-row">
            <label>Columns <span style="font-weight:400;color:#9ca3af;">(grid mode, desktop)</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">Phone: 2 cols · Tablet: 3 cols · Desktop: this</span>
            </div>
        </div>
        <div class="ycs-row">
            <label>Image ratio</label>
            <select name="gallery_ratio" style="width:180px;">
                <option value="1/1" <?php ycs_sel('yatoon_gallery_ratio','1/1','1/1');?>>Square (1:1)</option>
                <option value="4/3" <?php ycs_sel('yatoon_gallery_ratio','4/3','1/1');?>>Landscape (4:3)</option>
                <option value="3/4" <?php ycs_sel('yatoon_gallery_ratio','3/4','1/1');?>>Portrait (3:4) - best for nail art</option>
                <option value="16/9" <?php ycs_sel('yatoon_gallery_ratio','16/9','1/1');?>>Wide (16:9)</option>
            </select>
        </div>
        <div class="ycs-row">
            <label>Gap between images (px)</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>Options</label>
            <label class="ycs-check"><input type="checkbox" name="gallery_lightbox" <?php ycs_checked('yatoon_gallery_lightbox');?>> Lightbox on click (full-screen view)</label>
            <label class="ycs-check"><input type="checkbox" name="gallery_captions" <?php ycs_checked('yatoon_gallery_captions','0');?>> Show service name on image</label>
        </div>
        <div class="ycs-row">
            <label>Slider height <span style="font-weight:400;color:#9ca3af;">(slider mode only)</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>Auto-play <span style="font-weight:400;color:#9ca3af;">(slider mode)</span></label>
            <label class="ycs-check"><input type="checkbox" name="gallery_autoplay" <?php ycs_checked('yatoon_gallery_autoplay');?>> Enable auto-play</label>
            <div class="ycs-inline" style="margin-top:4px;">
                <span style="font-size:13px;color:#374151;">Speed:</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">milliseconds (3500 = 3.5s)</span>
            </div>
        </div>
        <div class="ycs-row">
            <label>Book button text</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">Shown on hover over each image (links to booking page)</span>
        </div>
        <div class="ycs-code">
            [yatoon_gallery] - all services<br>
            [yatoon_gallery category="Custom Design"]<br>
            [yatoon_gallery service_id="5" mode="slider"]
        </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;">
            Warning: Set your Booking Page URL in <a href="admin.php?page=yatoon-booking-system">Settings</a> so the Book button works.
        </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;">
            Yes Booking page: <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;">Save All Settings</button>

</div>

<!-- Right: service gallery overview -->
<div>
<div class="ycs-panel">
    <div class="ycs-head">
        <h2>Gallery Photos per Service</h2>
        <p>Click "+ Add photos" to upload images for that service.</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 $count; ?> photo<?php echo $count !== 1 ? 's' : ''; ?></div>
                </div>
                <a href="admin.php?page=sbs-services" class="ycs-svc-add">+ Add photos</a>
            </div>
            <?php endforeach; ?>
        </div>
    </div>
</div>
</div>
</div>
</form>
</div>
