<?php
include 'header.php';
set_time_limit(600);

$programid = resolve_programid();
require_program_access($programid, $getuser);

// Save form
if (isset($_GET['editsavethedate'])) {
    $std_include_dates       = intval($_POST['std_include_dates'] ?? 1);
    $std_include_theatre     = intval($_POST['std_include_theatre'] ?? 1);
    $std_include_ticketlink  = intval($_POST['std_include_ticketlink'] ?? 0);
    $std_ticketlink          = $_POST['std_ticketlink'] ?? '';
    $std_ticketlink_text     = $_POST['std_ticketlink_text'] ?? 'Get Tickets';
    $std_include_emailsignup = intval($_POST['std_include_emailsignup'] ?? 1);
    $std_promo_text          = $_POST['std_promo_text'] ?? '';
    $std_confirmation_email  = $_POST['std_confirmation_email'] ?? '';
    $std_confirmation_page   = $_POST['std_confirmation_page'] ?? '';
    $std_include_social      = intval($_POST['std_include_social'] ?? 1);
    $savethedate             = $_POST['savethedate'] ?? '';
    $countdownclock          = intval($_POST['countdownclock'] ?? 0);
    $countdownclocktext      = $_POST['countdownclocktext'] ?? '';
    $dater                   = $_POST['dater'] ?? '';
    $timer                   = $_POST['timer'] ?? '12:00';
    $timer2                  = $_POST['timer2'] ?? 'PM';

    $countdowndt = '';
    if (strlen($dater) > 0) {
        $h = intval(date('H', strtotime($timer)));
        if ($timer2 === 'PM' && $h !== 12) {
            $timer = date('H:i', strtotime($timer . ' +12 hours'));
        }
        if ($timer2 === 'AM' && $h === 12) {
            $timer = date('H:i', strtotime($timer . ' -12 hours'));
        }
        $countdowndt = $dater . ' ' . $timer;
    }

    $sql = "UPDATE stagemag.productions SET
        std_include_dates = ?, std_include_theatre = ?, std_include_ticketlink = ?,
        std_ticketlink = ?, std_ticketlink_text = ?, std_include_emailsignup = ?,
        std_promo_text = ?, std_confirmation_email = ?, std_confirmation_page = ?,
        std_include_social = ?, savethedate = ?, countdownclock = ?, countdownclocktext = ?";
    $params = [
        $std_include_dates, $std_include_theatre, $std_include_ticketlink,
        $std_ticketlink, $std_ticketlink_text, $std_include_emailsignup,
        $std_promo_text, $std_confirmation_email, $std_confirmation_page,
        $std_include_social, $savethedate, $countdownclock, $countdownclocktext
    ];
    if (strlen($countdowndt) > 0) {
        $sql .= ", countdownclockto = ?";
        $params[] = $countdowndt;
    }
    $sql .= " WHERE id = ?";
    $params[] = $programid;

    $stmt = db_write()->prepare($sql);
    $stmt->execute($params);
}
?>

