<?php $__env->startSection('title', 'Contact Messages'); ?>

<?php $__env->startSection('content'); ?>
<div class="container mx-auto max-w-6xl">
    <div class="flex justify-between items-center mb-6">
        <h1 class="text-2xl font-bold text-slate-900">Contact Messages</h1>
        <span class="text-sm font-bold text-slate-500 bg-white px-4 py-2 rounded-full border border-slate-200 shadow-sm"><?php echo e($messages->count()); ?> Total</span>
    </div>

    <?php if($messages->isEmpty()): ?>
    <div class="bg-white shadow-sm rounded-xl border border-slate-100 p-12 text-center">
        <svg class="w-16 h-16 mx-auto mb-4 text-slate-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg>
        <h3 class="text-xl font-bold text-slate-900 mb-2">No messages yet</h3>
        <p class="text-slate-500">When users contact you through the website, their messages will appear here.</p>
    </div>
    <?php else: ?>
    <div class="space-y-4">
        <?php $__currentLoopData = $messages; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $msg): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
        <div class="bg-white shadow-sm rounded-xl border border-slate-100 p-6 hover:shadow-md transition duration-200 group relative" x-data="{ open: false }">
            <div class="flex flex-col md:flex-row md:items-center md:justify-between cursor-pointer" @click="open = !open">
                <div class="flex items-center gap-4">
                    <div class="w-12 h-12 rounded-full bg-brand-light text-brand-primary flex items-center justify-center font-bold text-lg shrink-0 border border-brand-primary/20">
                        <?php echo e(strtoupper(substr($msg->name ?? 'U', 0, 1))); ?>

                    </div>
                    <div>
                        <h3 class="font-bold text-slate-900 text-lg"><?php echo e($msg->name); ?></h3>
                        <p class="text-sm text-slate-500 font-medium"><?php echo e($msg->email); ?></p>
                    </div>
                </div>
                
                <div class="flex items-center gap-4 mt-4 md:mt-0">
                    <?php if($msg->department): ?>
                    <span class="inline-block px-3 py-1 text-xs font-bold bg-blue-50 text-blue-600 rounded-full border border-blue-100"><?php echo e($msg->department); ?></span>
                    <?php endif; ?>
                    <span class="text-sm font-medium text-slate-400"><?php echo e($msg->created_at->format('M j, Y g:i A')); ?></span>
                    
                    <div class="w-8 h-8 rounded-full bg-slate-50 border border-slate-200 flex items-center justify-center text-slate-400 group-hover:bg-brand-primary group-hover:text-white group-hover:border-brand-primary transition-colors">
                        <svg class="w-4 h-4 transform transition-transform duration-300" :class="open ? 'rotate-180' : ''" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
                    </div>
                </div>
            </div>

            <div x-show="open" x-collapse class="mt-6 pt-6 border-t border-slate-100">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                    <?php if($msg->phone): ?>
                    <div>
                        <p class="text-xs font-bold text-slate-400 uppercase tracking-wider mb-1">Phone Number</p>
                        <p class="text-slate-800 font-medium"><?php echo e($msg->phone); ?></p>
                    </div>
                    <?php endif; ?>
                    <div>
                        <p class="text-xs font-bold text-slate-400 uppercase tracking-wider mb-1">Received On</p>
                        <p class="text-slate-800 font-medium"><?php echo e($msg->created_at->translatedFormat('l, F j, Y \a\t g:i A')); ?></p>
                    </div>
                </div>

                <div>
                    <p class="text-xs font-bold text-slate-400 uppercase tracking-wider mb-2">Message</p>
                    <div class="bg-slate-50 rounded-xl p-5 border border-slate-100/50">
                        <p class="text-slate-700 text-sm leading-relaxed whitespace-pre-wrap"><?php echo e($msg->message); ?></p>
                    </div>
                </div>

                <div class="mt-6 flex items-center justify-between">
                    <a href="mailto:<?php echo e($msg->email); ?>" class="inline-flex items-center gap-2 px-5 py-2.5 bg-brand-light text-brand-primary hover:bg-brand-primary hover:text-white rounded-lg font-bold text-sm transition-colors cursor-pointer border border-brand-primary/20">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg>
                        Reply via Email
                    </a>

                    <form action="<?php echo e(route('admin.messages.destroy', $msg)); ?>" method="POST" onsubmit="return confirm('Delete this message permanently?');" class="inline">
                        <?php echo csrf_field(); ?>
                        <?php echo method_field('DELETE'); ?>
                        <button type="submit" class="inline-flex items-center gap-2 px-4 py-2.5 text-slate-400 hover:text-red-600 hover:bg-red-50 rounded-lg font-bold text-sm transition-colors border border-transparent hover:border-red-100">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
                            Delete
                        </button>
                    </form>
                </div>
            </div>
        </div>
        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
    </div>
    <?php endif; ?>
</div>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.admin', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH C:\xampp\htdocs\ecs\resources\views/admin/messages/index.blade.php ENDPATH**/ ?>