@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">Create Emergency Message</li>
            </ol>

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

            <!-- Success Message -->
            @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

            <!-- Error Display -->
            @if ($errors->any())
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    <h6><i class="fa fa-exclamation-triangle"></i> Please correct the following errors:</h6>
                    <ul class="mb-0">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            @endif

            <!-- Emergency Message Info Alert -->
            <div class="alert alert-warning mb-4">
                <h6><i class="fa fa-info-circle"></i> Emergency Message Information</h6>
                <div class="row">
                    <div class="col-md-6">
                        <ul class="mb-0 small">
                            <li><strong>Broadcast:</strong> Sent to ALL rooms automatically</li>
                            <li><strong>Real-time:</strong> Appears immediately when activated</li>
                            <li><strong>Simple:</strong> No priority levels or expiration needed</li>
                        </ul>
                    </div>
                    <div class="col-md-6">
                        <ul class="mb-0 small">
                            <li><strong>Latest First:</strong> Most recent messages shown first</li>
                            <li><strong>Active Control:</strong> Can be activated/deactivated anytime</li>
                            <li><strong>Emergency Focus:</strong> Designed for urgent communications</li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- Main Panel -->
            <div class="panel panel-inverse">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <i class="fas fa-broadcast-tower"></i> Create Emergency Message
                    </h4>
                </div>

                <div class="panel-body">
                    <form action="{{ route('emergency-messages.store') }}" method="POST" id="emergency-form"
                        class="emergency-form" novalidate>
                        @csrf

                        <!-- Emergency Message Information -->
                        <div class="form-section">
                            <h5 class="section-title">
                                <i class="fas fa-exclamation-circle"></i> Emergency Message Details
                            </h5>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="subject" class="form-label required">
                                            Subject
                                            <span class="validation-info">(3-100 chars)</span>
                                        </label>
                                        <input type="text" name="subject" id="subject" class="form-control "
                                            value="{{ old('subject') }}" maxlength="100" required autocomplete="off"
                                            placeholder="Enter emergency subject (e.g., Fire Drill, Power Outage)">
                                        <small class="form-text text-muted">
                                            <span id="subject-count">0</span>/100 characters
                                            <span class="requirement-note">(minimum 3 required)</span>
                                        </small>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="sender" class="form-label required">
                                            Sender
                                            <span class="validation-info">(2-50 chars)</span>
                                        </label>
                                        <input type="text" name="sender" id="sender" class="form-control"
                                            value="{{ old('sender', auth()->user()->name ?? 'System Administrator') }}"
                                            maxlength="50" required autocomplete="off" placeholder="Enter sender name">
                                        <small class="form-text text-muted">
                                            <span id="sender-count">0</span>/50 characters
                                            <span class="requirement-note">(minimum 2 required)</span>
                                        </small>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="message" class="form-label required">
                                    Emergency Message Content
                                    <span class="validation-info">(10-150 chars)</span>
                                </label>
                                <textarea class="form-control" id="message" name="message" rows="8" maxlength="150" required
                                    placeholder="Enter your emergency message content. Be clear, concise, and include necessary instructions...">{{ old('message') }}</textarea>
                                <small class="form-text text-muted">
                                    <i class="fa fa-info-circle"></i>
                                    Emergency message content. <span id="message-count">0</span>/150 characters
                                    <span class="requirement-note">(minimum 10 required)</span>
                                    <span class="float-right text-warning">
                                        <i class="fa fa-exclamation-triangle"></i> Keep it clear and actionable
                                    </span>
                                </small>

                                <!-- Content validation status -->
                                <div class="validation-status mt-1" id="message-validation">
                                    <div class="validation-indicator" id="message-status">
                                        <span class="status-icon"><i class="fa fa-circle text-muted"></i></span>
                                        <span class="status-text">Enter at least 10 characters to continue</span>
                                    </div>
                                </div>
                            </div>

                            <!-- Status and Expiry Options -->
                            <div class="row">
                                <div class="col-md-6">
                                    <!-- Active Status Toggle -->
                                    <div class="form-group">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" value="1"
                                                id="is_active" name="is_active"
                                                {{ old('is_active', true) ? 'checked' : '' }}>
                                            <label class="form-check-label" for="is_active">
                                                <strong>Activate immediately after creation</strong>
                                            </label>
                                            <small class="form-text text-muted d-block">
                                                When checked, this emergency message will be active and visible to all rooms
                                                immediately. Uncheck to create as draft.
                                            </small>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <!-- Expires Toggle -->
                                    <div class="form-group">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" value="1"
                                                id="expires" name="expires"
                                                {{ old('expires', false) ? 'checked' : '' }}>
                                            <label class="form-check-label" for="expires">
                                                <strong>Message expires automatically</strong>
                                            </label>
                                            <small class="form-text text-muted d-block">
                                                When checked, this message will automatically become inactive after 24
                                                hours.
                                                Leave unchecked for permanent messages that require manual deactivation.
                                            </small>
                                        </div>

                                        <!-- Expiry Information -->
                                        <div id="expiry-info" class="alert alert-info mt-2" style="display: none;">
                                            <i class="fa fa-clock"></i>
                                            <strong>Auto-Expiry:</strong> This message will automatically deactivate 24
                                            hours after being sent.
                                            <br>
                                            <small class="text-muted">
                                                Useful for time-sensitive emergencies like fire drills, maintenance windows,
                                                etc.
                                            </small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Target Summary -->
                        <div class="form-section">
                            <h5 class="section-title">
                                <i class="fas fa-broadcast-tower"></i> Broadcast Target
                            </h5>

                            <div class="alert alert-info" role="alert">
                                <i class="fa fa-broadcast-tower"></i>
                                <strong>Emergency Broadcast:</strong> This message will be sent to
                                <strong>ALL rooms automatically</strong> when activated.
                                <br>
                                <small class="text-muted">
                                    Emergency messages always use broadcast delivery for maximum reach and safety.
                                </small>
                            </div>
                        </div>

                        <!-- Form Actions -->
                        <div class="form-actions">
                            <button type="submit" class="btn btn-danger btn-lg" id="submit-btn">
                                <i class="fas fa-exclamation-triangle"></i> Create Emergency Message
                            </button>
                            <a href="{{ route('emergency-messages.index') }}" class="btn btn-custom btn-lg">
                                <i class="fa fa-arrow-left"></i> Back to List
                            </a>
                        </div>
                    </form>
                </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>

    <!-- Include jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <style>
        .form-section {
            margin-bottom: 2rem;
            padding-bottom: 1.5rem;
            border-bottom: 1px solid #eee;
        }

        .form-section:last-child {
            border-bottom: none;
            margin-bottom: 1rem;
        }

        .section-title {
            color: #495057;
            font-weight: 600;
            margin-bottom: 1rem;
            padding-bottom: 0.5rem;
            border-bottom: 2px solid #dc3545;
            display: inline-block;
        }

        .form-label {
            font-weight: 600;
            color: #495057;
        }

        .form-label.required::after {
            content: " *";
            color: #dc3545;
        }

        .validation-info {
            font-size: 0.8em;
            color: #6c757d;
            font-weight: normal;
        }

        .requirement-note {
            color: #28a745;
            font-style: italic;
        }

        .validation-status {
            font-size: 0.875em;
        }

        .validation-indicator {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }

        .validation-indicator .status-icon {
            flex-shrink: 0;
        }

        .validation-indicator .status-text {
            font-size: 0.875em;
            font-weight: 500;
        }

        .form-actions {
            margin-top: 2rem;
            padding-top: 1.5rem;
            border-top: 1px solid #eee;
            text-align: left;
        }

        .form-actions .btn {
            margin-right: 0.5rem;
        }

        .is-invalid {
            border-color: #dc3545;
        }

        .invalid-feedback {
            display: block;
            width: 100%;
            margin-top: 0.25rem;
            font-size: 0.875em;
            color: #dc3545;
        }

        /* Enhanced textarea styling for emergency content */
        #message {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            font-size: 14px;
            line-height: 1.5;
            resize: vertical;
            min-height: 200px;
            background-color: #ffffff;
            border: 2px solid #ced4da;
            transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        }

        #message:focus {
            border-color: #dc3545;
            outline: 0;
            box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
        }

        #message::placeholder {
            color: #6c757d;
            opacity: 1;
        }

        .fa-spin {
            animation: fa-spin 2s infinite linear;
        }

        @keyframes fa-spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        @media (max-width: 768px) {
            .form-actions {
                text-align: center;
            }

            .form-actions .btn {
                width: 100%;
                margin-bottom: 0.5rem;
                margin-right: 0;
            }

            .alert {
                font-size: 0.875em;
                padding: 10px;
            }
        }
    </style>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Character counters
            setupCharacterCounters();

            // Form validation
            setupFormValidation();

            // Auto-dismiss alerts
            autoDismissAlerts();

            // Expiry toggle functionality
            setupExpiryToggle();

            // Update counts on page load
            updateAllCounts();
        });

        // Setup expiry toggle functionality
        function setupExpiryToggle() {
            const expiresCheckbox = document.getElementById('expires');
            const expiryInfo = document.getElementById('expiry-info');

            if (expiresCheckbox && expiryInfo) {
                // Initial state
                updateExpiryInfo();

                // Listen for changes
                expiresCheckbox.addEventListener('change', updateExpiryInfo);

                function updateExpiryInfo() {
                    if (expiresCheckbox.checked) {
                        expiryInfo.style.display = 'block';
                    } else {
                        expiryInfo.style.display = 'none';
                    }
                }
            }
        }

        // Setup character counters
        function setupCharacterCounters() {
            // Subject counter
            const subjectInput = document.getElementById('subject');
            if (subjectInput) {
                subjectInput.addEventListener('input', updateSubjectCount);
            }

            // Sender counter
            const senderInput = document.getElementById('sender');
            if (senderInput) {
                senderInput.addEventListener('input', updateSenderCount);
            }

            // Message counter with validation
            const messageInput = document.getElementById('message');
            if (messageInput) {
                messageInput.addEventListener('input', updateMessageCount);
            }
        }

        function updateSubjectCount() {
            const input = document.getElementById('subject');
            const counter = document.getElementById('subject-count');
            if (input && counter) {
                const length = input.value.length;
                counter.textContent = length;

                if (length < 3) {
                    counter.style.color = '#dc3545';
                } else if (length > 240) {
                    counter.style.color = '#dc3545';
                } else if (length > 200) {
                    counter.style.color = '#ffc107';
                } else {
                    counter.style.color = '#28a745';
                }
            }
        }

        function updateSenderCount() {
            const input = document.getElementById('sender');
            const counter = document.getElementById('sender-count');
            if (input && counter) {
                const length = input.value.length;
                counter.textContent = length;

                if (length < 2) {
                    counter.style.color = '#dc3545';
                } else if (length > 240) {
                    counter.style.color = '#dc3545';
                } else if (length > 200) {
                    counter.style.color = '#ffc107';
                } else {
                    counter.style.color = '#28a745';
                }
            }
        }

        function updateMessageCount() {
            const input = document.getElementById('message');
            const counter = document.getElementById('message-count');
            const status = document.getElementById('message-status');

            if (input && counter && status) {
                const length = input.value.length;
                counter.textContent = length;

                // Update validation status
                if (length < 10) {
                    status.innerHTML =
                        '<span class="status-icon"><i class="fa fa-exclamation-circle text-danger"></i></span><span class="status-text text-danger">Message too short - need at least ' +
                        (10 - length) + ' more characters</span>';
                    counter.style.color = '#dc3545';
                } else if (length > 4800) {
                    status.innerHTML =
                        '<span class="status-icon"><i class="fa fa-exclamation-triangle text-warning"></i></span><span class="status-text text-warning">Approaching character limit - ' +
                        (5000 - length) + ' characters remaining</span>';
                    counter.style.color = '#ffc107';
                } else if (length > 4000) {
                    status.innerHTML =
                        '<span class="status-icon"><i class="fa fa-check-circle text-success"></i></span><span class="status-text text-success">Message length is good - ' +
                        (5000 - length) + ' characters remaining</span>';
                    counter.style.color = '#28a745';
                } else {
                    status.innerHTML =
                        '<span class="status-icon"><i class="fa fa-check-circle text-success"></i></span><span class="status-text text-success">Message length is perfect</span>';
                    counter.style.color = '#28a745';
                }
            }
        }

        function updateAllCounts() {
            updateSubjectCount();
            updateSenderCount();
            updateMessageCount();
        }

        // Setup form submission handler
        function setupFormValidation() {
            const form = document.getElementById('emergency-form');
            const submitBtn = document.getElementById('submit-btn');

            if (form && submitBtn) {
                form.addEventListener('submit', function(e) {
                    // Show loading state
                    submitBtn.disabled = true;
                    submitBtn.innerHTML = '<i class="fa fa-spinner fa-spin"></i> Creating Emergency Message...';
                });
            }
        }

        // Auto-dismiss success alerts after 5 seconds
        function autoDismissAlerts() {
            const successAlert = document.querySelector('.alert-success');
            if (successAlert) {
                setTimeout(function() {
                    $(successAlert).alert('close');
                }, 5000);
            }
        }
    </script>
@endsection