<?php
// phpcs:ignoreFile
if (!defined('ABSPATH')) { exit; }
?>
<div class="wrap" id="yatoon-closed-dates-wrap">
<h1>Closed Dates</h1>
<p style="color:#6b7280;margin-top:0;">Block one or more days for all staff at once - holidays, training days, salon closures. Customers won't see any available times on these dates.</p>

<style>
#yatoon-closed-dates-wrap *{box-sizing:border-box;}
#yatoon-closed-dates-wrap .ycd-layout{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:16px;}
#yatoon-closed-dates-wrap .ycd-panel{background:#fff;border:1px solid #e5e7eb;border-radius:10px;overflow:hidden;}
#yatoon-closed-dates-wrap .ycd-panel-head{padding:14px 18px;border-bottom:1px solid #f3f4f6;}
#yatoon-closed-dates-wrap .ycd-panel-head h2{margin:0;font-size:14px;font-weight:600;color:#111827;}
#yatoon-closed-dates-wrap .ycd-panel-body{padding:18px;}
#yatoon-closed-dates-wrap .ycd-field{margin-bottom:16px;}
#yatoon-closed-dates-wrap .ycd-field label{display:block;font-size:13px;font-weight:600;color:#374151;margin-bottom:6px;}
#yatoon-closed-dates-wrap .ycd-field input,.ycd-field textarea{width:100%;padding:8px 10px;border:1px solid #d1d5db;border-radius:6px;font-size:14px;font-family:inherit;}
#yatoon-closed-dates-wrap .ycd-field textarea{min-height:120px;resize:vertical;}
#yatoon-closed-dates-wrap .ycd-help{font-size:12px;color:#9ca3af;margin-top:4px;line-height:1.5;}
#yatoon-closed-dates-wrap .ycd-quick-btns{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px;}
#yatoon-closed-dates-wrap .ycd-quick-btn{font-size:12px;padding:4px 10px;background:#f3f4f6;border:1px solid #e5e7eb;border-radius:6px;cursor:pointer;color:#374151;}
#yatoon-closed-dates-wrap .ycd-quick-btn:hover{background:#e5e7eb;}
#yatoon-closed-dates-wrap .ycd-preview{list-style:none;margin:0;padding:0;}
#yatoon-closed-dates-wrap .ycd-preview li{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid #f3f4f6;font-size:14px;}
#yatoon-closed-dates-wrap .ycd-preview li:last-child{border-bottom:none;}
#yatoon-closed-dates-wrap .ycd-preview-date{font-weight:600;color:#111827;}
#yatoon-closed-dates-wrap .ycd-preview-day{color:#6b7280;font-size:13px;}
#yatoon-closed-dates-wrap .ycd-preview-past{color:#9ca3af;}
#yatoon-closed-dates-wrap .ycd-empty{padding:24px;text-align:center;color:#9ca3af;font-size:13px;}
#yatoon-closed-dates-wrap .ycd-badge-past{background:#f3f4f6;color:#9ca3af;font-size:11px;padding:1px 7px;border-radius:20px;}
#yatoon-closed-dates-wrap .ycd-badge-soon{background:#fef3c7;color:#92400e;font-size:11px;padding:1px 7px;border-radius:20px;}
#yatoon-closed-dates-wrap .ycd-badge-today{background:#fee2e2;color:#991b1b;font-size:11px;padding:1px 7px;border-radius:20px;}
@media(max-width:780px){#yatoon-closed-dates-wrap .ycd-layout{grid-template-columns:1fr;}}
</style>

<?php if ($saved_msg) : ?>
    <div class="notice notice-success is-dismissible"><p><?php echo esc_html($saved_msg); ?></p></div>
<?php endif; ?>

<form method="post" id="ycd-form">
<?php wp_nonce_field('yatoon_closed_dates_save'); ?>
<input type="hidden" name="yatoon_closed_dates_save" value="1">

<div class="ycd-layout">
    <!-- Left: input -->
    <div class="ycd-panel">
        <div class="ycd-panel-head"><h2>Add Closed Dates</h2></div>
        <div class="ycd-panel-body">
            <div class="ycd-field">
                <label>Closed dates <span style="font-weight:400;color:#9ca3af;">(one per line, YYYY-MM-DD)</span></label>
                <div class="ycd-quick-btns">
                    <button type="button" class="ycd-quick-btn" id="ycd-add-today">+ Today</button>
                    <button type="button" class="ycd-quick-btn" id="ycd-add-tomorrow">+ Tomorrow</button>
                    <button type="button" class="ycd-quick-btn" id="ycd-add-christmas">+ Dec 25</button>
                    <button type="button" class="ycd-quick-btn" id="ycd-add-new-year">+ Jan 1</button>
                    <button type="button" class="ycd-quick-btn" id="ycd-clear-past">Clear past</button>
                </div>
                <textarea name="yatoon_closed_dates" id="ycd-dates-input" placeholder="2026-07-04&#10;2026-12-25&#10;2026-01-01"><?php echo esc_textarea($closed_dates); ?></textarea>
                <p class="ycd-help">Each line = one closed day. All staff will be fully blocked on these dates. Range tip: add each day individually (e.g. vacation week = 5 lines).</p>
            </div>
            <div class="ycd-field">
                <label>Message shown to customers</label>
                <input type="text" name="yatoon_closed_label" value="<?php echo esc_attr($closed_label); ?>" placeholder="We are closed on this date.">
                <p class="ycd-help">Shown in the booking form when a customer picks a closed date.</p>
            </div>
            <button type="submit" class="button button-primary" style="padding:8px 24px;">Save Closed Dates</button>
        </div>
    </div>

    <!-- Right: live preview -->
    <div class="ycd-panel">
        <div class="ycd-panel-head"><h2>Preview</h2></div>
        <div id="ycd-preview-body">
            <div class="ycd-empty">Enter dates on the left to preview.</div>
        </div>
    </div>
</div>
</form>
</div>

<script>
jQuery(function($){
    const today = new Date();
    today.setHours(0,0,0,0);

    function todayStr() {
        return today.toISOString().slice(0,10);
    }
    function tomorrowStr() {
        const d = new Date(today); d.setDate(d.getDate()+1);
        return d.toISOString().slice(0,10);
    }
    function addDateToInput(dateStr) {
        const $ta = $('#ycd-dates-input');
        const current = $ta.val().trim();
        const lines = current ? current.split('\n').map(s => s.trim()).filter(Boolean) : [];
        if (!lines.includes(dateStr)) {
            lines.push(dateStr);
            lines.sort();
            $ta.val(lines.join('\n'));
        }
        updatePreview();
    }

    $('#ycd-add-today').on('click', function(){ addDateToInput(todayStr()); });
    $('#ycd-add-tomorrow').on('click', function(){ addDateToInput(tomorrowStr()); });
    $('#ycd-add-christmas').on('click', function(){ addDateToInput(today.getFullYear() + '-12-25'); });
    $('#ycd-add-new-year').on('click', function(){
        const yr = today.getMonth() >= 11 ? today.getFullYear()+1 : today.getFullYear();
        addDateToInput(yr + '-01-01');
    });
    $('#ycd-clear-past').on('click', function(){
        const $ta = $('#ycd-dates-input');
        const lines = $ta.val().split('\n').map(s => s.trim()).filter(Boolean);
        const future = lines.filter(d => {
            const dt = new Date(d + 'T00:00:00');
            return dt >= today;
        });
        $ta.val(future.join('\n'));
        updatePreview();
    });

    function updatePreview() {
        const raw = $('#ycd-dates-input').val().trim();
        const lines = raw ? raw.split('\n').map(s => s.trim()).filter(s => /^\d{4}-\d{2}-\d{2}$/.test(s)) : [];
        if (!lines.length) {
            $('#ycd-preview-body').html('<div class="ycd-empty">Enter dates on the left to preview.</div>');
            return;
        }
        const sorted = lines.slice().sort();
        const days = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];
        const months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
        let html = '<ul class="ycd-preview">';
        sorted.forEach(function(d){
            const dt = new Date(d + 'T00:00:00');
            const isPast = dt < today;
            const isToday = dt.getTime() === today.getTime();
            const daysBefore = Math.round((dt - today) / 86400000);
            const label = months[dt.getMonth()] + ' ' + dt.getDate() + ', ' + dt.getFullYear();
            const dayName = days[dt.getDay()];
            let badge = '';
            if (isToday) badge = '<span class="ycd-badge-today">Today</span>';
            else if (isPast) badge = '<span class="ycd-badge-past">Past</span>';
            else if (daysBefore <= 7) badge = '<span class="ycd-badge-soon">In ' + daysBefore + 'd</span>';
            html += '<li class="' + (isPast ? 'ycd-preview-past' : '') + '">'
                  + '<span><span class="ycd-preview-date">' + label + '</span> <span class="ycd-preview-day">' + dayName + '</span></span>'
                  + badge + '</li>';
        });
        html += '</ul>';
        $('#ycd-preview-body').html(html);
    }

    $('#ycd-dates-input').on('input', updatePreview);
    updatePreview();
});
</script>
