@extends('layouts.app')
@section('title', 'Staff')
@section('page-title', 'Staff Management')

@section('content')
<div class="page-header">
    <div>
        <div class="breadcrumb"><a href="{{ route('hotel.dashboard') }}">Dashboard</a><span>/</span>Staff</div>
        <h1>Staff Management</h1>
    </div>
    <button onclick="openModal('add-staff')" class="btn btn-primary"><i class="fas fa-user-plus"></i> Add Staff</button>
</div>

<div class="card">
    <div class="table-wrap">
        <table>
            <thead><tr><th>Name</th><th>Email</th><th>Role</th><th>Status</th><th>Last Login</th><th>Actions</th></tr></thead>
            <tbody>
                @forelse($staff as $member)
                <tr>
                    <td>
                        <div style="font-weight:700;font-size:13px;">{{ $member->name }}</div>
                        <div style="font-size:12px;color:#6b7280;">{{ $member->phone }}</div>
                    </td>
                    <td style="font-size:13px;">{{ $member->email }}</td>
                    <td><span class="badge badge-primary" style="font-size:10px;">{{ $member->hotelRole->role_name ?? str_replace('_',' ',ucfirst($member->role)) }}</span></td>
                    <td>
                        @if($member->employment_status==='active') <span class="badge badge-success">Active</span>
                        @elseif($member->employment_status==='removed') <span class="badge badge-danger">Removed</span>
                        @else <span class="badge badge-warning">Suspended</span> @endif
                    </td>
                    <td style="font-size:12px;color:#6b7280;">{{ $member->last_login ? $member->last_login->diffForHumans() : 'Never' }}</td>
                    <td>
                        <div style="display:flex;gap:4px;">
                            @if($member->employment_status === 'active' && $member->id !== auth()->id())
                                <button onclick="openModal('remove-{{ $member->id }}')" class="btn btn-sm btn-danger" title="Remove"><i class="fas fa-user-minus"></i></button>
                            @elseif($member->employment_status === 'removed')
                                <form method="POST" action="{{ route('hotel.staff.reactivate', $member) }}">@csrf
                                    <button type="submit" class="btn btn-sm btn-success" title="Reactivate"><i class="fas fa-redo"></i></button>
                                </form>
                            @endif
                        </div>
                    </td>
                </tr>
                <!-- Remove Modal -->
                <div class="modal-overlay" id="remove-{{ $member->id }}">
                    <div class="modal">
                        <div class="modal-header"><span class="modal-title">Remove {{ $member->name }}</span><button class="modal-close" onclick="closeModal('remove-{{ $member->id }}')">×</button></div>
                        <form method="POST" action="{{ route('hotel.staff.remove', $member) }}">@csrf
                            <div class="modal-body">
                                <div class="alert alert-warning"><i class="fas fa-info-circle"></i> Record will be retained permanently for audit purposes.</div>
                                <div class="form-group">
                                    <label class="form-label">Reason <span class="required">*</span></label>
                                    <textarea name="removal_reason" class="form-control" required placeholder="e.g. Resigned, terminated..."></textarea>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-outline" onclick="closeModal('remove-{{ $member->id }}')">Cancel</button>
                                <button type="submit" class="btn btn-danger"><i class="fas fa-user-minus"></i> Remove Staff</button>
                            </div>
                        </form>
                    </div>
                </div>
                @empty
                <tr><td colspan="6"><div class="empty-state"><i class="fas fa-users"></i><h3>No staff added yet</h3></div></td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

<!-- Add Staff Modal -->
<div class="modal-overlay" id="add-staff">
    <div class="modal" style="max-width:520px;">
        <div class="modal-header"><span class="modal-title">Add Staff Member</span><button class="modal-close" onclick="closeModal('add-staff')">×</button></div>
        <form method="POST" action="{{ route('hotel.staff.store') }}">@csrf
            <div class="modal-body">
                <div class="form-group">
                    <label class="form-label">Full Name <span class="required">*</span></label>
                    <input type="text" name="name" class="form-control" required placeholder="Staff full name">
                </div>
                <div class="form-row">
                    <div class="form-group">
                        <label class="form-label">Email <span class="required">*</span></label>
                        <input type="email" name="email" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label class="form-label">Phone <span class="required">*</span></label>
                        <input type="text" name="phone" class="form-control" required placeholder="08012345678">
                    </div>
                </div>
                <div class="form-group">
                    <label class="form-label">Role <span class="required">*</span></label>
                    <select name="hotel_role_id" class="form-control" required>
                        <option value="">— Select role —</option>
                        @foreach($roles as $role)
                            <option value="{{ $role->id }}">{{ ucfirst(str_replace('_',' ',$role->role_name)) }}</option>
                        @endforeach
                    </select>
                    @if($roles->isEmpty())
                        <div class="form-text" style="color:#dc2626;">No roles defined. <a href="{{ route('hotel.settings.index') }}">Add roles in settings.</a></div>
                    @endif
                </div>
                <div class="form-row">
                    <div class="form-group">
                        <label class="form-label">Password <span class="required">*</span></label>
                        <input type="password" name="password" class="form-control" required minlength="8">
                    </div>
                    <div class="form-group">
                        <label class="form-label">Confirm Password <span class="required">*</span></label>
                        <input type="password" name="password_confirmation" class="form-control" required>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline" onclick="closeModal('add-staff')">Cancel</button>
                <button type="submit" class="btn btn-primary"><i class="fas fa-user-plus"></i> Add Staff</button>
            </div>
        </form>
    </div>
</div>

@if($errors->any())
<script>document.addEventListener('DOMContentLoaded', () => openModal('add-staff'));</script>
@endif
@endsection