@extends('coach.layouts.contentNavbarLayout')

@section('title', 'Dashboard')

@section('vendor-style')
<link rel="stylesheet" href="{{asset('assets/vendor/libs/apex-charts/apex-charts.css')}}">
@endsection

@section('vendor-script')
<script src="{{asset('assets/vendor/libs/apex-charts/apexcharts.js')}}"></script>
@endsection

@section('page-script')
<script src="{{asset('assets/js/dashboards-analytics.js')}}"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
    // Monthly appointments chart
    const monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    const chartData = @json($chartData);
    
    const seriesData = Object.values(chartData);
    
    const monthlyAppointmentsChart = new ApexCharts(document.querySelector("#monthlyAppointmentsChart"), {
        series: [{
            name: 'Appointments',
            data: seriesData
        }],
        chart: {
            height: 350,
            type: 'bar',
            toolbar: {
                show: false
            }
        },
        plotOptions: {
            bar: {
                borderRadius: 4,
                columnWidth: '60%',
            }
        },
        dataLabels: {
            enabled: false
        },
        colors: ['#696cff'],
        xaxis: {
            categories: monthNames,
            axisBorder: {
                show: false
            }
        },
        grid: {
            borderColor: '#f1f1f1',
            padding: {
                bottom: 0
            }
        },
        tooltip: {
            y: {
                formatter: function(val) {
                    return val + " appointments"
                }
            }
        }
    });
    
    monthlyAppointmentsChart.render();
    
    // Status distribution chart
    const statusStats = @json($statusStats);
    const statusLabels = Object.keys(statusStats).map(status => status.replace('_', ' ').replace(/\b\w/g, l => l.toUpperCase()));
    const statusValues = Object.values(statusStats);
    
    const statusColors = {
        'completed': '#71dd37',
        'cancelled': '#ff3e1d',
        'booked': '#03c3ec',
        'confirmed': '#696cff',
        'in_progress': '#ffab00',
        'not_attended': '#8592a3',
        'rescheduled': '#8592a3'
    };
    
    const statusChartColors = Object.keys(statusStats).map(status => statusColors[status] || '#8592a3');
    
    const statusChart = new ApexCharts(document.querySelector("#statusDistributionChart"), {
        series: statusValues,
        chart: {
            height: 350,
            type: 'donut',
        },
        labels: statusLabels,
        colors: statusChartColors,
        legend: {
            position: 'bottom'
        },
        plotOptions: {
            pie: {
                donut: {
                    size: '70%',
                    labels: {
                        show: true,
                        name: {
                            show: true,
                        },
                        value: {
                            show: true,
                            formatter: function(val) {
                                return val
                            }
                        },
                        total: {
                            show: true,
                            label: 'Total',
                            formatter: function(w) {
                                return w.globals.seriesTotals.reduce((a, b) => a + b, 0)
                            }
                        }
                    }
                }
            }
        }
    });
    
    statusChart.render();
});
</script>
@endsection

