@extends('backend.app')

@section('title', 'Dashboard')

@push('style')
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
    <style>
        .dashboard-card {
            transition: all 0.3s ease;
        }

        .dashboard-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
        }

        .alert-banner {
            animation: slideDown 0.3s ease;
        }

        @keyframes slideDown {
            from {
                opacity: 0;
                transform: translateY(-20px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .timer {
            font-size: 18px;
            font-weight: bold;
            color: #007bff;
        }

        .stat-card {
            border-left: 4px solid #007bff;
        }

        .stat-card.success {
            border-left-color: #28c76f;
        }

        .stat-card.warning {
            border-left-color: #ff9f43;
        }

        .stat-card.danger {
            border-left-color: #ea5455;
        }
    </style>
@endpush

@section('content')
    {{-- ALERTS SECTION --}}
    @if (!empty($alerts))
        <div class="row mb-4">
            <div class="col-lg-12">
                @foreach ($alerts as $alert)
                    <div class="alert alert-{{ $alert['type'] }} alert-banner alert-dismissible fade show" role="alert">
                        <div class="d-flex align-items-center">
                            <i data-feather="{{ $alert['icon'] }}" class="me-2"></i>
                            <div class="flex-grow-1">
                                <strong>{{ ucfirst($alert['type']) }}:</strong> {{ $alert['message'] }}
                            </div>
                            <a href="#" class="btn btn-sm btn-outline-{{ $alert['type'] }} ms-2">
                                {{ $alert['action'] }}
                            </a>
                        </div>
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endforeach
            </div>
        </div>
    @endif

    {{-- GREETING HEADER --}}
    <div class="rounded-3 glossy-box mb-5">
        <div class="row">
            <div class="col-lg-12">
                <div class="p-6 d-lg-flex justify-content-between align-items-center">
                    <div class="d-md-flex align-items-center">
                        <div class="img">
                            @if ($greetings['type'] == 'morning')
                                <img src="{{ asset('backend/assets/greetings/004-sunrise.png') }}" alt="Good Morning"
                                    style="max-height: 80px;">
                            @elseif ($greetings['type'] == 'afternoon')
                                <img src="{{ asset('backend/assets/greetings/002-sunsets.png') }}" alt="Good Afternoon"
                                    style="max-height: 80px;">
                            @else
                                <img src="{{ asset('backend/assets/greetings/003-cloudy-night.png') }}" alt="Good Night"
                                    style="max-height: 80px;">
                            @endif
                        </div>
                        <div class="ms-md-4 mt-3 mt-md-0 lh-1">
                            <h3 class="text-white mb-0">{{ $greetings['message'] }}, {{ Auth::user()->name }}!</h3>
                            <small class="text-white">Here's what's happening with your platform today</small>
                        </div>
                    </div>
                    <div class="d-none d-lg-block text-end">
                        <p class="dashboard-date mb-0">
                            <i class="mdil mdil-calendar me-2"></i>{{ date('D, M d Y') }}
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- KPI CARDS - ROW 2 (Additional Stats) --}}
    <div class="row mb-5">
        <div class="col-lg-8">
            <div class="row">
                {{-- Pending Payouts --}}
                <div class="col-xl-6 col-md-6 col-12 mb-4">
                    <div class="card h-100 card-lift dashboard-card stat-card warning">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-start">
                                <div>
                                    <small class="text-muted fw-semibold">Pending Payouts</small>
                                    <h3 class="fw-bold mt-2 mb-0">${{ number_format($pendingPayouts, 2) }}</h3>
                                    <a href="{{ route('owner.payout.index') }}"
                                        class="btn btn-sm btn-outline-warning mt-2">
                                        View Payouts <i data-feather="arrow-right" style="height: 14px; width: 14px;"></i>
                                    </a>
                                </div>
                                <i data-feather="credit-card" class="text-warning"></i>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Active Businesses --}}
                <div class="col-xl-6 col-md-6 col-12 mb-4">
                    <div class="card h-100 card-lift dashboard-card stat-card">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-start">
                                <div>
                                    <small class="text-muted fw-semibold">Active Businesses</small>
                                    <h3 class="fw-bold mt-2 mb-0">{{ number_format($activeBusinesses) }}</h3>
                                    <span
                                        class="{{ $businessGrowth >= 0 ? 'text-success' : 'text-danger' }} small mt-2 d-inline-block">
                                        <i data-feather="{{ $businessGrowth >= 0 ? 'arrow-up' : 'arrow-down' }}"
                                            class="me-1" style="height: 16px; width: 16px;"></i>
                                        {{ number_format(abs($businessGrowth), 1) }}% vs last month
                                    </span>
                                </div>
                                <i data-feather="briefcase" class="text-info"></i>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Total Customers --}}
                <div class="col-xl-6 col-md-6 col-12 mb-4">
                    <div class="card h-100 card-lift dashboard-card">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-start">
                                <div>
                                    <small class="text-muted fw-semibold">Total Customers</small>
                                    <h3 class="fw-bold mt-2 mb-0">{{ number_format($totalCustomers) }}</h3>
                                    <small class="text-muted">Registered users</small>
                                </div>
                                <i data-feather="users" class="text-info"></i>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Total Services --}}
                <div class="col-xl-6 col-md-6 col-12 mb-4">
                    <div class="card h-100 card-lift dashboard-card">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-start">
                                <div>
                                    <small class="text-muted fw-semibold">Total Services</small>
                                    <h3 class="fw-bold mt-2 mb-0">{{ number_format($totalServices) }}</h3>
                                    <small class="text-muted">Available services</small>
                                </div>
                                <i data-feather="briefcase" class="text-primary"></i>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-xl-6 col-md-6 col-12 mb-4">
                    <div class="card h-100 card-lift dashboard-card stat-card">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-start">
                                <div>
                                    <small class="text-muted fw-semibold">Total Bookings</small>
                                    <h3 class="fw-bold mt-2 mb-0">{{ number_format($totalBookings) }}</h3>
                                    <span
                                        class="{{ $bookingGrowth >= 0 ? 'text-success' : 'text-danger' }} small mt-2 d-inline-block">
                                        <i data-feather="{{ $bookingGrowth >= 0 ? 'arrow-up' : 'arrow-down' }}"
                                            class="me-1" style="height: 16px; width: 16px;"></i>
                                        {{ number_format(abs($bookingGrowth), 1) }}% vs last month
                                    </span>
                                </div>
                                <i data-feather="calendar" class="text-primary"></i>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-xl-6 col-md-6 col-12 mb-4">
                    <div class="card h-100 card-lift dashboard-card stat-card danger">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-start">
                                <div>
                                    <small class="text-muted fw-semibold">Total Cancelled</small>
                                    <h3 class="fw-bold mt-2 mb-0">{{ number_format($totalCancelled) }}</h3>
                                    <span class="text-danger small mt-2 d-inline-block">
                                        <i data-feather="{{ $cancelledGrowth >= 0 ? 'arrow-up' : 'arrow-down' }}"
                                            class="me-1" style="height: 16px; width: 16px;"></i>
                                        {{ number_format(abs($cancelledGrowth), 1) }}% vs last month
                                    </span>
                                </div>
                                <i data-feather="calendar" class="text-primary"></i>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Top Services --}}
                <div class="col-lg-12 mb-4">
                    <div class="card h-100">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <h5 class="mb-0">Top Performing Services</h5>
                            <a href="{{ route('category.index') }}" class="btn btn-sm btn-outline-primary">
                                View All <i data-feather="arrow-right" style="height: 14px; width: 14px;"></i>
                            </a>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-sm table-hover mb-0">
                                    <thead class="table-light">
                                        <tr>
                                            <th>Service Name</th>
                                            <th>Owner</th>
                                            <th class="text-end">Bookings</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @forelse ($topServices as $service)
                                            <tr>
                                                <td>
                                                    <strong>{{ $service->title }}</strong>
                                                </td>
                                                <td>{{ $service->owner->name ?? 'N/A' }}</td>
                                                <td class="text-end">
                                                    <span class="badge bg-primary">{{ $service->total_bookings }}</span>
                                                </td>
                                            </tr>
                                        @empty
                                            <tr>
                                                <td colspan="3" class="text-center py-4 text-muted">No services found
                                                </td>
                                            </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-4 mb-4">
            <div class="card h-100">
                <div class="card-header">
                    <h5 class="mb-0">Booking Status Distribution</h5>
                </div>
                <div class="card-body">
                    <div class="row row-cols-2 g-3 mb-4">
                        <div class="col">
                            <div class="text-center">
                                <h4 class="fw-bold text-success mb-1">{{ round($completedPercent) }}%</h4>
                                <small class="text-muted">Completed</small>
                                <p class="small text-success mt-1">{{ number_format($completedCount) }} bookings</p>
                            </div>
                        </div>
                        <div class="col">
                            <div class="text-center">
                                <h4 class="fw-bold text-info mb-1">{{ round($confirmedPercent) }}%</h4>
                                <small class="text-muted">Confirmed</small>
                                <p class="small text-info mt-1">{{ number_format($confirmedCount) }} bookings</p>
                            </div>
                        </div>
                        <div class="col">
                            <div class="text-center">
                                <h4 class="fw-bold text-warning mb-1">{{ round($pendingPercent) }}%</h4>
                                <small class="text-muted">Pending</small>
                                <p class="small text-warning mt-1">{{ number_format($pendingCount) }} bookings</p>
                            </div>
                        </div>
                        <div class="col">
                            <div class="text-center">
                                <h4 class="fw-bold text-danger mb-1">{{ round($cancelledPercent) }}%</h4>
                                <small class="text-muted">Cancelled</small>
                                <p class="small text-danger mt-1">{{ number_format($cancelledCount) }} bookings</p>
                            </div>
                        </div>
                    </div>
                    <canvas id="bookingStatusChart" height="250"></canvas>
                </div>
            </div>
        </div>
    </div>

    {{-- TABLES ROW --}}
    <div class="row mb-5">
        {{-- Top Customers --}}
        <div class="col-lg-6 mb-4">
            <div class="card h-100">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">Top Customers</h5>
                    <a href="{{ route('customer.list') }}" class="btn btn-sm btn-outline-primary">
                        View All <i data-feather="arrow-right" style="height: 14px; width: 14px;"></i>
                    </a>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-sm table-hover mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th>Customer</th>
                                    <th class="text-end">Bookings</th>
                                    <th class="text-end">Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($topCustomers as $customer)
                                    <tr>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <img src="{{ asset($customer->avatar) }}" class="rounded-circle me-2"
                                                    width="30" alt="{{ $customer->name }}">
                                                <div>
                                                    <strong>{{ $customer->name }}</strong><br>
                                                    <small class="text-muted">{{ '@'.$customer->username }}</small>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="text-end">
                                            <span class="badge bg-success">{{ $customer->confirmed_count ?? 0 }}</span>
                                        </td>
                                        <td class="text-end">
                                            <a href="{{ route('customer.show', $customer->username) }}"
                                                class="btn btn-sm btn-outline-primary">
                                                <i data-feather="eye" style="height: 14px; width: 14px;"></i>
                                            </a>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="3" class="text-center py-4 text-muted">No customers found</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        {{-- Top Owners --}}
        <div class="col-lg-6 mb-4">
            <div class="card h-100">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">Top Owners</h5>
                    <a href="{{ route('owner.list') }}" class="btn btn-sm btn-outline-primary">
                        View All <i data-feather="arrow-right" style="height: 14px; width: 14px;"></i>
                    </a>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-sm table-hover mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th>Owner</th>
                                    <th class="text-end">Bookings</th>
                                    <th class="text-end">Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($topOwners as $owner)
                                    <tr>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <img src="{{ asset($owner->avatar) }}" class="rounded-circle me-2"
                                                    width="30" alt="{{ $owner->name }}">
                                                <div>
                                                    <strong>{{ $owner->name }}</strong><br>
                                                    <small class="text-muted">{{ $owner->services_count ?? 0 }} services</small>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="text-end">
                                            <span class="badge bg-success">{{ $owner->confirmed_count ?? 0 }}</span>
                                        </td>
                                        <td class="text-end">
                                            <a href="{{ route('owner.show', $owner->username) }}"
                                                class="btn btn-sm btn-outline-primary">
                                                <i data-feather="eye" style="height: 14px; width: 14px;"></i>
                                            </a>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="3" class="text-center py-4 text-muted">No owners found</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- RECENT USERS ROW --}}
    <div class="row">

        {{-- New Business Owners --}}
        <div class="col-lg-6 mb-4">
            <div class="card h-100">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">New Business Owners (Last 7 Days)</h5>
                    <a href="{{ route('owner.list') }}" class="btn btn-sm btn-outline-primary">
                        View All <i data-feather="arrow-right" style="height: 14px; width: 14px;"></i>
                    </a>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-sm table-hover mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th>Owner</th>
                                    <th>Email</th>
                                    <th class="text-end">Bookings</th>
                                    <th class="text-end">Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($owners as $owner)
                                    <tr>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <img src="{{ asset($owner->avatar) }}" class="rounded-circle me-2"
                                                    width="30" alt="{{ $owner->name }}">
                                                <div>
                                                    <strong>{{ $owner->name }}</strong><br>
                                                    <small
                                                        class="text-muted">{{ $owner->created_at->diffForHumans() }}</small>
                                                </div>
                                            </div>
                                        </td>
                                        <td>{{ $owner->email }}</td>
                                        <td class="text-end">
                                            <span class="badge bg-primary">{{ $owner->total_bookings }}</span>
                                        </td>
                                        <td class="text-end">
                                            <a href="{{ route('owner.show', $owner->username) }}"
                                                class="btn btn-sm btn-outline-primary">
                                                <i data-feather="eye" style="height: 14px; width: 14px;"></i>
                                            </a>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="4" class="text-center py-4 text-muted">No new owners found</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>


        {{-- New Customers --}}
        <div class="col-lg-6 mb-4">
            <div class="card h-100">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">New Customers (Last 7 Days)</h5>
                    <a href="{{ route('customer.list') }}" class="btn btn-sm btn-outline-primary">
                        View All <i data-feather="arrow-right" style="height: 14px; width: 14px;"></i>
                    </a>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-sm table-hover mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th>Customer</th>
                                    <th>Email</th>
                                    <th class="text-end">Joined</th>
                                    <th class="text-end">Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($customers as $customer)
                                    <tr>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <img src="{{ asset($customer->avatar) }}" class="rounded-circle me-2"
                                                    width="30" alt="{{ $customer->name }}">
                                                <div>
                                                    <strong>{{ $customer->name }}</strong><br>
                                                    <small class="text-muted">{{ '@'.$customer->username }}</small>
                                                </div>
                                            </div>
                                        </td>
                                        <td>{{ $customer->email }}</td>
                                        <td class="text-end"><small>{{ $customer->created_at->diffForHumans() }}</small>
                                        </td>
                                        <td class="text-end">
                                            <a href="{{ route('customer.show', $customer->username) }}"
                                                class="btn btn-sm btn-outline-primary">
                                                <i data-feather="eye" style="height: 14px; width: 14px;"></i>
                                            </a>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="4" class="text-center py-4 text-muted">No new customers found</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('script')
    <script>
        // Booking Status Chart
        const bookingStatusCtx = document.getElementById('bookingStatusChart');
        if (bookingStatusCtx) {
            new Chart(bookingStatusCtx, {
                type: 'doughnut',
                data: {
                    labels: ['Completed', 'Confirmed', 'Pending', 'Cancelled'],
                    datasets: [{
                        data: [
                            {{ $completedCount }},
                            {{ $confirmedCount }},
                            {{ $pendingCount }},
                            {{ $cancelledCount }}
                        ],
                        backgroundColor: [
                            '#28c76f',
                            '#00cfe8',
                            '#ff9f43',
                            '#ea5455'
                        ],
                        borderColor: '#fff',
                        borderWidth: 2
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: true,
                    plugins: {
                        legend: {
                            position: 'bottom'
                        }
                    }
                }
            });
        }
    </script>
@endpush