@extends('layouts.app')

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

@section('styles')
<style>
    /* Dashboard Styles */
    .provider-dashboard {
        background-color: #f8fafc;
        min-height: calc(100vh - 60px);
    }
    
    .provider-sidebar {
        background-color: #2d3748;
        color: #fff;
        min-height: calc(100vh - 60px);
        position: fixed;
        width: 250px;
        transition: all 0.3s;
        z-index: 1000;
    }
    
    .provider-sidebar .nav-link {
        color: rgba(255, 255, 255, 0.7);
        padding: 0.75rem 1.25rem;
        border-left: 3px solid transparent;
        transition: all 0.2s;
    }
    
    .provider-sidebar .nav-link:hover {
        color: #fff;
        background-color: rgba(255, 255, 255, 0.1);
        border-left-color: rgba(255, 255, 255, 0.5);
    }
    
    .provider-sidebar .nav-link.active {
        color: #fff;
        background-color: rgba(255, 255, 255, 0.1);
        border-left-color: #3490dc;
    }
    
    .provider-sidebar .nav-link i {
        margin-right: 10px;
        width: 20px;
        text-align: center;
    }
    
    .provider-content {
        margin-left: 250px;
        padding: 20px;
        transition: all 0.3s;
    }
    
    .provider-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);
    }
    
    .stat-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;
    }
    
    .stat-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
    }
    
    .stat-card .card-body {
        padding: 20px;
    }
    
    .stat-icon {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        margin-bottom: 15px;
    }
    
    .stat-icon.bg-primary-light {
        background-color: rgba(52, 144, 220, 0.2);
        color: #3490dc;
    }
    
    .stat-icon.bg-success-light {
        background-color: rgba(56, 193, 114, 0.2);
        color: #38c172;
    }
    
    .stat-icon.bg-warning-light {
        background-color: rgba(246, 153, 63, 0.2);
        color: #f6993f;
    }
    
    .stat-icon.bg-danger-light {
        background-color: rgba(227, 52, 47, 0.2);
        color: #e3342f;
    }
    
    .stat-value {
        font-size: 2rem;
        font-weight: 700;
        margin-bottom: 5px;
    }
    
    .stat-label {
        color: #718096;
        font-size: 0.875rem;
    }
    
    .chart-card {
        border-radius: 10px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
        margin-bottom: 20px;
    }
    
    .chart-card .card-header {
        background-color: #fff;
        border-bottom: 1px solid #e2e8f0;
        padding: 15px 20px;
    }
    
    .chart-card .card-body {
        padding: 20px;
    }
    
    .upcoming-appointment-card {
        border-radius: 10px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    }
    
    .appointment-item {
        padding: 15px;
        border-bottom: 1px solid #e2e8f0;
        transition: background-color 0.3s ease;
    }
    
    .appointment-item:last-child {
        border-bottom: none;
    }
    
    .appointment-item:hover {
        background-color: #f8fafc;
    }
    
    .appointment-time {
        font-size: 0.875rem;
        color: #718096;
    }
    
    .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;
    }
    
    /* Responsive Sidebar */
    @media (max-width: 991.98px) {
        .provider-sidebar {
            margin-left: -250px;
        }
        
        .provider-sidebar.active {
            margin-left: 0;
        }
        
        .provider-content {
            margin-left: 0;
        }
        
        .provider-content.active {
            margin-left: 250px;
        }
        
        .sidebar-toggle {
            display: block !important;
        }
    }
</style>
@endsection

