@extends('backend.app')

@push('style')
    <link rel="stylesheet" href="{{ asset('backend/assets/css/analytics.css') }}">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
@endpush

@section('title', 'Company Analytics - ' . $company->name)

@section('content')
<div class="app-content content">
    <div class="content-wrapper">
        <!-- Page Header -->
        <div class="analytics-header">
            <div class="row align-items-center">
                <div class="col-md-9">
                    <h1 class="analytics-title">
                        <a href="{{ route('companies.analytics') }}" class="back-btn me-3">
                            <i class="fa-solid fa-arrow-left"></i>
                        </a>
                        <i class="fa-solid fa-chart-line me-2"></i>
                        {{ $company->name }} - Analytics
                    </h1>
                    <p class="analytics-subtitle mb-0">Detailed performance metrics and booking insights</p>

                    <!-- Modern Breadcrumb -->
                    @include('backend.partials.breadcrumb', ['items' => [
                        ['url' => route('dashboard'), 'title' => 'Dashboard', 'icon' => 'fa-solid fa-home'],
                        ['url' => route('companies.analytics'), 'title' => 'Company Analytics', 'icon' => 'fa-solid fa-chart-line'],
                        ['title' => $company->name, 'icon' => 'fa-solid fa-building']
                    ]])
                </div>
                <div class="col-md-3 text-md-end mt-3 mt-md-0">
                    <span class="badge badge-custom fs-6 bg-light text-primary">
                        {{ $days }} Days Period
                    </span>
                </div>
            </div>
        </div>

        <div class="content-body">
            <!-- Date Range Filter -->
            <div class="filter-section">
                <form method="GET" action="{{ route('companies.show-analytics', $company) }}">
                    <div class="row align-items-center g-3">
                        <div class="col-md-3">
                            <label class="form-label">
                                <i class="fa-solid fa-calendar-days me-2 text-primary"></i>Time Period
                            </label>
                            <select name="days" class="form-select">
                                <option value="7" {{ $days == '7' ? 'selected' : '' }}>Last 7 Days</option>
                                <option value="14" {{ $days == '14' ? 'selected' : '' }}>Last 14 Days</option>
                                <option value="30" {{ $days == '30' ? 'selected' : '' }}>Last 30 Days</option>
                                <option value="90" {{ $days == '90' ? 'selected' : '' }}>Last 90 Days</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <button type="submit" class="btn btn-filter w-100">
                                <i class="fa-solid fa-filter me-2"></i>Update Period
                            </button>
                        </div>
                    </div>
                </form>
            </div>

            <!-- Stats Cards -->
            <div class="stats-overview mb-4">
                <div class="stat-card" style="--stat-color: #667eea; --stat-bg: rgba(102, 126, 234, 0.1);">
                    <div class="stat-icon">
                        <i class="fa-solid fa-calendar-check"></i>
                    </div>
                    <div class="stat-label">Total Bookings</div>
                    <div class="stat-value">{{ $totalBookings }}</div>
                    @if($growth != 0)
                        <small class="{{ $growth > 0 ? 'text-success' : 'text-danger' }} d-flex align-items-center gap-1">
                            <i class="fa-solid fa-arrow-{{ $growth > 0 ? 'up' : 'down' }}"></i>
                            {{ number_format(abs($growth), 1) }}% vs previous
                        </small>
                    @endif
                </div>

                <div class="stat-card" style="--stat-color: #4299e1; --stat-bg: rgba(66, 153, 225, 0.1);">
                    <div class="stat-icon">
                        <i class="fa-solid fa-check-circle"></i>
                    </div>
                    <div class="stat-label">Completed</div>
                    <div class="stat-value">{{ $completedBookings }}</div>
                    <small class="text-muted">
                        {{ $totalBookings > 0 ? round(($completedBookings / $totalBookings) * 100, 1) : 0 }}% completion rate
                    </small>
                </div>

                <div class="stat-card" style="--stat-color: #ed8936; --stat-bg: rgba(237, 137, 54, 0.1);">
                    <div class="stat-icon">
                        <i class="fa-solid fa-users"></i>
                    </div>
                    <div class="stat-label">Occupancy Rate</div>
                    <div class="stat-value">{{ number_format($occupancyRate, 1) }}%</div>
                    <small class="text-muted">Employee slot utilization</small>
                </div>
            </div>

            <!-- Daily Bookings Chart -->
            <div class="row mb-4">
                <div class="col-12">
                    <div class="chart-container">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <h5 class="mb-0"><i class="fa-solid fa-chart-area me-2 text-primary"></i>Daily Bookings Trend</h5>
                            <span class="badge bg-light text-primary">Last {{ $days }} Days</span>
                        </div>
                        <canvas id="dailyBookingsChart" height="100"></canvas>
                    </div>
                </div>
            </div>

            <!-- Recent Bookings Table -->
            <div class="row">
                <div class="col-12">
                    <div class="companies-table-card">
                        <div class="table-header-custom">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <h5 class="mb-1"><i class="fa-solid fa-list me-2 text-primary"></i>Recent Bookings</h5>
                                    <small class="text-muted">Latest bookings from the last {{ $days }} days</small>
                                </div>
                            </div>
                        </div>
                        <div class="table-responsive">
                            <table class="table table-custom">
                                <thead>
                                    <tr>
                                        <th>Booking ID</th>
                                        <th>Customer</th>
                                        <th>Employee</th>
                                        <th>Service</th>
                                        <th>Date & Time</th>
                                        <th>Status</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($bookings as $booking)
                                        <tr>
                                            <td><strong>#{{ $booking->id }}</strong></td>
                                            <td>
                                                @if($booking->user)
                                                    <div>{{ $booking->user->name }}</div>
                                                    <small class="text-muted">{{ $booking->user->email }}</small>
                                                @else
                                                    <span class="text-muted">N/A</span>
                                                @endif
                                            </td>
                                            <td>{{ $booking->employee?->name ?? 'N/A' }}</td>
                                            <td>{{ $booking->service?->name ?? 'N/A' }}</td>
                                            <td>
                                                <div>
                                                    <i class="fa-regular fa-calendar text-muted me-1"></i>
                                                    {{ $booking->booking_date?->format('M d, Y') ?? 'N/A' }}
                                                </div>
                                                <small class="text-muted">
                                                    <i class="fa-regular fa-clock me-1"></i>{{ $booking->booking_time ?? 'N/A' }}
                                                </small>
                                            </td>
                                            <td>
                                                <span class="status-badge-custom status-{{ $booking->status }}">
                                                    {{ ucfirst($booking->status) }}
                                                </span>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="6">
                                                <div class="empty-state">
                                                    <i class="fa-solid fa-inbox empty-state-icon"></i>
                                                    <p class="empty-state-text">No bookings found for this period.</p>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('script')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const ctx = document.getElementById('dailyBookingsChart').getContext('2d');

        const labels = [{!! $dailyBookings->map(function($item) { return '"' . $item->date . '"'; })->join(', ') !!}];
        const data = [{!! $dailyBookings->pluck('count')->implode(', ') !!}];

        new Chart(ctx, {
            type: 'line',
            data: {
                labels: labels,
                datasets: [{
                    label: 'Bookings',
                    data: data,
                    fill: true,
                    backgroundColor: 'rgba(102, 126, 234, 0.1)',
                    borderColor: 'rgba(102, 126, 234, 1)',
                    tension: 0.4,
                    pointBackgroundColor: 'rgba(102, 126, 234, 1)',
                    pointBorderColor: '#fff',
                    pointBorderWidth: 2,
                    pointRadius: 4,
                    pointHoverRadius: 6
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: false
                    },
                    tooltip: {
                        backgroundColor: '#667eea',
                        titleColor: '#fff',
                        bodyColor: '#fff',
                        padding: 10,
                        displayColors: false,
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: {
                            stepSize: 1
                        },
                        grid: {
                            color: 'rgba(0,0,0,0.05)'
                        }
                    },
                    x: {
                        grid: {
                            display: false
                        }
                    }
                }
            }
        });
    });
</script>
@endpush
@endsection