@extends('layouts.app')

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

        <!-- begin #sidebar -->
        @include('partials.sidebar')
        <!-- end #sidebar -->

        <!-- begin #content -->
        <div id="content" class="content">
            <!-- begin breadcrumb -->
            <ol class="breadcrumb float-xl-right">
                <li class="breadcrumb-item"><a href="javascript:;">Home</a></li>
                <li class="breadcrumb-item"><a href="{{ route('rooms.index') }}">Room</a></li>
                <li class="breadcrumb-item active">Bulk WiFi Update</li>
            </ol>
            <!-- end breadcrumb -->

            <!-- begin page-header -->
            <h1 class="page-header">Bulk WiFi Credentials Update</h1>
            <!-- end page-header -->

            <!-- Success/Error Messages -->
            @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

            @if ($errors->any())
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    <i class="fa fa-exclamation-triangle"></i>
                    <strong>Error:</strong>
                    <ul class="mb-0 mt-2">
                        @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

            <!-- begin panel -->
            <div class="panel panel-inverse">
                <div class="panel-heading">
                    <h4 class="panel-title">Update WiFi Credentials and Generate QR Codes</h4>
                    <div class="panel-heading-btn">
                        <a href="{{ route('rooms.index') }}" class="btn btn-custom btn-sm">
                            <i class="fa fa-arrow-left"></i> Back to Rooms
                        </a>
                    </div>
                </div>
                <div class="panel-body">
                    <form action="{{ route('rooms.bulkWifiUpdate') }}" method="POST" id="bulkWifiForm">
                        @csrf

                        <!-- Room Selection -->
                        <div class="form-group row">
                            <label class="col-md-3 col-form-label">
                                Select Rooms <span class="text-danger">*</span>
                            </label>
                            <div class="col-md-9">
                                <div class="mb-3">
                                    <button type="button" class="btn btn-sm btn-custom" onclick="selectAllRooms()">
                                        <i class="fa fa-check-square"></i> Select All
                                    </button>
                                    <button type="button" class="btn btn-sm btn-secondary" onclick="deselectAllRooms()">
                                        <i class="fa fa-square"></i> Deselect All
                                    </button>
                                    <span class="ml-3 text-muted" id="selectedCount">0 rooms selected</span>
                                </div>

                                <div class="card bg-light">
                                    <div class="card-body" style="max-height: 400px; overflow-y: auto;">
                                        <div class="row">
                                            @foreach ($rooms as $room)
                                                <div class="col-md-3 col-sm-4 col-6 mb-2">
                                                    <div class="custom-control custom-checkbox">
                                                        <input type="checkbox" class="custom-control-input room-checkbox"
                                                            id="room_{{ $room->id }}" name="room_ids[]"
                                                            value="{{ $room->id }}"
                                                            {{ in_array($room->id, old('room_ids', [])) ? 'checked' : '' }}>
                                                        <label class="custom-control-label" for="room_{{ $room->id }}">
                                                            <strong>{{ $room->room }}</strong>
                                                            @if ($room->roomType)
                                                                <br><small
                                                                    class="text-muted">{{ $room->roomType->name }}</small>
                                                            @endif
                                                        </label>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>

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

                        <hr class="my-4">

                        <!-- WiFi Credentials Input -->
                        <div class="form-group row">
                            <label class="col-md-3 col-form-label" for="username_cast">
                                SSID <span class="text-danger">*</span>
                            </label>
                            <div class="col-md-9">
                                <input type="text" class="form-control @error('username_cast') is-invalid @enderror"
                                    id="username_cast" name="username_cast" value="{{ old('username_cast') }}"
                                    placeholder="Enter WiFi username (SSID)" required>
                                @error('username_cast')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <small class="form-text text-muted">Minimum 3 characters, maximum 255 characters. All
                                    selected rooms will use the same credentials.</small>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label class="col-md-3 col-form-label" for="password_cast">
                                Password <span class="text-danger">*</span>
                            </label>
                            <div class="col-md-9">
                                <div class="input-group">
                                    <input type="password" class="form-control @error('password_cast') is-invalid @enderror"
                                        id="password_cast" name="password_cast" value="{{ old('password_cast') }}"
                                        placeholder="Enter WiFi password" required>
                                    <div class="input-group-append">
                                        <button class="btn btn-secondary" type="button" onclick="togglePassword()">
                                            <i class="fa fa-eye" id="toggleIcon"></i>
                                        </button>
                                    </div>
                                    @error('password_cast')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <small class="form-text text-muted">Minimum 8 characters, maximum 255 characters</small>
                            </div>
                        </div>

                        <hr class="my-4">

                        <!-- Action Buttons -->
                        <div class="form-group row">
                            <div class="col-md-9 offset-md-3">
                                <button type="submit" class="btn btn-custom" id="submitBtn">
                                    <i class="fa fa-wifi"></i> Update WiFi & Generate QR Codes
                                </button>
                                <a href="{{ route('rooms.index') }}" class="btn btn-white">
                                    <i class="fa fa-times"></i> Cancel
                                </a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <!-- end panel -->
        </div>
        <!-- end #content -->
    </div>

    <style>
        .room-checkbox:checked~label {
            font-weight: bold;
            color: #348fe2;
        }

        .custom-control-label {
            cursor: pointer;
            user-select: none;
        }

        .form-group {
            margin-bottom: 1.5rem;
        }

        .card.bg-light {
            background-color: #f8f9fa !important;
            border: 1px solid #dee2e6;
        }

        .card-body {
            padding: 1.25rem;
        }
    </style>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Auto-hide alerts after 5 seconds
            setTimeout(function() {
                const alerts = document.querySelectorAll('.alert');
                alerts.forEach(function(alert) {
                    if (alert.querySelector('.close')) {
                        alert.querySelector('.close').click();
                    }
                });
            }, 5000);

            // Update selected count on checkbox change
            const checkboxes = document.querySelectorAll('.room-checkbox');
            checkboxes.forEach(function(checkbox) {
                checkbox.addEventListener('change', updateSelectedCount);
            });

            // Initial count update
            updateSelectedCount();

            // Form submission with confirmation
            const form = document.getElementById('bulkWifiForm');
            form.addEventListener('submit', function(e) {
                const checkedCount = document.querySelectorAll('.room-checkbox:checked').length;

                if (checkedCount === 0) {
                    e.preventDefault();
                    alert('Please select at least one room.');
                    return false;
                }

                const confirmMsg =
                    `Are you sure you want to update WiFi credentials for ${checkedCount} room(s)?\n\nAll selected rooms will use the same credentials.\nNew QR codes will be generated for all selected rooms.`;

                if (!confirm(confirmMsg)) {
                    e.preventDefault();
                    return false;
                }

                // Disable submit button to prevent double submission
                const submitBtn = document.getElementById('submitBtn');
                submitBtn.disabled = true;
                submitBtn.innerHTML = '<i class="fa fa-spinner fa-spin"></i> Processing...';
            });
        });

        function selectAllRooms() {
            const checkboxes = document.querySelectorAll('.room-checkbox');
            checkboxes.forEach(function(checkbox) {
                checkbox.checked = true;
            });
            updateSelectedCount();
        }

        function deselectAllRooms() {
            const checkboxes = document.querySelectorAll('.room-checkbox');
            checkboxes.forEach(function(checkbox) {
                checkbox.checked = false;
            });
            updateSelectedCount();
        }

        function updateSelectedCount() {
            const count = document.querySelectorAll('.room-checkbox:checked').length;
            document.getElementById('selectedCount').textContent = count + ' room(s) selected';
        }

        function togglePassword() {
            const passwordInput = document.getElementById('password_cast');
            const toggleIcon = document.getElementById('toggleIcon');

            if (passwordInput.type === 'password') {
                passwordInput.type = 'text';
                toggleIcon.classList.remove('fa-eye');
                toggleIcon.classList.add('fa-eye-slash');
            } else {
                passwordInput.type = 'password';
                toggleIcon.classList.remove('fa-eye-slash');
                toggleIcon.classList.add('fa-eye');
            }
        }
    </script>
@endsection