@extends('layouts.app')

@section('title', 'Add Staff Member | Institution Axis')

@section('sidebar-menu')
    @include('schooladmin.partials.sidebar')
@endsection

@section('sidebar-footer')
    <p>{{ auth()->user()->school?->name ?? 'Institution Axis' }}</p>
@endsection

@section('breadcrumb')
    <span><a href="{{ route('schooladmin.dashboard') }}">Home</a></span> /
    <span><a href="{{ route('schooladmin.staff.index') }}">Staff</a></span> /
    <span class="active-page">Add Staff</span>
@endsection

@section('navbar-right')
    <div class="notification-icon"><i class="fas fa-bell"></i><span class="badge-notify">5</span></div>
    <div class="profile-dropdown dropdown">
        <a href="#" class="dropdown-toggle" data-bs-toggle="dropdown">
            <img src="https://ui-avatars.com/api/?background=e54027&color=fff&name=Admin" class="avatar-sm">
            <span>{{ auth()->user()->name }}</span>
            <i class="fas fa-chevron-down"></i>
        </a>
        <ul class="dropdown-menu dropdown-menu-end">
            <li><a class="dropdown-item text-danger" href="{{ route('logout') }}">Logout</a></li>
        </ul>
    </div>
@endsection

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h4 class="fw-bold mb-0"><i class="fas fa-user-plus me-2 text-primary"></i>Add Staff Member</h4>
        <small class="text-muted">Register a new teacher or support staff</small>
    </div>
    <a href="{{ route('schooladmin.staff.index') }}" class="btn btn-outline-secondary rounded-pill px-3">
        <i class="fas fa-arrow-left me-1"></i>Back to Staff
    </a>
</div>

@if($errors->any())
<div class="alert alert-danger">
    <ul class="mb-0">@foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul>
</div>
@endif

