<?php
// phpcs:ignoreFile
if (!defined('ABSPATH')) { exit; }
$nonce = wp_create_nonce('yatoon_packages');
?>
<div class="wrap" id="yatoon-packages-wrap">
<h1>Service Packages 🎁</h1>
<p style="color:#6b7280;margin-top:0;">Sell pre-paid session bundles. Clients buy a package and redeem sessions at booking time.</p>

<style>
#yatoon-packages-wrap *{box-sizing:border-box;}
#yatoon-packages-wrap .ypk-layout{display:grid;grid-template-columns:1fr 320px;gap:20px;margin-top:16px;}
#yatoon-packages-wrap .ypk-panel{background:#fff;border:1px solid #e5e7eb;border-radius:10px;overflow:hidden;}
#yatoon-packages-wrap .ypk-head{padding:14px 18px;border-bottom:1px solid #f3f4f6;}
#yatoon-packages-wrap .ypk-head h2{margin:0;font-size:14px;font-weight:600;color:#111827;}
#yatoon-packages-wrap .ypk-body{padding:18px;}
#yatoon-packages-wrap table{width:100%;border-collapse:collapse;font-size:13px;}
#yatoon-packages-wrap th{background:#f9fafb;padding:9px 14px;text-align:left;font-size:11px;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid #f3f4f6;}
#yatoon-packages-wrap td{padding:12px 14px;border-bottom:1px solid #f9fafb;vertical-align:top;}
#yatoon-packages-wrap tr:last-child td{border-bottom:none;}
#yatoon-packages-wrap .ypk-form-row{margin-bottom:13px;}
#yatoon-packages-wrap .ypk-form-row label{display:block;font-size:12px;font-weight:600;color:#374151;margin-bottom:4px;}
#yatoon-packages-wrap .ypk-form-row input,
#yatoon-packages-wrap .ypk-form-row select,
#yatoon-packages-wrap .ypk-form-row textarea{width:100%;padding:7px 9px;border:1px solid #d1d5db;border-radius:6px;font-size:13px;font-family:inherit;}
#yatoon-packages-wrap .ypk-form-row textarea{min-height:60px;resize:vertical;}
#yatoon-packages-wrap .ypk-hint{font-size:11px;color:#9ca3af;margin-top:3px;}
#yatoon-packages-wrap .ypk-empty{padding:32px;text-align:center;color:#9ca3af;font-size:13px;}
#yatoon-packages-wrap .ypk-badge{display:inline-block;font-size:11px;padding:1px 8px;border-radius:20px;}
#yatoon-packages-wrap .ypk-active{background:#dcfce7;color:#166534;}
#yatoon-packages-wrap .ypk-inactive{background:#f3f4f6;color:#6b7280;}
@media(max-width:900px){#yatoon-packages-wrap .ypk-layout{grid-template-columns:1fr;}}
</style>

<div class="ypk-layout">
    <!-- Left: package list -->
    <div class="ypk-panel">
        <div class="ypk-head"><h2>Packages</h2></div>
        <?php if (empty($packages)): ?>
        <div class="ypk-empty">No packages yet. Create one using the form on the right.</div>
        <?php else: ?>
        <table>
            <thead><tr><th>Package</th><th>Service</th><th>Sessions</th><th>Price</th><th>Expires</th><th>Status</th><th>Actions</th></tr></thead>
            <tbody>
            <?php foreach ($packages as $p): ?>
            <tr>
                <td><strong><?php echo esc_html($p->name); ?></strong><?php if ($p->description): ?><div style="font-size:12px;color:#9ca3af;margin-top:2px;"><?php echo esc_html(mb_strimwidth($p->description, 0, 60, '...')); ?></div><?php endif; ?></td>
                <td><?php echo esc_html($p->service_name ?: 'Any service'); ?></td>
                <td><?php echo esc_html($p->sessions_total); ?> sessions</td>
                <td>$<?php echo esc_html(number_format($p->price, 2)); ?></td>
                <td><?php echo esc_html($p->expiry_days); ?>d</td>
                <td><span class="ypk-badge <?php echo $p->is_active ? 'ypk-active' : 'ypk-inactive'; ?>"><?php echo $p->is_active ? 'Active' : 'Inactive'; ?></span></td>
                <td style="display:flex;gap:6px;">
                    <button type="button" class="button button-small ypk-edit-btn"
                        data-id="<?php echo esc_attr($p->id); ?>"
                        data-name="<?php echo esc_attr($p->name); ?>"
                        data-desc="<?php echo esc_attr($p->description); ?>"
                        data-service="<?php echo esc_attr($p->service_id); ?>"
                        data-sessions="<?php echo esc_attr($p->sessions_total); ?>"
                        data-price="<?php echo esc_attr($p->price); ?>"
                        data-expiry="<?php echo esc_attr($p->expiry_days); ?>">Edit</button>
                    <button type="button" class="button button-small ypk-toggle-btn" data-id="<?php echo esc_attr($p->id); ?>" data-active="<?php echo esc_attr($p->is_active); ?>"><?php echo $p->is_active ? 'Deactivate' : 'Activate'; ?></button>
                    <button type="button" class="button button-small ypk-delete-btn" data-id="<?php echo esc_attr($p->id); ?>" style="color:#dc2626;">Delete</button>
                </td>
            </tr>
            <?php endforeach; ?>
            </tbody>
        </table>
        <?php endif; ?>
    </div>

    <!-- Right: add/edit form -->
    <div class="ypk-panel">
        <div class="ypk-head"><h2 id="ypk-form-title">Create Package</h2></div>
        <div class="ypk-body">
            <input type="hidden" id="ypk-edit-id" value="0">
            <div class="ypk-form-row">
                <label>Package Name *</label>
                <input type="text" id="ypk-name" placeholder="e.g. Gel Manicure 5-Pack">
            </div>
            <div class="ypk-form-row">
                <label>Description</label>
                <textarea id="ypk-desc" placeholder="Buy 5 sessions, save 10%"></textarea>
            </div>
            <div class="ypk-form-row">
                <label>Service</label>
                <select id="ypk-service">
                    <option value="0">Any service</option>
                    <?php foreach ($services as $svc): ?>
                    <option value="<?php echo esc_attr($svc->id); ?>"><?php echo esc_html($svc->name); ?></option>
                    <?php endforeach; ?>
                </select>
            </div>
            <div class="ypk-form-row">
                <label>Sessions included</label>
                <input type="number" id="ypk-sessions" value="5" min="2" max="50">
                <p class="ypk-hint">e.g. 5 = buy 5 get 1 free -> enter 6</p>
            </div>
            <div class="ypk-form-row">
                <label>Package price ($)</label>
                <input type="number" id="ypk-price" value="" step="0.01" placeholder="e.g. 199.00">
                <p class="ypk-hint">Total price for all sessions</p>
            </div>
            <div class="ypk-form-row">
                <label>Expires after (days)</label>
                <input type="number" id="ypk-expiry" value="180" min="30">
                <p class="ypk-hint">From purchase date. 180 = 6 months.</p>
            </div>
            <div style="display:flex;gap:8px;">
                <button type="button" id="ypk-save-btn" class="button button-primary" style="flex:1;padding:8px;">Save Package</button>
                <button type="button" id="ypk-cancel-btn" class="button" style="display:none;">Cancel</button>
            </div>
        </div>
    </div>
</div>

<script>
jQuery(function($){
    const nonce = '<?php echo esc_js($nonce); ?>';

    $(document).on('click', '.ypk-edit-btn', function(){
        const $b = $(this);
        $('#ypk-edit-id').val($b.data('id'));
        $('#ypk-form-title').text('Edit Package');
        $('#ypk-name').val($b.data('name'));
        $('#ypk-desc').val($b.data('desc'));
        $('#ypk-service').val($b.data('service'));
        $('#ypk-sessions').val($b.data('sessions'));
        $('#ypk-price').val($b.data('price'));
        $('#ypk-expiry').val($b.data('expiry'));
        $('#ypk-cancel-btn').show();
    });

    $('#ypk-cancel-btn').on('click', function(){
        $('#ypk-edit-id').val(0);
        $('#ypk-form-title').text('Create Package');
        $('#ypk-name, #ypk-desc, #ypk-price').val('');
        $('#ypk-sessions').val(5); $('#ypk-expiry').val(180); $('#ypk-service').val(0);
        $(this).hide();
    });

    $('#ypk-save-btn').on('click', function(){
        const name = $('#ypk-name').val().trim();
        if (!name){ alert('Package name required'); return; }
        const $btn = $(this).prop('disabled', true).text('Saving...');
        $.post(ajaxurl, {
            action: 'yatoon_save_package', nonce,
            id: $('#ypk-edit-id').val(),
            name, description: $('#ypk-desc').val(),
            service_id: $('#ypk-service').val(),
            sessions_total: $('#ypk-sessions').val(),
            price: $('#ypk-price').val(),
            expiry_days: $('#ypk-expiry').val(),
        }, function(resp){
            $btn.prop('disabled', false).text('Save Package');
            if (resp.success) location.reload();
            else alert('Error: ' + (resp.data?.message || 'Unknown'));
        });
    });

    $(document).on('click', '.ypk-delete-btn', function(){
        if (!confirm('Delete this package?')) return;
        $.post(ajaxurl, { action: 'yatoon_delete_package', nonce, id: $(this).data('id') }, function(r){ if (r.success) location.reload(); });
    });

    $(document).on('click', '.ypk-toggle-btn', function(){
        const isActive = parseInt($(this).data('active'));
        $.post(ajaxurl, { action: 'yatoon_toggle_package', nonce, id: $(this).data('id'), is_active: isActive ? 0 : 1 }, function(r){ if (r.success) location.reload(); });
    });
});
</script>
</div>
