@extends('layouts.frontend')
@section('title_page', 'Client Messages - Rusizi Veterinary')

@section('content')

<!--Start breadcrumb area-->
<section class="breadcrumb-area style2" style="background-image: url({{asset('images/resources/breadcrumb-bg-2.jpg')}});">
    <div class="container">
        <div class="row">
            <div class="col-xl-12">
                <div class="inner-content-box clearfix">
                    <div class="title-s2 text-center">
                        <span>My Account</span>
                        <h1>Welcome <label style="color: rgb(25, 210, 96)" for="">{{ Auth::user()->name }}</label></h1>
                    </div>
                    <div class="breadcrumb-menu float-left">
                        <ul class="clearfix">
                            <li><a href="/">Home</a></li>
                            <li class="active">Client Messages</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!--End breadcrumb area-->

<!--Start Single Service Area-->
<section class="single-service-area">
    <div class="container">
        <div class="row">
            @include('frontend.partials.sidebar')

            <div class="col-xl-8 col-lg-7 col-md-12 col-sm-12">
                <!--Start login register area-->
                <section class="login-register-area">
                    <div class="container">
                        <div class="row justify-content-center">
                            <div class="col-xl-12">
                                <div class="form">
                                    <div class="form-header text-center">
                                        <div class="form-icon">
                                            <i class="fas fa-envelope"></i>
                                        </div>
                                        <h1 class="form-title">Client <span>Messages</span></h1>
                                        <p class="form-subtitle">Manage and view all client inquiries</p>
                                    </div>
                                    
                                    <!-- Success/Error Messages -->
                                    @if(session('success'))
                                        <div class="alert alert-success alert-dismissible fade show" role="alert">
                                            <i class="fa fa-check-circle"></i> {{ session('success') }}
                                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                                <span aria-hidden="true">&times;</span>
                                            </button>
                                        </div>
                                    @endif

                                    @if(session('error'))
                                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                            <i class="fa fa-exclamation-circle"></i> {{ session('error') }}
                                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                                <span aria-hidden="true">&times;</span>
                                            </button>
                                        </div>
                                    @endif

                                    <div class="form-container">
                                        <!-- Statistics Cards -->
                                        <div class="stats-cards mb-4">
                                            <div class="row">
                                                <div class="col-md-4">
                                                    <div class="stat-card total">
                                                        <div class="stat-icon">
                                                            <i class="fas fa-envelope"></i>
                                                        </div>
                                                        <div class="stat-info">
                                                            <h3>{{ $stats['total'] }}</h3>
                                                            <p>Total Messages</p>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="stat-card unread">
                                                        <div class="stat-icon">
                                                            <i class="fas fa-envelope-open"></i>
                                                        </div>
                                                        <div class="stat-info">
                                                            <h3>{{ $stats['unread'] }}</h3>
                                                            <p>Unread Messages</p>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="stat-card read">
                                                        <div class="stat-icon">
                                                            <i class="fas fa-check-circle"></i>
                                                        </div>
                                                        <div class="stat-info">
                                                            <h3>{{ $stats['read'] }}</h3>
                                                            <p>Read Messages</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <!-- Action Buttons -->
                                        <div class="action-buttons mb-4">
                                            <div class="row">
                                                <div class="col-md-6">
                                                    @if($stats['unread'] > 0)
                                                        <form action="{{ route('messages.mark-all-read') }}" method="POST" class="d-inline">
                                                            @csrf
                                                            <button type="submit" class="btn btn-success">
                                                                <i class="fas fa-check-double"></i> Mark All as Read
                                                            </button>
                                                        </form>
                                                    @endif
                                                </div>
                                                <div class="col-md-6 text-right">
                                                    <span class="text-muted">
                                                        Last updated: {{ now()->format('M j, Y g:i A') }}
                                                    </span>
                                                </div>
                                            </div>
                                        </div>

                                        <!-- Messages Table -->
                                        @if($messages->count() > 0)
                                            <div class="table-responsive">
                                                <table class="table table-hover messages-table">
                                                    <thead>
                                                        <tr>
                                                            <th>Status</th>
                                                            <th>Client</th>
                                                            <th>Interested In</th>
                                                            <th>Message Preview</th>
                                                            <th>Date</th>
                                                            <th>Actions</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        @foreach($messages as $message)
                                                            <tr class="{{ $message->is_read ? '' : 'unread-message' }}">
                                                                <td>
                                                                    @if($message->is_read)
                                                                        <span class="status-badge status-read" title="Read">
                                                                            <i class="fas fa-check-circle"></i>
                                                                        </span>
                                                                    @else
                                                                        <span class="status-badge status-unread" title="Unread">
                                                                            <i class="fas fa-envelope"></i>
                                                                        </span>
                                                                    @endif
                                                                </td>
                                                                <td>
                                                                    <strong>{{ $message->name }}</strong>
                                                                    <br>
                                                                    <small class="text-muted">{{ $message->email }}</small>
                                                                </td>
                                                                <td>
                                                                    <span class="interest-badge">{{ $message->interested_in }}</span>
                                                                </td>
                                                                <td>
                                                                    <div class="message-preview">
                                                                        {{ Str::limit($message->message, 80) }}
                                                                    </div>
                                                                </td>
                                                                <td>
                                                                    <small class="text-muted">
                                                                        {{ $message->created_at->format('M j, Y') }}<br>
                                                                        {{ $message->created_at->format('g:i A') }}
                                                                    </small>
                                                                </td>
                                                                <td>
                                                                    <div class="btn-group" role="group">
                                                                        <a href="{{ route('messages.show', $message->id) }}" 
                                                                           class="btn btn-sm btn-primary" 
                                                                           title="View Message">
                                                                            <i class="fas fa-eye"></i>
                                                                        </a>
                                                                        @if($message->is_read)
                                                                            <form action="{{ route('messages.mark-unread', $message->id) }}" 
                                                                                  method="POST" 
                                                                                  class="d-inline">
                                                                                @csrf
                                                                                @method('PATCH')
                                                                                <button type="submit" 
                                                                                        class="btn btn-sm btn-warning"
                                                                                        title="Mark as Unread">
                                                                                    <i class="fas fa-envelope"></i>
                                                                                </button>
                                                                            </form>
                                                                        @else
                                                                            <form action="{{ route('messages.mark-read', $message->id) }}" 
                                                                                  method="POST" 
                                                                                  class="d-inline">
                                                                                @csrf
                                                                                @method('PATCH')
                                                                                <button type="submit" 
                                                                                        class="btn btn-sm btn-success"
                                                                                        title="Mark as Read">
                                                                                    <i class="fas fa-check"></i>
                                                                                </button>
                                                                            </form>
                                                                        @endif
                                                                        <form action="{{ route('messages.destroy', $message->id) }}" 
                                                                              method="POST" 
                                                                              class="d-inline">
                                                                            @csrf
                                                                            @method('DELETE')
                                                                            <button type="submit" 
                                                                                    class="btn btn-sm btn-danger" 
                                                                                    title="Delete"
                                                                                    onclick="return confirm('Are you sure you want to delete this message?')">
                                                                                <i class="fas fa-trash"></i>
                                                                            </button>
                                                                        </form>
                                                                    </div>
                                                                </td>
                                                            </tr>
                                                        @endforeach
                                                    </tbody>
                                                </table>
                                            </div>
                                        @else
                                            <div class="empty-state text-center py-5">
                                                <i class="fas fa-envelope-open fa-3x text-muted mb-3"></i>
                                                <h3>No Messages Found</h3>
                                                <p class="text-muted">You don't have any client messages yet.</p>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
                <!--End login register area-->
            </div>
        </div>
    </div>