@section('content')
<div class="provider-dashboard">
    <!-- Sidebar -->
    <div class="provider-sidebar">
        <div class="p-3 border-bottom">
            <h5 class="text-white mb-0">Provider Dashboard</h5>
        </div>
        <ul class="nav flex-column mt-3">
            <li class="nav-item">
                <a class="nav-link active" href="{{ route('provider.dashboard') }}">
                    <i class="fas fa-tachometer-alt"></i> Dashboard
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="{{ route('provider-services.index') }}">
                    <i class="fas fa-concierge-bell"></i> My Services
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="{{ route('provider-employees.index') }}">
                    <i class="fas fa-user-tie"></i> My Employees
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="{{ route('provider-appointments.index') }}">
                    <i class="fas fa-calendar-check"></i> Appointments
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="{{ route('provider-payments.index') }}">
                    <i class="fas fa-credit-card"></i> Payments
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="{{ route('provider.settings') }}">
                    <i class="fas fa-cog"></i> Settings
                </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="provider-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="provider-header d-flex justify-content-between align-items-center">
            <h4 class="mb-0">Provider 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="#">My Profile</a></li>
                        <li><a class="dropdown-item" href="{{ route('provider.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>
        
        <!-- Stats Cards -->
        <div class="row mb-4">
            <div class="col-xl-3 col-md-6 mb-4">
                <div class="card stat-card h-100">
                    <div class="card-body">
                        <div class="stat-icon bg-primary-light">
                            <i class="fas fa-calendar-check"></i>
                        </div>
                        <div class="stat-value">48</div>
                        <div class="stat-label">Today's Appointments</div>
                        <div class="mt-2 text-success">
                            <i class="fas fa-arrow-up me-1"></i> 8.5% <small class="text-muted">from yesterday</small>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-xl-3 col-md-6 mb-4">
                <div class="card stat-card h-100">
                    <div class="card-body">
                        <div class="stat-icon bg-success-light">
                            <i class="fas fa-dollar-sign"></i>
                        </div>
                        <div class="stat-value">$1,257</div>
                        <div class="stat-label">Today's Revenue</div>
                        <div class="mt-2 text-success">
                            <i class="fas fa-arrow-up me-1"></i> 12.3% <small class="text-muted">from yesterday</small>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-xl-3 col-md-6 mb-4">
                <div class="card stat-card h-100">
                    <div class="card-body">
                        <div class="stat-icon bg-warning-light">
                            <i class="fas fa-concierge-bell"></i>
                        </div>
                        <div class="stat-value">12</div>
                        <div class="stat-label">Active Services</div>
                        <div class="mt-2 text-success">
                            <i class="fas fa-arrow-up me-1"></i> 2 <small class="text-muted">new this month</small>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-xl-3 col-md-6 mb-4">
                <div class="card stat-card h-100">
                    <div class="card-body">
                        <div class="stat-icon bg-danger-light">
                            <i class="fas fa-star"></i>
                        </div>
                        <div class="stat-value">4.8</div>
                        <div class="stat-label">Average Rating</div>
                        <div class="mt-2 text-success">
                            <i class="fas fa-arrow-up me-1"></i> 0.2 <small class="text-muted">from last month</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Appointments and Calendar -->
        <div class="row mb-4">
            <div class="col-lg-8 mb-4 mb-lg-0">
                <div class="card chart-card h-100">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">Appointments Calendar</h5>
                        <div class="dropdown">
                            <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" id="calendarDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                                This Week
                            </button>
                            <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="calendarDropdown">
                                <li><a class="dropdown-item" href="#">Today</a></li>
                                <li><a class="dropdown-item active" href="#">This Week</a></li>
                                <li><a class="dropdown-item" href="#">This Month</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="card-body">
                        <div id="appointmentCalendar"></div>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-4">
                <div class="card upcoming-appointment-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('provider-appointments.index') }}" class="btn btn-sm btn-outline-primary">View All</a>
                    </div>
                    <div class="card-body p-0">
                        <div class="appointment-item">
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <div class="appointment-time">
                                    <i class="far fa-clock me-1"></i> Today, 10:00 AM
                                </div>
                                <span class="appointment-status confirmed">Confirmed</span>
                            </div>
                            <h6 class="mb-1">John Smith - Haircut & Styling</h6>
                            <div class="d-flex justify-content-between align-items-center mt-2">
                                <small class="text-muted">Duration: 45 min</small>
                                <div>
                                    <button class="btn btn-sm btn-outline-secondary me-1">
                                        <i class="fas fa-phone"></i>
                                    </button>
                                    <button class="btn btn-sm btn-outline-primary">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                        
                        <div class="appointment-item">
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <div class="appointment-time">
                                    <i class="far fa-clock me-1"></i> Today, 11:30 AM
                                </div>
                                <span class="appointment-status confirmed">Confirmed</span>
                            </div>
                            <h6 class="mb-1">Sarah Johnson - Manicure</h6>
                            <div class="d-flex justify-content-between align-items-center mt-2">
                                <small class="text-muted">Duration: 60 min</small>
                                <div>
                                    <button class="btn btn-sm btn-outline-secondary me-1">
                                        <i class="fas fa-phone"></i>
                                    </button>
                                    <button class="btn btn-sm btn-outline-primary">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                        
                        <div class="appointment-item">
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <div class="appointment-time">
                                    <i class="far fa-clock me-1"></i> Today, 2:00 PM
                                </div>
                                <span class="appointment-status pending">Pending</span>
                            </div>
                            <h6 class="mb-1">Michael Rodriguez - Beard Trim</h6>
                            <div class="d-flex justify-content-between align-items-center mt-2">
                                <small class="text-muted">Duration: 30 min</small>
                                <div>
                                    <button class="btn btn-sm btn-outline-secondary me-1">
                                        <i class="fas fa-phone"></i>
                                    </button>
                                    <button class="btn btn-sm btn-outline-primary">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                        
                        <div class="appointment-item">
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <div class="appointment-time">
                                    <i class="far fa-clock me-1"></i> Tomorrow, 9:30 AM
                                </div>
                                <span class="appointment-status confirmed">Confirmed</span>
                            </div>
                            <h6 class="mb-1">Emily Chen - Hair Coloring</h6>
                            <div class="d-flex justify-content-between align-items-center mt-2">
                                <small class="text-muted">Duration: 120 min</small>
                                <div>
                                    <button class="btn btn-sm btn-outline-secondary me-1">
                                        <i class="fas fa-phone"></i>
                                    </button>
                                    <button class="btn btn-sm btn-outline-primary">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Revenue Chart and Top Services -->
        <div class="row">
            <div class="col-lg-8 mb-4">
                <div class="card chart-card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">Revenue Overview</h5>
                        <div class="dropdown">
                            <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" id="revenueDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                                This Month
                            </button>
                            <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="revenueDropdown">
                                <li><a class="dropdown-item" href="#">This Week</a></li>
                                <li><a class="dropdown-item active" href="#">This Month</a></li>
                                <li><a class="dropdown-item" href="#">Last 3 Months</a></li>
                                <li><a class="dropdown-item" href="#">This Year</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="card-body">
                        <canvas id="revenueChart" height="300"></canvas>
                    </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">Top Services</h5>
                        <a href="{{ route('provider-services.index') }}" class="btn btn-sm btn-outline-primary">View All</a>
                    </div>
                    <div class="card-body">
                        <div class="d-flex align-items-center mb-3">
                            <div class="flex-shrink-0 me-3">
                                <div class="bg-primary text-white rounded-circle d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
                                    <span>1</span>
                                </div>
                            </div>
                            <div class="flex-grow-1">
                                <h6 class="mb-1">Haircut & Styling</h6>
                                <div class="d-flex justify-content-between align-items-center">
                                    <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>
                                    <span class="text-primary">$35</span>
                                </div>
                            </div>
                        </div>
                        
                        <div class="d-flex align-items-center mb-3">
                            <div class="flex-shrink-0 me-3">
                                <div class="bg-primary text-white rounded-circle d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
                                    <span>2</span>
                                </div>
                            </div>
                            <div class="flex-grow-1">
                                <h6 class="mb-1">Hair Coloring</h6>
                                <div class="d-flex justify-content-between align-items-center">
                                    <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>
                                    <span class="text-primary">$85</span>
                                </div>
                            </div>
                        </div>
                        
                        <div class="d-flex align-items-center mb-3">
                            <div class="flex-shrink-0 me-3">
                                <div class="bg-primary text-white rounded-circle d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
                                    <span>3</span>
                                </div>
                            </div>
                            <div class="flex-grow-1">
                                <h6 class="mb-1">Manicure</h6>
                                <div class="d-flex justify-content-between align-items-center">
                                    <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="far fa-star"></i>
                                        <span class="ms-1">4.0</span>
                                    </div>
                                    <span class="text-primary">$40</span>
                                </div>
                            </div>
                        </div>
                        
                        <div class="d-flex align-items-center mb-3">
                            <div class="flex-shrink-0 me-3">
                                <div class="bg-primary text-white rounded-circle d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
                                    <span>4</span>
                                </div>
                            </div>
                            <div class="flex-grow-1">
                                <h6 class="mb-1">Beard Trim</h6>
                                <div class="d-flex justify-content-between align-items-center">
                                    <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.7</span>
                                    </div>
                                    <span class="text-primary">$25</span>
                                </div>
                            </div>
                        </div>
                        
                        <div class="d-flex align-items-center">
                            <div class="flex-shrink-0 me-3">
                                <div class="bg-primary text-white rounded-circle d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
                                    <span>5</span>
                                </div>
                            </div>
                            <div class="flex-grow-1">
                                <h6 class="mb-1">Facial Treatment</h6>
                                <div class="d-flex justify-content-between align-items-center">
                                    <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="far fa-star"></i>
                                        <span class="ms-1">4.2</span>
                                    </div>
                                    <span class="text-primary">$60</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.10.1/main.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/fullcalendar@5.10.1/main.min.css" rel="stylesheet">
