

<?php $__env->startSection('title', 'Invitations - WedBooker'); ?>
<?php $__env->startSection('page-title', 'Send Invitations'); ?>
<?php $__env->startSection('page-description', 'Invite your guests to the wedding'); ?>

<?php $__env->startSection('content'); ?>
<div class="space-y-6">
    
    <!-- Quick Actions -->
    <div class="flex justify-between items-center">
        <div class="flex gap-3">
            <a href="<?php echo e(route('invitations.template')); ?>" class="px-4 py-2 bg-purple-600 rounded-lg text-white hover:bg-purple-700 transition">
                <i class="fas fa-palette mr-2"></i>Customize Template
            </a>
            <a href="<?php echo e(route('invitations.statistics')); ?>" class="px-4 py-2 bg-blue-600 rounded-lg text-white hover:bg-blue-700 transition">
                <i class="fas fa-chart-line mr-2"></i>View Statistics
            </a>
        </div>
        <a href="<?php echo e(route('guests.index')); ?>" class="text-purple-400 text-sm hover:text-purple-300 transition">
            <i class="fas fa-users mr-1"></i>Manage Guests →
        </a>
    </div>
    
    <!-- Send Invitation -->
    <div class="glass-card rounded-2xl p-6 border border-white/10" data-aos="fade-up">
        <div class="flex justify-between items-center mb-4">
            <h3 class="text-xl font-bold text-white">Send Invitation</h3>
            <a href="<?php echo e(route('invitations.template')); ?>" class="text-purple-400 text-sm hover:text-purple-300 transition">
                <i class="fas fa-edit mr-1"></i>Use Custom Template
            </a>
        </div>
        <form action="<?php echo e(route('invitations.send')); ?>" method="POST" class="space-y-4">
            <?php echo csrf_field(); ?>
            <div>
                <label class="block text-white mb-2">Select Guest *</label>
                <select name="guest_id" class="w-full px-4 py-2 bg-white/10 border border-white/20 rounded-lg text-white focus:outline-none focus:border-purple-500" required>
                    <option value="">Select a guest</option>
                    <?php
                        $guests = [
                            ['id' => 1, 'name' => 'Sarah Johnson', 'email' => 'sarah@email.com'],
                            ['id' => 2, 'name' => 'Michael Brown', 'email' => 'michael@email.com'],
                            ['id' => 3, 'name' => 'Emma Wilson', 'email' => 'emma@email.com'],
                            ['id' => 4, 'name' => 'James Taylor', 'email' => 'james@email.com'],
                            ['id' => 5, 'name' => 'Lisa Anderson', 'email' => 'lisa@email.com'],
                        ];
                    ?>
                    <?php $__currentLoopData = $guests; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $guest): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <option value="<?php echo e($guest['id']); ?>"><?php echo e($guest['name']); ?> (<?php echo e($guest['email']); ?>)</option>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </select>
            </div>
            <div>
                <label class="block text-white mb-2">Subject Line</label>
                <input type="text" name="subject" value="You're Invited to Emma & James's Wedding!" class="w-full px-4 py-2 bg-white/10 border border-white/20 rounded-lg text-white focus:outline-none focus:border-purple-500">
            </div>
            <div>
                <label class="block text-white mb-2">Personal Message</label>
                <textarea name="personal_message" rows="3" class="w-full px-4 py-2 bg-white/10 border border-white/20 rounded-lg text-white focus:outline-none focus:border-purple-500" placeholder="Write a personal message...">We would be honored to have you celebrate our special day with us!</textarea>
            </div>
            <div class="flex gap-3">
                <button type="submit" class="px-6 py-2 bg-gradient-to-r from-purple-600 to-pink-600 text-white rounded-lg font-semibold hover:shadow-2xl transition hover:scale-105">
                    <i class="fas fa-paper-plane mr-2"></i>Send Invitation
                </button>
                <button type="button" onclick="previewInvitation()" class="px-6 py-2 bg-white/10 rounded-lg text-gray-300 hover:bg-white/20 transition">
                    <i class="fas fa-eye mr-2"></i>Preview
                </button>
            </div>
        </form>
    </div>
    
    <!-- Bulk Import -->
    <div class="glass-card rounded-2xl p-6 border border-white/10" data-aos="fade-up">
        <h3 class="text-xl font-bold text-white mb-4">Bulk Import</h3>
        <form action="<?php echo e(route('invitations.send-bulk')); ?>" method="POST" enctype="multipart/form-data" class="border-2 border-dashed border-white/20 rounded-lg p-8 text-center hover:border-purple-500 transition">
            <?php echo csrf_field(); ?>
            <i class="fas fa-cloud-upload-alt text-5xl text-gray-400 mb-4"></i>
            <p class="text-gray-300 mb-2">Drag and drop your CSV file here, or</p>
            <label class="cursor-pointer">
                <span class="px-4 py-2 bg-purple-600 rounded-lg text-white text-sm hover:bg-purple-700 transition inline-block">Browse Files</span>
                <input type="file" name="csv_file" accept=".csv" class="hidden" onchange="this.form.submit()">
            </label>
            <p class="text-gray-500 text-xs mt-4">Supported format: CSV with columns: name, email</p>
            <p class="text-gray-500 text-xs mt-1">
                <a href="<?php echo e(route('guests.export.csv')); ?>" class="text-purple-400 hover:text-purple-300">Download sample CSV</a>
            </p>
        </form>
    </div>
    
    <!-- Sent Invitations -->
    <div class="glass-card rounded-2xl p-6 border border-white/10" data-aos="fade-up">
        <div class="flex justify-between items-center mb-4">
            <h3 class="text-xl font-bold text-white">Sent Invitations</h3>
            <a href="<?php echo e(route('invitations.statistics')); ?>" class="text-purple-400 text-sm hover:text-purple-300 transition">
                <i class="fas fa-chart-bar mr-1"></i>View Statistics
            </a>
        </div>
        <div class="overflow-x-auto">
            <table class="data-table w-full">
                <thead>
                    <tr class="border-b border-white/10">
                        <th class="text-left py-3 px-4 text-gray-400">Guest</th>
                        <th class="text-left py-3 px-4 text-gray-400">Email</th>
                        <th class="text-left py-3 px-4 text-gray-400">Sent Date</th>
                        <th class="text-left py-3 px-4 text-gray-400">Status</th>
                        <th class="text-left py-3 px-4 text-gray-400">Opened At</th>
                        <th class="text-left py-3 px-4 text-gray-400">Actions</th>
                     </tr>
                </thead>
                <tbody>
                    <?php
                        $invitations = [
                            ['id' => 1, 'name' => 'Sarah Johnson', 'email' => 'sarah@email.com', 'sent_date' => '2024-03-20', 'status' => 'opened', 'opened_at' => '2024-03-21 10:30 AM'],
                            ['id' => 2, 'name' => 'Michael Brown', 'email' => 'michael@email.com', 'sent_date' => '2024-03-19', 'status' => 'sent', 'opened_at' => '-'],
                            ['id' => 3, 'name' => 'Emma Wilson', 'email' => 'emma@email.com', 'sent_date' => '2024-03-18', 'status' => 'opened', 'opened_at' => '2024-03-19 2:15 PM'],
                            ['id' => 4, 'name' => 'James Taylor', 'email' => 'james@email.com', 'sent_date' => '2024-03-17', 'status' => 'opened', 'opened_at' => '2024-03-18 9:45 AM'],
                            ['id' => 5, 'name' => 'Lisa Anderson', 'email' => 'lisa@email.com', 'sent_date' => '2024-03-16', 'status' => 'sent', 'opened_at' => '-'],
                        ];
                    ?>
                    <?php $__currentLoopData = $invitations; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $invitation): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <tr class="hover:bg-white/5 transition">
                        <td class="py-3 px-4 text-white"><?php echo e($invitation['name']); ?></td>
                        <td class="py-3 px-4 text-gray-300"><?php echo e($invitation['email']); ?></td>
                        <td class="py-3 px-4 text-gray-300"><?php echo e($invitation['sent_date']); ?></td>
                        <td class="py-3 px-4">
                            <span class="badge badge-<?php echo e($invitation['status'] === 'opened' ? 'success' : 'warning'); ?>">
                                <?php echo e(ucfirst($invitation['status'])); ?>

                            </span>
                        </td>
                        <td class="py-3 px-4 text-gray-300"><?php echo e($invitation['opened_at']); ?></td>
                        <td class="py-3 px-4">
                            <div class="flex gap-2">
                                <a href="<?php echo e(route('invitations.resend', $invitation['id'])); ?>" class="text-purple-400 hover:text-purple-300 transition" title="Resend Invitation">
                                    <i class="fas fa-redo"></i>
                                </a>
                                <button onclick="previewInvitationEmail(<?php echo e($invitation['id']); ?>)" class="text-blue-400 hover:text-blue-300 transition" title="Preview Email">
                                    <i class="fas fa-eye"></i>
                                </button>
                                <button onclick="trackInvitation(<?php echo e($invitation['id']); ?>)" class="text-green-400 hover:text-green-300 transition" title="Track Engagement">
                                    <i class="fas fa-chart-line"></i>
                                </button>
                            </div>
                        </td>
                    </tr>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </tbody>
            </table>
        </div>
        
        <!-- Pagination -->
        <div class="flex justify-between items-center mt-6 pt-4 border-t border-white/10">
            <p class="text-gray-400 text-sm">Showing 1-5 of 156 invitations</p>
            <div class="flex gap-2">
                <button class="px-3 py-1 bg-white/10 rounded text-gray-400 hover:bg-white/20 transition">Previous</button>
                <button class="px-3 py-1 bg-purple-600 rounded text-white">1</button>
                <button class="px-3 py-1 bg-white/10 rounded text-gray-400 hover:bg-white/20 transition">2</button>
                <button class="px-3 py-1 bg-white/10 rounded text-gray-400 hover:bg-white/20 transition">3</button>
                <button class="px-3 py-1 bg-white/10 rounded text-gray-400 hover:bg-white/20 transition">Next</button>
            </div>
        </div>
    </div>
    
    <!-- Invitation Statistics Summary -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-6" data-aos="fade-up">
        <div class="glass-card rounded-2xl p-4 border border-white/10">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 bg-purple-600/20 rounded-lg flex items-center justify-center">
                    <i class="fas fa-envelope text-purple-400"></i>
                </div>
                <div>
                    <p class="text-gray-400 text-sm">Total Sent</p>
                    <p class="text-white font-bold text-xl">156</p>
                </div>
            </div>
        </div>
        <div class="glass-card rounded-2xl p-4 border border-white/10">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 bg-green-600/20 rounded-lg flex items-center justify-center">
                    <i class="fas fa-envelope-open-text text-green-400"></i>
                </div>
                <div>
                    <p class="text-gray-400 text-sm">Opened</p>
                    <p class="text-white font-bold text-xl">124</p>
                    <p class="text-green-400 text-xs">79.5% open rate</p>
                </div>
            </div>
        </div>
        <div class="glass-card rounded-2xl p-4 border border-white/10">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 bg-blue-600/20 rounded-lg flex items-center justify-center">
                    <i class="fas fa-mouse-pointer text-blue-400"></i>
                </div>
                <div>
                    <p class="text-gray-400 text-sm">Clicked RSVP</p>
                    <p class="text-white font-bold text-xl">98</p>
                    <p class="text-blue-400 text-xs">63% click rate</p>
                </div>
            </div>
        </div>
        <div class="glass-card rounded-2xl p-4 border border-white/10">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 bg-yellow-600/20 rounded-lg flex items-center justify-center">
                    <i class="fas fa-check-circle text-yellow-400"></i>
                </div>
                <div>
                    <p class="text-gray-400 text-sm">RSVP Completed</p>
                    <p class="text-white font-bold text-xl">87</p>
                    <p class="text-yellow-400 text-xs">88.8% conversion</p>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Preview Modal -->