</section>
<!--End Single Service Area-->

<style>
    .stats-cards {
        margin-bottom: 30px;
    }

    .stat-card {
        background: white;
        border-radius: 12px;
        padding: 25px;
        text-align: center;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
        border-left: 4px solid #27ae60;
        transition: transform 0.3s ease;
    }

    .stat-card:hover {
        transform: translateY(-5px);
    }

    .stat-card.unread {
        border-left-color: #e74c3c;
    }

    .stat-card.read {
        border-left-color: #3498db;
    }

    .stat-icon {
        font-size: 2.5rem;
        margin-bottom: 15px;
    }

    .stat-card.total .stat-icon {
        color: #27ae60;
    }

    .stat-card.unread .stat-icon {
        color: #e74c3c;
    }

    .stat-card.read .stat-icon {
        color: #3498db;
    }

    .stat-info h3 {
        font-size: 2rem;
        font-weight: 700;
        margin: 0;
        color: #2c3e50;
    }

    .stat-info p {
        color: #7f8c8d;
        margin: 5px 0 0 0;
        font-weight: 600;
    }

    .action-buttons {
        background: #f8fafc;
        padding: 20px;
        border-radius: 12px;
        border: 1px solid #e8f0fe;
    }

    .btn-success {
        background: linear-gradient(135deg, #27ae60, #219653);
        border: none;
        border-radius: 8px;
        padding: 10px 20px;
        font-weight: 600;
        color: white;
        transition: all 0.3s ease;
    }

    .btn-success:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(39, 174, 96, 0.4);
    }

    .messages-table {
        background: white;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    }

    .messages-table thead {
        background: linear-gradient(135deg, #27ae60, #219653);
        color: white;
    }

    .messages-table th {
        border: none;
        padding: 15px;
        font-weight: 600;
        text-transform: uppercase;
        font-size: 0.85rem;
        letter-spacing: 0.5px;
    }

    .messages-table td {
        padding: 15px;
        vertical-align: middle;
        border-color: #f0f5f7;
    }

    .unread-message {
        background: #f0f9ff !important;
        font-weight: 600;
    }

    .unread-message td {
        border-left: 4px solid #3498db;
    }

    .status-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 35px;
        height: 35px;
        border-radius: 50%;
        font-size: 1rem;
    }

    .status-unread {
        background: #ffeaa7;
        color: #e74c3c;
    }

    .status-read {
        background: #d4f3e0;
        color: #27ae60;
    }

    .interest-badge {
        background: #e8f0fe;
        color: #3498db;
        padding: 5px 12px;
        border-radius: 20px;
        font-size: 0.8rem;
        font-weight: 600;
        text-transform: capitalize;
    }

    .message-preview {
        max-width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .btn-group .btn {
        margin: 0 2px;
        border-radius: 6px;
        transition: all 0.3s ease;
        padding: 6px 10px;
        font-size: 0.8rem;
    }

    .btn-group .btn:hover {
        transform: translateY(-2px);
    }

    .btn-primary {
        background: #3498db;
        border: none;
        color: white;
    }

    .btn-warning {
        background: #f39c12;
        border: none;
        color: white;
    }

    .btn-danger {
        background: #e74c3c;
        border: none;
        color: white;
    }

    .empty-state {
        background: #f8fafc;
        border-radius: 12px;
        border: 2px dashed #e8f0fe;
        padding: 60px 20px;
    }

    .empty-state i {
        opacity: 0.5;
    }

    .empty-state h3 {
        color: #2c3e50;
        margin-bottom: 10px;
    }

    .empty-state p {
        color: #7f8c8d;
    }

    /* Alert Styles */
    .alert {
        border-radius: 8px;
        border: none;
        padding: 15px 20px;
        margin-bottom: 20px;
    }

    .alert-success {
        background: #d4f3e0;
        color: #155724;
        border-left: 4px solid #28a745;
    }

    .alert-danger {
        background: #fde8e8;
        color: #721c24;
        border-left: 4px solid #dc3545;
    }

    /* Responsive design */
    @media (max-width: 768px) {
        .stats-cards .col-md-4 {
            margin-bottom: 15px;
        }

        .stat-card {
            padding: 20px;
        }

        .messages-table {
            font-size: 0.9rem;
        }

        .messages-table th,
        .messages-table td {
            padding: 10px 8px;
        }

        .btn-group .btn {
            padding: 4px 8px;
            font-size: 0.75rem;
            margin: 1px;
        }

        .action-buttons .text-right {
            text-align: left !important;
            margin-top: 10px;
        }

        .message-preview {
            max-width: 120px;
        }
    }

    @media (max-width: 576px) {
        .messages-table {
            display: block;
            overflow-x: auto;
        }
        
        .form-container {
            padding: 20px;
        }
    }
</style>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    // Auto-dismiss alerts after 5 seconds
    $(document).ready(function() {
        setTimeout(function() {
            $('.alert').fadeOut('slow');
        }, 5000);

        // Auto-refresh page every 2 minutes to check for new messages
        setInterval(function() {
            // Only refresh if user is active on the page
            if (!document.hidden) {
                location.reload();
            }
        }, 120000); // 2 minutes
    });
</script>

@endsection