@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('rooms.index') }}">Rooms</a></li>
                <li class="breadcrumb-item active">Edit Room</li>
            </ol>

            <!-- Page Header -->
            <h1 class="page-header">Edit Room</h1>

            <!-- Main Panel -->
            <div class="panel panel-inverse">
                <div class="panel-heading">
                    <h4 class="panel-title">Room Information</h4>
                </div>

                <div class="panel-body">
                    @if ($errors->any())
                        <div class="alert alert-danger">
                            <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>
                        </div>
                    @endif

                    @if (session('success'))
                        <div class="alert alert-success">
                            <i class="fa fa-check-circle"></i> {{ session('success') }}
                        </div>
                    @endif

                    <form action="{{ route('rooms.update', $room->id) }}" method="POST" enctype="multipart/form-data"
                        class="room-form" novalidate>
                        @csrf
                        @method('PUT')

                        <!-- Basic Information Section -->
                        <div class="form-section">
                            <h5 class="section-title">Basic Information</h5>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="room" class="form-label required">Room Number/Name</label>
                                        <input type="text" name="room" id="room" class="form-control"
                                            value="{{ $room->room }}" maxlength="128" required autocomplete="off">
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="room_type_id" class="form-label required">Room Type</label>
                                        <select name="room_type_id" id="room_type_id" class="form-control" required>
                                            <option value="">Select Room Type</option>
                                            @foreach ($roomTypes as $roomType)
                                                <option value="{{ $roomType->id }}"
                                                    {{ $room->room_type_id == $roomType->id ? 'selected' : '' }}>
                                                    {{ $roomType->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="status_room" class="form-label">Room Status</label>
                                        <select name="status_room" id="status_room" class="form-control">
                                            <option value="checked_in"
                                                {{ $room->status_room == 'checked_in' ? 'selected' : '' }}>
                                                Checked In
                                            </option>
                                            <option value="checked_out"
                                                {{ $room->status_room == 'checked_out' ? 'selected' : '' }}>
                                                Checked Out
                                            </option>
                                            <option value="vacant" {{ $room->status_room == 'vacant' ? 'selected' : '' }}>
                                                Vacant
                                            </option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="description" class="form-label">Description</label>
                                <textarea name="description" id="description" class="form-control" rows="3"
                                    placeholder="Optional room description">{{ $room->description }}</textarea>
                            </div>
                        </div>

                        <!-- Guest Information Section -->
                        <div class="form-section">
                            <h5 class="section-title">Guest Information</h5>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="guestname" class="form-label">Guest Name</label>
                                        <input type="text" name="guestname" id="guestname" class="form-control"
                                            value="{{ $room->guestname }}" maxlength="256" placeholder="Enter guest name">
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="guest_image" class="form-label">Guest Image</label>
                                        <div class="custom-file">
                                            <input type="file" name="guest_image" id="guest_image"
                                                class="custom-file-input" accept="image/jpeg,image/png,image/jpg,image/gif"
                                                data-max-size="2048">
                                            <label class="custom-file-label" for="guest_image">Choose image
                                                file...</label>
                                        </div>
                                        <small class="form-text text-muted">
                                            <i class="fa fa-info-circle"></i>
                                            Accepted: JPEG, PNG, JPG, GIF. Maximum size: 2MB
                                        </small>

                                        <!-- Current Image Display -->
                                        @if ($room->guest_image && $room->guest_image !== 'noimage.jpg')
                                            <div class="form-group">
                                                <label class="form-label">Current Image:</label>
                                                <div class="guest-image-container">
                                                    <img src="{{ asset('storage/welcome_guest/' . $room->guest_image) }}"
                                                        alt="Current Guest Image" class="img-thumbnail guest-img"
                                                        style="max-width: 150px;">
                                                    <div class="guest-info">
                                                        <small class="form-text text-muted">
                                                            <i class="fa fa-info-circle"></i>
                                                            Current guest image
                                                        </small>
                                                        <button type="button"
                                                            class="btn btn-custom btn-sm mt-2 delete-guest-btn"
                                                            data-target="guest_image" title="Delete current image">
                                                            <i class="fa fa-trash"></i> Delete Image
                                                        </button>
                                                    </div>
                                                </div>
                                                <input type="hidden" name="delete_guest_img" id="delete_guest_img"
                                                    value="0">
                                            </div>
                                        @endif

                                        <!-- New Image Preview -->
                                        <div class="image-preview mt-2" id="guest-image-preview" style="display: none;">
                                            <label class="form-label">New Image Preview:</label>
                                            <img src="" alt="Preview" class="img-thumbnail"
                                                style="max-width: 150px;">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Welcome Greeting Status -->
                        <div class="form-section">
                            <h5 class="section-title">Welcome Greeting Assignment</h5>

                            @php
                                $welcomeGreeting = $room->getWelcomeGreeting();
                                $greetingType = $room->getWelcomeGreetingType();
                            @endphp

                            <div class="welcome-greeting-status">
                                @if ($welcomeGreeting)
                                    <div class="alert alert-success">
                                        <h6><i class="fa fa-check-circle"></i> Welcome Greeting Assigned</h6>
                                        <p><strong>Type:</strong>
                                            @if ($greetingType === 'personal')
                                                <span class="badge badge-info"><i class="fa fa-user"></i> Personal
                                                    Assignment</span>
                                            @elseif($greetingType === 'general')
                                                <span class="badge badge-primary"><i class="fa fa-globe"></i> General
                                                    Assignment</span>
                                            @endif
                                        </p>
                                        <div class="greeting-content border rounded p-2 bg-light">
                                            <small><strong>Content:</strong></small><br>
                                            <small>{!! Str::limit(strip_tags($welcomeGreeting), 150) !!}</small>
                                        </div>
                                    </div>
                                @else
                                    <div class="alert alert-warning">
                                        <h6><i class="fa fa-exclamation-triangle"></i> No Welcome Greeting Assigned</h6>
                                        <p class="mb-0">
                                            This room doesn't have any welcome greeting assigned.
                                            You can assign one from the Welcome Greeting Management.
                                        </p>
                                    </div>
                                @endif

                                <div class="text-center">
                                    <a href="{{ route('welcome_greetings.index') }}" class="btn btn-custom">
                                        <i class="fa fa-external-link"></i> Manage Welcome Greetings
                                    </a>
                                </div>
                            </div>
                        </div>

                        <!-- WiFi Configuration Section -->
                        <div class="form-section">
                            <h5 class="section-title">In-Room WiFi Configuration</h5>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="username_cast" class="form-label">WiFi Network Name (SSID)</label>
                                        <input type="text" name="username_cast" id="username_cast"
                                            class="form-control" value="{{ $room->username_cast }}" maxlength="2048"
                                            placeholder="Enter WiFi network name">
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="password_cast" class="form-label">WiFi Password</label>
                                        <div class="input-group">
                                            <input type="password" name="password_cast" id="password_cast"
                                                class="form-control" value="{{ $room->password_cast }}" maxlength="12"
                                                placeholder="Enter WiFi password">
                                            <div class="input-group-append">
                                                <button class="btn btn-outline-secondary" type="button"
                                                    id="toggle-password">
                                                    <i class="fa fa-eye"></i>
                                                </button>
                                            </div>
                                        </div>
                                        <small class="form-text text-muted">
                                            Maximum 12 characters. <span id="char-count">0/12</span>
                                        </small>
                                        <small class="form-text text-info">
                                            <i class="fa fa-qrcode"></i> QR code will be regenerated when credentials are
                                            updated
                                        </small>
                                    </div>
                                </div>
                            </div>

                            <!-- Current QR Code Display -->
                            @if ($room->qrcode_cast && $room->qrcode_cast !== 'noimage.jpg')
                                <div class="form-group">
                                    <label class="form-label">Current WiFi QR Code:</label>
                                    <div class="qr-code-container">
                                        <img src="{{ asset('storage/qr_codes/' . $room->qrcode_cast) }}"
                                            alt="WiFi QR Code" class="img-thumbnail qr-code-img"
                                            style="max-width: 200px;">
                                        <div class="qr-info">
                                            <small class="form-text text-muted">
                                                <i class="fa fa-info-circle"></i>
                                                Guests can scan this QR code to connect to WiFi automatically
                                            </small>
                                        </div>
                                    </div>
                                </div>
                            @else
                                <div class="alert alert-info">
                                    <i class="fa fa-info-circle"></i>
                                    No QR code available. Enter both SSID and password to generate one.
                                </div>
                            @endif
                        </div>

                        <!-- Room Appearance Section -->
                        <div class="form-section">
                            <h5 class="section-title">Room Appearance</h5>

                            <div class="form-group">
                                <label for="background_img" class="form-label">Background Image</label>
                                <div class="custom-file">
                                    <input type="file" name="background_img" id="background_img"
                                        class="custom-file-input" accept="image/jpeg,image/png,image/jpg,image/gif"
                                        data-max-size="2048">
                                    <label class="custom-file-label" for="background_img">Choose background
                                        image...</label>
                                </div>
                                <small class="form-text text-muted">
                                    <i class="fa fa-info-circle"></i>
                                    Accepted: JPEG, PNG, JPG, GIF. Maximum size: 2MB
                                </small>

                                <!-- Current Background Image -->
                                @if ($room->background_img && $room->background_img !== 'noimage.jpg')
                                    <div class="form-group">
                                        <label class="form-label">Current Background:</label>
                                        <div class="background-image-container">
                                            <img src="{{ asset('storage/room_background/' . $room->background_img) }}"
                                                alt="Current Background" class="img-thumbnail background-img"
                                                style="max-width: 200px;">
                                            <div class="background-info">
                                                <small class="form-text text-muted">
                                                    <i class="fa fa-info-circle"></i>
                                                    Current room background image
                                                </small>
                                                <button type="button"
                                                    class="btn btn-custom btn-sm mt-2 delete-background-btn"
                                                    data-target="background_img" title="Delete current background">
                                                    <i class="fa fa-trash"></i> Delete Background
                                                </button>
                                            </div>
                                        </div>
                                        <input type="hidden" name="delete_background_img" id="delete_background_img"
                                            value="0">
                                    </div>
                                @endif

                                <!-- New Background Preview -->
                                <div class="image-preview mt-2" id="background-image-preview" style="display: none;">
                                    <label class="form-label">New Background Preview:</label>
                                    <img src="" alt="Preview" class="img-thumbnail" style="max-width: 200px;">
                                </div>
                            </div>
                        </div>

                        <!-- Form Actions -->
                        <div class="form-actions">
                            <button type="submit" class="btn btn-custom btn-lg">
                                <i class="fa fa-save"></i> Update
                            </button>
                            <a href="{{ route('rooms.index') }}" class="btn btn-custom btn-lg">
                                <i class="fa fa-arrow-left"></i> Back
                            </a>
                            <div class="float-right">
                                <small class="text-muted">
                                    <i class="fa fa-clock"></i> Last updated:
                                    {{ $room->updated_at ? $room->updated_at->format('M d, Y H:i') : 'Never' }}
                                </small>
                            </div>
                        </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>

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

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

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

        .guest-image-container,
        .background-image-container,
        .qr-code-container {
            padding: 1rem;
            background-color: #f8f9fa;
            border-radius: 8px;
            border: 1px solid #dee2e6;
            text-align: center;
        }

        .guest-img,
        .background-img,
        .qr-code-img {
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            display: block;
            margin: 0 auto;
        }

        .guest-info,
        .background-info,
        .qr-info {
            margin-top: 1rem;
        }

        .delete-guest-btn.deleting,
        .delete-background-btn.deleting {
            background-color: #6c757d;
            border-color: #6c757d;
            opacity: 0.6;
        }

        .image-preview img {
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .custom-file-label::after {
            content: "Browse";
        }

        .input-group .btn {
            border-color: #ced4da;
        }

        #char-count {
            font-weight: 600;
        }

        .welcome-greeting-status .greeting-content {
            font-size: 0.9em;
            max-height: 100px;
            overflow-y: auto;
        }

        .alert {
            border-radius: 8px;
        }

        @media (max-width: 768px) {
            .form-actions {
                flex-direction: column;
                align-items: stretch;
                text-align: center;
            }

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

            .form-actions .float-right {
                float: none !important;
                margin-top: 1rem;
            }
        }
    </style>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Password visibility toggle
            const togglePassword = document.getElementById('toggle-password');
            const passwordInput = document.getElementById('password_cast');

            if (togglePassword && passwordInput) {
                togglePassword.addEventListener('click', function() {
                    const type = passwordInput.type === 'password' ? 'text' : 'password';
                    passwordInput.type = type;

                    const icon = this.querySelector('i');
                    icon.classList.toggle('fa-eye');
                    icon.classList.toggle('fa-eye-slash');
                });
            }

            // Character counter for password
            if (passwordInput) {
                const charCount = document.getElementById('char-count');

                function updateCharCount() {
                    const length = passwordInput.value.length;
                    charCount.textContent = `${length}/12`;
                    charCount.style.color = length > 12 ? '#dc3545' : length > 8 ? '#ffc107' : '#28a745';
                }

                passwordInput.addEventListener('input', updateCharCount);
                updateCharCount(); // Initial count
            }

            // Delete image buttons
            const deleteGuestBtn = document.querySelector('.delete-guest-btn');
            const deleteBackgroundBtn = document.querySelector('.delete-background-btn');

            // Handle guest image deletion
            if (deleteGuestBtn) {
                deleteGuestBtn.addEventListener('click', function(e) {
                    e.preventDefault();

                    if (confirm('Are you sure you want to delete the current guest image?')) {
                        // Mark for deletion
                        const deleteInput = document.getElementById('delete_guest_img');
                        if (deleteInput) {
                            deleteInput.value = '1';
                        }

                        // Update button state
                        this.classList.add('deleting');
                        this.disabled = true;
                        this.innerHTML = '<i class="fa fa-check"></i> Will be deleted on save';
                        this.title = 'Will be deleted on save';

                        // Fade out the container
                        const container = this.closest('.guest-image-container');
                        if (container) {
                            container.style.opacity = '0.5';

                            // Add deletion notice
                            let notice = container.querySelector('.deletion-notice');
                            if (!notice) {
                                notice = document.createElement('div');
                                notice.className = 'deletion-notice alert alert-warning mt-2 mb-0';
                                notice.innerHTML =
                                    '<i class="fa fa-exclamation-triangle"></i> This guest image will be deleted when you save the form.';
                                container.appendChild(notice);
                            }
                        }
                    }
                });
            }

            // Handle background image deletion
            if (deleteBackgroundBtn) {
                deleteBackgroundBtn.addEventListener('click', function(e) {
                    e.preventDefault();

                    if (confirm('Are you sure you want to delete the current background image?')) {
                        // Mark for deletion
                        const deleteInput = document.getElementById('delete_background_img');
                        if (deleteInput) {
                            deleteInput.value = '1';
                        }

                        // Update button state
                        this.classList.add('deleting');
                        this.disabled = true;
                        this.innerHTML = '<i class="fa fa-check"></i> Will be deleted on save';
                        this.title = 'Will be deleted on save';

                        // Fade out the container
                        const container = this.closest('.background-image-container');
                        if (container) {
                            container.style.opacity = '0.5';

                            // Add deletion notice
                            let notice = container.querySelector('.deletion-notice');
                            if (!notice) {
                                notice = document.createElement('div');
                                notice.className = 'deletion-notice alert alert-warning mt-2 mb-0';
                                notice.innerHTML =
                                    '<i class="fa fa-exclamation-triangle"></i> This background image will be deleted when you save the form.';
                                container.appendChild(notice);
                            }
                        }
                    }
                });
            }

            // File input handlers
            const fileInputs = document.querySelectorAll('input[type="file"]');

            fileInputs.forEach(input => {
                input.addEventListener('change', function() {
                    const file = this.files[0];
                    const label = this.nextElementSibling;
                    const previewContainer = this.parentNode.parentNode.querySelector(
                        '.image-preview');
                    const maxSize = parseInt(this.dataset.maxSize) * 1024; // Convert KB to bytes

                    // Update label
                    if (file) {
                        label.textContent = file.name;

                        // Validate file size
                        if (file.size > maxSize) {
                            alert(`File size must be less than ${this.dataset.maxSize}KB`);
                            this.value = '';
                            label.textContent = 'Choose file...';
                            if (previewContainer) previewContainer.style.display = 'none';
                            return;
                        }

                        // Show preview for images
                        if (file.type.startsWith('image/') && previewContainer) {
                            const reader = new FileReader();
                            reader.onload = function(e) {
                                const img = previewContainer.querySelector('img');
                                img.src = e.target.result;
                                previewContainer.style.display = 'block';
                            };
                            reader.readAsDataURL(file);
                        }
                    } else {
                        label.textContent = this.dataset.placeholder || 'Choose file...';
                        if (previewContainer) previewContainer.style.display = 'none';
                    }
                });
            });

            // Form validation
            const form = document.querySelector('.room-form');
            if (form) {
                form.addEventListener('submit', function(e) {
                    let isValid = true;

                    // Check required fields
                    const requiredFields = this.querySelectorAll('[required]');
                    requiredFields.forEach(field => {
                        if (!field.value.trim()) {
                            field.classList.add('is-invalid');
                            isValid = false;
                        } else {
                            field.classList.remove('is-invalid');
                        }
                    });

                    // Check password length
                    const password = document.getElementById('password_cast');
                    if (password && password.value && password.value.length > 12) {
                        password.classList.add('is-invalid');
                        isValid = false;
                    }

                    // if (!isValid) {
                    //     e.preventDefault();

                    //     // Scroll to first error
                    //     const firstError = this.querySelector('.is-invalid');
                    //     if (firstError) {
                    //         firstError.scrollIntoView({
                    //             behavior: 'smooth',
                    //             block: 'center'
                    //         });
                    //         firstError.focus();
                    //     }
                    // }
                });
            }
        });
    </script>
@endsection