@extends('layouts.admin')

@section('title', 'Broadcast Message')

@section('admin-content')
<style>
    /* Specific Broadcast Styles */
    .broadcast-page .stat-card { height: 100%; display: flex; flex-direction: column; justify-content: center; }
    
    .broadcast-page .stat-icon-wrapper { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; font-size: 1.75rem; }
    
    .broadcast-page .target-option-card { border: 2px solid #e9ecef; border-radius: 12px; padding: 16px; text-align: center; cursor: pointer; transition: all 0.2s ease; background: #fff; height: 100%; }
    .broadcast-page .target-option-card:hover { background: #f8f9fa; border-color: #dee2e6; }
    .broadcast-page input[type="radio"]:checked + .target-option-card { border-color: #667eea; background: #f0f4ff; color: #5a67d8; }
    .broadcast-page input[type="radio"]:checked + .target-option-card i { color: #5a67d8 !important; }
    
    .broadcast-page .form-control, .broadcast-page .form-select { border-radius: 10px; padding: 12px 16px; border: 1px solid #dee2e6; }
    .broadcast-page .form-control:focus, .broadcast-page .form-select:focus { border-color: #a3bffa; box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1); }
</style>

<div class="broadcast-page">
    <!-- Page Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h4 class="fw-bold mb-1">Broadcast Message</h4>
            <p class="text-muted mb-0 small">Send important announcements to your users</p>
        </div>
    </div>

    <div class="row g-4">
        <!-- Audience Stats -->
        <div class="col-lg-4">
            <div class="row g-3 h-100">
                <div class="col-12">
                    <div class="stat-card">
                        <div class="stat-icon-wrapper bg-primary bg-opacity-10 text-primary">
                            <i class="bi bi-shop"></i>
                        </div>
                        <h2 class="fw-bold mb-0 text-dark">{{ $stats['total_sellers'] }}</h2>
                        <p class="text-muted mb-0 fw-medium">Active Sellers</p>
                    </div>
                </div>
                <div class="col-12 mt-3">
                     <div class="stat-card">
                        <div class="stat-icon-wrapper bg-info bg-opacity-10 text-info">
                            <i class="bi bi-people"></i>
                        </div>
                        <h2 class="fw-bold mb-0 text-dark">{{ $stats['total_buyers'] }}</h2>
                        <p class="text-muted mb-0 fw-medium">Registered Buyers</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Compose Form -->
        <div class="col-lg-8">
            <div class="card border-0 shadow-sm rounded-4 h-100">
                <div class="card-header bg-white border-0 pt-4 pb-0 px-4">
                    <h5 class="fw-bold mb-1"><i class="bi bi-pencil-square me-2 text-primary"></i>Compose Notification</h5>
                    <p class="text-muted small">Choose your audience and craft your message</p>
                </div>
                <div class="card-body p-4">
                    <form action="{{ route('admin.broadcast.send') }}" method="POST">
                        @csrf
                        
                        <!-- Target Selection -->
                        <div class="mb-4">
                            <label class="form-label fw-bold small text-muted text-uppercase mb-3">Target Audience</label>
                            <div class="row g-3">
                                <div class="col-6 col-md-3">
                                    <input type="radio" class="btn-check" name="target" value="all" id="targetAll" checked>
                                    <label class="target-option-card d-block w-100" for="targetAll">
                                        <i class="bi bi-globe2 fs-3 mb-2 d-block text-secondary"></i>
                                        <span class="fw-bold small">All Users</span>
                                    </label>
                                </div>
                                <div class="col-6 col-md-3">
                                    <input type="radio" class="btn-check" name="target" value="sellers" id="targetSellers">
                                    <label class="target-option-card d-block w-100" for="targetSellers">
                                        <i class="bi bi-shop-window fs-3 mb-2 d-block text-secondary"></i>
                                        <span class="fw-bold small">Sellers Only</span>
                                    </label>
                                </div>
                                <div class="col-6 col-md-3">
                                    <input type="radio" class="btn-check" name="target" value="buyers" id="targetBuyers">
                                    <label class="target-option-card d-block w-100" for="targetBuyers">
                                        <i class="bi bi-bag-heart fs-3 mb-2 d-block text-secondary"></i>
                                        <span class="fw-bold small">Buyers Only</span>
                                    </label>
                                </div>
                                <div class="col-6 col-md-3">
                                    <input type="radio" class="btn-check" name="target" value="plan" id="targetPlan">
                                    <label class="target-option-card d-block w-100" for="targetPlan">
                                        <i class="bi bi-trophy fs-3 mb-2 d-block text-secondary"></i>
                                        <span class="fw-bold small">By Plan</span>
                                    </label>
                                </div>
                            </div>
                        </div>

                        <!-- Plan Selection (Hidden by default) -->
                        <div class="mb-4 bg-light p-3 rounded-3" id="planSelect" style="display: none;">
                            <label class="form-label fw-bold small text-muted">Select Subscription Plan</label>
                            <select name="plan_id" class="form-select">
                                <option value="">-- Choose a Plan --</option>
                                @foreach($plans as $plan)
                                    <option value="{{ $plan->id }}">{{ $plan->name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <!-- Message Details -->
                        <div class="mb-3">
                            <label class="form-label fw-bold small text-muted">Notification Title</label>
                            <input type="text" name="title" class="form-control" placeholder="e.g. Special Holiday Offer!" maxlength="100" required>
                        </div>

                        <div class="mb-4">
                            <label class="form-label fw-bold small text-muted">Message Content</label>
                            <textarea name="message" class="form-control" rows="5" placeholder="Type your broadcast message here..." maxlength="500" required style="resize: none;"></textarea>
                            <div class="d-flex justify-content-end mt-1">
                                <small class="text-muted">Max 500 characters</small>
                            </div>
                        </div>

                        <!-- Styling Options -->
                        <div class="row g-3 mb-4">
                            <div class="col-md-6">
                                <label class="form-label fw-bold small text-muted">Icon Style</label>
                                <div class="input-group">
                                    <span class="input-group-text bg-white border-end-0"><i class="bi bi-emoji-smile"></i></span>
                                    <select name="icon" class="form-select border-start-0 ps-0">
                                        <option value="bi-megaphone">📢 Megaphone</option>
                                        <option value="bi-gift">🎁 Gift Box</option>
                                        <option value="bi-star">⭐ Star</option>
                                        <option value="bi-lightning">⚡ Lightning</option>
                                        <option value="bi-info-circle">ℹ️ Information</option>
                                        <option value="bi-exclamation-triangle">⚠️ Warning / Alert</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-bold small text-muted">Alert Color</label>
                                <div class="input-group">
                                    <span class="input-group-text bg-white border-end-0"><i class="bi bi-palette"></i></span>
                                    <select name="icon_color" class="form-select border-start-0 ps-0">
                                        <option value="primary">🔵 Primary Blue</option>
                                        <option value="success">🟢 Success Green</option>
                                        <option value="warning">🟡 Warning Yellow</option>
                                        <option value="danger">🔴 Danger Red</option>
                                        <option value="info">🔷 Info Cyan</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="d-grid pt-2">
                            <button type="submit" class="btn btn-primary btn-lg shadow-sm fw-bold">
                                <i class="bi bi-send-fill me-2"></i>Send Broadcast Now
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const targetRadios = document.querySelectorAll('input[name="target"]');
        const planSelect = document.getElementById('planSelect');
        
        targetRadios.forEach(radio => {
            radio.addEventListener('change', function() {
                if (this.value === 'plan') {
                    planSelect.style.display = 'block';
                    // Optional: add a small animation
                    planSelect.animate([
                        { opacity: 0, transform: 'translateY(-10px)' },
                        { opacity: 1, transform: 'translateY(0)' }
                    ], { duration: 300, fill: 'forwards' });
                } else {
                    planSelect.style.display = 'none';
                }
            });
        });
    });
</script>
@endsection