<div id="previewModal" class="fixed inset-0 bg-black/70 backdrop-blur-sm z-50 hidden items-center justify-center p-4">
    <div class="glass-card rounded-2xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
        <div class="sticky top-0 bg-black/50 backdrop-blur-lg p-4 border-b border-white/10 flex justify-between items-center">
            <h3 class="text-xl font-bold text-white">Invitation Preview</h3>
            <button onclick="closePreview()" class="text-gray-400 hover:text-white">
                <i class="fas fa-times text-xl"></i>
            </button>
        </div>
        <div class="p-6" id="previewContent">
            <!-- Preview content will be loaded here -->
        </div>
    </div>
</div>

<?php $__env->startPush('scripts'); ?>
<script>
    function previewInvitation() {
        const modal = document.getElementById('previewModal');
        const content = document.getElementById('previewContent');
        const guestSelect = document.querySelector('select[name="guest_id"]');
        const message = document.querySelector('textarea[name="personal_message"]').value;
        const subject = document.querySelector('input[name="subject"]').value;
        
        const selectedOption = guestSelect.options[guestSelect.selectedIndex];
        const guestName = selectedOption ? selectedOption.text.split('(')[0].trim() : 'Guest';
        
        content.innerHTML = `
            <div class="space-y-4">
                <div class="bg-white/5 rounded-lg p-4">
                    <div class="flex items-center gap-3 mb-4">
                        <img src="https://ui-avatars.com/api/?background=8B5CF6&color=fff&name=${encodeURIComponent(guestName)}" class="w-12 h-12 rounded-full">
                        <div>
                            <h4 class="text-white font-bold">To: ${guestName}</h4>
                            <p class="text-gray-400 text-sm">Subject: ${subject}</p>
                        </div>
                    </div>
                    <div class="border-t border-white/10 pt-4 mt-2">
                        <p class="text-gray-300 leading-relaxed">${message.replace(/\n/g, '<br>')}</p>
                        <div class="mt-4 p-4 bg-purple-600/20 rounded-lg">
                            <p class="text-white font-semibold">Wedding Details:</p>
                            <p class="text-gray-300 text-sm mt-1">📅 Date: June 15, 2024</p>
                            <p class="text-gray-300 text-sm">📍 Location: London, UK</p>
                            <p class="text-gray-300 text-sm">⏰ Time: 2:00 PM</p>
                        </div>
                        <div class="mt-4 text-center">
                            <button class="px-6 py-2 bg-gradient-to-r from-purple-600 to-pink-600 rounded-full text-white text-sm">
                                RSVP Now
                            </button>
                        </div>
                    </div>
                </div>
                <p class="text-gray-500 text-xs text-center">This is a preview of how the invitation will appear to your guests</p>
            </div>
        `;
        
        modal.classList.remove('hidden');
        modal.classList.add('flex');
    }
    
    function previewInvitationEmail(id) {
        const modal = document.getElementById('previewModal');
        const content = document.getElementById('previewContent');
        
        content.innerHTML = `
            <div class="space-y-4">
                <div class="bg-white/5 rounded-lg p-4">
                    <div class="flex items-center gap-3 mb-4">
                        <img src="https://ui-avatars.com/api/?background=8B5CF6&color=fff&name=Sarah+Johnson" class="w-12 h-12 rounded-full">
                        <div>
                            <h4 class="text-white font-bold">To: Sarah Johnson</h4>
                            <p class="text-gray-400 text-sm">Subject: You're Invited to Emma & James's Wedding!</p>
                        </div>
                    </div>
                    <div class="border-t border-white/10 pt-4 mt-2">
                        <p class="text-gray-300 leading-relaxed">We would be honored to have you celebrate our special day with us!<br><br>
                        Please join us for our wedding ceremony and reception. Your presence means the world to us.<br><br>
                        Kindly RSVP by May 15, 2024.</p>
                        <div class="mt-4 p-4 bg-purple-600/20 rounded-lg">
                            <p class="text-white font-semibold">Wedding Details:</p>
                            <p class="text-gray-300 text-sm mt-1">📅 Date: June 15, 2024</p>
                            <p class="text-gray-300 text-sm">📍 Location: London, UK</p>
                            <p class="text-gray-300 text-sm">⏰ Time: 2:00 PM</p>
                        </div>
                        <div class="mt-4 text-center">
                            <button class="px-6 py-2 bg-gradient-to-r from-purple-600 to-pink-600 rounded-full text-white text-sm">
                                RSVP Now
                            </button>
                        </div>
                    </div>
                </div>
                <div class="bg-yellow-600/10 rounded-lg p-3">
                    <p class="text-yellow-400 text-sm"><i class="fas fa-info-circle mr-2"></i>This invitation was sent on March 20, 2024 and opened on March 21, 2024</p>
                </div>
            </div>
        `;
        
        modal.classList.remove('hidden');
        modal.classList.add('flex');
    }
    
    function trackInvitation(id) {
        window.location.href = "<?php echo e(route('invitations.statistics')); ?>";
    }
    
    function closePreview() {
        const modal = document.getElementById('previewModal');
        modal.classList.remove('flex');
        modal.classList.add('hidden');
    }
    
    // Close modal on outside click
    document.getElementById('previewModal').addEventListener('click', function(e) {
        if(e.target === this) {
            closePreview();
        }
    });
    
    // Add animation to cards
    document.querySelectorAll('.glass-card').forEach(card => {
        card.addEventListener('mouseenter', function() {
            this.style.transform = 'translateY(-5px)';
        });
        card.addEventListener('mouseleave', function() {
            this.style.transform = 'translateY(0)';
        });
    });
</script>
<?php $__env->stopPush(); ?>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH D:\skietagency\wedding\code\resources\views/invitations/index.blade.php ENDPATH**/ ?>