@extends('admin.layouts.main')

@section('title', 'Profile & Settings - Admin Panel')

@section('content')
<!-- Page Header -->
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h1 class="h3 mb-1 fw-bold">Profile & Settings</h1>
        <p class="text-muted mb-0">Kelola informasi profil dan pengaturan website</p>
    </div>
</div>

<!-- Tabs Navigation -->
<ul class="nav nav-pills mb-4" id="settingsTabs" role="tablist">
    <li class="nav-item" role="presentation">
        <button class="nav-link active" id="profile-tab" data-bs-toggle="pill" data-bs-target="#profile" type="button">
            <i class="fas fa-user me-2"></i>Profile Admin
        </button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="contact-tab" data-bs-toggle="pill" data-bs-target="#contact" type="button">
            <i class="fas fa-address-book me-2"></i>Kontak Info
        </button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="logo-tab" data-bs-toggle="pill" data-bs-target="#logo" type="button">
            <i class="fas fa-image me-2"></i>Logo & Branding
        </button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="security-tab" data-bs-toggle="pill" data-bs-target="#security" type="button">
            <i class="fas fa-shield-alt me-2"></i>Security
        </button>
    </li>
</ul>

<!-- Tabs Content -->
<div class="tab-content" id="settingsTabsContent">
    <!-- Profile Admin Tab -->
    <div class="tab-pane fade show active" id="profile" role="tabpanel">
        <div class="row g-4">
            <div class="col-lg-4">
                <div class="card border-0 shadow-sm" style="border-radius: 15px;">
                    <div class="card-body p-4 text-center">
                        <div class="mb-4">
                            <div class="user-avatar mx-auto mb-3" style="width: 120px; height: 120px; background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%); border-radius: 20px; display: flex; align-items: center; justify-content: center; font-size: 3rem; color: white; font-weight: 700;">
                                {{ strtoupper(substr(auth()->user()->name ?? 'A', 0, 1)) }}
                            </div>
                            <h4 class="fw-bold mb-1">{{ auth()->user()->name ?? 'Admin' }}</h4>
                            <p class="text-muted mb-0">{{ auth()->user()->email ?? 'admin@example.com' }}</p>
                        </div>
                        <div class="d-grid gap-2">
                            <button class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#changePasswordModal">
                                <i class="fas fa-key me-2"></i>Ganti Password
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-8">
                <div class="card border-0 shadow-sm" style="border-radius: 15px;">
                    <div class="card-header bg-white border-bottom py-3">
                        <h5 class="mb-0 fw-bold">
                            <i class="fas fa-user-edit text-primary me-2"></i>Edit Profile
                        </h5>
                    </div>
                    <div class="card-body p-4">
                        <form action="{{ route('admin.profile.update') }}" method="POST">
                            @csrf
                            <div class="mb-4">
                                <label class="form-label fw-semibold">Nama Lengkap</label>
                                <input type="text" class="form-control form-control-lg" name="name" value="{{ auth()->user()->name ?? '' }}" required>
                            </div>
                            <div class="mb-4">
                                <label class="form-label fw-semibold">Email</label>
                                <input type="email" class="form-control form-control-lg" name="email" value="{{ auth()->user()->email ?? '' }}" required>
                            </div>
                            <div class="mb-4">
                                <label class="form-label fw-semibold">Role</label>
                                <input type="text" class="form-control form-control-lg" value="Administrator" disabled>
                            </div>
                            <button type="submit" class="btn btn-primary btn-lg px-4">
                                <i class="fas fa-save me-2"></i>Simpan Perubahan
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Contact Info Tab -->
    <div class="tab-pane fade" id="contact" role="tabpanel">
        <div class="card border-0 shadow-sm" style="border-radius: 15px;">
            <div class="card-header bg-white border-bottom py-3">
                <h5 class="mb-0 fw-bold">
                    <i class="fas fa-address-book text-primary me-2"></i>Informasi Kontak & Tampilan Website
                </h5>
                <small class="text-muted">Perubahan langsung tampil di seluruh halaman website pengunjung</small>
            </div>
            <div class="card-body p-4">
                @if(session('success'))
                <div class="alert alert-success alert-dismissible fade show d-flex align-items-center gap-2">
                    <i class="fas fa-check-circle"></i> {{ session('success') }}
                    <button type="button" class="btn-close ms-auto" data-bs-dismiss="alert"></button>
                </div>
                @endif

                <form action="{{ route('admin.contact.update') }}" method="POST">
                    @csrf

                    {{-- Identitas --}}
                    <div class="mb-4 pb-4 border-bottom">
                        <h6 class="fw-bold text-primary mb-3"><i class="fas fa-building me-2"></i>Identitas Perusahaan</h6>
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Nama Perusahaan</label>
                                <input type="text" class="form-control" name="company_name"
                                       value="{{ $contactInfo->company_name ?? '' }}"
                                       placeholder="PT Bumenjaya Praduta Abadi">
                                <div class="form-text">Tampil di footer & branding</div>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Tagline</label>
                                <input type="text" class="form-control" name="tagline"
                                       value="{{ $contactInfo->tagline ?? '' }}"
                                       placeholder="Lembaga Pelatihan Kerja Terpercaya">
                            </div>
                        </div>
                    </div>

                    {{-- Topbar --}}
                    <div class="mb-4 pb-4 border-bottom">
                        <h6 class="fw-bold text-primary mb-3"><i class="fas fa-bars me-2"></i>Info Topbar Website</h6>
                        <div class="row g-3">
                            <div class="col-md-4">
                                <label class="form-label fw-semibold"><i class="fas fa-phone-alt text-success me-1"></i>Telepon</label>
                                <input type="text" class="form-control" name="phone"
                                       value="{{ $contactInfo->phone ?? '' }}" placeholder="+62 21 1234 5678">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-semibold"><i class="fab fa-whatsapp text-success me-1"></i>WhatsApp</label>
                                <input type="text" class="form-control" name="whatsapp"
                                       value="{{ $contactInfo->whatsapp ?? '' }}" placeholder="628123456789">
                                <div class="form-text">Format: 628xxx (tanpa + atau spasi)</div>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-semibold"><i class="fas fa-envelope text-primary me-1"></i>Email</label>
                                <input type="email" class="form-control" name="email"
                                       value="{{ $contactInfo->email ?? '' }}" placeholder="info@perusahaan.com">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold"><i class="fas fa-clock text-warning me-1"></i>Jam Operasional</label>
                                <input type="text" class="form-control" name="working_hours"
                                       value="{{ $contactInfo->working_hours ?? 'Senin – Jumat 08.00–17.00 WIB' }}"
                                       placeholder="Senin – Jumat 08.00–17.00 WIB">
                                <div class="form-text">Tampil di topbar & footer</div>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold"><i class="fas fa-globe text-info me-1"></i>Website</label>
                                <input type="url" class="form-control" name="website"
                                       value="{{ $contactInfo->website ?? '' }}" placeholder="https://www.perusahaan.com">
                            </div>
                        </div>
                    </div>

                    {{-- Alamat --}}
                    <div class="mb-4 pb-4 border-bottom">
                        <h6 class="fw-bold text-primary mb-3"><i class="fas fa-map-marker-alt me-2"></i>Alamat & Peta</h6>
                        <div class="mb-3">
                            <label class="form-label fw-semibold">Alamat Lengkap <span class="text-danger">*</span></label>
                            <textarea class="form-control" name="address" rows="2" required
                                      placeholder="Jl. Contoh No. 123, Jakarta...">{{ $contactInfo->address ?? '' }}</textarea>
                        </div>
                        <div>
                            <label class="form-label fw-semibold">Google Maps Embed Code</label>
                            <textarea class="form-control" name="map_embed" rows="2"
                                      placeholder='<iframe src="https://maps.google.com/..." ...></iframe>'>{{ $contactInfo->map_embed ?? '' }}</textarea>
                            <div class="form-text">Google Maps → Share → Embed a map → Copy HTML</div>
                        </div>
                    </div>

                    {{-- Sosmed --}}
                    <div class="mb-4">
                        <h6 class="fw-bold text-primary mb-3"><i class="fas fa-share-alt me-2"></i>Media Sosial</h6>
                        <div class="row g-3">
                            <div class="col-md-4">
                                <label class="form-label fw-semibold"><i class="fab fa-facebook-f me-1" style="color:#1877f2;"></i>Facebook</label>
                                <input type="url" class="form-control" name="facebook"
                                       value="{{ $contactInfo->facebook ?? '' }}" placeholder="https://facebook.com/...">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-semibold"><i class="fab fa-instagram me-1" style="color:#e1306c;"></i>Instagram</label>
                                <input type="url" class="form-control" name="instagram"
                                       value="{{ $contactInfo->instagram ?? '' }}" placeholder="https://instagram.com/...">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-semibold"><i class="fab fa-youtube me-1" style="color:#ff0000;"></i>YouTube</label>
                                <input type="url" class="form-control" name="youtube"
                                       value="{{ $contactInfo->youtube ?? '' }}" placeholder="https://youtube.com/...">
                            </div>
                        </div>
                    </div>

                    <button type="submit" class="btn btn-primary btn-lg px-5">
                        <i class="fas fa-save me-2"></i>Simpan Semua Perubahan
                    </button>
                </form>
            </div>
        </div>
    </div>

    <!-- Logo & Branding Tab -->
    <div class="tab-pane fade" id="logo" role="tabpanel">
        <div class="row g-4">

            {{-- Nama Website -- full width at top --}}
            <div class="col-12">
                <div class="card border-0 shadow-sm" style="border-radius:15px;border-left:4px solid #3b82f6!important;">
                    <div class="card-body p-4">
                        <h6 class="fw-bold mb-3"><i class="fas fa-font text-primary me-2"></i>Nama & Identitas Website</h6>
                        <form action="{{ route('admin.seo.update') }}" method="POST">
                            @csrf
                            <div class="row g-3 align-items-end">
                                <div class="col-md-5">
                                    <label class="form-label fw-semibold">Nama Website / Perusahaan <span class="text-danger">*</span></label>
                                    <input type="text" name="site_name" class="form-control form-control-lg fw-bold"
                                           value="{{ old('site_name', $seoSetting->site_name ?? '') }}"
                                           placeholder="PT Bumenjaya Praduta Abadi" required>
                                    <div class="form-text">Tampil di navbar, footer, dan judul halaman</div>
                                </div>
                                <div class="col-md-5">
                                    <label class="form-label fw-semibold">Deskripsi Website</label>
                                    <input type="text" name="site_description" class="form-control"
                                           value="{{ old('site_description', $seoSetting->site_description ?? '') }}"
                                           placeholder="Lembaga Pelatihan Kerja Terpercaya...">
                                </div>
                                <div class="col-md-2">
                                    <button type="submit" class="btn btn-primary w-100">
                                        <i class="fas fa-save me-1"></i> Simpan
                                    </button>
                                </div>
                            </div>
                        </form>
                        @if(session('success') && str_contains(session('success'), 'SEO'))
                        <div class="alert alert-success mt-3 py-2 mb-0"><i class="fas fa-check-circle me-2"></i>{{ session('success') }}</div>
                        @endif
                    </div>
                </div>
            </div>

            <div class="col-lg-4">
                <div class="card border-0 shadow-sm" style="border-radius: 15px;">
                    <div class="card-header bg-white border-bottom py-3">
                        <h6 class="mb-0 fw-bold">
                            <i class="fas fa-image text-primary me-2"></i>Logo Website
                        </h6>
                    </div>
                    <div class="card-body p-4 text-center">
                        @if($seoSetting && $seoSetting->logo)
                            <img src="{{ asset('storage/' . $seoSetting->logo) }}" class="img-fluid rounded mb-3" alt="Logo" style="max-height: 150px;">
                        @else
                            <div class="bg-light rounded mb-3 d-flex align-items-center justify-content-center" style="height: 150px;">
                                <i class="fas fa-image text-muted fa-3x"></i>
                            </div>
                        @endif
                        <form action="{{ route('admin.seo.logo.update') }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            <input type="hidden" name="type" value="logo">
                            <input type="file" class="form-control mb-3" name="logo" accept="image/*" required>
                            <button type="submit" class="btn btn-primary w-100">
                                <i class="fas fa-upload me-2"></i>Upload Logo
                            </button>
                        </form>
                        <small class="text-muted d-block mt-2">
                            Format: PNG, JPG. Max: 2MB
                        </small>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-4">
                <div class="card border-0 shadow-sm" style="border-radius: 15px;">
                    <div class="card-header bg-white border-bottom py-3">
                        <h6 class="mb-0 fw-bold">
                            <i class="fas fa-star text-warning me-2"></i>Favicon
                        </h6>
                    </div>
                    <div class="card-body p-4 text-center">
                        @if($seoSetting && $seoSetting->favicon)
                            <img src="{{ asset('storage/' . $seoSetting->favicon) }}" class="img-fluid rounded mb-3" alt="Favicon" style="max-height: 80px;">
                        @else
                            <div class="bg-light rounded mb-3 d-flex align-items-center justify-content-center mx-auto" style="height: 80px; width: 80px;">
                                <i class="fas fa-image text-muted fa-2x"></i>
                            </div>
                        @endif
                        <form action="{{ route('admin.seo.logo.update') }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            <input type="hidden" name="type" value="favicon">
                            <input type="file" class="form-control mb-3" name="favicon" accept="image/*" required>
                            <button type="submit" class="btn btn-warning w-100">
                                <i class="fas fa-upload me-2"></i>Upload Favicon
                            </button>
                        </form>
                        <small class="text-muted d-block mt-2">
                            Format: ICO, PNG. Size: 32x32px
                        </small>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-4">
                <div class="card border-0 shadow-sm" style="border-radius: 15px;">
                    <div class="card-header bg-white border-bottom py-3">
                        <h6 class="mb-0 fw-bold">
                            <i class="fas fa-share-alt text-success me-2"></i>OG Image
                        </h6>
                    </div>
                    <div class="card-body p-4 text-center">
                        @if($seoSetting && $seoSetting->og_image)
                            <img src="{{ asset('storage/' . $seoSetting->og_image) }}" class="img-fluid rounded mb-3" alt="OG Image" style="max-height: 150px;">
                        @else
                            <div class="bg-light rounded mb-3 d-flex align-items-center justify-content-center" style="height: 150px;">
                                <i class="fas fa-image text-muted fa-3x"></i>
                            </div>
                        @endif
                        <form action="{{ route('admin.seo.logo.update') }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            <input type="hidden" name="type" value="og_image">
                            <input type="file" class="form-control mb-3" name="og_image" accept="image/*" required>
                            <button type="submit" class="btn btn-success w-100">
                                <i class="fas fa-upload me-2"></i>Upload OG Image
                            </button>
                        </form>
                        <small class="text-muted d-block mt-2">
                            Format: JPG, PNG. Size: 1200x630px
                        </small>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Security Tab -->
    <div class="tab-pane fade" id="security" role="tabpanel">
        <div class="row g-4">
            <div class="col-lg-6">
                <div class="card border-0 shadow-sm" style="border-radius: 15px;">
                    <div class="card-header bg-white border-bottom py-3">
                        <h5 class="mb-0 fw-bold">
                            <i class="fas fa-key text-warning me-2"></i>Ganti Password
                        </h5>
                    </div>
                    <div class="card-body p-4">
                        <form action="{{ route('admin.profile.update') }}" method="POST">
                            @csrf
                            <div class="mb-4">
                                <label class="form-label fw-semibold">Password Lama</label>
                                <input type="password" class="form-control" name="current_password" required>
                            </div>
                            <div class="mb-4">
                                <label class="form-label fw-semibold">Password Baru</label>
                                <input type="password" class="form-control" name="new_password" required>
                            </div>
                            <div class="mb-4">
                                <label class="form-label fw-semibold">Konfirmasi Password Baru</label>
                                <input type="password" class="form-control" name="new_password_confirmation" required>
                            </div>
                            <button type="submit" class="btn btn-warning btn-lg px-4">
                                <i class="fas fa-lock me-2"></i>Update Password
                            </button>
                        </form>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-6">
                <div class="card border-0 shadow-sm" style="border-radius: 15px;">
                    <div class="card-header bg-white border-bottom py-3">
                        <h5 class="mb-0 fw-bold">
                            <i class="fas fa-shield-alt text-success me-2"></i>Security Info
                        </h5>
                    </div>
                    <div class="card-body p-4">
                        <div class="d-flex align-items-start mb-3 pb-3 border-bottom">
                            <div class="bg-success bg-opacity-10 p-2 rounded me-3">
                                <i class="fas fa-check-circle text-success"></i>
                            </div>
                            <div>
                                <div class="fw-semibold">Login Terakhir</div>
                                <small class="text-muted">{{ now()->format('d M Y, H:i') }}</small>
                            </div>
                        </div>
                        <div class="d-flex align-items-start mb-3 pb-3 border-bottom">
                            <div class="bg-success bg-opacity-10 p-2 rounded me-3">
                                <i class="fas fa-laptop text-success"></i>
                            </div>
                            <div>
                                <div class="fw-semibold">Device</div>
                                <small class="text-muted">{{ request()->userAgent() }}</small>
                            </div>
                        </div>
                        <div class="d-flex align-items-start">
                            <div class="bg-success bg-opacity-10 p-2 rounded me-3">
                                <i class="fas fa-globe text-success"></i>
                            </div>
                            <div>
                                <div class="fw-semibold">IP Address</div>
                                <small class="text-muted">{{ request()->ip() }}</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('styles')
<style>
    .nav-pills .nav-link {
        border-radius: 10px;
        padding: 0.75rem 1.5rem;
        color: #64748b;
        font-weight: 500;
        transition: all 0.3s ease;
    }
    
    .nav-pills .nav-link:hover {
        background: #f1f5f9;
        color: #3b82f6;
    }
    
    .nav-pills .nav-link.active {
        background: #3b82f6;
        color: white;
    }
</style>
@endpush
@endsection