<?php $__env->startSection('content'); ?>
    <section class="section-padding section-bg fix">
        <div class="container">
            <div class="dashboard-layout">
                <?php echo $__env->make('student.partials.sidebar', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>

                <div class="dashboard-main">
                    <div class="dashboard-content-section">
                        <!-- Header -->
                        <div class="d-flex align-items-center justify-content-between mb-4">
                            <div>
                                <h3 class="mb-1" style="font-weight: 700;">Messages</h3>
                                <p class="text-muted mb-0">Chat with your instructors</p>
                            </div>
                            <button class="btn theme-btn style-2" data-bs-toggle="modal" data-bs-target="#newChatModal">
                                <i class="fa-solid fa-plus me-1"></i> New Message
                            </button>
                        </div>

                        <!-- Tabs -->
                        <ul class="nav nav-pills mb-4" style="gap: 8px;">
                            <li class="nav-item">
                                <a class="nav-link <?php echo e($tab === 'inbox' ? 'active' : ''); ?>"
                                   href="<?php echo e(route('student.messages.index')); ?>"
                                   style="<?php echo e($tab === 'inbox' ? 'background-color: var(--theme, #008D5E); color: white;' : 'background: #f1f5f9; color: #475569;'); ?> border-radius: 10px; padding: 8px 20px; font-weight: 600;">
                                    Inbox
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link <?php echo e($tab === 'requests' ? 'active' : ''); ?>"
                                   href="<?php echo e(route('student.messages.requests')); ?>"
                                   style="<?php echo e($tab === 'requests' ? 'background-color: var(--theme, #008D5E); color: white;' : 'background: #f1f5f9; color: #475569;'); ?> border-radius: 10px; padding: 8px 20px; font-weight: 600;">
                                    Sent Requests
                                </a>
                            </li>
                        </ul>

                        <!-- Conversations List -->
                        <?php $__empty_1 = true; $__currentLoopData = $conversations; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $conv): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                            <a href="<?php echo e(route('student.messages.show', $conv->id)); ?>"
                               class="d-block text-decoration-none mb-3">
                                <div class="card border-0 shadow-sm" style="border-radius: 14px; transition: transform 0.15s;">
                                    <div class="card-body d-flex align-items-center gap-3 py-3 px-4">
                                        <!-- Avatar -->
                                        <div style="width: 48px; height: 48px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: #f1f5f9;">
                                            <?php if($conv->instructor->profile_photo): ?>
                                                <img src="<?php echo e(asset('storage/' . $conv->instructor->profile_photo)); ?>" alt="" style="width:100%;height:100%;object-fit:cover;">
                                            <?php else: ?>
                                                <div style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:var(--theme-light, #eefdf3);color:var(--theme, #008D5E);font-weight:700;font-size:18px;">
                                                    <?php echo e(strtoupper(substr($conv->instructor->name, 0, 1))); ?>

                                                </div>
                                            <?php endif; ?>
                                        </div>
                                        <!-- Info -->
                                        <div class="flex-grow-1 min-w-0">
                                            <div class="d-flex justify-content-between align-items-center mb-1">
                                                <h6 class="mb-0 text-dark" style="font-weight: 600;"><?php echo e($conv->instructor->name); ?></h6>
                                                <small class="text-muted">
                                                    <?php echo e($conv->last_message_at ? $conv->last_message_at->diffForHumans() : $conv->created_at->diffForHumans()); ?>

                                                </small>
                                            </div>
                                            <p class="mb-0 text-muted text-truncate" style="font-size: 13px;">
                                                <?php if($conv->latestMessage): ?>
                                                    <?php if($conv->latestMessage->sender_id === $user->id): ?>
                                                        <span class="text-muted">You: </span>
                                                    <?php endif; ?>
                                                    <?php echo e(Str::limit($conv->latestMessage->body ?? '📎 Attachment', 60)); ?>

                                                <?php elseif(!$conv->is_accepted): ?>
                                                    <span class="text-warning"><i class="fa-solid fa-clock me-1"></i>Awaiting acceptance</span>
                                                <?php else: ?>
                                                    <span class="text-muted">No messages yet</span>
                                                <?php endif; ?>
                                            </p>
                                        </div>
                                        <!-- Unread badge -->
                                        <?php if(isset($conv->unread_count) && $conv->unread_count > 0): ?>
                                            <span class="badge rounded-pill" style="background: var(--theme, #008D5E); font-size: 11px; padding: 5px 10px;">
                                                <?php echo e($conv->unread_count); ?>

                                            </span>
                                        <?php endif; ?>
                                    </div>
                                </div>
                            </a>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                            <div class="text-center py-5">
                                <i class="fa-solid fa-comments" style="font-size: 56px; color: #cbd5e1;"></i>
                                <h5 class="mt-3 text-muted"><?php echo e($tab === 'inbox' ? 'No conversations yet' : 'No sent requests'); ?></h5>
                                <p class="text-muted"><?php echo e($tab === 'inbox' ? 'Start a conversation with your instructor' : 'Requests you send to non-enrolled instructors will appear here'); ?></p>
                            </div>
                        <?php endif; ?>

                        <?php echo e($conversations->links()); ?>

                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- New Chat Modal -->
    <div class="modal fade" id="newChatModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content" style="border-radius: 16px; border: 0;">
                <div class="modal-header border-0 pb-0">
                    <h5 class="modal-title" style="font-weight: 700;">New Message</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="form-group mb-3">
                        <label class="form-label" style="font-weight: 600;">Search Instructor</label>
                        <input type="text" id="instructor-search" class="form-control" placeholder="Type instructor name..." style="border-radius: 10px;">
                        <div id="instructor-results" class="mt-2" style="max-height: 200px; overflow-y: auto;"></div>
                    </div>
                    <div class="form-group mb-3" id="message-group" style="display: none;">
                        <label class="form-label" style="font-weight: 600;">Message</label>
                        <textarea id="first-message" class="form-control" rows="3" placeholder="Write your message..." style="border-radius: 10px;"></textarea>
                    </div>
                    <input type="hidden" id="selected-instructor-id" value="">
                </div>
                <div class="modal-footer border-0 pt-0">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" style="border-radius: 10px;">Cancel</button>
                    <button type="button" class="btn theme-btn style-2" id="start-chat-btn" disabled style="border-radius: 10px;">
                        <i class="fa-solid fa-paper-plane me-1"></i> Send
                    </button>
                </div>
            </div>
        </div>
    </div>

    <?php $__env->startPush('scripts'); ?>
    <script>
        $(document).ready(function() {
            let searchTimer = null;

            // Instructor search
            $('#instructor-search').on('input', function() {
                clearTimeout(searchTimer);
                const q = $(this).val().trim();
                if (q.length < 2) {
                    $('#instructor-results').html('');
                    return;
                }
                searchTimer = setTimeout(function() {
                    $.get("<?php echo e(route('student.messages.instructors.search')); ?>", { q: q }, function(data) {
                        let html = '';
                        data.forEach(function(inst) {
                            const avatar = inst.profile_photo
                                ? `<img src="/storage/${inst.profile_photo}" style="width:36px;height:36px;border-radius:50%;object-fit:cover;">`
                                : `<div style="width:36px;height:36px;border-radius:50%;background:var(--theme-light,#eefdf3);color:var(--theme,#008D5E);display:flex;align-items:center;justify-content:center;font-weight:700;">${inst.name.charAt(0).toUpperCase()}</div>`;
                            html += `<div class="d-flex align-items-center gap-2 p-2 rounded instructor-option" style="cursor:pointer;border-radius:10px;" data-id="${inst.id}" data-name="${inst.name}">
                                ${avatar}
                                <div><strong>${inst.name}</strong><br><small class="text-muted">${inst.specialization || 'Instructor'}</small></div>
                            </div>`;
                        });
                        if (!html) html = '<p class="text-muted p-2">No instructors found</p>';
                        $('#instructor-results').html(html);
                    });
                }, 300);
            });

            // Select instructor
            $(document).on('click', '.instructor-option', function() {
                const id = $(this).data('id');
                const name = $(this).data('name');
                $('#selected-instructor-id').val(id);
                $('#instructor-search').val(name);
                $('#instructor-results').html('');
                $('#message-group').slideDown();
                $('#start-chat-btn').prop('disabled', false);
            });

            // Start chat
            $('#start-chat-btn').on('click', function() {
                const btn = $(this);
                btn.prop('disabled', true).html('<i class="fa-solid fa-spinner fa-spin"></i> Sending...');

                $.ajax({
                    url: "<?php echo e(route('student.messages.start')); ?>",
                    method: 'POST',
                    data: {
                        _token: "<?php echo e(csrf_token()); ?>",
                        instructor_id: $('#selected-instructor-id').val(),
                        message: $('#first-message').val()
                    },
                    success: function(res) {
                        window.location.href = res.redirect;
                    },
                    error: function(xhr) {
                        btn.prop('disabled', false).html('<i class="fa-solid fa-paper-plane me-1"></i> Send');
                        $.notify({ message: xhr.responseJSON?.message || 'Something went wrong' }, { type: 'danger' });
                    }
                });
            });

            // Hover effect
            $(document).on('mouseenter', '.card', function() {
                $(this).css('transform', 'translateY(-2px)');
            }).on('mouseleave', '.card', function() {
                $(this).css('transform', 'translateY(0)');
            });
        });
    </script>
    <?php $__env->stopPush(); ?>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.student', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH /Users/mahmudul/Codecanyone/edu_ex_full/Eduex_laravel/resources/views/student/messages/index.blade.php ENDPATH**/ ?>