@extends('layouts.frontend')
@section('title_page', 'View Message - 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><a href="{{ route('messages.index') }}">Messages</a></li>
                            <li class="active">View Message</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-open"></i>
                                        </div>
                                        <h1 class="form-title">Client <span>Message</span></h1>
                                        <p class="form-subtitle">View message details</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">
                                        <!-- Message Header -->
                                        <div class="message-header">
                                            <div class="row">
                                                <div class="col-md-8">
                                                    <h3 class="message-subject">{{ $message->interested_in }}</h3>
                                                    <div class="message-meta">
                                                        <div class="sender-info">
                                                            <strong>{{ $message->name }}</strong>
                                                            <span class="email">{{ $message->email }}</span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-4 text-right">
                                                    <div class="message-date">
                                                        <strong>{{ $message->created_at->format('F j, Y') }}</strong>
                                                        <br>
                                                        <span>{{ $message->created_at->format('g:i A') }}</span>
                                                    </div>
                                                    <div class="message-status mt-2">
                                                        @if($message->is_read)
                                                            <span class="status-badge status-read">
                                                                <i class="fas fa-check-circle"></i> Read
                                                            </span>
                                                        @else
                                                            <span class="status-badge status-unread">
                                                                <i class="fas fa-envelope"></i> Unread
                                                            </span>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <!-- Message Body -->
                                        <div class="message-body">
                                            <div class="message-content">
                                                <p>{{ $message->message }}</p>
                                            </div>
                                        </div>

                                        <!-- Message Actions -->
                                        <div class="message-actions">
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <a href="mailto:{{ $message->email }}?subject=Re: {{ $message->interested_in }}&body=Dear {{ $message->name }},"
                                                       class="btn btn-success" target="_blank">
                                                        <i class="fas fa-reply"></i> Reply via Email
                                                    </a>
                                                    <a href="tel:+" class="btn btn-info ml-2">
                                                        <i class="fas fa-phone"></i> Call Client
                                                    </a>
                                                </div>
                                                <div class="col-md-6 text-right">
                                                    <div class="btn-group" role="group">
                                                        @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-warning"
                                                                        title="Mark as Unread">
                                                                    <i class="fas fa-envelope"></i> Mark Unread
                                                                </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-success"
                                                                        title="Mark as Read">
                                                                    <i class="fas fa-check"></i> Mark Read
                                                                </button>
                                                            </form>
                                                        @endif
                                                        <form action="{{ route('messages.destroy', $message->id) }}" 
                                                              method="POST" 
                                                              class="d-inline delete-form">
                                                            @csrf
                                                            @method('DELETE')
                                                            <button type="submit" 
                                                                    class="btn btn-danger ml-2" 
                                                                    onclick="return confirm('Are you sure you want to delete this message?')">
                                                                <i class="fas fa-trash"></i> Delete
                                                            </button>
                                                        </form>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <!-- Navigation -->
                                        <div class="message-navigation text-center mt-4">
                                            <a href="{{ route('messages.index') }}" class="btn btn-outline-secondary">
                                                <i class="fas fa-arrow-left"></i> Back to Messages
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
                <!--End login register area-->
            </div>
        </div>
    </div>
</section>
<!--End Single Service Area-->

<style>
    .message-header {
        background: #f8fafc;
        padding: 30px;
        border-radius: 12px;
        border-left: 4px solid #27ae60;
        margin-bottom: 30px;
    }

    .message-subject {
        color: #2c3e50;
        font-size: 1.5rem;
        font-weight: 700;
        margin-bottom: 15px;
    }

    .sender-info strong {
        font-size: 1.2rem;
        color: #34495e;
        display: block;
        margin-bottom: 5px;
    }

    .sender-info .email {
        color: #3498db;
        font-size: 1rem;
    }

    .message-date {
        color: #7f8c8d;
    }

    .message-date strong {
        color: #2c3e50;
        font-size: 1.1rem;
    }

    .status-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 16px;
        border-radius: 20px;
        font-weight: 600;
        font-size: 0.9rem;
    }

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

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

    .message-body {
        background: white;
        border: 1px solid #e8f0fe;
        border-radius: 12px;
        padding: 30px;
        margin-bottom: 30px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    }

    .message-content {
        line-height: 1.8;
        color: #2c3e50;
        font-size: 1.1rem;
        white-space: pre-wrap;
    }

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

    .btn-success {
        background: linear-gradient(135deg, #27ae60, #219653);
        border: none;
        border-radius: 50px;
        padding: 10px 20px;
        font-weight: 600;
        box-shadow: 0 4px 15px rgba(39, 174, 96, 0.3);
        transition: all 0.3s ease;
    }

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

    .btn-info {
        background: linear-gradient(135deg, #3498db, #2980b9);
        border: none;
        border-radius: 50px;
        padding: 10px 20px;
        font-weight: 600;
        box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
        transition: all 0.3s ease;
    }

    .btn-info:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(52, 152, 219, 0.4);
    }

    .btn-warning {
        background: linear-gradient(135deg, #f39c12, #e67e22);
        border: none;
        border-radius: 50px;
        padding: 10px 20px;
        font-weight: 600;
        box-shadow: 0 4px 15px rgba(243, 156, 18, 0.3);
        transition: all 0.3s ease;
    }

    .btn-warning:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(243, 156, 18, 0.4);
    }

    .btn-danger {
        background: linear-gradient(135deg, #e74c3c, #c0392b);
        border: none;
        border-radius: 50px;
        padding: 10px 20px;
        font-weight: 600;
        box-shadow: 0 4px 15px rgba(231, 76, 60, 0.3);
        transition: all 0.3s ease;
    }

    .btn-danger:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(231, 76, 60, 0.4);
    }

    .btn-outline-secondary {
        border: 2px solid #95a5a6;
        color: #95a5a6;
        border-radius: 50px;
        padding: 10px 25px;
        font-weight: 600;
        transition: all 0.3s ease;
    }

    .btn-outline-secondary:hover {
        background: #95a5a6;
        color: white;
        transform: translateY(-2px);
    }

    /* Alert Styles */
    .alert {
        border-radius: 12px;
        border: none;
        padding: 18px 25px;
        margin-bottom: 25px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    }

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

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

    .alert i {
        margin-right: 10px;
    }

    /* Responsive design */
    @media (max-width: 768px) {
        .message-header .text-right {
            text-align: left !important;
            margin-top: 15px;
        }

        .message-actions .text-right {
            text-align: left !important;
            margin-top: 15px;
        }

        .message-actions .btn {
            display: block;
            width: 100%;
            margin-bottom: 10px;
        }

        .message-actions .ml-2 {
            margin-left: 0 !important;
        }

        .message-body {
            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);

        // Enhanced delete confirmation
        $('.delete-form').on('submit', function(e) {
            if (!confirm('Are you sure you want to delete this message? This action cannot be undone.')) {
                e.preventDefault();
            }
        });

        // Auto-fill reply email with proper formatting
        $('a[href^="mailto:"]').on('click', function() {
            const email = '{{ $message->email }}';
            const subject = 'Re: {{ $message->interested_in }}';
            const body = `Dear {{ $message->name }},\n\nThank you for your message regarding "{{ $message->interested_in }}".\n\nBest regards,\nRusizi Veterinary Team`;
            
            this.href = `mailto:${email}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
        });
    });
</script>

@endsection