{{-- resources/views/invite_users.blade.php --}}

@extends('dashboard.layouts.main')

@section('content')
<div class="container mt-5">
    <div class="row justify-content-center">
        <div class="col-md-12">
            <!-- Invitation Card -->
            <div class="card shadow-sm">
                <div class="card-header bg-primary text-white">
                    <h4 class="mb-0">Invite Employee</h4>
                </div>
                <div class="card-body">
                    <!-- Validation Errors -->
                    @if ($errors->any())
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            <ul class="mb-0">
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                    @endif

                    <!-- Success Message -->
                    @if (session('success'))
                        <div class="alert alert-success alert-dismissible fade show" role="alert">
                            {{ session('success') }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                    @endif

                    <!-- Error Message -->
                    <div id="error-msg" class="alert alert-danger d-none alert-dismissible fade show" role="alert">
                        <span id="error-text"></span>
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                    
                    <!-- Invitation Form -->
                    <form action="{{ route('invite.formsubmit to user') }}" method="POST">
                        @csrf
                        <!-- Permission Toggle -->
                        <div class="mb-3">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" name="checkpermission" id="permissionToggle">
                                <label class="form-check-label" for="permissionToggle">
                                    <span id="permissionText">Without Owner Invite</span>
                                </label>
                            </div>
                        </div>
                        <!-- Invitation Rows -->
                        <div id="invite-rows">
                            <div class="invite-row mb-3">
                                <div class="row g-2">
                                    <div class="col-md-3">
                                        <input 
                                            type="text" 
                                            name="users[0][username]" 
                                            class="form-control @error('users.0.username') is-invalid @enderror" 
                                            placeholder="Full Name" 
                                            required
                                        >
                                        @error('users.0.username')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-md-4">
                                        <input 
                                            type="email" 
                                            name="users[0][email]" 
                                            class="form-control @error('users.0.email') is-invalid @enderror" 
                                            placeholder="Email Address" 
                                            required
                                        >
                                        @error('users.0.email')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-md-3">
                                        <input 
                                            type="text" 
                                            name="users[0][designation]" 
                                            class="form-control @error('users.0.designation') is-invalid @enderror" 
                                            placeholder="Designation" 
                                            required
                                        >
                                        @error('users.0.designation')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <!-- Role Dropdown -->
                                    <div class="col-md-2">
                                        <select 
                                            name="users[0][role]" 
                                            class="form-select @error('users.0.role') is-invalid @enderror" 
                                            required
                                        >
                                            @foreach ($roles as $role)
                                                <option value="{{ $role['id'] }}">{{ $role['name'] }}</option>
                                            @endforeach
                                        </select>
                                        @error('users.0.role')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <!-- Add Row Button -->
                                    <div class="col-md-1 d-flex align-items-center">
                                        <button type="button" class="btn btn-success btn-sm add-row">Add
                                            <i class="bi bi-plus"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Submit Button -->
                        <div class="text-center mt-4">
                            <button type="submit" class="btn btn-primary btn-sm">
                                <i class="bi bi-send-fill"></i> Send Invitations
                            </button>
                        </div>
                    </form>
                </div>
            </div>
            <!-- End of Invitation Card -->
        </div>
    </div>
</div>

<!-- Invitation Report -->

<!-- JavaScript for Dynamic Rows and Permission Toggle -->
<script>
    document.addEventListener('DOMContentLoaded', () => {
        let rowIndex = 1;
        const maxRows = 50; // Maximum rows allowed
        const roles = @json($roles); // Pass roles from PHP to JavaScript

        // Permission toggle functionality
        const permissionToggle = document.getElementById('permissionToggle');
        const permissionText = document.getElementById('permissionText');

        permissionToggle.addEventListener('change', () => {
            if (permissionToggle.checked) {
                permissionText.textContent = 'With Owner Invite';
            } else {
                permissionText.textContent = 'Without Owner Invite';
            }
        });

        // Add Row Button Event Listener
        document.querySelector('.add-row').addEventListener('click', () => {
            const totalRows = document.querySelectorAll('.invite-row').length;

            if (totalRows >= maxRows) {
                showError(`You can add a maximum of ${maxRows} users only.`);
                return;
            }

            // Generate options for the dropdown
            let options;
            roles.forEach(role => {
                options += `<option value="${role.id}">${role.name}</option>`;
            });

            // New Invite Row HTML
            const newRow = `
                <div class="invite-row mb-3">
                    <div class="row g-2">
                        <div class="col-md-3">
                            <input 
                                type="text" 
                                name="users[${rowIndex}][username]" 
                                class="form-control" 
                                placeholder="Full Name" 
                                required
                            >
                        </div>
                        <div class="col-md-4">
                            <input 
                                type="email" 
                                name="users[${rowIndex}][email]" 
                                class="form-control" 
                                placeholder="Email Address" 
                                required
                            >
                        </div>
                        <div class="col-md-3">
                            <input 
                                type="text" 
                                name="users[${rowIndex}][designation]" 
                                class="form-control" 
                                placeholder="Designation" 
                                required
                            >
                        </div>
                        <div class="col-md-2">
                            <select 
                                name="users[${rowIndex}][role]" 
                                class="form-select" 
                                required
                            >
                                ${options}
                            </select>
                        </div>
                        <div class="col-md-1 d-flex align-items-center">
                            <button type="button" class="btn btn-danger btn-sm remove-row">
                                Delete<i class="bi bi-dash"></i>
                            </button>
                        </div>
                    </div>
                </div>`;

            // Append the new row
            document.getElementById('invite-rows').insertAdjacentHTML('beforeend', newRow);
            rowIndex++;
        });

        // Remove Row Event Listener using Event Delegation
        document.addEventListener('click', (e) => {
            if (e.target.closest('.remove-row')) {
                e.target.closest('.invite-row').remove();
                hideError();
            }
        });

        // Function to Show Error Message
        function showError(message) {
            const errorMsg = document.getElementById('error-msg');
            const errorText = document.getElementById('error-text');
            errorText.textContent = message;
            errorMsg.classList.remove('d-none');
        }

        // Function to Hide Error Message
        function hideError() {
            const errorMsg = document.getElementById('error-msg');
            if (!errorMsg.classList.contains('d-none')) {
                errorMsg.classList.add('d-none');
            }
        }
    });
</script>
@endsection