@section('content')
<div class="container-fluid">
    <!-- Welcome and Overview Section -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h4 class="fw-bold mb-1">Welcome, {{ auth()->user()->name }}! 👋</h4>
                            <p class="mb-0 text-muted">Here's what's happening with your appointments today.</p>
                        </div>
                        <div class="text-end">
                            <h6 class="mb-0">Today: {{ now()->format('l, F d, Y') }}</h6>
                            <p class="text-muted mb-0">{{ now()->format('h:i A') }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Statistics Cards -->
    <div class="row mb-4">
        <div class="col-md-3 col-6">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex align-items-start justify-content-between">
                        <div class="content-left">
                            <span class="fw-semibold d-block mb-1">Total Appointments</span>
                            <h3 class="card-title mb-0">{{ $totalAppointments }}</h3>
                        </div>
                        <div class="avatar bg-primary p-2">
                            <span class="avatar-initial rounded bg-primary">
                                <i class="mdi mdi-calendar-check mdi-24px text-white"></i>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-md-3 col-6">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex align-items-start justify-content-between">
                        <div class="content-left">
                            <span class="fw-semibold d-block mb-1">Completed</span>
                            <h3 class="card-title mb-0">{{ $statusStats['completed'] ?? 0 }}</h3>
                        </div>
                        <div class="avatar bg-success p-2">
                            <span class="avatar-initial rounded bg-success">
                                <i class="mdi mdi-check-circle mdi-24px text-white"></i>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-md-3 col-6">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex align-items-start justify-content-between">
                        <div class="content-left">
                            <span class="fw-semibold d-block mb-1">Upcoming</span>
                            <h3 class="card-title mb-0">{{ ($statusStats['booked'] ?? 0) + ($statusStats['confirmed'] ?? 0) }}</h3>
                        </div>
                        <div class="avatar bg-info p-2">
                            <span class="avatar-initial rounded bg-info">
                                <i class="mdi mdi-calendar-clock mdi-24px text-white"></i>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-md-3 col-6">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex align-items-start justify-content-between">
                        <div class="content-left">
                            <span class="fw-semibold d-block mb-1">Cancelled</span>
                            <h3 class="card-title mb-0">{{ $statusStats['cancelled'] ?? 0 }}</h3>
                        </div>
                        <div class="avatar bg-danger p-2">
                            <span class="avatar-initial rounded bg-danger">
                                <i class="mdi mdi-calendar-remove mdi-24px text-white"></i>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Charts Section -->
    <div class="row mb-4">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">Monthly Appointments ({{ now()->year }})</h5>
                </div>
                <div class="card-body">
                    <div id="monthlyAppointmentsChart"></div>
                </div>
            </div>
        </div>
        
        <div class="col-md-4">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">Status Distribution</h5>
                </div>
                <div class="card-body">
                    <div id="statusDistributionChart"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- Today's Appointments -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">Today's Appointments</h5>
                    <span class="badge bg-primary rounded-pill">{{ $todayAppointments->count() }}</span>
                </div>
                <div class="card-body">
                    @if($todayAppointments->count() > 0)
                        <div class="row">
                            @foreach($todayAppointments as $appointment)
                                @php
                                    // Status color class
                                    $statusColor = 
                                        $appointment->status === 'completed' ? 'success' : 
                                        ($appointment->status === 'cancelled' ? 'danger' : 
                                        ($appointment->status === 'booked' ? 'primary' : 
                                        ($appointment->status === 'confirmed' ? 'info' : 
                                        ($appointment->status === 'in_progress' ? 'warning' : 
                                        ($appointment->status === 'not_attended' ? 'dark' : 
                                        ($appointment->status === 'rescheduled' ? 'secondary' : 'light'))))));
                                    
                                    // Call type
                                    $callType = isset($appointment->appointment_type) ? 
                                        ($appointment->appointment_type == 0 ? 'Audio Call' : 'Video Call') : 'N/A';
                                    $callTypeIcon = $appointment->appointment_type == 0 ? 
                                        'mdi-phone' : 'mdi-video';
                                @endphp
                                <div class="col-md-6 col-lg-4 mb-4">
                                    <div class="card h-100">
                                        <div class="card-header d-flex justify-content-between align-items-center">
                                            <h5 class="mb-0">{{ $appointment->appointment_number }}</h5>
                                            <span class="badge bg-{{ $statusColor }} rounded-pill">
                                                {{ ucfirst(str_replace('_', ' ', $appointment->status)) }}
                                            </span>
                                        </div>
                                        
                                        <!-- Date and Time Section -->
                                        <div class="p-3 bg-{{ $statusColor }}" style="background-color: rgba(var(--bs-{{ $statusColor }}-rgb), 0.15) !important; border-bottom: 2px solid var(--bs-{{ $statusColor }});">
                                            <div class="d-flex justify-content-between align-items-center">
                                                <div class="d-flex align-items-center">
                                                    <div class="rounded-circle bg-{{ $statusColor }} d-flex justify-content-center align-items-center me-3" style="width: 45px; height: 45px;">
                                                        <i class="mdi mdi-calendar-clock text-white fs-4"></i>
                                                    </div>
                                                    <div>
                                                        <h6 class="mb-0 fw-bold text-{{ $statusColor === 'light' ? 'dark' : $statusColor }}">Today</h6>
                                                        <span class="text-{{ $statusColor === 'light' ? 'muted' : $statusColor }}">{{ date('h:i A', strtotime($appointment->time_start)) }} - {{ date('h:i A', strtotime($appointment->time_end)) }}</span>
                                                    </div>
                                                </div>
                                                @php
                                                    $now = \Carbon\Carbon::now();
                                                    $appointmentStart = \Carbon\Carbon::parse($appointment->appointment_date->format('Y-m-d') . ' ' . $appointment->time_start);
                                                    $timeUntilStart = $now->diffInMinutes($appointmentStart, false);
                                                @endphp
                                                
                                                @if($timeUntilStart > 0 && $timeUntilStart <= 60)
                                                    <span class="badge bg-warning rounded-pill">In {{ $timeUntilStart }} min</span>
                                                @elseif($timeUntilStart > 60)
                                                    <span class="badge bg-{{ $statusColor }} rounded-pill">In {{ ceil($timeUntilStart / 60) }} hr</span>
                                                @elseif($timeUntilStart > -60 && $timeUntilStart <= 0)
                                                    <span class="badge bg-danger rounded-pill">Now</span>
                                                @else
                                                    <span class="badge bg-secondary rounded-pill">{{ abs(ceil($timeUntilStart / 60)) }} hr ago</span>
                                                @endif
                                            </div>
                                        </div>
                                        
                                        <div class="card-body">
                                            <!-- Call Type -->
                                            <div class="mb-3">
                                                <div class="d-flex align-items-center mb-2">
                                                    <i class="mdi {{ $callTypeIcon }} me-2 text-{{ $statusColor }}"></i>
                                                    <span class="fw-semibold">Call Type:</span>
                                                </div>
                                                <p class="ms-4 mb-0">{{ $callType }}</p>
                                            </div>
                                            
                                            <div class="mb-3">
                                                <div class="d-flex align-items-center mb-2">
                                                    <i class="mdi mdi-account-outline me-2 text-{{ $statusColor }}"></i>
                                                    <span class="fw-semibold">Employee:</span>
                                                </div>
                                                <p class="ms-4 mb-0">
                                                    {{ $appointment->employee->name }}
                                                </p>
                                            </div>
                                            
                                            <div class="mb-3">
                                                <div class="d-flex align-items-center mb-2">
                                                    <i class="mdi mdi-briefcase-outline me-2 text-{{ $statusColor }}"></i>
                                                    <span class="fw-semibold">Speciality:</span>
                                                </div>
                                                <p class="ms-4 mb-0">{{ $appointment->speciality->name_en }}</p>
                                            </div>
                                        </div>
                                        <div class="card-footer bg-transparent">
                                            <div class="d-flex justify-content-between">
                                                <div>
                                                    @if(in_array($appointment->status, ['booked', 'confirmed']))
                                                        <a href="{{ route('coach.appointments.index', ['status' => $appointment->status]) }}" class="btn btn-icon btn-danger btn-sm" title="Cancel Appointment">
                                                            <i class="mdi mdi-calendar-remove"></i>
                                                        </a>
                                                    @endif
                                                </div>
                                                <div>
                                                    @php
                                                        $now = Carbon\Carbon::now();
                                                        $appointmentStart = Carbon\Carbon::parse($appointment->appointment_date->format('Y-m-d') . ' ' . $appointment->time_start);
                                                        $appointmentEnd = Carbon\Carbon::parse($appointment->appointment_date->format('Y-m-d') . ' ' . $appointment->time_end);
                                                        $callStartTime = (clone $appointmentStart)->subMinutes(2);
                                                        $isWithinTimeRange = $now->between($callStartTime, $appointmentEnd);
                                                    @endphp
                                                    @if ($isWithinTimeRange && ($appointment->status == 'confirmed' || $appointment->status == 'in_progress'))
                                                        @if($appointment->appointment_type == 0)
                                                        <a type="button" class="btn btn-icon btn-danger btn-sm me-1" href="{{ route('make-audio-call', $appointment->id) }}" data-type="doctor" title="Audio Call">
                                                            <i class="mdi mdi-phone"></i>
                                                        </a>
                                                        @else
                                                        <a type="button" class="btn btn-icon btn-success btn-sm" href="{{ route('make-call', $appointment->id) }}" data-type="doctor" title="Video Call">
                                                            <i class="mdi mdi-video"></i>
                                                        </a>
                                                        @endif
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @else
                        <div class="alert alert-info" role="alert">
                            <div class="d-flex">
                                <i class="mdi mdi-information-outline me-2 fs-4"></i>
                                <div>
                                    <h5>No appointments today!</h5>
                                    <p class="mb-0">You don't have any appointments scheduled for today.</p>
                                </div>
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <!-- Tomorrow's Appointments -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">Tomorrow's Appointments</h5>
                    <span class="badge bg-primary rounded-pill">{{ $tomorrowAppointments->count() }}</span>
                </div>
                <div class="card-body">
                    @if($tomorrowAppointments->count() > 0)
                        <div class="row">
                            @foreach($tomorrowAppointments as $appointment)
                                @php
                                    // Status color class
                                    $statusColor = 
                                        $appointment->status === 'completed' ? 'success' : 
                                        ($appointment->status === 'cancelled' ? 'danger' : 
                                        ($appointment->status === 'booked' ? 'primary' : 
                                        ($appointment->status === 'confirmed' ? 'info' : 
                                        ($appointment->status === 'in_progress' ? 'warning' : 
                                        ($appointment->status === 'not_attended' ? 'dark' : 
                                        ($appointment->status === 'rescheduled' ? 'secondary' : 'light'))))));
                                    
                                    // Call type
                                    $callType = isset($appointment->appointment_type) ? 
                                        ($appointment->appointment_type == 0 ? 'Audio Call' : 'Video Call') : 'N/A';
                                    $callTypeIcon = $appointment->appointment_type == 0 ? 
                                        'mdi-phone' : 'mdi-video';
                                @endphp
                                <div class="col-md-6 col-lg-4 mb-4">
                                    <div class="card h-100">
                                        <div class="card-header d-flex justify-content-between align-items-center">
                                            <h5 class="mb-0">{{ $appointment->appointment_number }}</h5>
                                            <span class="badge bg-{{ $statusColor }} rounded-pill">
                                                {{ ucfirst(str_replace('_', ' ', $appointment->status)) }}
                                            </span>
                                        </div>
                                        
                                        <!-- Date and Time Section -->
                                        <div class="p-3 bg-{{ $statusColor }}" style="background-color: rgba(var(--bs-{{ $statusColor }}-rgb), 0.15) !important; border-bottom: 2px solid var(--bs-{{ $statusColor }});">
                                            <div class="d-flex justify-content-between align-items-center">
                                                <div class="d-flex align-items-center">
                                                    <div class="rounded-circle bg-{{ $statusColor }} d-flex justify-content-center align-items-center me-3" style="width: 45px; height: 45px;">
                                                        <i class="mdi mdi-calendar-clock text-white fs-4"></i>
                                                    </div>
                                                    <div>
                                                        <h6 class="mb-0 fw-bold text-{{ $statusColor === 'light' ? 'dark' : $statusColor }}">Tomorrow</h6>
                                                        <span class="text-{{ $statusColor === 'light' ? 'muted' : $statusColor }}">{{ date('h:i A', strtotime($appointment->time_start)) }} - {{ date('h:i A', strtotime($appointment->time_end)) }}</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <div class="card-body">
                                            <!-- Call Type -->
                                            <div class="mb-3">
                                                <div class="d-flex align-items-center mb-2">
                                                    <i class="mdi {{ $callTypeIcon }} me-2 text-{{ $statusColor }}"></i>
                                                    <span class="fw-semibold">Call Type:</span>
                                                </div>
                                                <p class="ms-4 mb-0">{{ $callType }}</p>
                                            </div>
                                            
                                            <div class="mb-3">
                                                <div class="d-flex align-items-center mb-2">
                                                    <i class="mdi mdi-account-outline me-2 text-{{ $statusColor }}"></i>
                                                    <span class="fw-semibold">Employee:</span>
                                                </div>
                                                <p class="ms-4 mb-0">
                                                    {{ $appointment->employee->name }}
                                                </p>
                                            </div>
                                            
                                            <div class="mb-3">
                                                <div class="d-flex align-items-center mb-2">
                                                    <i class="mdi mdi-briefcase-outline me-2 text-{{ $statusColor }}"></i>
                                                    <span class="fw-semibold">Speciality:</span>
                                                </div>
                                                <p class="ms-4 mb-0">{{ $appointment->speciality->name_en }}</p>
                                            </div>
                                        </div>
                                        <div class="card-footer bg-transparent">
                                            <div class="d-flex justify-content-between">
                                                <div>
                                                    @if(in_array($appointment->status, ['booked', 'confirmed']))
                                                        <a href="{{ route('coach.appointments.index', ['status' => $appointment->status]) }}" class="btn btn-icon btn-danger btn-sm" title="Cancel Appointment">
                                                            <i class="mdi mdi-calendar-remove"></i>
                                                        </a>
                                                    @endif
                                                </div>
                                                <div>
                                                    <a href="{{ route('coach.appointments.index', ['date_filter' => 'tomorrow']) }}" class="btn btn-icon btn-primary btn-sm" title="View Details">
                                                        <i class="mdi mdi-eye"></i>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @else
                        <div class="alert alert-info" role="alert">
                            <div class="d-flex">
                                <i class="mdi mdi-information-outline me-2 fs-4"></i>
                                <div>
                                    <h5>No appointments tomorrow!</h5>
                                    <p class="mb-0">You don't have any appointments scheduled for tomorrow.</p>
                                </div>
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <!-- Upcoming Appointments -->
    @if($upcomingAppointments->count() > 0)
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">Upcoming Appointments</h5>
                    <a href="{{ route('coach.appointments.index', ['status' => 'booked,confirmed']) }}" class="btn btn-sm btn-primary">View All</a>
                </div>
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>Appointment #</th>
                                <th>Date</th>
                                <th>Time</th>
                                <th>Employee</th>
                                <th>Type</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($upcomingAppointments as $appointment)
                            <tr>
                                <td>{{ $appointment->appointment_number }}</td>
                                <td>{{ $appointment->appointment_date->format('M d, Y') }}</td>
                                <td>{{ date('h:i A', strtotime($appointment->time_start)) }}</td>
                                <td>{{ $appointment->employee->name }}</td>
                                <td>
                                    @if(isset($appointment->appointment_type))
                                        @if($appointment->appointment_type == 0)
                                            <span class="badge bg-label-danger">Audio</span>
                                        @else
                                            <span class="badge bg-label-success">Video</span>
                                        @endif
                                    @else
                                        <span class="badge bg-label-secondary">N/A</span>
                                    @endif
                                </td>
                                <td>
                                    @php
                                        $statusClass = 
                                            $appointment->status === 'completed' ? 'success' : 
                                            ($appointment->status === 'cancelled' ? 'danger' : 
                                            ($appointment->status === 'booked' ? 'primary' : 
                                            ($appointment->status === 'confirmed' ? 'info' : 
                                            ($appointment->status === 'in_progress' ? 'warning' : 
                                            ($appointment->status === 'not_attended' ? 'dark' : 'secondary')))));
                                    @endphp
                                    <span class="badge bg-{{ $statusClass }}">
                                        {{ ucfirst(str_replace('_', ' ', $appointment->status)) }}
                                    </span>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    @endif
</div>
@endsection