@extends('layouts.admin')

@section('title', setting('school_name', 'ShulePoint') . ' | Edit ' . $staff->first_name . ' ' . $staff->last_name)
@section('page-title', 'Edit Staff')

@section('content')
<form method="POST" action="{{ route('staff.update', $staff) }}" enctype="multipart/form-data" novalidate>
    @csrf @method('PUT')
    <div class="row">
        <div class="col-lg-8">
            {{-- 1. Identity --}}
            <div class="card card-outline card-primary shadow-sm learner-card">
                <div class="card-header">
                    <h3 class="card-title"><span class="step-num">1</span> Identity</h3>
                    <div class="card-tools"><small class="text-muted"><span class="text-danger">*</span> required</small></div>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-4">
                            <label class="fld-label">Staff no <span class="text-danger">*</span></label>
                            <div class="input-group input-group-sm">
                                <div class="input-group-prepend"><span class="input-group-text"><i class="fas fa-id-badge"></i></span></div>
                                <input name="staff_no" value="{{ old('staff_no', $staff->staff_no) }}" required class="form-control @error('staff_no') is-invalid @enderror" placeholder="e.g. STF/001" autofocus>
                            </div>
                            @error('staff_no')<span class="invalid-feedback d-block">{{ $message }}</span>@enderror
                        </div>
                        <div class="col-md-4">
                            <label class="fld-label">First name <span class="text-danger">*</span></label>
                            <input name="first_name" value="{{ old('first_name', $staff->first_name) }}" required class="form-control form-control-sm @error('first_name') is-invalid @enderror" placeholder="e.g. Jane">
                            @error('first_name')<span class="invalid-feedback d-block">{{ $message }}</span>@enderror
                        </div>
                        <div class="col-md-4">
                            <label class="fld-label">Last name <span class="text-danger">*</span></label>
                            <input name="last_name" value="{{ old('last_name', $staff->last_name) }}" required class="form-control form-control-sm @error('last_name') is-invalid @enderror" placeholder="e.g. Wanjiku">
                            @error('last_name')<span class="invalid-feedback d-block">{{ $message }}</span>@enderror
                        </div>
                    </div>
                    <div class="row mt-2">
                        <div class="col-md-6">
                            <label class="fld-label">Gender</label>
                            <div class="gender-pick" role="radiogroup" aria-label="Gender">
                                @foreach(['male' => 'Male', 'female' => 'Female', 'other' => 'Other'] as $val => $label)
                                    <label class="gender-opt {{ old('gender', $staff->gender) === $val ? 'checked' : '' }}">
                                        <input type="radio" name="gender" value="{{ $val }}" @checked(old('gender', $staff->gender) === $val)>
                                        <i class="fas {{ $val === 'male' ? 'fa-mars' : ($val === 'female' ? 'fa-venus' : 'fa-genderless') }} mr-1"></i>{{ $label }}
                                    </label>
                                @endforeach
                            </div>
                            @error('gender')<span class="invalid-feedback d-block">{{ $message }}</span>@enderror
                        </div>
                        <div class="col-md-6">
                            <label class="fld-label">National ID</label>
                            <input name="national_id" value="{{ old('national_id', $staff->national_id) }}" class="form-control form-control-sm @error('national_id') is-invalid @enderror" placeholder="National ID no">
                            @error('national_id')<span class="invalid-feedback d-block">{{ $message }}</span>@enderror
                        </div>
                    </div>
                    <div class="row mt-2">
                        <div class="col-md-6">
                            <label class="fld-label"><i class="fas fa-fingerprint mr-1"></i>Biometric ID <small class="text-muted">(User ID on the ZKTeco scanner)</small></label>
                            <input name="biometric_id" value="{{ old('biometric_id', $staff->biometric_id) }}" class="form-control form-control-sm @error('biometric_id') is-invalid @enderror" placeholder="e.g. 12">
                            @error('biometric_id')<span class="invalid-feedback d-block">{{ $message }}</span>@enderror
                        </div>
                    </div>
                </div>
            </div>

            {{-- 2. Employment --}}
            <div class="card card-outline card-primary shadow-sm learner-card">
                <div class="card-header"><h3 class="card-title"><span class="step-num">2</span> Employment</h3></div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-4">
                            <label class="fld-label">TSC no</label>
                            <input name="tsc_no" value="{{ old('tsc_no', $staff->tsc_no) }}" class="form-control form-control-sm @error('tsc_no') is-invalid @enderror" placeholder="TSC no">
                            @error('tsc_no')<span class="invalid-feedback d-block">{{ $message }}</span>@enderror
                        </div>
                        <div class="col-md-4">
                            <label class="fld-label">Designation <small class="text-muted">· <a href="{{ route('designations.index') }}" target="_blank">manage</a></small></label>
                            <input name="designation" list="designationList" value="{{ old('designation', $staff->designation) }}" class="form-control form-control-sm @error('designation') is-invalid @enderror" placeholder="e.g. Class Teacher" autocomplete="off">
                            <datalist id="designationList">
                                @foreach($designations as $d)<option value="{{ $d->name }}">@endforeach
                            </datalist>
                            @error('designation')<span class="invalid-feedback d-block">{{ $message }}</span>@enderror
                        </div>
                        <div class="col-md-4">
                            <label class="fld-label">Department</label>
                            <input name="department" value="{{ old('department', $staff->department) }}" class="form-control form-control-sm @error('department') is-invalid @enderror" placeholder="e.g. Sciences">
                            @error('department')<span class="invalid-feedback d-block">{{ $message }}</span>@enderror
                        </div>
                    </div>
                    <div class="row mt-2">
                        <div class="col-md-4">
                            <label class="fld-label">Join date</label>
                            <input type="date" name="join_date" value="{{ old('join_date', $staff->join_date instanceof \Carbon\Carbon ? $staff->join_date->format('Y-m-d') : $staff->join_date) }}" class="form-control form-control-sm @error('join_date') is-invalid @enderror">
                            @error('join_date')<span class="invalid-feedback d-block">{{ $message }}</span>@enderror
                        </div>
                        <div class="col-md-4">
                            <label class="fld-label">Salary</label>
                            <input type="number" step="0.01" min="0" name="salary" value="{{ old('salary', $staff->salary) }}" class="form-control form-control-sm @error('salary') is-invalid @enderror" placeholder="0.00">
                            @error('salary')<span class="invalid-feedback d-block">{{ $message }}</span>@enderror
                        </div>
                        <div class="col-md-4">
                            <label class="fld-label">Status <span class="text-danger">*</span></label>
                            <input name="status" value="{{ old('status', $staff->status) }}" required class="form-control form-control-sm @error('status') is-invalid @enderror" placeholder="active">
                            @error('status')<span class="invalid-feedback d-block">{{ $message }}</span>@enderror
                        </div>
                    </div>
                    <div class="row mt-2">
                        <div class="col-md-6">
                            <label class="fld-label">Passport photo <small class="text-muted">(used as avatar)</small></label>
                            <div class="custom-file">
                                <input type="file" name="photo" id="staffPhoto" accept=".jpg,.jpeg,.png,.webp" class="custom-file-input @error('photo') is-invalid @enderror">
                                <label class="custom-file-label" for="staffPhoto" id="staffPhotoLabel">Choose photo…</label>
                            </div>
                            @error('photo')<span class="invalid-feedback d-block">{{ $message }}</span>@enderror
                            <small class="text-muted d-block mt-1">JPG, PNG or WebP · max 2 MB</small>
                            @if($staff->photo)
                                <label class="mt-1 mb-0 small text-muted"><input type="checkbox" name="remove_photo" value="1"> Remove current photo</label>
                            @endif
                        </div>
                        <div class="col-md-6 d-flex align-items-center">
                            @if($staff->photo)
                                <img id="staffPhotoThumb" src="{{ asset('storage/' . $staff->photo) }}" class="img-circle elevation-2" style="width:56px;height:56px;object-fit:cover;" alt="Current photo">
                            @else
                                <img id="staffPhotoThumb" class="img-circle elevation-2 d-none" style="width:56px;height:56px;object-fit:cover;" alt="Passport preview">
                            @endif
                            <small class="text-muted ml-2" id="staffPhotoHint">{{ $staff->photo ? 'Current photo' : 'No photo selected' }}</small>
                        </div>
                    </div>
                </div>
            </div>

            {{-- 3. Contact --}}
            <div class="card card-outline card-primary shadow-sm learner-card">
                <div class="card-header"><h3 class="card-title"><span class="step-num">3</span> Contact</h3></div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <label class="fld-label">Phone</label>
                            <div class="input-group input-group-sm">
                                <div class="input-group-prepend"><span class="input-group-text"><i class="fas fa-phone"></i></span></div>
                                <input name="phone" value="{{ old('phone', $staff->phone) }}" class="form-control @error('phone') is-invalid @enderror" placeholder="e.g. 0712 345 678">
                            </div>
                            <small class="text-muted">Kenyan mobile: 0712…, +254…, 254… or 712…</small>
                            @error('phone')<span class="invalid-feedback d-block">{{ $message }}</span>@enderror
                        </div>
                        <div class="col-md-6">
                            <label class="fld-label">Email</label>
                            <div class="input-group input-group-sm">
                                <div class="input-group-prepend"><span class="input-group-text"><i class="fas fa-envelope"></i></span></div>
                                <input type="email" name="email" value="{{ old('email', $staff->email) }}" class="form-control @error('email') is-invalid @enderror" placeholder="staff@example.com">
                            </div>
                            @error('email')<span class="invalid-feedback d-block">{{ $message }}</span>@enderror
                        </div>
                    </div>
                </div>
                <div class="card-footer admit-footer">
                    <a href="{{ route('staff.show', $staff) }}" class="btn btn-sm btn-outline-secondary"><i class="fas fa-arrow-left mr-1"></i> Cancel</a>
                    <div>
                        <button type="reset" class="btn btn-sm btn-light border">Reset</button>
                        <button type="submit" class="btn btn-sm btn-primary"><i class="fas fa-check mr-1"></i> Update staff</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="card shadow-sm learner-card">
                <div class="card-header"><h3 class="card-title"><i class="fas fa-user mr-1"></i> Editing</h3></div>
                <div class="card-body text-center">
                    @php $initials = strtoupper(substr($staff->first_name ?? '?', 0, 1) . substr($staff->last_name ?? '', 0, 1)); @endphp
                    @if($staff->photo)
                        <img src="{{ asset('storage/' . $staff->photo) }}" alt="{{ $staff->first_name }} {{ $staff->last_name }}" class="img-circle elevation-2 mx-auto" style="width:64px;height:64px;object-fit:cover;">
                    @else
                        <span class="learner-avatar avatar-lg mx-auto">{{ $initials }}</span>
                    @endif
                    <h5 class="mt-2 mb-0">{{ $staff->first_name }} {{ $staff->last_name }}</h5>
                    <div class="mt-1"><span class="adm-chip"><i class="fas fa-id-badge"></i> {{ $staff->staff_no }}</span></div>
                    <div class="mt-2"><span class="status-pill {{ $staff->status === 'active' ? 'ok' : 'muted' }}"><span class="dot"></span>{{ ucfirst(str_replace('_', ' ', $staff->status)) }}</span></div>
                </div>
                <div class="card-footer">
                    <a href="{{ route('staff.show', $staff) }}" class="btn btn-sm btn-outline-secondary btn-block"><i class="fas fa-eye mr-1"></i> View profile</a>
                </div>
            </div>
        </div>
    </div>
</form>
@endsection

@push('scripts')
<script>
(function () {
    document.querySelectorAll('.gender-opt input').forEach(function (r) {
        r.addEventListener('change', function () {
            document.querySelectorAll('.gender-opt').forEach(function (o) { o.classList.remove('checked'); });
            if (r.checked) r.closest('.gender-opt').classList.add('checked');
        });
    });
    var sp = document.getElementById('staffPhoto');
    if (sp) {
        sp.addEventListener('change', function () {
            var file = this.files && this.files[0];
            var label = document.getElementById('staffPhotoLabel');
            if (label) label.textContent = file ? file.name : 'Choose photo…';
            var thumb = document.getElementById('staffPhotoThumb');
            var hint = document.getElementById('staffPhotoHint');
            if (file) {
                if (thumb) { thumb.src = URL.createObjectURL(file); thumb.classList.remove('d-none'); }
                if (hint) hint.textContent = file.name;
            }
        });
    }
})();
</script>
@endpush