@extends(session('staff_logged_in') ? 'Staff.layout' : 'Admin.layout')

@section('content')
    <div class="row align-items-center justify-content-between mb-3 mt-3">
        <div class="col-auto">
            <h5>
                <button type="button" class="btn btn-icon bg-white me-2" style="box-shadow: 0px 9px 12px -2px #66328E1F;">
                    <a href="{{ route('staff_list') }}">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                            stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                            <path d="M15 6l-6 6l6 6" />
                        </svg>
                    </a>
                </button>
                Edit Employee
            </h5>
        </div>
    </div>

    <div id="alertBox" style="display:none;"></div>

    <div class="card border-0 shadow-sm">
        <div class="card-header py-3">
            <h5 class="mb-0"><i class="ti tabler-edit me-2"></i>Edit Employee — {{ $employee->name }}</h5>
        </div>
        <div class="card-body p-4">
            <form id="employeeForm" enctype="multipart/form-data">
                @csrf

                {{-- Personal --}}
                <div class="section-title mb-4">
                    <h5><i class="ti tabler-user me-2"></i>Personal Information</h5>
                </div>
                <div class="row g-3 mb-4">
                    <div class="col-md-4">
                        <label class="form-label">Employee ID</label>
                        <input type="text" class="form-control bg-light" value="{{ $employee->employee_id }}" readonly>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Employee Name *</label>
                        <input type="text" name="name" class="form-control" value="{{ $employee->name }}">
                        <div class="text-danger small" id="error_name"></div>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Profile Photo</label>
                        <input type="file" name="profile_photo" class="form-control" accept="image/*">
                        @if($employee->profile_photo)
                            <small class="text-muted">Current: <a href="{{ asset('storage/' . $employee->profile_photo) }}" target="_blank">View</a></small>
                        @endif
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Gender</label>
                        <select name="gender" class="form-select">
                            @foreach(['Male','Female','Other'] as $g)
                                <option {{ $employee->gender == $g ? 'selected' : '' }}>{{ $g }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Date of Birth</label>
                        <input type="date" name="dob" class="form-control" value="{{ $employee->dob }}">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Age</label>
                        <input type="text" name="age" class="form-control" value="{{ $employee->age }}">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Phone *</label>
                        <input type="text" name="phone" class="form-control" value="{{ $employee->phone }}">
                        <div class="text-danger small" id="error_phone"></div>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Address</label>
                        <input type="text" name="address" class="form-control" value="{{ $employee->address }}">
                    </div>
                </div>

                {{-- Professional --}}
                <div class="section-title mb-4">
                    <h5><i class="ti tabler-briefcase me-2"></i>Professional Information</h5>
                </div>
                <div class="row g-3 mb-4">
                    <div class="col-md-4">
                        <label class="form-label">Department</label>
                        <select name="department" class="form-select">
                            <option value="">Select Department</option>
                            @foreach(['Reception','Nursing','Pharmacy','Accounts','Lab','Administration','Housekeeping'] as $dept)
                                <option {{ $employee->department == $dept ? 'selected' : '' }}>{{ $dept }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Role</label>
                        <select name="role" class="form-select">
                            <option value="">Select Role</option>
                            @foreach(['Receptionist','Pharmacy','Housekeeping','Accounts','Lab','Nursing','Administration','Doctor'] as $role)
                                <option {{ $employee->role == $role ? 'selected' : '' }}>{{ $role }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Designation</label>
                        <input type="text" name="designation" class="form-control" value="{{ $employee->designation }}">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Qualification</label>
                        <input type="text" name="qualification" class="form-control" value="{{ $employee->qualification }}">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Experience (Years)</label>
                        <input type="number" name="experience" class="form-control" value="{{ $employee->experience }}">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Salary</label>
                        <input type="number" name="salary" class="form-control" value="{{ $employee->salary }}">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Joining Date</label>
                        <input type="date" name="joining_date" class="form-control" value="{{ $employee->joining_date }}">
                    </div>
                </div>

                {{-- Work Schedule --}}
                <div class="section-title mb-4">
                    <h5><i class="ti tabler-clock me-2"></i>Work Schedule</h5>
                </div>
                <div class="row g-3 mb-4">
                    <div class="col-md-4">
                        <label class="form-label">Start Time</label>
                        <input type="time" name="start_time" class="form-control" value="{{ $employee->start_time }}">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">End Time</label>
                        <input type="time" name="end_time" class="form-control" value="{{ $employee->end_time }}">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Status</label>
                        <select name="status" class="form-select">
                            @foreach(['Active','Inactive','On Leave'] as $s)
                                <option {{ $employee->status == $s ? 'selected' : '' }}>{{ $s }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                {{-- Login Credentials --}}
                <div class="section-title mb-4">
                    <h5><i class="ti tabler-lock me-2"></i>Login Credentials</h5>
                </div>
                <div class="row g-3 mb-4">
                    <div class="col-md-6">
                        <label class="form-label">Email (Login ID)</label>
                        <input type="email" name="email" class="form-control" value="{{ $employee->email }}">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">New Password <small class="text-muted">(leave blank to keep current)</small></label>
                        <input type="password" name="password" class="form-control" placeholder="Enter new password">
                    </div>
                </div>

                {{-- Emergency Contact --}}
                <div class="section-title mb-4">
                    <h5><i class="ti tabler-phone-call me-2"></i>Emergency Contact</h5>
                </div>
                <div class="row g-3 mb-4">
                    <div class="col-md-4">
                        <label class="form-label">Contact Name</label>
                        <input type="text" name="emergency_contact_name" class="form-control" value="{{ $employee->emergency_contact_name }}">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Relationship</label>
                        <input type="text" name="emergency_contact_relation" class="form-control" value="{{ $employee->emergency_contact_relation }}">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Contact Number</label>
                        <input type="text" name="emergency_contact_phone" class="form-control" value="{{ $employee->emergency_contact_phone }}">
                    </div>
                </div>

                {{-- Documents --}}
                <div class="section-title mb-4">
                    <h5><i class="ti tabler-file-certificate me-2"></i>Documents</h5>
                </div>
                <div class="row g-3 mb-4">
                    <div class="col-md-6">
                        <label class="form-label">Identity Proof</label>
                        <input type="file" name="identity_proof" class="form-control" accept=".pdf,.jpg,.jpeg,.png">
                        @if($employee->identity_proof)
                            <small class="text-muted">Current: <a href="{{ asset('storage/' . $employee->identity_proof) }}" target="_blank">View</a></small>
                        @endif
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Certificate</label>
                        <input type="file" name="certificate" class="form-control" accept=".pdf,.jpg,.jpeg,.png">
                        @if($employee->certificate)
                            <small class="text-muted">Current: <a href="{{ asset('storage/' . $employee->certificate) }}" target="_blank">View</a></small>
                        @endif
                    </div>
                </div>

                <hr class="my-4">
                <div class="d-flex justify-content-center gap-2">
                    <a href="{{ route('staff_list') }}" class="btn btn-label-secondary px-4">Cancel</a>
                    <button type="submit" class="btn btn-primary px-4" id="submitBtn">
                        <span id="submitText">Update Employee</span>
                    </button>
                </div>
            </form>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
    $(document).ready(function() {

    const Toast = Swal.mixin({
        toast: true,
        position: 'top-end',
        showConfirmButton: false,
        timer: 3000,
        timerProgressBar: true
    });

        $('#employeeForm').on('submit', function(e) {
            e.preventDefault();
            $('.text-danger.small').text('');
            const btn  = $('#submitBtn');
            const text = $('#submitText');
            btn.prop('disabled', true);
            text.text('Updating...');

            const formData = new FormData(this);

            $.ajax({
                url: '{{ route("update_staff", $employee->id) }}',
                method: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function(response) {
                    btn.prop('disabled', false);
                    text.text('Update Employee');
                    if (response.success) {
                        $('#alertBox').html('<div class="alert alert-success">' + response.message + '</div>').show();
                        Toast.fire({icon: 'success',title: response.message});
                        setTimeout(function() {
                            window.location.href = '{{ route("staff_list") }}';
                        }, 1000);
                    }
                },
                error: function(xhr) {
                    btn.prop('disabled', false);
                    text.text('Update Employee');
                    $('#alertBox').html('<div class="alert alert-danger">Something went wrong.</div>').show();
                    Toast.fire({icon: 'error',title: response.message});
                }
            });
        });
    });
    </script>

    <style>
        .card { border-radius: 18px; }
        .form-control, .form-select { min-height: 46px; border-radius: 10px; }
        .section-title { border-left: 4px solid #696cff; padding-left: 12px; }
        .section-title h5 { margin: 0; font-weight: 700; }
        .card-header { border-bottom: 1px solid #edf1f7; }
    </style>
@endsection