@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('messages.index') }}">Messages</a></li>
                <li class="breadcrumb-item active">Send Message</li>
            </ol>

            <!-- Page Header -->
            <h1 class="page-header">Send 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

            <!-- Form Requirements Info Alert -->
            {{-- <div class="alert alert-info mb-4" id="form-requirements">
                <h6><i class="fa fa-info-circle"></i> Form Requirements</h6>
                <div class="row">
                    <div class="col-md-6">
                        <ul class="mb-0 small">
                            <li><strong>Subject:</strong> 3-255 characters</li>
                            <li><strong>Sender:</strong> 2-255 characters</li>
                            <li><strong>Message:</strong> 10-5,000 characters</li>
                        </ul>
                    </div>
                    <div class="col-md-6">
                        <ul class="mb-0 small">
                            <li><strong>Message Type:</strong> Required selection</li>
                            <li><strong>Room Selection:</strong> Required for personal messages</li>
                            <li><strong>Expiration:</strong> Optional, max 1 year from now</li>
                        </ul>
                    </div>
                </div>
            </div> --}}

            <!-- Main Panel -->
            <div class="panel panel-inverse">
                <div class="panel-heading">
                    <h4 class="panel-title">Create New Message</h4>
                </div>

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

                        <!-- Basic Message Information -->
                        <div class="form-section">
                            <h5 class="section-title">Message Information</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-50 chars)</span>
                                        </label>
                                        <input type="text" name="subject" id="subject" class="form-control"
                                            value="{{ old('subject') }}" maxlength="50" autocomplete="off"
                                            placeholder="Enter message subject (minimum 3 characters)">
                                        <small class="form-text text-muted">
                                            <span id="subject-count">0</span>/50 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" autocomplete="off"
                                            placeholder="Enter sender name (minimum 2 characters)">
                                        <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="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="expires_at">
                                            <i class="fas fa-clock"></i> Message Expiration (Optional)
                                            <span class="validation-info">(max 1 year)</span>
                                        </label>
                                        <input type="datetime-local"
                                            class="form-control @error('expires_at') is-invalid @enderror" id="expires_at"
                                            name="expires_at" value="{{ old('expires_at') }}"
                                            min="{{ now()->format('Y-m-d\TH:i') }}"
                                            max="{{ now()->addYear()->format('Y-m-d\TH:i') }}">

                                        @error('expires_at')
                                            <div class="invalid-feedback">
                                                {{ $message }}
                                            </div>
                                        @enderror

                                        <small class="form-text text-muted">
                                            <i class="fas fa-info-circle"></i>
                                            Leave empty for permanent message. Maximum 1 year from now.
                                            After expiration, message will not appear in hospitality apps but remains
                                            visible in CMS.
                                        </small>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="text-muted">Quick Expiration Presets</label>
                                        <div class="btn-group-vertical d-block">
                                            <button type="button" class="btn btn-outline-secondary btn-sm mb-1"
                                                onclick="setExpiration(1)">
                                                Expires in 1 day
                                            </button>
                                            <button type="button" class="btn btn-outline-secondary btn-sm mb-1"
                                                onclick="setExpiration(7)">
                                                Expires in 1 week
                                            </button>
                                            <button type="button" class="btn btn-outline-secondary btn-sm mb-1"
                                                onclick="setExpiration(30)">
                                                Expires in 1 month
                                            </button>
                                            <button type="button" class="btn btn-outline-secondary btn-sm"
                                                onclick="clearExpiration()">
                                                Never expires
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div> --}}

                            <div class="form-group">
                                <label for="message" class="form-label required">
                                    Message Content
                                    <span class="validation-info">(10-150 chars)</span>
                                </label>
                                <textarea class="form-control" id="message" name="message" rows="8" maxlength="150"
                                    placeholder="Enter your message content here (minimum 10 characters)...">{{ old('message') }}</textarea>
                                <small class="form-text text-muted">
                                    <i class="fa fa-info-circle"></i>
                                    Plain text message content. <span id="message-count">0</span>/150 characters
                                    <span class="requirement-note">(minimum 10 required)</span>
                                    <span class="float-right text-info">
                                        <i class="fa fa-lightbulb"></i> Tip: Be clear and concise
                                    </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>
                        </div>

                        <!-- Message Type and Targeting -->
                        <div class="form-section">
                            <h5 class="section-title">Message Targeting</h5>

                            <div class="form-group">
                                <label for="type" class="form-label required">
                                    Message Type
                                    <span class="validation-info">(required)</span>
                                </label>
                                <select class="form-control" id="type" name="type"
                                    onchange="handleTypeChange()">
                                    <option value="">-- Select Message Type --</option>
                                    @foreach ($messageTypes as $value => $label)
                                        <option value="{{ $value }}" {{ old('type') === $value ? 'selected' : '' }}>
                                            {{ $label }}
                                        </option>
                                    @endforeach
                                </select>
                                <small class="form-text text-muted">
                                    <i class="fa fa-info-circle"></i>
                                    Choose how you want to target this message
                                </small>

                                <!-- Type description alerts -->
                                <div class="type-descriptions mt-2">
                                    <div class="alert alert-light type-hint" id="broadcast-hint" style="display: none;">
                                        <i class="fa fa-broadcast-tower text-primary"></i>
                                        <strong>Broadcast Message:</strong> Will be sent to all rooms automatically
                                    </div>
                                    <div class="alert alert-light type-hint" id="personal-hint" style="display: none;">
                                        <i class="fa fa-user text-info"></i>
                                        <strong>Personal Message:</strong> You must select specific rooms
                                    </div>
                                </div>
                            </div>

                            <!-- Room Selection: Shown only for 'personal' type -->
                            <div class="form-group" id="room-container" style="display: none;">
                                <label for="room_id" class="form-label required">
                                    Select Rooms
                                    <span class="validation-info">(required for personal)</span>
                                </label>

                                <!-- Room selection requirements alert -->
                                <div class="alert alert-warning room-selection-alert mb-2">
                                    <i class="fa fa-exclamation-triangle"></i>
                                    <strong>Required:</strong> You must select at least one room for personal messages.
                                </div>

                                <!-- Search Input -->
                                <input type="text" class="form-control mb-2" id="room-search"
                                    placeholder="Search rooms by number or guest name...">

                                <!-- Room Selection -->
                                <select class="form-control" id="room_id" name="room_id[]" multiple size="8">
                                    @foreach ($rooms as $room)
                                        <option value="{{ $room->id }}" data-room="{{ strtolower($room->room) }}"
                                            data-guest="{{ strtolower($room->guestname ?? '') }}"
                                            {{ is_array(old('room_id')) && in_array($room->id, old('room_id')) ? 'selected' : '' }}>
                                            {{ $room->room }}
                                            @if ($room->guestname)
                                                - {{ $room->guestname }}
                                            @endif
                                            @if ($room->roomType)
                                                ({{ $room->roomType->name }})
                                            @endif
                                        </option>
                                    @endforeach
                                </select>

                                <small class="form-text text-muted">
                                    <i class="fa fa-info-circle"></i>
                                    Hold Ctrl (Cmd on Mac) to select multiple rooms. Use the search box to filter rooms.
                                </small>

                                <!-- Room Selection Actions -->
                                <div class="mt-2">
                                    <button type="button" class="btn btn-sm btn-outline-primary"
                                        onclick="selectAllRooms()">
                                        <i class="fa fa-check-square"></i> Select All
                                    </button>
                                    <button type="button" class="btn btn-sm btn-outline-secondary"
                                        onclick="clearRoomSelection()">
                                        <i class="fa fa-square"></i> Clear All
                                    </button>
                                    <span class="ml-3">
                                        <span class="badge badge-info" id="selected-room-count">0</span> room(s) selected
                                    </span>
                                </div>

                                <!-- Room selection validation status -->
                                <div class="validation-status mt-2" id="room-validation">
                                    <div class="validation-indicator" id="room-status">
                                        <span class="status-icon"><i class="fa fa-circle text-muted"></i></span>
                                        <span class="status-text">Select at least one room to continue</span>
                                    </div>
                                </div>
                            </div>

                            <!-- Message Preview -->
                            <div class="form-group" id="message-preview" style="display: none;">
                                <label class="form-label">Target Summary</label>
                                <div class="alert alert-success" id="target-summary">
                                    <!-- Will be populated by JavaScript -->
                                </div>
                            </div>
                        </div>

                        <!-- Form Actions -->
                        <div class="form-actions">
                            <button type="submit" class="btn btn-custom btn-lg" id="submit-btn">
                                <i class="fa fa-paper-plane"></i> Send Message
                            </button>
                            <a href="{{ route('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>

    <!-- jQuery for enhanced functionality -->
    <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 #007bff;
            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;
        }

        .validation-indicator .fa-circle.text-success {
            color: #28a745 !important;
        }

        .validation-indicator .fa-circle.text-warning {
            color: #ffc107 !important;
        }

        .validation-indicator .fa-circle.text-danger {
            color: #dc3545 !important;
        }

        .validation-indicator .fa-circle.text-muted {
            color: #6c757d !important;
        }

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

        .status-text.text-warning {
            color: #856404;
        }

        .status-text.text-danger {
            color: #721c24;
        }

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

        .type-hint {
            padding: 0.5rem 0.75rem;
            margin-bottom: 0.5rem;
            border-left: 4px solid #e9ecef;
        }

        .room-selection-alert {
            padding: 0.5rem 0.75rem;
            font-size: 0.875em;
        }

        .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;
        }

        #room_id {
            height: auto;
            min-height: 200px;
        }

        #room_id option {
            padding: 8px;
            border-bottom: 1px solid #f0f0f0;
        }

        #room_id option:hover {
            background-color: #f8f9fa;
        }

        .alert {
            padding: 15px;
            margin-bottom: 20px;
            border: 1px solid transparent;
            border-radius: 4px;
        }

        .alert-info {
            color: #31708f;
            background-color: #d9edf7;
            border-color: #bce8f1;
        }

        .alert-danger {
            color: #a94442;
            background-color: #f2dede;
            border-color: #ebccd1;
        }

        .alert-success {
            color: #3c763d;
            background-color: #dff0d8;
            border-color: #d6e9c6;
        }

        .alert-warning {
            color: #8a6d3b;
            background-color: #fcf8e3;
            border-color: #faebcc;
        }

        .alert-light {
            color: #818182;
            background-color: #fefefe;
            border-color: #fdfdfe;
        }

        /* Enhanced textarea styling */
        #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: 1px solid #ced4da;
            transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        }

        #message:focus {
            border-color: #007bff;
            outline: 0;
            box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 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();

            // Room search functionality
            setupRoomSearch();

            // Form validation
            setupFormValidation();

            // Auto-dismiss alerts
            autoDismissAlerts();

            // Initialize based on old input
            const currentType = document.getElementById('type').value;
            if (currentType) {
                handleTypeChange();
            }

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

        // Handle message type change
        function handleTypeChange() {
            const type = document.getElementById('type').value;
            const roomContainer = document.getElementById('room-container');
            const messagePreview = document.getElementById('message-preview');
            const targetSummary = document.getElementById('target-summary');

            // Hide all type hints first
            document.querySelectorAll('.type-hint').forEach(hint => hint.style.display = 'none');

            // Hide all containers first
            roomContainer.style.display = 'none';
            messagePreview.style.display = 'none';

            // Show appropriate container and hint based on type
            if (type === 'broadcast') {
                document.getElementById('broadcast-hint').style.display = 'block';
                const totalRooms = {{ $rooms->count() }};
                targetSummary.innerHTML =
                    `<i class="fa fa-broadcast-tower"></i> Message will be sent to <strong>all ${totalRooms} rooms</strong>`;
                messagePreview.style.display = 'block';
            } else if (type === 'personal') {
                document.getElementById('personal-hint').style.display = 'block';
                roomContainer.style.display = 'block';
                updatePersonalPreview();
            }

            // Clear room selection when changing types
            if (type !== 'personal') {
                clearRoomSelection();
            }
        }

        // Update personal message preview
        function updatePersonalPreview() {
            const roomSelect = document.getElementById('room_id');
            const selectedRooms = Array.from(roomSelect.selectedOptions);
            const messagePreview = document.getElementById('message-preview');
            const targetSummary = document.getElementById('target-summary');
            const selectedCount = document.getElementById('selected-room-count');
            const roomStatus = document.getElementById('room-status');

            selectedCount.textContent = selectedRooms.length;

            // Update validation status
            if (selectedRooms.length === 0) {
                roomStatus.innerHTML =
                    '<span class="status-icon"><i class="fa fa-circle text-danger"></i></span><span class="status-text text-danger">Please select at least one room</span>';
            } else {
                roomStatus.innerHTML =
                    '<span class="status-icon"><i class="fa fa-check-circle text-success"></i></span><span class="status-text text-success">Room selection is valid</span>';
            }

            // Show Target Summary when at least one room is selected
            if (selectedRooms.length > 0) {
                let displayText;
                if (selectedRooms.length <= 5) {
                    const roomNames = selectedRooms.map(option => option.text.split(' - ')[0]).join(', ');
                    displayText = roomNames;
                } else {
                    displayText = `${selectedRooms.length} selected rooms`;
                }

                targetSummary.innerHTML =
                    `<i class="fa fa-user"></i> Message will be sent to <strong>${selectedRooms.length} room(s)</strong>: ${displayText}`;
                messagePreview.style.display = 'block';
            } else {
                messagePreview.style.display = 'none';
            }
        }

        // Room selection functions
        function selectAllRooms() {
            const roomSelect = document.getElementById('room_id');
            const visibleOptions = Array.from(roomSelect.options).filter(option =>
                option.style.display !== 'none'
            );

            // Select all visible rooms
            visibleOptions.forEach(option => option.selected = true);
            updatePersonalPreview();
        }

        function clearRoomSelection() {
            const roomSelect = document.getElementById('room_id');
            Array.from(roomSelect.options).forEach(option => option.selected = false);
            updatePersonalPreview();
        }

        // Setup room search functionality
        function setupRoomSearch() {
            const searchInput = document.getElementById('room-search');
            const roomSelect = document.getElementById('room_id');

            if (searchInput && roomSelect) {
                searchInput.addEventListener('input', function() {
                    const searchTerm = this.value.toLowerCase();
                    const options = roomSelect.options;

                    Array.from(options).forEach(function(option) {
                        const roomText = option.getAttribute('data-room') || '';
                        const guestText = option.getAttribute('data-guest') || '';
                        const optionText = option.textContent.toLowerCase();

                        const matches = roomText.includes(searchTerm) ||
                            guestText.includes(searchTerm) ||
                            optionText.includes(searchTerm);

                        option.style.display = matches ? 'block' : 'none';
                    });
                });

                // Add event listener for room selection changes
                roomSelect.addEventListener('change', updatePersonalPreview);
            }
        }

        // 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('message-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> Sending...';
                });
            }
        }

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

        function setExpiration(days) {
            const now = new Date();
            now.setDate(now.getDate() + days);
            const expires = now.toISOString().slice(0, 16); // Format for datetime-local
            document.getElementById('expires_at').value = expires;
        }

        function clearExpiration() {
            document.getElementById('expires_at').value = '';
        }
    </script>
@endsection