<style>
.feature-card { background: #fff; border: 1px solid #e0e0e0; border-radius: 8px; margin-bottom: 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.08); }
.feature-card-header { background: linear-gradient(135deg, #b20223 0%, #8a011a 100%); color: #fff; padding: 12px 20px; border-radius: 7px 7px 0 0; font-size: 18px; font-weight: 600; }
.feature-card-body { padding: 20px; }
.feature-card-body p { color: #555; margin-bottom: 15px; line-height: 1.5; }
.feature-card-body select { padding: 8px 12px; border: 1px solid #ccc; border-radius: 4px; font-size: 14px; min-width: 100px; }
.feature-card-body input[type="text"] { padding: 8px 12px; border: 1px solid #ccc; border-radius: 4px; font-size: 14px; width: 100%; max-width: 500px; }
.feature-card-body textarea { border: 1px solid #ccc; border-radius: 4px; padding: 10px; font-size: 14px; }
.feature-card-body label { font-weight: 600; color: #333; display: block; margin-bottom: 5px; }
.feature-row { margin-bottom: 15px; }
.feature-row:last-child { margin-bottom: 0; }
.preview-container { width: 100%; margin-bottom: 20px; border: 1px solid #ddd; border-radius: 6px; overflow: hidden; background: #f9f9f9; position: relative; }
.preview-frame-wrapper { width: 100%; height: 360px; overflow: hidden; position: relative; }
.preview-frame-wrapper iframe { width: 400%; height: 400%; border: none; transform: scale(0.25); transform-origin: top left; pointer-events: none; }
.preview-label { background: #f0f0f0; border-top: 1px solid #ddd; padding: 8px 14px; font-size: 12px; color: #666; display: flex; align-items: center; justify-content: space-between; }
.preview-label a { color: #b20223; font-weight: 600; text-decoration: none; font-size: 12px; }
.preview-label a:hover { text-decoration: underline; }
.share-link { color: #b20223; word-break: break-all; font-size: 13px; }
.embed-code { width: 100%; height: 80px; font-size: 11px; padding: 8px; border: 1px solid #ccc; border-radius: 4px; font-family: monospace; margin-top: 10px; }
.social-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; margin-top: 10px; }
.social-thumb { border: 1px solid #ddd; border-radius: 6px; overflow: hidden; background: #f9f9f9; text-align: center; }
.social-thumb-info { padding: 8px 10px; border-top: 1px solid #ddd; font-size: 11px; color: #666; }
.social-thumb-info strong { display: block; color: #333; font-size: 13px; margin-bottom: 2px; }
.social-thumb-info a { color: #b20223; text-decoration: none; font-weight: 600; font-size: 12px; }
.promo-banner { background: linear-gradient(135deg, #fdf2f4 0%, #fce8ec 100%); border: 1px solid #f0c0c8; border-radius: 8px; padding: 20px 24px; margin-bottom: 24px; }
.promo-banner p { color: #555; margin: 0; line-height: 1.5; font-size: 14px; }
.std-tabs { list-style: none; padding: 0; margin: 0 0 20px 0; display: flex; border-bottom: 2px solid #e0e0e0; }
.std-tab { padding: 12px 24px; cursor: pointer; font-size: 15px; font-weight: 600; color: #666; border-bottom: 3px solid transparent; margin-bottom: -2px; transition: color 0.2s, border-color 0.2s; user-select: none; }
.std-tab:hover { color: #b20223; }
.std-tab.active { color: #b20223; border-bottom-color: #b20223; }
.std-modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 10000; align-items: center; justify-content: center; }
.std-modal { background: #fff; border-radius: 10px; width: 90%; max-width: 700px; max-height: 90vh; overflow-y: auto; box-shadow: 0 8px 32px rgba(0,0,0,0.25); }
.std-modal-header { background: linear-gradient(135deg, #b20223 0%, #8a011a 100%); color: #fff; padding: 14px 20px; border-radius: 10px 10px 0 0; font-size: 18px; font-weight: 600; display: flex; align-items: center; justify-content: space-between; }
.std-modal-close { background: none; border: none; color: #fff; font-size: 24px; cursor: pointer; }
.std-modal-body { padding: 20px; }
</style>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>

<?php
$stmt = db_write()->prepare("SELECT * FROM stagemag.productions WHERE id = ?");
$stmt->execute([$programid]);
$geter = $stmt->fetch();

// Defensive defaults
$std_include_dates      = $geter['std_include_dates'] ?? 1;
$std_include_theatre    = $geter['std_include_theatre'] ?? 1;
$std_include_ticketlink = $geter['std_include_ticketlink'] ?? 0;
$std_ticketlink         = $geter['std_ticketlink'] ?? '';
$std_ticketlink_text    = $geter['std_ticketlink_text'] ?? 'Get Tickets';
$std_include_emailsignup= $geter['std_include_emailsignup'] ?? 1;
$std_promo_text         = $geter['std_promo_text'] ?? '';
$std_confirmation_email = $geter['std_confirmation_email'] ?? '';
$std_confirmation_page  = $geter['std_confirmation_page'] ?? '';
$std_include_social     = $geter['std_include_social'] ?? 1;

function stdOnOff($name, $val) {
    if ($val == 1) echo '<select name="'.$name.'"><option value="1">On</option><option value="0">Off</option></select>';
    else echo '<select name="'.$name.'"><option value="0">Off</option><option value="1">On</option></select>';
}
?>

<div id="content" style="max-width: 900px;">
  <div id="content-header">
    <h2>&nbsp;Show Promo Kit</h2>
  </div>
  <div class="container-fluid">

<div class="promo-banner">
    <p>Everything you need to promote your production in one place! Share a beautiful, branded Save the Date page featuring your show artwork, dates, venue, ticket links, and email signup.</p>
</div>

<ul class="std-tabs" role="tablist">
    <li class="std-tab active" role="tab" onclick="switchTab('preview')"><span class="std-tab-icon">&#9654;</span> Preview &amp; Share</li>
    <li class="std-tab" role="tab" onclick="switchTab('edit')"><span class="std-tab-icon">&#9998;</span> Edit Settings</li>
</ul>

<!-- TAB 1: PREVIEW -->
<div id="tab-preview" class="std-tab-panel">

<div class="feature-card">
    <div class="feature-card-header">Save the Date Live Preview</div>
    <div class="feature-card-body">
        <div class="preview-container">
            <div class="preview-frame-wrapper">
                <iframe id="stdPreviewFrame" src="https://stagemag.broadwayworld.com/savethedate/<?= htmlspecialchars($geter['seo_friendly']) ?><?= isset($_GET['editsavethedate']) ? '?t=' . $geter['id'] . date('YmdHis') : '' ?>" loading="lazy" sandbox="allow-same-origin allow-scripts"></iframe>
            </div>
            <div class="preview-label">
                <span>Live Preview</span>
                <a href="https://stagemag.broadwayworld.com/savethedate/<?= htmlspecialchars($geter['seo_friendly']) ?>" target="_blank">Open Full Size &rarr;</a>
            </div>
        </div>
        <div style="text-align:center;margin-top:15px;">
            <button type="button" onclick="document.getElementById('shareModal').style.display='flex'" style="padding:10px 24px;background:#b20223;color:white;border:none;border-radius:6px;font-size:14px;font-weight:600;cursor:pointer;">&#128279; Share &amp; Embed</button>
        </div>
    </div>
</div>

<div class="feature-card">
    <div class="feature-card-header">Social Media Images</div>
    <div class="feature-card-body">
        <p>Download ready-made promotional images. Pick a design, then choose your size.</p>
        <label style="margin-bottom:8px;">Choose Design:</label>
        <div style="display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px;" id="designPicker">
            <?php $designs = ['save-the-date'=>'Save the Date','coming-soon'=>'Coming Soon','7-days'=>'7 Days Away','3-days'=>'3 Days Away','today'=>"It's Today!",'now-playing'=>'Now Playing'];
            $first = true; foreach ($designs as $key => $label): ?>
                <button type="button" class="design-btn<?= $first ? ' active' : '' ?>" data-label="<?= $key ?>" onclick="pickDesign(this)" style="padding:8px 16px;border-radius:20px;border:2px solid <?= $first ? '#b20223' : '#ccc' ?>;background:<?= $first ? '#b20223' : 'white' ?>;color:<?= $first ? 'white' : '#333' ?>;cursor:pointer;font-size:13px;font-weight:600;"><?= htmlspecialchars($label) ?></button>
            <?php $first = false; endforeach; ?>
        </div>

        <div class="social-grid">
            <?php
            $sizes = [
                ['instagram-story', 'Instagram Story', '1080 &times; 1920', 101, 180],
                ['square', 'Instagram / Facebook Post', '1080 &times; 1080', 160, 160],
                ['facebook', 'Facebook / OG Image', '1200 &times; 630', 200, 105],
                ['twitter', 'Twitter / X Post', '1200 &times; 675', 200, 113],
            ];
            foreach ($sizes as $s):
            ?>
            <div class="social-thumb">
                <a class="social-dl-link" href="savethedate-image.php?programid=<?= $geter['id'] ?>&size=<?= $s[0] ?>&label=save-the-date" target="_blank" style="text-decoration:none;">
                <div style="height:<?= $s[4] ?>px;width:<?= $s[3] ?>px;margin:0 auto;position:relative;overflow:hidden;border-radius:4px;">
                    <img src="https://cloudimages.broadwayworld.com/stagemag/<?= htmlspecialchars($geter['image']) ?>" style="width:100%;height:100%;object-fit:cover;">
                    <img src="https://cloudimages.broadwayworld.com/stagemag/newlogos/WhiteBkgd.png" style="position:absolute;top:0;left:0;width:100%;pointer-events:none;">
                    <div style="position:absolute;bottom:0;left:0;right:0;padding:6px;background:linear-gradient(transparent,rgba(0,0,0,0.85));color:white;text-align:center;">
                        <div class="thumb-label-text" style="font-size:8px;font-style:italic;opacity:0.7;">Save the Date</div>
                        <div style="font-size:9px;font-weight:700;line-height:1.1;"><?= htmlspecialchars($geter['productionname']) ?></div>
                    </div>
                </div>
                </a>
                <div class="social-thumb-info">
                    <strong><?= $s[1] ?></strong>
                    <?= $s[2] ?>
                    <br><a class="social-dl-link" href="savethedate-image.php?programid=<?= $geter['id'] ?>&size=<?= $s[0] ?>&label=save-the-date" target="_blank">Open &amp; Download &rarr;</a>
                </div>
            </div>
            <?php endforeach; ?>
        </div>
    </div>
</div>

</div><!-- /tab-preview -->

<!-- SHARE MODAL -->
<div id="shareModal" class="std-modal-overlay" style="display:none;">
    <div class="std-modal">
        <div class="std-modal-header">
            <span>Share &amp; Embed</span>
            <button type="button" onclick="document.getElementById('shareModal').style.display='none'" class="std-modal-close">&times;</button>
        </div>
        <div class="std-modal-body">
            <label>Direct Link:</label>
            <a href="https://stagemag.broadwayworld.com/savethedate/<?= htmlspecialchars($geter['seo_friendly']) ?>" target="_blank" class="share-link">https://stagemag.broadwayworld.com/savethedate/<?= htmlspecialchars($geter['seo_friendly']) ?></a>
            <label style="margin-top: 15px;">Iframe Embed Code:</label>
            <textarea class="embed-code"><iframe src="https://stagemag.broadwayworld.com/savethedate/<?= htmlspecialchars($geter['seo_friendly']) ?>" style="width:800px;height:1000px;" width="800" height="1000" frameborder="0"></iframe></textarea>
            <label style="margin-top: 15px;">Responsive JS Embed <span style="background:#b20223;color:#fff;font-size:10px;padding:2px 6px;border-radius:3px;margin-left:5px;">RECOMMENDED</span></label>
            <textarea class="embed-code" style="height:60px;"><script src="https://stagemag.broadwayworld.com/assets/js/std-embed.js" data-programid="<?= $geter['id'] ?>" data-slug="<?= htmlspecialchars($geter['seo_friendly']) ?>"></script></textarea>
            <div style="text-align:center;margin-top:15px;">
                <div id="stdQrCode"></div>
                <script>
                jQuery(function(){
                    jQuery('#stdQrCode').qrcode("https://stagemag.broadwayworld.com/savethedate/<?= htmlspecialchars($geter['seo_friendly']) ?>");
                    var canvas = document.querySelector("#stdQrCode canvas");
                    var img = canvas.toDataURL("image/png");
                    $(canvas).on('click', function() { var dl = document.createElement('a'); dl.setAttribute('href', img); dl.setAttribute('download', 'savethedate-qrcode.png'); dl.click(); });
                });
                </script>
                <small>Click to Download QR Code</small>
            </div>
        </div>
    </div>
</div>

<script>
var labelMap = {'save-the-date':'Save the Date','coming-soon':'Coming Soon','7-days':'7 Days Away','3-days':'3 Days Away','today':"It's Today!",'now-playing':'Now Playing'};
function pickDesign(btn) {
    var label = btn.getAttribute('data-label');
    document.querySelectorAll('.design-btn').forEach(function(b){ b.style.background='white'; b.style.color='#333'; b.style.borderColor='#ccc'; });
    btn.style.background='#b20223'; btn.style.color='white'; btn.style.borderColor='#b20223';
    document.querySelectorAll('.thumb-label-text').forEach(function(t){ t.textContent = labelMap[label]; });
    document.querySelectorAll('.social-dl-link').forEach(function(a){ a.setAttribute('href', a.getAttribute('href').replace(/label=[^&]*/, 'label=' + label)); });
}
function switchTab(tab) {
    document.querySelectorAll('.std-tab').forEach(function(t){ t.classList.remove('active'); });
    document.querySelectorAll('.std-tab-panel').forEach(function(p){ p.style.display='none'; });
    if (tab==='preview') { document.querySelectorAll('.std-tab')[0].classList.add('active'); document.getElementById('tab-preview').style.display='block'; }
    else { document.querySelectorAll('.std-tab')[1].classList.add('active'); document.getElementById('tab-edit').style.display='block'; }
}
</script>

<!-- TAB 2: EDIT SETTINGS -->
<div id="tab-edit" class="std-tab-panel" style="display:none;">

<FORM action="programedit-savethedate.php?editsavethedate=on&programid=<?= $programid ?>" method="post" enctype="multipart/form-data" style="margin:0">

<div class="feature-card"><div class="feature-card-header">Save the Date Content</div><div class="feature-card-body">
    <p>Custom HTML content displayed on your Save the Date page.</p>
    <div class="feature-row"><label>Content:</label><textarea id="stdContentEditor" name="savethedate" style="width:100%;height:200px;"><?= htmlspecialchars($geter['savethedate']) ?></textarea></div>
</div></div>

<div class="feature-card"><div class="feature-card-header">Include Dates</div><div class="feature-card-body">
    <p>Show your production dates on the Save the Date page<?php if (!empty($geter['startdate'])) echo ' (' . date('F j, Y', strtotime($geter['startdate'])); if (!empty($geter['enddate'])) echo ' &ndash; ' . date('F j, Y', strtotime($geter['enddate'])); if (!empty($geter['startdate'])) echo ')'; ?>.</p>
    <div class="feature-row"><label>Show Dates:</label><?php stdOnOff('std_include_dates', $std_include_dates); ?></div>
</div></div>

<div class="feature-card"><div class="feature-card-header">Include Theatre / Venue</div><div class="feature-card-body">
    <p>Show your theatre or venue name (<?= !empty($geter['theatre']) ? htmlspecialchars($geter['theatre']) : 'not set' ?>).</p>
    <div class="feature-row"><label>Show Theatre:</label><?php stdOnOff('std_include_theatre', $std_include_theatre); ?></div>
</div></div>

<div class="feature-card"><div class="feature-card-header">Ticket Link</div><div class="feature-card-body">
    <p>Add a prominent ticket purchase button.</p>
    <div class="feature-row"><label>Show Ticket Link:</label><?php stdOnOff('std_include_ticketlink', $std_include_ticketlink); ?></div>
    <div class="feature-row"><label>Ticket URL:</label><input type="text" name="std_ticketlink" value="<?= htmlspecialchars($std_ticketlink) ?>" placeholder="https://www.ticketsite.com/your-show"></div>
    <div class="feature-row"><label>Button Text:</label><input type="text" name="std_ticketlink_text" value="<?= htmlspecialchars($std_ticketlink_text) ?>" placeholder="Get Tickets" style="max-width:250px;"></div>
</div></div>

<div class="feature-card"><div class="feature-card-header">Email Subscribe Promo</div><div class="feature-card-body">
    <div class="feature-row"><label>Show Email Signup:</label><?php stdOnOff('std_include_emailsignup', $std_include_emailsignup); ?></div>
    <div class="feature-row"><label>Promo Text:</label><textarea name="std_promo_text" style="width:100%;height:80px;"><?= htmlspecialchars($std_promo_text) ?></textarea></div>
    <div class="feature-row"><label>Confirmation Email Text:</label><textarea name="std_confirmation_email" style="width:100%;height:100px;"><?= htmlspecialchars($std_confirmation_email) ?></textarea></div>
    <div class="feature-row"><label>Confirmation Page Text:</label><textarea name="std_confirmation_page" style="width:100%;height:100px;"><?= htmlspecialchars($std_confirmation_page) ?></textarea></div>
</div></div>

<div class="feature-card"><div class="feature-card-header">Social Media Buttons</div><div class="feature-card-body">
    <div class="feature-row"><label>Show Social Buttons:</label><?php stdOnOff('std_include_social', $std_include_social); ?></div>
</div></div>

<div class="feature-card"><div class="feature-card-header">Countdown Clock</div><div class="feature-card-body">
    <p>Add a countdown clock (Time is in ET).</p>
    <div class="feature-row"><label>Enable Countdown:</label>
        <?php if ($geter['countdownclock'] == 1) echo '<select name="countdownclock"><option value="1">On</option><option value="0">Off</option></select>';
        else echo '<select name="countdownclock"><option value="0">Off</option><option value="1">On</option></select>'; ?>
    </div>
    <div class="feature-row"><label>Countdown Date & Time:</label>
        <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/themes/smoothness/jquery-ui.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>
        <script>jQuery(function(){ jQuery("#std_datepicker").datepicker({ dateFormat: 'yy-mm-dd' }); });</script>
        <div style="display:flex;gap:10px;align-items:center;flex-wrap:wrap;">
            <input id="std_datepicker" name="dater" style="width:150px;padding:8px;" value="<?= date('Y-m-d', strtotime($geter['countdownclockto'])) ?>">
            <input name="timer" size="6" value="<?= date('h:i', strtotime($geter['countdownclockto'])) ?>" style="width:70px;padding:8px;">
            <select name="timer2" style="padding:8px;">
                <?php if (intval(date('H', strtotime($geter['countdownclockto']))) >= 12): ?>
                    <option value="PM">PM</option><option value="AM">AM</option>
                <?php else: ?>
                    <option value="AM">AM</option><option value="PM">PM</option>
                <?php endif; ?>
            </select>
        </div>
    </div>
    <div class="feature-row"><label>Countdown Label Text:</label><input type="text" name="countdownclocktext" value="<?= htmlspecialchars($geter['countdownclocktext']) ?>" style="max-width:300px;"></div>
</div></div>

<div style="margin-top: 20px; margin-bottom: 30px;">
    <input type="submit" Value="Save All Changes" name="buttadminman" class="btn btn-success btn-large" style="font:bold 18px;color:white;background-color:#b20223; padding: 12px 30px; border: none; border-radius: 4px; cursor: pointer;">
</div>

</form>
</div><!-- /tab-edit -->

<!-- CKEditor -->
<script src="/ckeditor0512z3/ckeditor.js" charset="utf-8"></script>
<script type="text/javascript" src="/ckfinder2025/ckfinder.js" charset="utf-8"></script>
<?php setcookie('folderme2', '/upload13/' . $programid . '/', 0, '/', 'stagemag.broadwayworld.com'); ?>
<script type="text/javascript">
try {
    CKEDITOR.on('dialogDefinition', function(ev) { var n=ev.data.name, d=ev.data.definition; if(n=='link'){ d.getContents('target').get('linkTargetType').default='_blank'; } });
    var editor = CKEDITOR.replace('stdContentEditor', { height: '300px', width: '100%' });
    editor.on('instanceReady', function() { console.log('STD CKEditor ready'); });
} catch(e) { console.error('CKEditor failed:', e); }
</script>

   </div>
</div>
<!--Footer-part-->
<br><br><br><br>

<?php include 'footer.php'; ?>