@extends('layouts/contentNavbarLayout')

@section('title', 'Staff Profile')

@section('content')
    <div class="container">
        <!-- Breadcrumbs -->
        <div class="mb-4">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-0">
                    <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboards</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('staffs.index') }}">Staff Accounts</a></li>
                    <li class="breadcrumb-item active" aria-current="page">{{ $staff->full_name }}</li>
                </ol>
            </nav>
        </div>

        <!-- Header -->
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2 class="fw-bold">User Profile</h2>
            <a href="{{ route('staffs.edit', $staff->id) }}" class="btn btn-outline-secondary">Edit Profile</a>
        </div>

        <!-- Profile Cards -->
        <div class="row">
            <!-- Personal Info -->
            <div class="col-md-6 mb-4">
                <div class="card card-action mb-12" data-card-id="card-1">
                    <div class="collapse show">
                        <table class="table table-hover">
                            <tbody class="table-border-bottom-0">
                                <tr>
                                    <td colspan="2">
                                        <h5 class="card-action-title mb-0">Personal Info</h5>
                                    </td>
                                </tr>
                                <tr>
                                    <td>Name</td>
                                    <td>{{ $staff->full_name }}</td>
                                </tr>
                                <tr>
                                    <td>Mobile</td>
                                    <td>{{ $staff->phone }}</td>
                                </tr>
                                <tr>
                                    <td>Role</td>
                                    <td>
                                        @foreach ($staff->roles as $role)
                                            <span class="badge bg-light text-dark border">{{ $role->name }}</span>
                                        @endforeach
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="col-md-6 mb-4">
                <div class="card card-action mb-12" data-card-id="card-1">
                    <div class="collapse show">
                        <table class="table table-hover">
                            <tbody class="table-border-bottom-0">
                                <tr>
                                    <td colspan="2">
                                        <h5 class="card-action-title mb-0">Account Settings</h5>
                                    </td>
                                </tr>
                                <tr>
                                    <td>Email</td>
                                    <td>{{ $staff->email }}</td>
                                </tr>
                                <tr>
                                    <td>Password</td>
                                    {{-- <div>Password last changed {{ $staff->password_last_changed_at->diffForHumans() }}</div> --}}
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection