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

            <!-- Page Header -->
            <h1 class="page-header">Create New 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">
                            <ul class="mb-0">
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

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

                        <!-- 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="{{ old('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 }}"
                                                    {{ old('room_type_id') == $roomType->id ? 'selected' : '' }}>
                                                    {{ $roomType->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="description" class="form-label">Description</label>
                                <textarea name="description" id="description" class="form-control @error('description') is-invalid @enderror"
                                    rows="3" placeholder="Optional room description">{{ old('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="{{ old('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>
                                        <div class="image-preview mt-2" id="guest-image-preview" style="display: none;">
                                            <img src="" alt="Preview" class="img-thumbnail"
                                                style="max-width: 150px;">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Welcome Greeting Notice -->
                        <div class="form-section">
                            <div class="alert alert-info">
                                <h6><i class="fa fa-info-circle"></i> Welcome Greeting Assignment</h6>
                                <p class="mb-0">
                                    Welcome greetings are now managed centrally. After creating this room, you can assign
                                    welcome greetings from the <strong>Welcome Greeting Management</strong> menu.
                                    <br>
                                    <a href="{{ route('welcome_greetings.index') }}"
                                        class="btn btn-sm btn-outline-info mt-2">
                                        <i class="fa fa-external-link"></i> Manage Welcome Greetings
                                    </a>
                                </p>
                            </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" maxlength="2048" placeholder="Enter WiFi network name"
                                            value="{{ old('username_cast') }}">
                                    </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="text" name="password_cast" id="password_cast"
                                                value="{{ old('password_cast') }}" class="form-control" 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 automatically generated when both
                                            SSID and password are provided
                                        </small>
                                    </div>
                                </div>
                            </div>
                        </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>
                                <div class="image-preview mt-2" id="background-image-preview" style="display: none;">
                                    <img src="" alt="Preview" class="img-thumbnail" style="max-width: 150px;">
                                </div>
                            </div>
                        </div>

                        <!-- Form Actions -->
                        <div class="form-actions">
                            <button type="submit" class="btn btn-custom btn-lg">
                                <i class="fa fa-save"></i> Create Room
                            </button>
                            <a href="{{ route('rooms.index') }}" class="btn btn-custom btn-lg">
                                <i class="fa fa-arrow-left"></i> Back
                            </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>

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

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

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

            .form-actions .btn {
                width: 100%;
                margin-bottom: 0.5rem;
                margin-right: 0;
            }
        }
    </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
            }

            // 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