@extends('layouts.app')

@section('title', 'Customer Dashboard')

@section('styles')
<style>
    /* Dashboard Styles */
    .customer-dashboard {
        background-color: #f8fafc;
        min-height: calc(100vh - 60px);
    }
    
    .customer-sidebar {
        background-color: #2d3748;
        color: #fff;
        min-height: calc(100vh - 60px);
        position: fixed;
        width: 250px;
        transition: all 0.3s;
        z-index: 1000;
    }
    
    .customer-sidebar .nav-link {
        color: rgba(255, 255, 255, 0.7);
        padding: 0.75rem 1.25rem;
        border-left: 3px solid transparent;
        transition: all 0.2s;
    }
    
    .customer-sidebar .nav-link:hover {
        color: #fff;
        background-color: rgba(255, 255, 255, 0.1);
        border-left-color: rgba(255, 255, 255, 0.5);
    }
    
    .customer-sidebar .nav-link.active {
        color: #fff;
        background-color: rgba(255, 255, 255, 0.1);
        border-left-color: #3490dc;
    }
    
    .customer-sidebar .nav-link i {
        margin-right: 10px;
        width: 20px;
        text-align: center;
    }
    
    .customer-content {
        margin-left: 250px;
        padding: 20px;
        transition: all 0.3s;
    }
    
    .customer-header {
        background-color: #fff;
        border-bottom: 1px solid #e2e8f0;
        padding: 15px 20px;
        margin-bottom: 20px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
    }
    
    .appointment-card {
        border-radius: 10px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        overflow: hidden;
        margin-bottom: 20px;
    }
    
    .appointment-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
    }
    
    .appointment-card .card-header {
        background-color: #fff;
        border-bottom: 1px solid #e2e8f0;
        padding: 15px 20px;
    }
    
    .appointment-status {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
        border-radius: 50px;
    }
    
    .appointment-status.pending {
        background-color: rgba(246, 153, 63, 0.2);
        color: #f6993f;
    }
    
    .appointment-status.confirmed {
        background-color: rgba(56, 193, 114, 0.2);
        color: #38c172;
    }
    
    .appointment-status.cancelled {
        background-color: rgba(227, 52, 47, 0.2);
        color: #e3342f;
    }
    
    .appointment-status.completed {
        background-color: rgba(52, 144, 220, 0.2);
        color: #3490dc;
    }
    
    .service-card {
        border-radius: 10px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        overflow: hidden;
        margin-bottom: 20px;
    }
    
    .service-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
    }
    
    .service-image {
        height: 150px;
        overflow: hidden;
    }
    
    .service-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .service-rating {
        color: #f6993f;
    }
    
    .profile-card {
        border-radius: 10px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    }
    
    .profile-header {
        background: linear-gradient(135deg, #3490dc 0%, #6574cd 100%);
        color: white;
        padding: 30px;
        border-radius: 10px 10px 0 0;
        position: relative;
    }
    
    .profile-avatar {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        border: 5px solid white;
        overflow: hidden;
        margin: 0 auto 15px;
    }
    
    .profile-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .profile-stats {
        display: flex;
        justify-content: space-around;
        text-align: center;
        margin-top: 20px;
    }
    
    .profile-stat-item {
        padding: 0 15px;
    }
    
    .profile-stat-value {
        font-size: 1.5rem;
        font-weight: 700;
    }
    
    .profile-stat-label {
        font-size: 0.875rem;
        opacity: 0.8;
    }
    
    .payment-history-item {
        padding: 15px 0;
        border-bottom: 1px solid #e2e8f0;
    }
    
    .payment-history-item:last-child {
        border-bottom: none;
    }
    
    .payment-status {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
        border-radius: 50px;
    }
    
    .payment-status.completed {
        background-color: rgba(56, 193, 114, 0.2);
        color: #38c172;
    }
    
    .payment-status.pending {
        background-color: rgba(246, 153, 63, 0.2);
        color: #f6993f;
    }
    
    .payment-status.failed {
        background-color: rgba(227, 52, 47, 0.2);
        color: #e3342f;
    }
    
    /* Responsive Sidebar */
    @media (max-width: 991.98px) {
        .customer-sidebar {
            margin-left: -250px;
        }
        
        .customer-sidebar.active {
            margin-left: 0;
        }
        
        .customer-content {
            margin-left: 0;
        }
        
        .customer-content.active {
            margin-left: 250px;
        }
        
        .sidebar-toggle {
            display: block !important;
        }
    }
</style>
@endsection

@section('content')
<div class="customer-dashboard">
    <!-- Sidebar -->
    <div class="customer-sidebar">
        <div class="p-3 border-bottom">
            <h5 class="text-white mb-0">Customer Dashboard</h5>
        </div>
        <ul class="nav flex-column mt-3">
            <li class="nav-item">
                <a class="nav-link active" href="{{ route('customer.dashboard') }}">
                    <i class="fas fa-tachometer-alt"></i> Dashboard
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="{{ route('customer.appointments') }}">
                    <i class="fas fa-calendar-check"></i> My Appointments
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="{{ route('customer.bookings') }}">
                    <i class="fas fa-calendar-plus"></i> Book Appointment
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="{{ route('customer.payments') }}">
                    <i class="fas fa-credit-card"></i> Payment History
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="{{ route('customer.favorites') }}">
                    <i class="fas fa-heart"></i> Favorites
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="{{ route('customer.profile') }}">
                    <i class="fas fa-user"></i> My Profile
                </a>
            </li>
            <li class="nav-item mt-3">
                <a class="nav-link" href="{{ route('logout') }}" onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
                    <i class="fas fa-sign-out-alt"></i> Logout
                </a>
            </li>
        </ul>
    </div>
    
    <!-- Content -->
    <div class="customer-content">
        <!-- Toggle Button for Mobile -->
        <button class="btn btn-primary sidebar-toggle d-lg-none mb-3">
            <i class="fas fa-bars"></i>
        </button>
        
        <!-- Header -->
        <div class="customer-header d-flex justify-content-between align-items-center">
            <h4 class="mb-0">My Dashboard</h4>
            <div>
                <span class="text-muted me-2">Welcome, {{ Auth::user()->name }}</span>
                <div class="dropdown d-inline-block">
                    <button class="btn btn-outline-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
                        <i class="fas fa-user-circle"></i>
                    </button>
                    <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton">
                        <li><a class="dropdown-item" href="{{ route('customer.profile') }}">My Profile</a></li>
                        <li><a class="dropdown-item" href="{{ route('customer.settings') }}">Settings</a></li>
                        <li><hr class="dropdown-divider"></li>
                        <li>
                            <a class="dropdown-item" href="{{ route('logout') }}" onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
                                Logout
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        
        <!-- Profile Overview -->
        <div class="row mb-4">
            <div class="col-lg-4 mb-4 mb-lg-0">
                <div class="profile-card">
                    <div class="profile-header text-center">
                        <div class="profile-avatar">
                            <img src="{{ asset('images/avatars/default.jpg') }}" alt="Profile Avatar">
                        </div>
                        <h5 class="mb-1">{{ Auth::user()->name }}</h5>
                        <p class="mb-0">Member since {{ Auth::user()->created_at->format('M Y') }}</p>
                        
                        <div class="profile-stats">
                            <div class="profile-stat-item">
                                <div class="profile-stat-value">12</div>
                                <div class="profile-stat-label">Appointments</div>
                            </div>
                            <div class="profile-stat-item">
                                <div class="profile-stat-value">5</div>
                                <div class="profile-stat-label">Favorites</div>
                            </div>
                            <div class="profile-stat-item">
                                <div class="profile-stat-value">3</div>
                                <div class="profile-stat-label">Reviews</div>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="d-grid gap-2">
                            <a href="{{ route('customer.profile') }}" class="btn btn-outline-primary">
                                <i class="fas fa-user-edit me-2"></i> Edit Profile
                            </a>
                            <a href="{{ route('customer.bookings') }}" class="btn btn-primary">
                                <i class="fas fa-calendar-plus me-2"></i> Book New Appointment
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-8">
                <div class="card h-100">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">Upcoming Appointments</h5>
                        <a href="{{ route('customer.appointments') }}" class="btn btn-sm btn-outline-primary">View All</a>
                    </div>
                    <div class="card-body">
                        <div class="appointment-card mb-3">
                            <div class="card-body">
                                <div class="d-flex justify-content-between align-items-center mb-3">
                                    <h6 class="mb-0">Haircut & Styling</h6>
                                    <span class="appointment-status confirmed">Confirmed</span>
                                </div>
                                <div class="row mb-3">
                                    <div class="col-md-6">
                                        <div class="d-flex align-items-center mb-2">
                                            <i class="far fa-calendar-alt text-muted me-2"></i>
                                            <span>May 20, 2025</span>
                                        </div>
                                        <div class="d-flex align-items-center mb-2">
                                            <i class="far fa-clock text-muted me-2"></i>
                                            <span>10:00 AM - 10:45 AM</span>
                                        </div>
                                        <div class="d-flex align-items-center">
                                            <i class="fas fa-map-marker-alt text-muted me-2"></i>
                                            <span>John's Salon, 123 Main St</span>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="d-flex align-items-center mb-2">
                                            <i class="fas fa-user text-muted me-2"></i>
                                            <span>Stylist: John Smith</span>
                                        </div>
                                        <div class="d-flex align-items-center mb-2">
                                            <i class="fas fa-dollar-sign text-muted me-2"></i>
                                            <span>$35.00 (Paid)</span>
                                        </div>
                                        <div class="d-flex align-items-center">
                                            <i class="fas fa-phone text-muted me-2"></i>
                                            <span>(555) 123-4567</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="d-flex justify-content-end">
                                    <button class="btn btn-outline-secondary me-2">
                                        <i class="fas fa-calendar-alt me-1"></i> Reschedule
                                    </button>
                                    <button class="btn btn-outline-danger">
                                        <i class="fas fa-times me-1"></i> Cancel
                                    </button>
                                </div>
                            </div>
                        </div>
                        
                        <div class="appointment-card">
                            <div class="card-body">
                                <div class="d-flex justify-content-between align-items-center mb-3">
                                    <h6 class="mb-0">Dental Checkup</h6>
                                    <span class="appointment-status confirmed">Confirmed</span>
                                </div>
                                <div class="row mb-3">
                                    <div class="col-md-6">
                                        <div class="d-flex align-items-center mb-2">
                                            <i class="far fa-calendar-alt text-muted me-2"></i>
                                            <span>May 25, 2025</span>
                                        </div>
                                        <div class="d-flex align-items-center mb-2">
                                            <i class="far fa-clock text-muted me-2"></i>
                                            <span>2:00 PM - 3:00 PM</span>
                                        </div>
                                        <div class="d-flex align-items-center">
                                            <i class="fas fa-map-marker-alt text-muted me-2"></i>
                                            <span>Smile Dental Clinic, 456 Oak Ave</span>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="d-flex align-items-center mb-2">
                                            <i class="fas fa-user text-muted me-2"></i>
                                            <span>Dr. Sarah Johnson</span>
                                        </div>
                                        <div class="d-flex align-items-center mb-2">
                                            <i class="fas fa-dollar-sign text-muted me-2"></i>
                                            <span>$75.00 (Paid)</span>
                                        </div>
                                        <div class="d-flex align-items-center">
                                            <i class="fas fa-phone text-muted me-2"></i>
                                            <span>(555) 987-6543</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="d-flex justify-content-end">
                                    <button class="btn btn-outline-secondary me-2">
                                        <i class="fas fa-calendar-alt me-1"></i> Reschedule
                                    </button>
                                    <button class="btn btn-outline-danger">
                                        <i class="fas fa-times me-1"></i> Cancel
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Recommended Services and Payment History -->
        <div class="row">
            <div class="col-lg-8 mb-4 mb-lg-0">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">Recommended Services</h5>
                        <a href="{{ url('/services') }}" class="btn btn-sm btn-outline-primary">View All Services</a>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6 mb-4">
                                <div class="service-card h-100">
                                    <div class="service-image">
                                        <img src="{{ asset('images/services/service-1.jpg') }}" alt="Haircut & Styling">
                                    </div>
                                    <div class="card-body">
                                        <div class="d-flex justify-content-between align-items-center mb-2">
                                            <span class="badge bg-primary">Health & Beauty</span>
                                            <div class="service-rating">
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star-half-alt"></i>
                                                <span class="ms-1">4.5</span>
                                            </div>
                                        </div>
                                        <h5 class="card-title">Haircut & Styling</h5>
                                        <p class="card-text text-muted">Professional haircut and styling services for all hair types.</p>
                                        <div class="d-flex justify-content-between align-items-center mt-3">
                                            <div class="d-flex align-items-center">
                                                <div class="me-2" style="width: 30px; height: 30px; border-radius: 50%; overflow: hidden;">
                                                    <img src="{{ asset('images/providers/provider-1.jpg') }}" alt="John's Salon" style="width: 100%; height: 100%; object-fit: cover;">
                                                </div>
                                                <span>John's Salon</span>
                                            </div>
                                            <h5 class="mb-0 text-primary">$35</h5>
                                        </div>
                                    </div>
                                    <div class="card-footer bg-white border-0 pt-0">
                                        <a href="{{ url('/service/haircut-styling') }}" class="btn btn-primary w-100">Book Now</a>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="col-md-6 mb-4">
                                <div class="service-card h-100">
                                    <div class="service-image">
                                        <img src="{{ asset('images/services/service-2.jpg') }}" alt="Dental Checkup">
                                    </div>
                                    <div class="card-body">
                                        <div class="d-flex justify-content-between align-items-center mb-2">
                                            <span class="badge bg-danger">Medical</span>
                                            <div class="service-rating">
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star"></i>
                                                <span class="ms-1">5.0</span>
                                            </div>
                                        </div>
                                        <h5 class="card-title">Dental Checkup</h5>
                                        <p class="card-text text-muted">Comprehensive dental examination and cleaning by specialists.</p>
                                        <div class="d-flex justify-content-between align-items-center mt-3">
                                            <div class="d-flex align-items-center">
                                                <div class="me-2" style="width: 30px; height: 30px; border-radius: 50%; overflow: hidden;">
                                                    <img src="{{ asset('images/providers/provider-2.jpg') }}" alt="Smile Dental Clinic" style="width: 100%; height: 100%; object-fit: cover;">
                                                </div>
                                                <span>Smile Dental Clinic</span>
                                            </div>
                                            <h5 class="mb-0 text-primary">$75</h5>
                                        </div>
                                    </div>
                                    <div class="card-footer bg-white border-0 pt-0">
                                        <a href="{{ url('/service/dental-checkup') }}" class="btn btn-primary w-100">Book Now</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-4">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">Recent Payments</h5>
                        <a href="{{ route('customer.payments') }}" class="btn btn-sm btn-outline-primary">View All</a>
                    </div>
                    <div class="card-body">
                        <div class="payment-history-item">
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <h6 class="mb-0">Haircut & Styling</h6>
                                <span class="payment-status completed">Paid</span>
                            </div>
                            <div class="d-flex justify-content-between align-items-center">
                                <div class="text-muted">May 15, 2025</div>
                                <div class="text-primary fw-bold">$35.00</div>
                            </div>
                        </div>
                        
                        <div class="payment-history-item">
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <h6 class="mb-0">Dental Checkup</h6>
                                <span class="payment-status completed">Paid</span>
                            </div>
                            <div class="d-flex justify-content-between align-items-center">
                                <div class="text-muted">May 10, 2025</div>
                                <div class="text-primary fw-bold">$75.00</div>
                            </div>
                        </div>
                        
                        <div class="payment-history-item">
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <h6 class="mb-0">Yoga Class</h6>
                                <span class="payment-status completed">Paid</span>
                            </div>
                            <div class="d-flex justify-content-between align-items-center">
                                <div class="text-muted">May 5, 2025</div>
                                <div class="text-primary fw-bold">$25.00</div>
                            </div>
                        </div>
                        
                        <div class="payment-history-item">
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <h6 class="mb-0">Spa Treatment</h6>
                                <span class="payment-status completed">Paid</span>
                            </div>
                            <div class="d-flex justify-content-between align-items-center">
                                <div class="text-muted">April 28, 2025</div>
                                <div class="text-primary fw-bold">$90.00</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    $(document).ready(function() {
        // Toggle sidebar on mobile
        $('.sidebar-toggle').on('click', function() {
            $('.customer-sidebar').toggleClass('active');
            $('.customer-content').toggleClass('active');
        });
    });
</script>
@endsection