@extends('layouts.app')

@section('content')
    <div id="page-container" class="fade page-sidebar-fixed page-header-fixed page-with-wide-sidebar">
        @include('partials.header')
        @include('partials.sidebar')

        <div id="content" class="content">
            <!-- Breadcrumb -->
            <ol class="breadcrumb float-xl-right">
                <li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
                <li class="breadcrumb-item"><a href="{{ route('emergency-messages.index') }}">Emergency Messages</a></li>
                <li class="breadcrumb-item active">View Emergency Message</li>
            </ol>

            <!-- Page Header -->
            <h1 class="page-header">
                <i class="fas fa-exclamation-triangle text-warning"></i> Emergency Message Details
            </h1>

            <!-- Status Alert -->
            @php
                $isExpired = $emergencyMessage->hasExpired();
            @endphp

            @if ($emergencyMessage->is_active && !$isExpired)
                <div class="alert alert-danger mb-4">
                    <h6><i class="fa fa-broadcast-tower"></i> <strong>ACTIVE EMERGENCY MESSAGE</strong></h6>
                    <p class="mb-0">This emergency message is currently active and broadcasting to all rooms.</p>
                    @if ($emergencyMessage->expires)
                        <small class="text-muted">{{ $emergencyMessage->expiry_status }}</small>
                    @endif
                </div>
            @elseif ($isExpired)
                <div class="alert alert-warning mb-4">
                    <h6><i class="fa fa-clock"></i> <strong>EXPIRED MESSAGE</strong></h6>
                    <p class="mb-0">This emergency message has expired and is now inactive.</p>
                    <small class="text-muted">Click "Activate Message" below to reactivate with a fresh 24-hour
                        timer.</small>
                </div>
            @else
                <div class="alert alert-secondary mb-4">
                    <h6><i class="fa fa-pause-circle"></i> <strong>INACTIVE MESSAGE</strong></h6>
                    <p class="mb-0">This emergency message is currently inactive.</p>
                </div>
            @endif

            <!-- Emergency Message Details -->
            <div class="panel panel-inverse">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <i class="fas fa-info-circle"></i> Emergency Message Information
                    </h4>
                </div>

                <div class="panel-body">
                    <div class="row">
                        <div class="col-md-8">
                            <!-- Message Content -->
                            <div class="form-group">
                                <label class="form-label font-weight-bold">Subject:</label>
                                <div class="form-control-plaintext">
                                    <h5 class="mb-0">{{ $emergencyMessage->subject }}</h5>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="form-label font-weight-bold">Sender:</label>
                                <div class="form-control-plaintext">
                                    {{ $emergencyMessage->sender }}
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="form-label font-weight-bold">Message Content:</label>
                                <div class="message-content p-3 border rounded bg-light">
                                    {!! nl2br(e($emergencyMessage->message)) !!}
                                </div>
                            </div>
                        </div>

                        <div class="col-md-4">
                            <!-- Status Information -->
                            <div class="card border-info">
                                <div class="card-header bg-info text-white">
                                    <h6 class="mb-0">
                                        <i class="fa fa-info-circle"></i> Status Information
                                    </h6>
                                </div>
                                <div class="card-body">
                                    <div class="mb-3">
                                        <strong>Status:</strong><br>
                                        @if ($emergencyMessage->is_active && !$isExpired)
                                            <span class="badge badge-success">
                                                <i class="fas fa-check-circle"></i> Active
                                            </span>
                                        @elseif ($isExpired)
                                            <span class="badge badge-danger">
                                                <i class="fas fa-exclamation-circle"></i> Inactive (Expired)
                                            </span>
                                        @else
                                            <span class="badge badge-secondary">
                                                <i class="fas fa-pause-circle"></i> Inactive
                                            </span>
                                        @endif
                                    </div>

                                    <div class="mb-3">
                                        <strong>Expiry:</strong><br>
                                        @if ($emergencyMessage->expires)
                                            <span class="badge badge-warning">
                                                <i class="fas fa-clock"></i> 24h Auto-Expire
                                            </span>
                                            <br>
                                            <small class="text-muted">
                                                {{ $emergencyMessage->expiry_status }}
                                            </small>
                                        @else
                                            <span class="badge badge-info">
                                                <i class="fas fa-infinity"></i> Never Expires
                                            </span>
                                        @endif
                                    </div>

                                    @if ($emergencyMessage->sent_date)
                                        <div class="mb-3">
                                            <strong>Sent Date:</strong><br>
                                            <span class="text-muted">
                                                {{ $emergencyMessage->sent_date->format('M d, Y H:i') }}
                                            </span>
                                            <br>
                                            <small class="text-muted">
                                                {{ $emergencyMessage->sent_date->diffForHumans() }}
                                            </small>
                                        </div>
                                    @endif

                                    @if ($emergencyMessage->creator)
                                        <div class="mb-3">
                                            <strong>Created By:</strong><br>
                                            <span
                                                class="text-muted">{{ $emergencyMessage->creator->name ?? 'Unknown' }}</span>
                                        </div>
                                    @endif

                                    <div class="mb-3">
                                        <strong>Created:</strong><br>
                                        <span class="text-muted">
                                            {{ $emergencyMessage->created_at->format('M d, Y H:i:s') }}
                                        </span>
                                    </div>

                                    @if ($emergencyMessage->updated_at != $emergencyMessage->created_at)
                                        <div class="mb-3">
                                            <strong>Last Updated:</strong><br>
                                            <span class="text-muted">
                                                {{ $emergencyMessage->updated_at->format('M d, Y H:i:s') }}
                                            </span>
                                        </div>
                                    @endif
                                </div>
                            </div>

                            <!-- Broadcast Information -->
                            <div class="card border-success mt-3">
                                <div class="card-header bg-success text-white">
                                    <h6 class="mb-0">
                                        <i class="fa fa-broadcast-tower"></i> Broadcast Information
                                    </h6>
                                </div>
                                <div class="card-body">
                                    <div class="mb-2">
                                        <strong>Target:</strong><br>
                                        <span class="text-success">All Rooms (Broadcast)</span>
                                    </div>
                                    <div class="mb-2">
                                        <strong>Delivery:</strong><br>
                                        <span class="text-muted">Automatic to all devices</span>
                                    </div>
                                    <div class="mb-0">
                                        <strong>Priority:</strong><br>
                                        <span class="text-danger">Emergency Level</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Action Buttons -->
            <div class="panel panel-inverse">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <i class="fas fa-cogs"></i> Actions
                    </h4>
                </div>
                <div class="panel-body">
                    <div class="d-flex flex-wrap gap-2">
                        <!-- Toggle Status -->
                        <form action="{{ route('emergency-messages.toggle-status', $emergencyMessage->id) }}"
                            method="POST" style="display: inline;">
                            @csrf
                            @method('PATCH')
                            @if ($isExpired)
                                <button type="submit" class="btn btn-success"
                                    onclick="return confirm('This message has expired. Activating it will reset the 24-hour timer. Continue?')">
                                    <i class="fas fa-play"></i>
                                    Activate Message (Reset Timer)
                                </button>
                            @else
                                <button type="submit"
                                    class="btn {{ $emergencyMessage->is_active ? 'btn-warning' : 'btn-success' }}"
                                    onclick="return confirm('Are you sure you want to {{ $emergencyMessage->is_active ? 'deactivate' : 'activate' }} this emergency message?')">
                                    <i class="fas {{ $emergencyMessage->is_active ? 'fa-pause' : 'fa-play' }}"></i>
                                    {{ $emergencyMessage->is_active ? 'Deactivate' : 'Activate' }} Message
                                </button>
                            @endif
                        </form>

                        <!-- Edit Button -->
                        <a href="{{ route('emergency-messages.edit', $emergencyMessage->id) }}" class="btn btn-custom">
                            <i class="fa fa-edit"></i> Edit Message
                        </a>

                        <!-- Delete Button -->
                        <button type="button" class="btn btn-custom" data-toggle="modal" data-target="#deleteModal">
                            <i class="fa fa-trash"></i> Delete Message
                        </button>

                        <!-- Back Button -->
                        <a href="{{ route('emergency-messages.index') }}" class="btn btn-custom">
                            <i class="fa fa-arrow-left"></i> Back to List
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- Delete Confirmation Modal -->
        <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">
                            <i class="fa fa-exclamation-triangle text-warning"></i>
                            Confirm Delete
                        </h5>
                        <button type="button" class="close" data-dismiss="modal">
                            <span>&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <p>Are you sure you want to delete this emergency message?</p>
                        <div class="alert alert-warning">
                            <i class="fa fa-warning"></i>
                            <strong>Warning:</strong> This action cannot be undone. The emergency message will be
                            permanently removed.
                        </div>
                        <div class="bg-light p-3 rounded">
                            <strong>Subject:</strong> {{ $emergencyMessage->subject }}<br>
                            <strong>Sender:</strong> {{ $emergencyMessage->sender }}
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                        <form action="{{ route('emergency-messages.destroy', $emergencyMessage->id) }}" method="POST"
                            style="display: inline;">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="btn btn-danger">
                                <i class="fa fa-trash"></i> Delete Message
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <a href="javascript:;" class="btn btn-icon btn-circle btn-success btn-scroll-to-top fade"
            data-click="scroll-top">
            <i class="fa fa-angle-up"></i>
        </a>
    </div>

    <style>
        .form-label {
            font-weight: 600;
            color: #495057;
            margin-bottom: 0.5rem;
        }

        .form-control-plaintext {
            padding: 0.5rem 0;
            color: #495057;
            font-size: 0.95rem;
        }

        .message-content {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            font-size: 14px;
            line-height: 1.6;
            word-wrap: break-word;
            white-space: pre-wrap;
        }

        .badge {
            font-size: 0.8em;
            padding: 0.4em 0.8em;
            border-radius: 0.25rem;
        }

        .badge-success {
            background-color: #28a745;
            color: white;
        }

        .badge-secondary {
            background-color: #6c757d;
            color: white;
        }

        .badge-warning {
            background-color: #ffc107;
            color: #212529;
        }

        .badge-info {
            background-color: #17a2b8;
            color: white;
        }

        .badge-danger {
            background-color: #dc3545;
            color: white;
        }

        .card {
            border: 1px solid #dee2e6;
            border-radius: 0.375rem;
        }

        .card-header {
            padding: 0.75rem 1rem;
            border-bottom: 1px solid #dee2e6;
            border-radius: 0.375rem 0.375rem 0 0;
        }

        .card-body {
            padding: 1rem;
        }

        .gap-2 {
            gap: 0.5rem;
        }

        .d-flex {
            display: flex;
        }

        .flex-wrap {
            flex-wrap: wrap;
        }

        .text-success {
            color: #28a745 !important;
        }

        .text-danger {
            color: #dc3545 !important;
        }

        .text-warning {
            color: #ffc107 !important;
        }

        .text-muted {
            color: #6c757d !important;
        }

        .bg-light {
            background-color: #f8f9fa !important;
        }

        .border-info {
            border-color: #17a2b8 !important;
        }

        .border-success {
            border-color: #28a745 !important;
        }

        .bg-info {
            background-color: #17a2b8 !important;
        }

        .bg-success {
            background-color: #28a745 !important;
        }

        .text-white {
            color: #ffffff !important;
        }

        .mb-0 {
            margin-bottom: 0 !important;
        }

        .mb-2 {
            margin-bottom: 0.5rem !important;
        }

        .mb-3 {
            margin-bottom: 1rem !important;
        }

        .mb-4 {
            margin-bottom: 1.5rem !important;
        }

        .mt-3 {
            margin-top: 1rem !important;
        }

        .p-3 {
            padding: 1rem !important;
        }

        .rounded {
            border-radius: 0.375rem !important;
        }

        .border {
            border: 1px solid #dee2e6 !important;
        }

        @media (max-width: 768px) {
            .d-flex.gap-2 {
                flex-direction: column;
            }

            .d-flex.gap-2>* {
                margin-bottom: 0.5rem;
                width: 100%;
            }
        }
    </style>
@endsection