<form action="{{ route('schooladmin.staff.store') }}" method="POST" enctype="multipart/form-data">
    @csrf

    {{-- Account Mode Toggle --}}
    <div class="card shadow-sm border-0 rounded-4 mb-4">
        <div class="card-header bg-white py-3">
            <h6 class="mb-0 fw-semibold"><i class="fas fa-user-circle me-2 text-primary"></i>Account Setup</h6>
        </div>
        <div class="card-body">
            <div class="mb-3">
                <label class="form-label fw-semibold">Registration Mode</label>
                <div class="d-flex gap-3">
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="create_mode" id="modeExisting"
                               value="existing" checked onclick="toggleMode('existing')">
                        <label class="form-check-label" for="modeExisting">
                            Link to an existing user account
                        </label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="create_mode" id="modeNew"
                               value="new" onclick="toggleMode('new')">
                        <label class="form-check-label" for="modeNew">
                            Create a new user account
                        </label>
                    </div>
                </div>
            </div>

            {{-- Existing user selector --}}
            <div id="existingUserSection">
                <label class="form-label">Select Existing Teacher <span class="text-danger">*</span></label>
                <select name="user_id" class="form-select @error('user_id') is-invalid @enderror">
                    <option value="">— Select teacher —</option>
                    @foreach($availableUsers as $u)
                        <option value="{{ $u->id }}" {{ old('user_id') == $u->id ? 'selected' : '' }}>
                            {{ $u->name }} ({{ $u->email }})
                        </option>
                    @endforeach
                </select>
                @error('user_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
                <small class="text-muted">Only teachers without an existing staff profile are listed.</small>
            </div>

            {{-- New user creation --}}
            <div id="newUserSection" style="display:none">
                <div class="row g-3">
                    <div class="col-md-4">
                        <label class="form-label">Full Name <span class="text-danger">*</span></label>
                        <input type="text" name="name" class="form-control @error('name') is-invalid @enderror"
                               value="{{ old('name') }}" placeholder="e.g. Jane Mwenda">
                        @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Email Address <span class="text-danger">*</span></label>
                        <input type="email" name="email" class="form-control @error('email') is-invalid @enderror"
                               value="{{ old('email') }}" placeholder="jane@school.ac.ke">
                        @error('email')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Password <span class="text-danger">*</span></label>
                        <input type="password" name="password" class="form-control @error('password') is-invalid @enderror"
                               placeholder="Min 8 characters">
                        @error('password')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Profile Details --}}
    <div class="card shadow-sm border-0 rounded-4 mb-4">
        <div class="card-header bg-white py-3">
            <h6 class="mb-0 fw-semibold"><i class="fas fa-id-card me-2 text-primary"></i>Staff Profile</h6>
        </div>
        <div class="card-body">
            <div class="row g-3">
                <div class="col-md-3">
                    <label class="form-label">Staff Number <span class="text-danger">*</span></label>
                    <input type="text" name="staff_number" class="form-control @error('staff_number') is-invalid @enderror"
                           value="{{ old('staff_number') }}" placeholder="e.g. TCH-2026-001">
                    @error('staff_number')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="col-md-3">
                    <label class="form-label">Department</label>
                    <input type="text" name="department" class="form-control" value="{{ old('department') }}"
                           placeholder="e.g. Sciences, Languages">
                </div>
                <div class="col-md-3">
                    <label class="form-label">Designation</label>
                    <input type="text" name="designation" class="form-control" value="{{ old('designation') }}"
                           placeholder="e.g. HOD, Senior Teacher">
                </div>
                <div class="col-md-3">
                    <label class="form-label">Status <span class="text-danger">*</span></label>
                    <select name="status" class="form-select @error('status') is-invalid @enderror">
                        <option value="active"    {{ old('status','active') === 'active'    ? 'selected' : '' }}>Active</option>
                        <option value="inactive"  {{ old('status') === 'inactive'  ? 'selected' : '' }}>Inactive</option>
                        <option value="suspended" {{ old('status') === 'suspended' ? 'selected' : '' }}>Suspended</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <label class="form-label">Gender</label>
                    <select name="gender" class="form-select">
                        <option value="">— Select —</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>
                </div>
                <div class="col-md-3">
                    <label class="form-label">Date of Birth</label>
                    <input type="date" name="date_of_birth" class="form-control" value="{{ old('date_of_birth') }}">
                </div>
                <div class="col-md-3">
                    <label class="form-label">Date of Joining</label>
                    <input type="date" name="date_of_joining" class="form-control" value="{{ old('date_of_joining') }}">
                </div>
                <div class="col-md-3">
                    <label class="form-label">Phone</label>
                    <input type="text" name="phone" class="form-control" value="{{ old('phone') }}"
                           placeholder="+254 7XX XXX XXX">
                </div>
                <div class="col-md-6">
                    <label class="form-label">Emergency Contact</label>
                    <input type="text" name="emergency_contact" class="form-control" value="{{ old('emergency_contact') }}"
                           placeholder="Name — Phone">
                </div>
                <div class="col-md-6">
                    <label class="form-label">Qualifications</label>
                    <textarea name="qualifications" class="form-control" rows="2"
                              placeholder="e.g. B.Ed Science (UoN), TSC Certified">{{ old('qualifications') }}</textarea>
                </div>
                <div class="col-12">
                    <label class="form-label">Internal Notes</label>
                    <textarea name="notes" class="form-control" rows="2"
                              placeholder="Any additional internal notes...">{{ old('notes') }}</textarea>
                </div>
            </div>
        </div>
    </div>

    <div class="d-flex gap-2 justify-content-end">
        <a href="{{ route('schooladmin.staff.index') }}" class="btn btn-outline-secondary px-4">Cancel</a>
        <button type="submit" class="btn btn-primary px-5 rounded-pill">
            <i class="fas fa-save me-2"></i>Save Staff Member
        </button>
    </div>
</form>
@endsection

@section('custom-scripts')
<script>
function toggleMode(mode) {
    document.getElementById('existingUserSection').style.display = mode === 'existing' ? '' : 'none';
    document.getElementById('newUserSection').style.display      = mode === 'new'      ? '' : 'none';
}
</script>
@endsection