@extends('layouts.app')

@section('title', 'Migrate Employees to Users')

@section('content')
<div class="container-fluid">
    <!-- Header Section -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="page-header-modern">
                <div class="header-content">
                    <div class="header-left">
                        <div class="header-icon">
                            <i class="fas fa-user-plus"></i>
                        </div>
                        <div class="header-text">
                            <h2 class="header-title">Migrate Employees to Users</h2>
                            <p class="header-subtitle">Convert employees to user accounts for login access</p>
                        </div>
                    </div>
                    <div class="header-right">
                        <a href="{{ route('employees.index') }}" class="btn btn-secondary-modern">
                            <i class="fas fa-arrow-left"></i>
                            <span>Back to Employees</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Form Section -->
    <div class="row">
        <div class="col-12">
            <div class="card-modern">
                <div class="card-header-modern">
                    <h5 class="card-title-modern">
                        <i class="fas fa-users me-2"></i>
                        Select Employees to Migrate
                    </h5>
                </div>
                <div class="card-body-modern">
                    @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"></button>
                        </div>
                    @endif

                    @if(session('error'))
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            {{ session('error') }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>
                    @endif

                    <form action="{{ route('employees.migrate') }}" method="POST" class="form-modern">
                        @csrf
                        
                        <div class="form-section">
                            <h6 class="form-section-title">Migration Settings</h6>
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="form-group-modern">
                                        <label for="isp_id" class="form-label-modern">
                                            <i class="fas fa-building me-1"></i>
                                            ISP <span class="text-danger">*</span>
                                        </label>
                                        <select class="form-control-modern @error('isp_id') is-invalid @enderror" 
                                                id="isp_id" name="isp_id" required>
                                            <option value="">Select ISP</option>
                                            @foreach($ispBranches as $isp)
                                                <option value="{{ $isp->id }}" {{ old('isp_id') == $isp->id ? 'selected' : '' }}>
                                                    {{ $isp->name }} ({{ $isp->code }})
                                                </option>
                                            @endforeach
                                        </select>
                                        @error('isp_id')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-4" id="branch-field-container" style="display: none;">
                                    <div class="form-group-modern">
                                        <label for="branch_id" class="form-label-modern">
                                            <i class="fas fa-sitemap me-1"></i>
                                            Target Branch <span class="text-danger">*</span>
                                        </label>
                                        <select class="form-control-modern @error('branch_id') is-invalid @enderror" 
                                                id="branch_id" name="branch_id" required>
                                            <option value="">Select Branch</option>
                                        </select>
                                        @error('branch_id')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group-modern">
                                        <label for="password" class="form-label-modern">
                                            <i class="fas fa-lock me-1"></i>
                                            Default Password <span class="text-danger">*</span>
                                        </label>
                                        <input type="password" class="form-control-modern @error('password') is-invalid @enderror" 
                                               id="password" name="password" value="{{ old('password') }}" 
                                               placeholder="Enter default password" required>
                                        @error('password')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group-modern">
                                        <label for="role" class="form-label-modern">
                                            <i class="fas fa-user-tag me-1"></i>
                                            Default Role <span class="text-danger">*</span>
                                        </label>
                                        <select class="form-control-modern @error('role') is-invalid @enderror" 
                                                id="role" name="role" required>
                                            <option value="">Select Role</option>
                                            @foreach($roles as $role)
                                                <option value="{{ $role->slug }}" {{ old('role') == $role->slug ? 'selected' : '' }}>
                                                    {{ $role->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                        @error('role')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="form-section">
                            <h6 class="form-section-title">Select Employees</h6>
                            <div class="employee-selection">
                                <div class="selection-controls mb-3">
                                    <button type="button" class="btn btn-sm btn-outline-primary" onclick="selectAll()">
                                        <i class="fas fa-check-square"></i> Select All
                                    </button>
                                    <button type="button" class="btn btn-sm btn-outline-secondary" onclick="deselectAll()">
                                        <i class="fas fa-square"></i> Deselect All
                                    </button>
                                    <button type="button" class="btn btn-sm btn-outline-info" onclick="filterByBranch()">
                                        <i class="fas fa-filter"></i> Filter by Branch
                                    </button>
                                </div>

                                <div class="employee-grid">
                                    @foreach($employees as $employee)
                                        <div class="employee-card" data-branch="{{ $employee->branch_id }}">
                                            <div class="employee-checkbox">
                                                <input type="checkbox" name="employee_ids[]" value="{{ $employee->id }}" 
                                                       id="employee_{{ $employee->id }}" class="employee-check">
                                                <label for="employee_{{ $employee->id }}" class="employee-label">
                                                    <div class="employee-info">
                                                        <div class="employee-name">{{ $employee->name }}</div>
                                                        <div class="employee-details">
                                                            <span class="employee-email">{{ $employee->email }}</span>
                                                            <span class="employee-position">{{ $employee->position }}</span>
                                                        </div>
                                                        <div class="employee-meta">
                                                            @if($employee->branch)
                                                                <span class="branch-badge">{{ $employee->branch->name }}</span>
                                                            @endif
                                                            @if($employee->department)
                                                                <span class="department-badge">{{ $employee->department->name }}</span>
                                                            @endif
                                                        </div>
                                                    </div>
                                                </label>
                                            </div>
                                        </div>
                                    @endforeach
                                    
                                    @if($employees->count() == 0)
                                        <div class="empty-state">
                                            <div class="empty-content">
                                                <div class="empty-icon">
                                                    <i class="fas fa-check-circle"></i>
                                                </div>
                                                <div class="empty-title">All Employees Migrated</div>
                                                <div class="empty-text">
                                                    All active employees have already been migrated to user accounts. 
                                                    No employees available for migration.
                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>

                        <div class="form-actions-modern">
                            <button type="submit" class="btn btn-success-modern">
                                <i class="fas fa-user-plus"></i>
                                <span>Migrate Selected Employees</span>
                            </button>
                            <a href="{{ route('employees.index') }}" class="btn btn-secondary-modern">
                                <i class="fas fa-times"></i>
                                <span>Cancel</span>
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function selectAll() {
    document.querySelectorAll('.employee-check').forEach(checkbox => {
        checkbox.checked = true;
    });
}

function deselectAll() {
    document.querySelectorAll('.employee-check').forEach(checkbox => {
        checkbox.checked = false;
    });
}

function filterByBranch() {
    const branchId = document.getElementById('branch_id').value;
    if (!branchId) {
        alert('Please select a branch first');
        return;
    }
    
    document.querySelectorAll('.employee-card').forEach(card => {
        if (card.dataset.branch === branchId) {
            card.style.display = 'block';
            card.querySelector('.employee-check').checked = true;
        } else {
            card.style.display = 'none';
            card.querySelector('.employee-check').checked = false;
        }
    });
}
</script>

@section('styles')
<style>
.page-header-modern{background:#2F4255;border-radius:12px;padding:2rem;margin-bottom:1.5rem;box-shadow:0 4px 20px rgba(47,66,85,0.3)}
.header-content{display:flex;justify-content:space-between;align-items:center}
.header-left{display:flex;align-items:center;gap:1rem}
.header-icon{width:60px;height:60px;background:rgba(255,255,255,0.1);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;color:white}
.header-title{color:white;font-size:1.75rem;font-weight:700;margin:0}
.header-subtitle{color:rgba(255,255,255,0.8);font-size:0.95rem;margin:0.25rem 0 0 0}
.btn-primary-modern,.btn-secondary-modern,.btn-success-modern{border:none;border-radius:8px;padding:0.75rem 1.5rem;font-weight:600;display:flex;align-items:center;gap:0.5rem;transition:all 0.3s ease;text-decoration:none}
.btn-primary-modern{background:#3b82f6;color:white;box-shadow:0 2px 10px rgba(59,130,246,0.3)}
.btn-primary-modern:hover{background:#2563eb;transform:translateY(-2px);box-shadow:0 4px 20px rgba(59,130,246,0.4);color:white}
.btn-secondary-modern{background:#6b7280;color:white;box-shadow:0 2px 10px rgba(107,114,128,0.3)}
.btn-secondary-modern:hover{background:#4b5563;transform:translateY(-2px);box-shadow:0 4px 20px rgba(107,114,128,0.4);color:white}
.btn-success-modern{background:#10b981;color:white;box-shadow:0 2px 10px rgba(16,185,129,0.3)}
.btn-success-modern:hover{background:#059669;transform:translateY(-2px);box-shadow:0 4px 20px rgba(16,185,129,0.4);color:white}
.card-modern{background:white;border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,0.08);border:none;overflow:hidden}
.card-header-modern{background:#f8fafc;padding:1.5rem;border-bottom:1px solid #e5e7eb}
.card-title-modern{color:#374151;font-size:1.1rem;font-weight:600;margin:0;display:flex;align-items:center}
.card-body-modern{padding:2rem}
.form-modern{max-width:none}
.form-section{margin-bottom:2rem}
.form-section-title{color:#374151;font-size:1rem;font-weight:600;margin-bottom:1rem;padding-bottom:0.5rem;border-bottom:2px solid #e5e7eb}
.form-group-modern{margin-bottom:1.5rem}
.form-label-modern{color:#374151;font-weight:600;font-size:0.875rem;margin-bottom:0.5rem;display:flex;align-items:center}
.form-control-modern{width:100%;padding:0.75rem 1rem;border:2px solid #e5e7eb;border-radius:8px;font-size:0.95rem;transition:all 0.2s ease;background:white}
.form-control-modern:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,0.1)}
.form-control-modern.is-invalid{border-color:#dc2626}
.form-control-modern.is-invalid:focus{box-shadow:0 0 0 3px rgba(220,38,38,0.1)}
.employee-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1rem}
.employee-card{background:#f9fafb;border:2px solid #e5e7eb;border-radius:8px;transition:all 0.2s ease}
.employee-card:hover{border-color:#3b82f6;box-shadow:0 2px 8px rgba(59,130,246,0.1)}
.employee-checkbox{padding:1rem}
.employee-check{margin-right:0.75rem;width:1.25rem;height:1.25rem}
.employee-label{display:flex;align-items:flex-start;cursor:pointer;margin:0}
.employee-info{flex:1}
.employee-name{font-weight:600;color:#111827;font-size:1rem;margin-bottom:0.25rem}
.employee-details{margin-bottom:0.5rem}
.employee-email{display:block;color:#6b7280;font-size:0.875rem}
.employee-position{display:block;color:#374151;font-size:0.875rem;font-weight:500}
.employee-meta{display:flex;gap:0.5rem;flex-wrap:wrap}
.branch-badge{background:#dcfce7;color:#166534;padding:0.125rem 0.375rem;border-radius:4px;font-size:0.75rem;font-weight:600}
.department-badge{background:#fef3c7;color:#92400e;padding:0.125rem 0.375rem;border-radius:4px;font-size:0.75rem;font-weight:600}
.form-actions-modern{display:flex;gap:1rem;padding-top:1rem;border-top:1px solid #e5e7eb;margin-top:2rem}
.empty-state{text-align:center;padding:3rem 1rem}
.empty-content{max-width:400px;margin:0 auto}
.empty-icon{font-size:3rem;color:#10b981;margin-bottom:1rem}
.empty-title{color:#374151;font-size:1.25rem;font-weight:600;margin-bottom:0.5rem}
.empty-text{color:#6b7280;margin-bottom:1.5rem}
.selection-controls{display:flex;gap:0.5rem;flex-wrap:wrap}
@media (max-width:768px){
.header-content{flex-direction:column;gap:1rem;text-align:center}
.form-actions-modern{flex-direction:column}
.card-body-modern{padding:1rem}
.employee-grid{grid-template-columns:1fr}
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const ispSelect = document.getElementById('isp_id');
    const branchSelect = document.getElementById('branch_id');
    const branchContainer = document.getElementById('branch-field-container');
    
    // Function to load branches based on selected ISP
    function loadBranchesByISP(ispId) {
        if (!ispId) {
            // Hide branch field if no ISP selected
            branchContainer.style.display = 'none';
            branchSelect.innerHTML = '<option value="">Select Branch</option>';
            branchSelect.required = false;
            return;
        }
        
        // Show branch field
        branchContainer.style.display = 'block';
        branchSelect.required = true;
        
        // Show loading state
        branchSelect.innerHTML = '<option value="">Loading branches...</option>';
        branchSelect.disabled = true;
        
        // Fetch branches from API
        fetch(`/api/branches/by-isp/${ispId}`)
            .then(response => response.json())
            .then(branches => {
                // Clear and populate branch select
                branchSelect.innerHTML = '<option value="">Select Branch</option>';
                
                branches.forEach(branch => {
                    const option = document.createElement('option');
                    option.value = branch.id;
                    option.textContent = branch.name;
                    branchSelect.appendChild(option);
                });
                
                branchSelect.disabled = false;
            })
            .catch(error => {
                console.error('Error loading branches:', error);
                branchSelect.innerHTML = '<option value="">Error loading branches</option>';
                branchSelect.disabled = false;
            });
    }
    
    // Event listener for ISP selection change
    ispSelect.addEventListener('change', function() {
        const selectedISP = this.value;
        loadBranchesByISP(selectedISP);
    });
    
    // Load branches if ISP is already selected (for form validation errors)
    if (ispSelect.value) {
        loadBranchesByISP(ispSelect.value);
    }
});
</script>
@endsection
@endsection