@extends(auth()->user()->hasRole('admin') ? 'layouts.admin' : 'layouts.app')

@section('page_title', 'Account Settings')

@section('content')
    <div class="row align-items-center mb-4">
        <div class="col">
            <h2 class="fw-extrabold tracking-tight mb-1" style="font-size: 1.5rem;">Account Settings</h2>
            <p class="text-secondary opacity-75 mb-0" style="font-size: 0.875rem;">Manage your personal profile and security
                preferences.</p>
        </div>
    </div>

    <div class="row g-4">
        <div class="col-lg-4">
            <div class="card border-0 shadow-sm mb-4"
                style="border-radius: 1rem; border: 1px solid rgba(0,0,0,0.05) !important;">
                <div class="card-body p-4 text-center">
                    <div class="position-relative d-inline-block mb-3">
                        <img src="{{ auth()->user()->avatar ?? 'https://ui-avatars.com/api/?name=' . auth()->user()->name . '&background=0D8ABC&color=fff' }}"
                            class="rounded-circle border border-4 border-white shadow-sm" width="120" height="120">
                    </div>
                    <h5 class="fw-bold text-dark mb-1">{{ auth()->user()->name }}</h5>
                    <p class="text-secondary small fw-medium mb-3">{{ auth()->user()->designation }} &bull;
                        {{ auth()->user()->department->name ?? 'No Department' }}</p>
                    <span
                        class="badge {{ auth()->user()->hasRole('admin') ? 'bg-primary' : 'bg-success' }} bg-opacity-10 text-{{ auth()->user()->hasRole('admin') ? 'primary' : 'success' }} px-3 py-2 rounded-pill fw-bold text-uppercase"
                        style="font-size: 0.75rem; letter-spacing: 0.05rem;">
                        {{ auth()->user()->role }}
                    </span>
                </div>
            </div>
        </div>

        <div class="col-lg-8">
            <div class="card border-0 shadow-sm mb-4"
                style="border-radius: 1rem; border: 1px solid rgba(0,0,0,0.05) !important;">
                <div class="card-body p-4 p-md-5">
                    <h5 class="fw-bold mb-4 d-flex align-items-center gap-2"><span
                            class="material-symbols-outlined text-primary">lock</span> Security Settings</h5>

                    <form action="#" method="POST" id="securityForm">
                        @csrf
                        <div class="row g-4">
                            <div class="col-md-12">
                                <label class="text-uppercase fw-bold text-secondary mb-2 d-block"
                                    style="font-size: 0.65rem; letter-spacing: 0.05rem;">Current Password</label>
                                <input type="password" name="current_password"
                                    class="form-control border-0 bg-light py-2.5 rounded-3 fw-medium text-dark" required
                                    placeholder="Enter current password...">
                            </div>

                            <div class="col-md-6">
                                <label class="text-uppercase fw-bold text-secondary mb-2 d-block"
                                    style="font-size: 0.65rem; letter-spacing: 0.05rem;">New Password</label>
                                <input type="password" name="new_password"
                                    class="form-control border-0 bg-light py-2.5 rounded-3 fw-medium text-dark" required
                                    placeholder="Create a new password...">
                            </div>

                            <div class="col-md-6">
                                <label class="text-uppercase fw-bold text-secondary mb-2 d-block"
                                    style="font-size: 0.65rem; letter-spacing: 0.05rem;">Confirm New Password</label>
                                <input type="password" name="new_password_confirmation"
                                    class="form-control border-0 bg-light py-2.5 rounded-3 fw-medium text-dark" required
                                    placeholder="Type the new password again...">
                            </div>
                        </div>

                        <div class="mt-4 pt-3 border-top text-end">
                            <button type="submit" class="btn btn-primary px-4 py-2 fw-bold shadow-sm rounded-3">Update
                                Security Info</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection