@extends('layouts.app')

@section('title', 'Add Employee')

@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-tie"></i>
                        </div>
                        <div class="header-text">
                            <h2 class="header-title">Add New Employee</h2>
                            <p class="header-subtitle">Add a new employee to the system</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 List</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Form Section -->
    <div class="row">
        <div class="col-lg-10">
            <div class="card-modern">
                <div class="card-header-modern">
                    <h5 class="card-title-modern">
                        <i class="fas fa-info-circle me-2"></i>
                        Employee Information
                    </h5>
                </div>
                <div class="card-body-modern">
                    <form action="{{ route('employees.store') }}" method="POST" class="form-modern">
                        @csrf
                        
                        <div class="form-section">
                            <h6 class="form-section-title">Personal Information</h6>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group-modern">
                                        <label for="name" class="form-label-modern">
                                            <i class="fas fa-user me-1"></i>
                                            Full Name <span class="text-danger">*</span>
                                        </label>
                                        <input type="text" class="form-control-modern @error('name') is-invalid @enderror" 
                                               id="name" name="name" value="{{ old('name') }}" 
                                               placeholder="Enter employee full name" required>
                                        @error('name')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group-modern">
                                        <label for="email" class="form-label-modern">
                                            <i class="fas fa-envelope me-1"></i>
                                            Email Address <span class="text-danger">*</span>
                                        </label>
                                        <input type="email" class="form-control-modern @error('email') is-invalid @enderror" 
                                               id="email" name="email" value="{{ old('email') }}" 
                                               placeholder="Enter email address" required>
                                        @error('email')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group-modern">
                                        <label for="phone" class="form-label-modern">
                                            <i class="fas fa-phone me-1"></i>
                                            Office Phone Number
                                        </label>
                                        <input type="text" class="form-control-modern @error('phone') is-invalid @enderror" 
                                               id="phone" name="phone" value="{{ old('phone') }}" 
                                               placeholder="Enter office phone number">
                                        @error('phone')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group-modern">
                                        <label for="personal_contact_number" class="form-label-modern">
                                            <i class="fas fa-mobile-alt me-1"></i>
                                            Personal Contact Number
                                        </label>
                                        <input type="text" class="form-control-modern @error('personal_contact_number') is-invalid @enderror" 
                                               id="personal_contact_number" name="personal_contact_number" value="{{ old('personal_contact_number') }}" 
                                               placeholder="Enter personal contact number">
                                        @error('personal_contact_number')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group-modern">
                                        <label for="gender" class="form-label-modern">
                                            <i class="fas fa-venus-mars me-1"></i>
                                            Gender
                                        </label>
                                        <select class="form-control-modern @error('gender') is-invalid @enderror" 
                                                id="gender" name="gender">
                                            <option value="">Select Gender</option>
                                            <option value="male" {{ old('gender') == 'male' ? 'selected' : '' }}>Male</option>
                                            <option value="female" {{ old('gender') == 'female' ? 'selected' : '' }}>Female</option>
                                            <option value="other" {{ old('gender') == 'other' ? 'selected' : '' }}>Other</option>
                                        </select>
                                        @error('gender')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group-modern">
                                        <label for="marital_status" class="form-label-modern">
                                            <i class="fas fa-heart me-1"></i>
                                            Marital Status
                                        </label>
                                        <select class="form-control-modern @error('marital_status') is-invalid @enderror" 
                                                id="marital_status" name="marital_status">
                                            <option value="">Select Marital Status</option>
                                            <option value="single" {{ old('marital_status') == 'single' ? 'selected' : '' }}>Single</option>
                                            <option value="married" {{ old('marital_status') == 'married' ? 'selected' : '' }}>Married</option>
                                            <option value="divorced" {{ old('marital_status') == 'divorced' ? 'selected' : '' }}>Divorced</option>
                                            <option value="widowed" {{ old('marital_status') == 'widowed' ? 'selected' : '' }}>Widowed</option>
                                        </select>
                                        @error('marital_status')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group-modern">
                                        <label for="date_of_birth" class="form-label-modern">
                                            <i class="fas fa-birthday-cake me-1"></i>
                                            Date of Birth
                                        </label>
                                        <input type="date" class="form-control-modern @error('date_of_birth') is-invalid @enderror" 
                                               id="date_of_birth" name="date_of_birth" value="{{ old('date_of_birth') }}">
                                        @error('date_of_birth')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group-modern">
                                        <label for="nid_number" class="form-label-modern">
                                            <i class="fas fa-id-card me-1"></i>
                                            NID Number/Birth Certificate
                                        </label>
                                        <input type="text" class="form-control-modern @error('nid_number') is-invalid @enderror" 
                                               id="nid_number" name="nid_number" value="{{ old('nid_number') }}" 
                                               placeholder="Enter NID Number or Birth Certificate">
                                        @error('nid_number')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                            <div class="form-group-modern">
                                <label for="address" class="form-label-modern">
                                    <i class="fas fa-map-marker-alt me-1"></i>
                                    Address
                                </label>
                                <textarea class="form-control-modern @error('address') is-invalid @enderror" 
                                          id="address" name="address" rows="3" 
                                          placeholder="Enter employee address">{{ old('address') }}</textarea>
                                @error('address')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="form-section">
                            <h6 class="form-section-title">Job Information</h6>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group-modern">
                                        <label for="position" class="form-label-modern">
                                            <i class="fas fa-briefcase me-1"></i>
                                            Position <span class="text-danger">*</span>
                                        </label>
                                        <input type="text" class="form-control-modern @error('position') is-invalid @enderror" 
                                               id="position" name="position" value="{{ old('position') }}" 
                                               placeholder="Enter job position" required>
                                        @error('position')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group-modern">
                                        <label for="department_id" class="form-label-modern">
                                            <i class="fas fa-building me-1"></i>
                                            Department <span class="text-danger">*</span>
                                        </label>
                                        <select class="form-control-modern @error('department_id') is-invalid @enderror" 
                                                id="department_id" name="department_id" required>
                                            <option value="">Select Department</option>
                                            @foreach($departments as $department)
                                                <option value="{{ $department->id }}" {{ old('department_id') == $department->id ? 'selected' : '' }}>
                                                    {{ $department->name }} ({{ $department->code }})
                                                </option>
                                            @endforeach
                                        </select>
                                        @error('department_id')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group-modern">
                                        <label for="salary" class="form-label-modern">
                                            <i class="fas fa-money-bill-wave me-1"></i>
                                            Salary <span class="text-danger">*</span>
                                        </label>
                                        <input type="number" step="0.01" class="form-control-modern @error('salary') is-invalid @enderror" 
                                               id="salary" name="salary" value="{{ old('salary') }}" 
                                               placeholder="Enter salary amount" required>
                                        @error('salary')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group-modern">
                                        <label for="hire_date" class="form-label-modern">
                                            <i class="fas fa-calendar me-1"></i>
                                            Hire Date <span class="text-danger">*</span>
                                        </label>
                                        <input type="date" class="form-control-modern @error('hire_date') is-invalid @enderror" 
                                               id="hire_date" name="hire_date" value="{{ old('hire_date') }}" required>
                                        @error('hire_date')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <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-6" id="branch-field-container" style="display: none;">
                                    <div class="form-group-modern">
                                        <label for="branch_ids" class="form-label-modern">
                                            <i class="fas fa-sitemap me-1"></i>
                                            Branches <span class="text-danger">*</span>
                                        </label>
                                        <select class="form-control-modern @error('branch_ids') is-invalid @enderror" 
                                                id="branch_ids" name="branch_ids[]" multiple required>
                                            <option value="">Select Branches</option>
                                        </select>
                                        <small class="form-text text-muted">Hold Ctrl/Cmd to select multiple branches</small>
                                        @error('branch_ids')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="form-section">
                            <h6 class="form-section-title">Status</h6>
                            <div class="form-group-modern">
                                <label for="status" class="form-label-modern">
                                    <i class="fas fa-toggle-on me-1"></i>
                                    Employee Status
                                </label>
                                <div class="switch-container">
                                    <div class="form-check form-switch-modern">
                                        <input class="form-check-input-modern" type="checkbox" id="status" 
                                               name="status" value="1" {{ old('status', true) ? 'checked' : '' }}>
                                        <label class="form-check-label-modern" for="status">
                                            <span class="switch-label">Active</span>
                                            <span class="switch-description">Enable this employee</span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="form-actions-modern">
                            <button type="submit" class="btn btn-primary-modern">
                                <i class="fas fa-save"></i>
                                <span>Add Employee</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>

@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{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}
.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)}
.switch-container{padding:0.5rem 0}
.form-switch-modern{display:flex;align-items:center;gap:1rem}
.form-check-input-modern{width:3rem;height:1.5rem;background-color:#e5e7eb;border:none;border-radius:1rem;position:relative;cursor:pointer;transition:all 0.3s ease}
.form-check-input-modern:checked{background-color:#10b981}
.form-check-input-modern:checked::before{transform:translateX(1.5rem)}
.form-check-input-modern::before{content:'';position:absolute;top:0.125rem;left:0.125rem;width:1.25rem;height:1.25rem;background:white;border-radius:50%;transition:all 0.3s ease;box-shadow:0 2px 4px rgba(0,0,0,0.2)}
.form-check-label-modern{display:flex;flex-direction:column;cursor:pointer}
.switch-label{font-weight:600;color:#374151;font-size:0.875rem}
.switch-description{font-size:0.75rem;color:#6b7280;margin-top:0.125rem}
.form-actions-modern{display:flex;gap:1rem;padding-top:1rem;border-top:1px solid #e5e7eb;margin-top:2rem}
/* Multiple select styling */
select[multiple] {
    min-height: 120px;
    padding: 0.5rem;
}

select[multiple] option {
    padding: 0.5rem;
    margin: 0.25rem 0;
    border-radius: 4px;
}

select[multiple] option:checked {
    background-color: #3b82f6;
    color: white;
}

.badge {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
}

@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}
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const ispSelect = document.getElementById('isp_id');
    const branchSelect = document.getElementById('branch_ids');
    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 Branches</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 = '';
                
                branches.forEach(branch => {
                    const option = document.createElement('option');
                    option.value = branch.id;
                    option.textContent = branch.name + (branch.code ? ' (' + branch.code + ')' : '');
                    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);
    }
    
    // Add visual feedback for multiple selection
    branchSelect.addEventListener('change', function() {
        const selectedCount = this.selectedOptions.length;
        const label = document.querySelector('label[for="branch_ids"]');
        if (selectedCount > 0) {
            label.innerHTML = '<i class="fas fa-sitemap me-1"></i>Branches <span class="text-danger">*</span> <span class="badge badge-primary ms-2">' + selectedCount + ' selected</span>';
        } else {
            label.innerHTML = '<i class="fas fa-sitemap me-1"></i>Branches <span class="text-danger">*</span>';
        }
    });
});
</script>
@endsection
@endsection