<script>
    $(document).ready(function() {
        // Toggle sidebar on mobile
        $('.sidebar-toggle').on('click', function() {
            $('.provider-sidebar').toggleClass('active');
            $('.provider-content').toggleClass('active');
        });
        
        // Revenue Chart
        var revenueCtx = document.getElementById('revenueChart').getContext('2d');
        var revenueChart = new Chart(revenueCtx, {
            type: 'bar',
            data: {
                labels: ['1 May', '5 May', '10 May', '15 May', '20 May', '25 May', '30 May'],
                datasets: [{
                    label: 'Revenue',
                    data: [650, 780, 660, 860, 930, 820, 1080],
                    backgroundColor: '#3490dc',
                    borderWidth: 0,
                    borderRadius: 5
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: false
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: {
                            callback: function(value) {
                                return '$' + value;
                            }
                        }
                    }
                }
            }
        });
        
        // Initialize Calendar
        var calendarEl = document.getElementById('appointmentCalendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {
            initialView: 'timeGridWeek',
            headerToolbar: {
                left: 'prev,next today',
                center: 'title',
                right: 'dayGridMonth,timeGridWeek,timeGridDay'
            },
            events: [
                {
                    title: 'John Smith - Haircut',
                    start: '2025-05-17T10:00:00',
                    end: '2025-05-17T10:45:00',
                    backgroundColor: '#3490dc'
                },
                {
                    title: 'Sarah Johnson - Manicure',
                    start: '2025-05-17T11:30:00',
                    end: '2025-05-17T12:30:00',
                    backgroundColor: '#3490dc'
                },
                {
                    title: 'Michael Rodriguez - Beard Trim',
                    start: '2025-05-17T14:00:00',
                    end: '2025-05-17T14:30:00',
                    backgroundColor: '#f6993f'
                },
                {
                    title: 'Emily Chen - Hair Coloring',
                    start: '2025-05-18T09:30:00',
                    end: '2025-05-18T11:30:00',
                    backgroundColor: '#3490dc'
                },
                {
                    title: 'David Wilson - Haircut',
                    start: '2025-05-18T13:00:00',
                    end: '2025-05-18T13:45:00',
                    backgroundColor: '#3490dc'
                },
                {
                    title: 'Lisa Brown - Facial',
                    start: '2025-05-19T10:00:00',
                    end: '2025-05-19T11:00:00',
                    backgroundColor: '#3490dc'
                },
                {
                    title: 'Robert Taylor - Beard Trim',
                    start: '2025-05-19T15:30:00',
                    end: '2025-05-19T16:00:00',
                    backgroundColor: '#3490dc'
                }
            ],
            eventClick: function(info) {
                alert('Appointment: ' + info.event.title);
            },
            height: 'auto'
        });
        calendar.render();
    });
</script>
@endsection