{{--
    Shared "Send Notification" panel partial.
    Variables expected:
      $targetOptions  — array of ['value' => 'label'] for the target dropdown
      $defaultTarget  — pre-selected target value
--}}
<div id="notifyPanel" class="card shadow-sm" style="border-top:3px solid #c9a96e;position:sticky;top:20px">
    <div class="card-header" style="background:linear-gradient(135deg,#1a1a2e,#16213e)">
        <h6 class="mb-0 text-white">
            <i class="fas fa-paper-plane mr-2" style="color:#c9a96e"></i>Send Notification
        </h6>
    </div>
    <div class="card-body">
        <form method="POST" action="/users/notify" id="notifyForm">
            @csrf

            {{-- Target --}}
            <div class="form-group mb-2">
                <label style="font-size:12px;font-weight:600">Send To *</label>
                <select name="target" id="notifyTarget" class="form-control form-control-sm" required>
                    @foreach($targetOptions as $value => $label)
                        <option value="{{ $value }}" {{ $value===$defaultTarget?'selected':'' }}>
                            {{ $label }}
                        </option>
                    @endforeach
                </select>
                <div id="notifyTargetLabel" style="font-size:11px;color:#c9a96e;margin-top:3px;min-height:16px"></div>
            </div>

            {{-- Type --}}
            <div class="form-group mb-2">
                <label style="font-size:12px;font-weight:600">Type *</label>
                <select name="type" id="notifyType" class="form-control form-control-sm" required
                    onchange="applyNotifyTemplate(this.value)">
                    <option value="project_launch">🏗️ Project Launch</option>
                    <option value="offer">🎁 Special Offer</option>
                    <option value="general">🔔 General</option>
                    <option value="payment_reminder">💳 Payment Reminder</option>
                    <option value="booking_confirmed">✅ Booking Confirmed</option>
                    <option value="booking_cancelled">❌ Booking Cancelled</option>
                </select>
            </div>

            {{-- Title --}}
            <div class="form-group mb-2">
                <label style="font-size:12px;font-weight:600">Title *</label>
                <input type="text" name="title" id="notifyTitle"
                    class="form-control form-control-sm"
                    placeholder="Notification title" required maxlength="255">
            </div>

            {{-- Message --}}
            <div class="form-group mb-2">
                <label style="font-size:12px;font-weight:600">Message *</label>
                <textarea name="message" id="notifyMessage"
                    class="form-control form-control-sm"
                    rows="5" required maxlength="1000"
                    placeholder="Your message..."></textarea>
                <div style="font-size:11px;color:#94a3b8;margin-top:3px">
                    <code>{name}</code> = user's name
                    @if(isset($isBrokerPage) && $isBrokerPage)
                    · <code>{commission}</code> = their rate
                    @endif
                </div>
            </div>

            {{-- Template badge --}}
            <div id="notifyTemplateBadge" style="display:none;margin-bottom:10px">
                <span style="font-size:11px;padding:3px 10px;border-radius:10px;background:rgba(201,169,110,0.12);color:#c9a96e;border:1px solid rgba(201,169,110,0.25)">
                    ✨ Template applied — feel free to edit
                </span>
            </div>

            {{-- Char count --}}
            <div style="font-size:11px;color:#94a3b8;text-align:right;margin-bottom:8px">
                <span id="charCount">0</span>/1000
            </div>

            <button class="btn btn-warning btn-sm btn-block" style="color:#fff;font-weight:700">
                <i class="fas fa-paper-plane mr-1"></i>Send Notification
            </button>
        </form>
    </div>
</div>

<script>
const NOTIFY_TEMPLATES = {
    project_launch: {
        title:   '🏗️ New Project Launch — {name}, Don\'t Miss Out!',
        message: 'Hi {name},\n\nWe\'re excited to announce the launch of our newest project! Premium units are now available for booking.\n\nEarly birds get priority selection and special launch pricing. Book now before units sell out!\n\nContact us today to schedule a site visit.',
    },
    offer: {
        title:   '🎁 Exclusive Offer for {name}!',
        message: 'Hi {name},\n\nWe have a special limited-time offer just for you! Get exclusive pricing and benefits on selected units.\n\nThis offer is valid for a limited period only. Contact our sales team to learn more and secure your unit today.',
    },
    payment_reminder: {
        title:   '💳 Payment Reminder',
        message: 'Hi {name},\n\nThis is a friendly reminder that your booking payment is pending. Please complete your payment at the earliest to confirm your unit.\n\nIf you have already paid, please ignore this message.',
    },
    booking_confirmed: {
        title:   '✅ Your Booking is Confirmed!',
        message: 'Hi {name},\n\nCongratulations! Your booking has been confirmed. Welcome to our community!\n\nOur team will be in touch shortly with next steps and documentation.',
    },
    booking_cancelled: {
        title:   'Booking Cancellation Notice',
        message: 'Hi {name},\n\nYour booking has been cancelled. If you have any questions or would like to discuss alternatives, please contact our support team.',
    },
    general: {
        title:   '',
        message: '',
    },
};

// Broker-specific project launch template
const BROKER_PROJECT_LAUNCH = {
    title:   '🏗️ New Project — Earn {commission} Commission!',
    message: 'Hi {name},\n\nWe\'re thrilled to announce our newest project is now open for broker referrals!\n\nAs a valued broker partner, you earn {commission} commission on every confirmed booking you bring in.\n\nContact us to get your exclusive broker marketing materials and client referral links.',
};

const IS_BROKER_PAGE = document.querySelector('[data-broker-page]') !== null;

function applyNotifyTemplate(type) {
    let tpl = NOTIFY_TEMPLATES[type] || NOTIFY_TEMPLATES.general;

    // Use broker-specific template if on broker page
    if (IS_BROKER_PAGE && type === 'project_launch') {
        tpl = BROKER_PROJECT_LAUNCH;
    }

    if (tpl.title) {
        document.getElementById('notifyTitle').value   = tpl.title;
        document.getElementById('notifyMessage').value = tpl.message;
        document.getElementById('notifyTemplateBadge').style.display = 'block';
    } else {
        document.getElementById('notifyTitle').value   = '';
        document.getElementById('notifyMessage').value = '';
        document.getElementById('notifyTemplateBadge').style.display = 'none';
    }
    updateCharCount();
}

// Character counter
document.getElementById('notifyMessage').addEventListener('input', updateCharCount);
function updateCharCount() {
    const len = document.getElementById('notifyMessage').value.length;
    document.getElementById('charCount').textContent = len;
    document.getElementById('charCount').style.color = len > 900 ? '#ef4444' : '#94a3b8';
}

// Auto-apply template on page load for project_launch default
document.addEventListener('DOMContentLoaded', function() {
    applyNotifyTemplate(document.getElementById('notifyType').value);
});
</script>