@extends('layouts.admin')
@section('title','Admin Settings')
@section('page-title','⚙️ Admin Settings')

@section('styles')
<style>
.settings-wrap{max-width:900px;margin:0 auto}
.settings-card{background:#fff;border-radius:18px;padding:28px 30px;box-shadow:0 2px 12px rgba(0,0,0,.06);margin-bottom:22px}
.settings-card h2{color:#1e3c72;margin-bottom:18px;padding-bottom:12px;border-bottom:2px solid #f0f0f0;font-size:18px;display:flex;align-items:center;gap:10px}
.form-group{margin-bottom:18px}
.form-group label{display:block;margin-bottom:7px;color:#333;font-weight:600;font-size:14px}
.form-group input{width:100%;padding:12px 14px;border:2px solid #e0e0e0;border-radius:10px;font-size:14px;outline:none;transition:.3s}
.form-group input:focus{border-color:#1e3c72}
.btn-save{background:linear-gradient(135deg,#1e3c72,#2a5298);color:#fff;padding:11px 24px;border:none;border-radius:9px;font-size:14px;font-weight:700;cursor:pointer;transition:.2s}
.btn-save:hover{transform:translateY(-2px);opacity:.95}

/* ---------- THEME BUTTONS ---------- */
.add-btn, .btn-save, .quick-link, .btn-pay {
    color: #fff !important;
    font-weight: 700 !important;
    text-align: center !important;
    padding: 13px 24px !important;
    border-radius: 8px !important;
    letter-spacing: .6px !important;
    font-size: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    text-decoration: none !important;
    transition: transform .18s ease, box-shadow .25s ease !important;
    border: none !important;
    cursor: pointer !important;
    background: #07b8a3 !important;
    border-bottom: 4px solid #089a89 !important;
}
.add-btn:hover, .btn-save:hover, .quick-link:hover, .btn-pay:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.15) !important;
}
.quick-links .quick-link:nth-child(2) { background: #81c66b !important; border-bottom-color: #67a055 !important; }
.quick-links .quick-link:nth-child(3) { background: #ff7528 !important; border-bottom-color: #d9a810 !important; }
.quick-links .quick-link:nth-child(4) { background: #de2779 !important; border-bottom-color: #af1b5d !important; }
.quick-links .quick-link:nth-child(5) { background: #11A2D9 !important; border-bottom-color: #0c8bbb !important; }

.action-btn { 
    border-radius: 6px !important; 
    border: none !important;
    border-bottom: 3px solid rgba(0,0,0,0.2) !important; 
    padding: 6px 12px !important; 
    font-weight: 600 !important; 
    color: #fff !important;
    transition: transform .18s ease !important;
}
.action-btn:hover { transform: translateY(-2px) !important; }
.edit-btn { background: #11A2D9 !important; }
.credits-btn, .btn-approve, .btn-success { background: #81c66b !important; }
.delete-btn, .btn-reject, .btn-danger { background: #de2779 !important; }
.btn-cancel { background: #ff7528 !important; color: #fff !important; border-bottom: 4px solid #d9a810 !important; }

.logo-text, .sidebar .logo-text, .main-sidebar .logo-text {
    color: transparent !important;
    text-indent: -9999px !important;
    background-image: url('{{ asset("images/logo.png") }}') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    width: 100% !important;
    height: 65px !important;
    display: block !important;
    margin: 10px 0 !important;
    overflow: hidden !important;
}

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 768px) {
    .logo-text, .sidebar .logo-text, .main-sidebar .logo-text {
        height: 45px !important;
        margin: 5px 0 !important;
    }
    .card, .del-card, .settings-card { padding: 16px !important; }
    .filter-bar { flex-direction: column; align-items: stretch !important; }
    .filter-group, .filter-select, .filter-input { width: 100% !important; }
    .responsive-form-grid, .view-grid { grid-template-columns: 1fr !important; }
}

.sidebar a[href*="logout"], .sidebar form[action*="logout"] button, .sidebar .logout-btn, .sidebar .btn-logout, .main-sidebar a[href*="logout"], .main-sidebar form[action*="logout"] button, .sidebar-wrapper a[href*="logout"] {
    color: #fff !important;
    font-weight: 700 !important;
    text-align: center !important;
    padding: 12px 24px !important;
    border-radius: 8px !important;
    letter-spacing: .6px !important;
    font-size: 14px !important;
    display: block !important;
    text-decoration: none !important;
    transition: transform .18s ease, box-shadow .25s ease !important;
    border: none !important;
    cursor: pointer !important;
    background: #de2779 !important;
    width: 100% !important;
    margin-top: 10px !important;
}
.sidebar a[href*="logout"]:hover, .sidebar form[action*="logout"] button:hover, .sidebar .logout-btn:hover, .sidebar .btn-logout:hover, .main-sidebar a[href*="logout"]:hover, .main-sidebar form[action*="logout"] button:hover, .sidebar-wrapper a[href*="logout"]:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.15) !important;
    background: #de2779 !important;
}

.navbar .nav-link, .navbar .dropdown-toggle, .navbar .user-name, header .user-name, .navbar .profile-text {
    color: #f7941d !important;
}

.main-sidebar, .sidebar, aside, .sidebar-wrapper {
    background: #1d1d1d !important;
}
.sidebar .nav-link, .sidebar a {
    color: #fff !important;
}
.sidebar .nav-link:hover, .sidebar a:hover {
    background: rgba(255,255,255,0.1) !important;
    color: #07b8a3 !important;
}
.sidebar .nav-item .nav-link.active, .sidebar .active > a {
    background: linear-gradient(90deg, #81c66b 0%, #07b8a3 25%, #ff7528 70%, #de2779 100%) !important;
    color: #fff !important;
    border-radius: 6px;
}
</style>
@endsection

@section('content')
<div class="settings-wrap">

   <!--  @if(session('success'))
        <div style="background:#d4edda;color:#155724;padding:12px 18px;border-radius:10px;margin-bottom:18px;font-size:14px">✅ {{ session('success') }}</div>
    @endif
    @if($errors->any())
        <div style="background:#f8d7da;color:#721c24;padding:12px 18px;border-radius:10px;margin-bottom:18px;font-size:14px">❌ {{ $errors->first() }}</div>
    @endif
 -->
    {{-- Profile Information --}}
    <div class="settings-card">
        <h2>👤 Profile Information</h2>
        <form method="POST" action="{{ route('admin.settings.profile') }}">
            @csrf
            <div class="form-group">
                <label>Full Name</label>
                <input type="text" name="name" value="{{ old('name', $admin->name) }}" required>
            </div>
            <div class="form-group">
                <label>Email Address</label>
                <input type="email" name="email" value="{{ old('email', $admin->email) }}" readonly>
            </div>
            <button type="submit" class="btn-save">Update Profile</button>
        </form>
    </div>

    {{-- Change Password --}}
    <div class="settings-card">
        <h2>🔐 Change Password</h2>
        <form method="POST" action="{{ route('admin.settings.password') }}">
            @csrf
            <div class="form-group">
                <label>Current Password</label>
                <input type="password" name="current_password" placeholder="Enter current password" required>
            </div>
            <div class="form-group">
                <label>New Password</label>
                <input type="password" name="password" placeholder="Enter new password" required>
            </div>
            <div class="form-group">
                <label>Confirm New Password</label>
                <input type="password" name="password_confirmation" placeholder="Confirm new password" required>
            </div>
            <button type="submit" class="btn-save">Change Password</button>
        </form>
    </div>

</div>
@endsection