@extends('layouts.app')

@section('title', 'My Dashboard - SecureSoftPay')

@push('styles')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<style>
    body { background-color: #f8f9fa; }
    .dashboard-container { display: flex; max-width: 1400px; margin: 120px auto 50px; gap: 30px; }
    .dashboard-sidebar { width: 280px; flex-shrink: 0; }
    .user-profile-card { background: #fff; border: 1px solid #e9ecef; border-radius: 8px; padding: 25px; text-align: center; margin-bottom: 20px; }
    .user-avatar { width: 80px; height: 80px; border-radius: 50%; background-color: #e9ecef; margin: 0 auto 15px; display: flex; align-items: center; justify-content: center; font-size: 36px; color: #adb5bd; }
    .user-profile-card h3 { font-size: 16px; font-weight: 600; margin-bottom: 8px; }
    .user-profile-card p { font-size: 13px; color: #6c757d; line-height: 1.6; margin-bottom: 20px; }
    .user-profile-buttons { display: flex; gap: 10px; }
    .btn-update, .btn-logout { flex: 1; padding: 8px 12px; border-radius: 5px; text-decoration: none; font-size: 14px; font-weight: 500; border: 1px solid; transition: all 0.2s; }
    .btn-update { background-color: #007bff; border-color: #007bff; color: white; }
    .btn-update:hover { background-color: #0069d9; }
    .btn-logout { background-color: transparent; border-color: #ced4da; color: #495057; }
    .btn-logout:hover { background-color: #f8f9fa; }
    .contacts-card { background: #fff; border: 1px solid #e9ecef; border-radius: 8px; padding: 20px; }
    .contacts-card h4 { font-size: 15px; font-weight: 600; margin-bottom: 10px; }
    .dashboard-main { flex-grow: 1; }
    .dashboard-main h1 { font-size: 28px; font-weight: 600; }
    .breadcrumb { font-size: 14px; color: #6c757d; margin-bottom: 25px; }
    .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 30px; }
    .stat-card { background-color: #fff; padding: 20px; border-radius: 8px; border: 1px solid #e9ecef; position: relative; text-decoration: none; transition: transform 0.2s, box-shadow 0.2s; }
    .stat-card:hover { transform: translateY(-3px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
    .stat-card-icon { position: absolute; top: 15px; right: 15px; color: #adb5bd; }
    .stat-card .count { font-size: 36px; font-weight: 600; color: #007bff; margin-bottom: 5px; }
    .stat-card .title { font-size: 14px; color: #6c757d; }
    .services-list-card { background: #fff; border: 1px solid #e9ecef; border-radius: 8px; }
    .services-list-header { padding: 15px 20px; border-bottom: 1px solid #e9ecef; font-size: 16px; font-weight: 600; }
    .service-item { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; border-bottom: 1px solid #e9ecef; }
    .service-item:last-child { border-bottom: none; }
    .service-details strong { font-weight: 600; font-size: 15px; }
    .service-details span { font-size: 13px; color: #6c757d; display: block; }
    .service-actions { display: flex; align-items: center; gap: 15px; }
    .status-badge-active { background-color: #d4edda; color: #155724; padding: 4px 10px; border-radius: 12px; font-size: 12px; font-weight: 500; }
    .manage-btn-simple { background: #fff; border: 1px solid #ced4da; padding: 6px 14px; border-radius: 5px; font-weight: 500; font-size: 14px; text-decoration: none; color: #333; }
    .manage-dropdown { position: relative; }
    .manage-dropdown .manage-btn { background: #fff; border: 1px solid #ced4da; padding: 6px 14px; border-radius: 5px; font-weight: 500; font-size: 14px; cursor: pointer; }
    .manage-dropdown .dropdown-content { display: none; position: absolute; right: 0; top: 100%; background-color: #fff; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.1); z-index: 1; border-radius: 5px; margin-top: 5px; padding: 5px 0; }
    .manage-dropdown:hover .dropdown-content { display: block; }
    .manage-dropdown .dropdown-content a { color: black; padding: 10px 15px; text-decoration: none; display: block; font-size: 14px; }
    .manage-dropdown .dropdown-content a:hover { background-color: #f1f1f1; }
    @media (max-width: 1200px) { .dashboard-container { max-width: 100%; padding: 0 20px; } }
    @media (max-width: 992px) { .dashboard-container { flex-direction: column; } .dashboard-sidebar { width: 100%; } .stats-grid { grid-template-columns: 1fr 1fr; } }
    @media (max-width: 576px) { .stats-grid { grid-template-columns: 1fr; } }
</style>
@endpush

@section('content')
<div class="dashboard-container">
    <aside class="dashboard-sidebar">
        <div class="user-profile-card">
            <div class="user-avatar"><i class="fa fa-user"></i></div>
            <h3>#{{ $user->id }} {{ strtoupper($user->first_name . ' ' . $user->last_name) }}</h3>
            <p>{!! nl2br(e($user->address)) !!}<br>Bangladesh</p>
            <div class="user-profile-buttons">
                <a href="#" class="btn-update">Update</a>
                <a href="{{ route('logout') }}" class="btn-logout" 
                   onclick="event.preventDefault(); document.getElementById('logout-form-sidebar').submit();">
                    Logout
                </a>
                <form id="logout-form-sidebar" action="{{ route('logout') }}" method="POST" style="display: none;">@csrf</form>
            </div>
        </div>
        <div class="contacts-card">
            <h4>Contacts</h4>
            <p style="font-size: 14px; color: #6c757d;">No Contacts Found</p>
        </div>
    </aside>

    <main class="dashboard-main">
        <h1>My Dashboard</h1>
        <p class="breadcrumb">Portal Home / Client Area</p>

        <div class="stats-grid">
            <a href="{{ route('my-services') }}" class="stat-card">
    <i class="fas fa-server stat-card-icon"></i>
    <div class="count">{{ $services_count }}</div>
    <div class="title">Services</div>
</a>
            <a href="#" class="stat-card">
                 <i class="fas fa-globe stat-card-icon"></i>
                <div class="count">{{ $domains_count }}</div>
                <div class="title">Domains</div>
            </a>
            {{-- THIS LINK IS NOW CORRECTED --}}
            <a href="{{ route('my-invoices') }}" class="stat-card">
                 <i class="fas fa-file-invoice stat-card-icon"></i>
                <div class="count">{{ $unpaid_invoices_count }}</div>
                <div class="title">Unpaid Invoices</div>
            </a>
            <a href="#" class="stat-card">
                 <i class="fas fa-ticket-alt stat-card-icon"></i>
                <div class="count">{{ $tickets_count }}</div>
                <div class="title">Tickets</div>
            </a>
        </div>

        <div class="services-list-card">
            <div class="services-list-header">
                Your Active Products/Services
            </div>
            <div>
                @forelse ($active_services as $service)
                    <div class="service-item">
                        <div class="service-details">
                            <strong>{{ $service->product->name ?? 'N/A' }}</strong>
                            <span>{{ $service->domain_name }}</span>
                        </div>
                        <div class="service-actions">
                            <span class="status-badge-active">Active</span>
                            @if (in_array(strtolower($service->product->group->name ?? ''), ['shared hosting', 'reseller hosting']))
                                <div class="manage-dropdown">
                                    <button class="manage-btn">Manage <i class="fas fa-caret-down"></i></button>
                                    <div class="dropdown-content">
                                        <a href="#" target="_blank">Login to cPanel</a>
                                        <a href="#">Manage Service</a>
                                    </div>
                                </div>
                            @else
                                <a href="#" class="manage-btn-simple">Manage</a>
                            @endif
                        </div>
                    </div>
                @empty
                    <p style="text-align: center; padding: 20px; color: #6c757d;">No active services to display.</p>
                @endforelse
            </div>
        </div>
    </main>
</div>
@endsection