@extends('provider.provider')

@push('scripts')
<link rel="stylesheet" href="{{ asset('assets/css/premium_dashboard.css') }}">
<script src="{{ asset('assets/plugins/apexchart/apexcharts.min.js') }}"></script>
@endpush

@section('content')
<div class="page-wrapper premium-dashboard">
    <div class="content container-fluid">
        <!-- Dashboard Header -->
        <div class="row animate-fade-in" style="animation-delay: 0.1s;">
            <div class="col-12 mb-4">
                <h3 class="fw-bold text-dark mb-1">{{__('Admin Dashboard')}}</h3>
                <p class="text-secondary">{{__('Bem-vindo à visão geral do seu negócio.')}}</p>
            </div>
        </div>

        <div class="row">
            <!-- Stats Column -->
            <div class="col-xxl-7 col-xl-7 col-lg-12">
                <div class="row">
                    <!-- Stat Card 1 -->
                    <div class="col-md-6 animate-fade-in" style="animation-delay: 0.2s;">
                        <div class="premium-card">
                            <div class="card-body">
                                <div class="d-flex align-items-center justify-content-between">
                                    <div>
                                        <p class="section-label mb-1">{{__('Novos Serviços')}}</p>
                                        <h5 class="premium-value upcomingcount">0</h5>
                                    </div>
                                    <div class="stat-icon bg-premium-blue">
                                        <i class="ti ti-calendar-event"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Stat Card 2 -->
                    <div class="col-md-6 animate-fade-in" style="animation-delay: 0.3s;">
                        <div class="premium-card">
                            <div class="card-body">
                                <div class="d-flex align-items-center justify-content-between">
                                    <div>
                                        <p class="section-label mb-1">{{__('Serviços Concluídos')}}</p>
                                        <h5 class="premium-value completecount">0</h5>
                                    </div>
                                    <div class="stat-icon bg-premium-green">
                                        <i class="ti ti-circle-check"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Stat Card 3 -->
                    <div class="col-md-6 animate-fade-in" style="animation-delay: 0.4s;">
                        <div class="premium-card">
                            <div class="card-body">
                                <div class="d-flex align-items-center justify-content-between">
                                    <div>
                                        <p class="section-label mb-1">{{__('Serviços Pagos')}}</p>
                                        <h5 class="premium-value order_completed_count">0</h5>
                                    </div>
                                    <div class="stat-icon bg-premium-info">
                                        <i class="ti ti-package-export"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Stat Card 4 -->
                    <div class="col-md-6 animate-fade-in" style="animation-delay: 0.5s;">
                        <div class="premium-card">
                            <div class="card-body">
                                <div class="d-flex align-items-center justify-content-between">
                                    <div>
                                        <p class="section-label mb-1">{{__('Serviços Cancelados')}}</p>
                                        <h5 class="premium-value cancelcount">0</h5>
                                    </div>
                                    <div class="stat-icon bg-premium-danger">
                                        <i class="ti ti-calendar-x"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Novos Serviços (Recent Bookings Moved Here) -->
                <div class="row">
                    <div class="col-12 animate-fade-in" style="animation-delay: 0.6s;">
                        <div class="premium-card">
                            <div class="card-body">
                                <div class="d-flex justify-content-between align-items-center mb-4">
                                    <h6 class="premium-title m-0"><i class="ti ti-list-check me-2 text-primary"></i>{{__('Novos Serviços')}}</h6>
                                    <a href="{{route('provider.bookinglist')}}" class="btn premium-btn premium-btn-outline btn-sm">{{__('Ver Tudo')}}</a>
                                </div>
                                <div class="bookcard">
                                    <!-- Dynamic Content -->
                                    <div class="premium-skeleton" style="height: 60px; width: 100%; border-radius: 12px; margin-bottom: 10px;"></div>
                                    <div class="premium-skeleton" style="height: 60px; width: 100%; border-radius: 12px;"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Revenue Column -->
            <div class="col-xxl-5 col-xl-5 col-lg-12">
                <!-- Revenue OverView -->
                <div class="premium-card box-shadow-none revenue-card animate-fade-in" style="animation-delay: 0.3s; height: 100%;">
                    <div class="card-body d-flex flex-column">
                        <div class="text-center mb-4 mt-2">
                            <p class="section-label mb-1">{{__('Company Revenue')}}</p>
                            <h2 class="revenue-value totalincome">0.00kz</h2>
                            <p class="text-success small fw-bold mt-1 mb-3" style="color: #4ade80 !important;">
                                <i class="ti ti-trending-up me-1"></i> +12.5% vs {{__('last month')}}
                            </p>
                        </div>
                        
                        <div class="d-flex justify-content-around p-3 bg-light rounded-4 mb-4">
                            <div class="text-center">
                                <p class="section-label mb-1" style="font-size: 0.75rem;">{{__('Total Income')}}</p>
                                <h5 class="fw-bold completeincome mb-0">0.00kz</h5>
                            </div>
                            <div class="border-start opacity-25"></div>
                            <div class="text-center">
                                <p class="section-label mb-1" style="font-size: 0.75rem;">{{__('Serviços')}}</p>
                                <h5 class="fw-bold mb-0 upcomingcount">0</h5>
                            </div>
                        </div>

                        <div class="flex-grow-1">
                            <div id="daily-chart" style="width: 100%;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <!-- Principais Serviços (Moved Here) -->
            <div class="col-xxl-6 col-md-12 animate-fade-in" style="animation-delay: 0.7s;">
                <div class="premium-card">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center mb-4">
                            <h6 class="premium-title m-0"><i class="ti ti-sparkles me-2 text-warning"></i>{{ __('Principais Serviços')}}</h6>
                            <a href="{{route('provider.service')}}" class="btn premium-btn premium-btn-outline btn-sm">{{ __('Ver Tudo')}}</a>
                        </div>
                        <div class="servicecard">
                            <!-- Dynamic Content -->
                            <div class="premium-skeleton" style="height: 100px; width: 100%; border-radius: 16px; margin-bottom: 12px;"></div>
                            <div class="premium-skeleton" style="height: 100px; width: 100%; border-radius: 16px;"></div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Reviews Card -->
            <div class="col-xxl-6 col-md-12 animate-fade-in" style="animation-delay: 0.8s;">
                <div class="premium-card">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center mb-4">
                            <h6 class="premium-title m-0"><i class="ti ti-star-filled me-2 text-warning"></i>{{__('Avaliações Recentes')}}</h6>
                        </div>
                        <div class="ratecard">
                            <!-- Dynamic Content -->
                            <div class="premium-skeleton" style="height: 80px; width: 100%; border-radius: 12px; margin-bottom: 10px;"></div>
                            <div class="premium-skeleton" style="height: 80px; width: 100%; border-radius: 12px;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    var options = {
        series: [{
            name: 'Revenue',
            data: [31, 40, 28, 51, 42, 109, 100, 120, 80, 95, 110, 140]
        }],
        chart: {
            height: 250,
            type: 'area',
            toolbar: {
                show: false
            },
            sparkline: {
                enabled: false
            },
            fontFamily: 'Outfit, sans-serif'
        },
        dataLabels: {
            enabled: false
        },
        stroke: {
            curve: 'smooth',
            width: 3,
            colors: ['#ffffff'] /* White stroke for visibility */
        },
        fill: {
            type: 'gradient',
            gradient: {
                shadeIntensity: 1,
                opacityFrom: 0.4,
                opacityTo: 0.1,
                stops: [0, 90, 100],
                colorStops: [
                    {
                        offset: 0,
                        color: "#ffffff",
                        opacity: 0.4
                    },
                    {
                        offset: 100,
                        color: "#ffffff",
                        opacity: 0.1
                    }
                ]
            }
        },
        xaxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
            axisBorder: { show: false },
            axisTicks: { show: false },
            labels: {
                style: {
                    colors: '#ffffff',
                    fontSize: '12px'
                }
            }
        },
        yaxis: {
            show: false
        },
        grid: {
            show: false,
            padding: {
                left: 0,
                right: 0
            }
        },
        tooltip: {
            x: { show: false },
            theme: 'dark'
        }
    };

    window.revenueChart = new ApexCharts(document.querySelector("#daily-chart"), options);
    window.revenueChart.render();
});
</script>
@endsection
ion