@extends('Admin.layouts.app')
@section('title', 'Admin Dashboard')
@section('content')

<!-- Custom CSS -->
<style>
    .card {
        border-radius: 15px;
        border: none;
    }
    .shadow-sm {
        box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    }
    .stats-card {
        padding: 20px;
        color: #fff;
        border-radius: 15px;
    }
    .stats-card h3 {
        font-weight: 700;
    }
    .service-item, .review-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        border-bottom: 1px solid #f1f1f1;
    }
    .service-item:last-child,
    .review-item:last-child {
        border-bottom: none;
    }
    .profile-img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        object-fit: cover;
        margin-right: 10px;
    }
    .btn-outline-primary {
        font-size: 12px;
        padding: 2px 8px;
        border-radius: 20px;
    }
    .table td, .table th {
        vertical-align: middle;
    }
    .view-all-btn , .view-all-btn:hover{

    font-family: 'Red Hat Display';
    color: #FE0DC9;
    border: none;
    font-size: 16px;
    }
    .main-dashboard h5 {
    font-size: 19.61px;
    font-family: 'Red Hat Display';
    font-weight: 700;
}

  .view-all-btn:hover{
    background: none;
    }
    .tab-btn {
    width: 100% !important;
}
.tab-nav {
    width: 25% !important;
}
.tab-nav-item{
    width: 50%;
}
</style>

<!-- Page Heading -->
<div class="d-sm-flex align-items-center justify-content-between">
    <h1>Dashboard</h1>
</div>

    <div class="main-dashboard">
    <!-- Stats Row -->
   <div class="row mb-4 mt-4 main-db-row">
    <div class="col-md-3">
        <div class="stats-card bg-success completed-bookings shadow-sm">
            <p>Completed Bookings</p>
            <h3>{{ $totalBookings ?? 0 }}</h3>
        </div>
    </div>
<div class="col-md-3">
    <div class="stats-card bg-warning month-bookings shadow-sm">
        <p>{{ $monthName }} Bookings</p>
        <h3>{{ $thisMonthBookings }}</h3>
    </div>
</div>
    <div class="col-md-3">
        <div class="stats-card bg-info month-earning shadow-sm">
            <p>This Month Earning</p>
            <h3>{{ number_format($thisMonthEarning) }} AED</h3>
        </div>
    </div>
<div class="col-md-3">
    <div class="stats-card bg-danger cashout-box shadow-sm">
        <p>{{ $monthName }} Cash Out</p>
        <h3>{{ number_format($cashOut, 2) ?? 0 }} AED</h3>
    </div>
</div>
</div>

{{-- ✅ New Row for Pending + Cancelled --}}
{{-- <div class="row mb-4">
    <div class="col-md-6">
        <div class="stats-card bg-primary shadow-sm">
            <p>This Month Pending</p>
            <h3>{{ $thisMonthPending }}</h3>
        </div>
    </div>
    <div class="col-md-6">
        <div class="stats-card bg-secondary shadow-sm">
            <p>This Month Cancelled</p>
            <h3>{{ $thisMonthCancelled }}</h3>
        </div>
    </div>
</div> --}}

<div class="main-detail">
        <!-- Service Seekers & Providers -->
    <div class="row dashboard-seeker-row">
        <!-- Seekers -->
        <div class="col-md-6">
            <div class="card p-3 shadow-sm">
                <div class="d-flex justify-content-between align-items-center mb-2">
                    <h5>Service Seekers</h5>
                    <a href="{{ route('admin.seekers') }}" class="btn btn-sm btn-outline-primary view-all-btn">View All</a>
                </div>
                @forelse($serviceSeekers as $seeker)
                    <div class="service-item">
                        <div class="d-flex align-items-center">
                            <img src="{{ $seeker->profile_image ?? asset('admin/img/default.png') }}" class="profile-img">
                            <span>{{ $seeker->name }}</span>
                        </div>
                        <div><i class="fa fa-star text-warning"></i> {{ number_format($seeker->average_rating,1) }}</div>
                    </div>
                @empty
                    <p class="text-muted text-center">No seekers found</p>
                @endforelse
            </div>
        </div>
        <!-- Providers -->
        <div class="col-md-6">
            <div class="card p-3 shadow-sm">
                <div class="d-flex justify-content-between align-items-center mb-2">
                    <h5>Service Providers</h5>
                    <a href="{{ route('admin.providers') }}" class="btn btn-sm btn-outline-primary view-all-btn">View All</a>
                </div>
                @forelse($serviceProviders as $provider)
                    <div class="service-item">
                        <div class="d-flex align-items-center">
                            <img src="{{ $provider->profile_image ?? asset('admin/img/default.png') }}" class="profile-img">
                            <span>{{ $provider->name }}</span>
                        </div>
                        <div><i class="fa fa-star text-warning"></i> {{ number_format($provider->average_rating,1) }}</div>
                    </div>
                @empty
                    <p class="text-muted text-center">No providers found</p>
                @endforelse
            </div>
        </div>
    </div>

    <!-- Available Services & Reviews -->
    <div class="row mt-4 Available-service-row">
        <!-- Available Services -->
        <div class="col-md-6">
            <div class="card p-3 shadow-sm">
                <div class="d-flex justify-content-between align-items-center mb-2">
                    <h5>Available Services</h5>
                    <a href="{{ route('admin.services') }}" class="btn btn-sm btn-outline-primary view-all-btn">View All</a>
                </div>
                <table class="table dashboard-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Price</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($services as $service)
                            <tr>
                                <td>{{ $service->name }}</td>
                                <td>{{ $service->price }}</td>
                                <td>
                                    <div class="form-check form-switch service-action">
                                        <input class="form-check-input" type="checkbox" {{ $service->status ? 'checked' : '' }}>
                                        
                                        <a href="{{ route('admin.service.editform', $service->id) }}" ><img src="../admin/img/action-icon.svg" alt=""></a>
                                    </div>                      
                                </td>                     
                            </tr>
                        @empty
                            <tr><td colspan="3" class="text-center text-muted">No services found</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

    <!-- Recent Reviews -->
    <div class="col-md-6">
        <div class="card p-3 shadow-sm">
            <div class="d-flex justify-content-between align-items-center mb-2">
                <h5>Recent Reviews</h5>
                <a href="{{ route('admin.reviews') }}" class="btn btn-sm btn-outline-primary view-all-btn">View All</a>
            </div>

            <div class="table-responsive pt-0 mt-0">
                <table class="table align-middle dashboard-table">
                    <thead class="table-light">
                        <tr>
                            <th class="col-5">Username</th>
                            <th class="col-7">Reviews</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($recentReviews as $review)
                            <tr>
                                <!-- Username with Profile -->
                                <td>
                                    <div class="d-flex align-items-center">
                                        <img src="{{ $review->user->profile_image ?? asset('admin/img/default.png') }}" 
                                            class="me-2" style="width:35px; height:35px; border-radius:50%;">
                                        <strong>{{ $review->user->name }}</strong>
                                    </div>
                                </td>

                                <!-- Review Text -->
                                <td>
                                    <p class="mb-0 text-muted">{{ $review->review }}</p>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="2" class="text-center text-muted">No reviews found</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    </div>


    <!-- Bookings -->
    <div class="row mt-4 bookings-db-row">
        <div class="col-12">
            <div class="card p-3 shadow-sm">
                <div class="d-flex justify-content-between align-items-center mb-2 booking-db-sec">
                    <h5>Recent Bookings</h5>
                            
                <ul class="nav nav-pills mb-2 tab-nav" id="pills-tab" role="tablist">
                    <li class="nav-item tab-nav-item">
                        <button class="nav-link active tab-btn" id="physical-tab" data-toggle="pill" data-target="#physical" type="button">Physical</button>
                    </li>
                    <li class="nav-item tab-nav-item">
                        <button class="nav-link tab-btn" id="online-tab" data-toggle="pill" data-target="#online" type="button">Online</button>
                    </li>
                </ul>
                {{-- <input type="date" class="form-control w-auto mb-3" id="bookingDate"> --}}
                    <a href="{{ route('admin.booking.index') }}" class="btn btn-sm btn-outline-primary view-all-btn">View All</a>
                </div>

                <div class="tab-content">
                    <!-- Physical -->
                    <div class="tab-pane fade show active" id="physical">
                        <table class="table dashboard-table">
                            <thead>
                                <tr>
                                    <th>Booking ID / Date & Time</th>
                                    <th>Service</th>
                                    <th>Status</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($physicalBookings as $booking)
                                    <tr>
                                        <td>#{{ $booking->id }} <br> {{ $booking->booking_date }} {{ $booking->start_time }}</td>
                                        <td>{{ $booking->provider_service?->services?->name ?? 'N/A' }}</td>
                                        <td>{{ ucfirst($booking->status) }}</td>
                                    </tr>
                                @empty
                                    <tr><td colspan="3" class="text-center text-muted">No Physical Bookings Found</td></tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                    <!-- Online -->
                    <div class="tab-pane fade" id="online">
                        <table class="table dashboard-table">
                            <thead>
                                <tr>
                                    <th>Booking ID / Date & Time</th>
                                    <th>Service</th>
                                    <th>Status</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($onlineBookings as $booking)
                                    <tr>
                                        <td>#{{ $booking->id }} <br> {{ $booking->booking_date }} {{ $booking->start_time }}</td>
                                        <td>{{ $booking->provider_service?->services?->name ?? 'N/A' }}</td>
                                        <td>{{ ucfirst($booking->status) }}</td>
                                    </tr>
                                @empty
                                    <tr><td colspan="3" class="text-center text-muted">No Online Bookings Found</td></tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
    </div>

@endsection

@push('body-scripts')
<script src="//code.jquery.com/jquery-3.5.1.js"></script>
<script src="//cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>

{{-- Old charts code kept for length --}}
{{-- 
<script>
  $('#example1').calendar();
    $('#example2').calendar({
      type: 'date'
    });
        const userCounts = @json($seekerCounts);
        
        const labels = userCounts.map(entry => `${entry.year}-${entry.month}`);
        const data = userCounts.map(entry => entry.count);

        const ctx3 = document.getElementById('userChart').getContext('2d');
        new Chart(ctx3, {
            type: 'line',
            data: {
                labels: labels,
                datasets: [{
                    label: 'Total Seeker Month Records',
                    data: data,
                    fill: false,
                    borderColor: 'rgba(75, 192, 192, 1)',
                    borderWidth: 2
                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });

        const providerCounts = @json($providerCounts);
        
        const labels33 = providerCounts.map(entry => `${entry.year}-${entry.month}`);
        const data33 = providerCounts.map(entry => entry.count);

        const ctx33 = document.getElementById('riderChart').getContext('2d');
        new Chart(ctx33, {
            type: 'line',
            data: {
                labels: labels33,
                datasets: [{
                    label: 'Total Provider Month Records',
                    data: data33,
                    fill: false,
                    borderColor: '#c78407',
                    borderWidth: 2
                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });
        $(document).ready(function(){
            $('#laravel_datatable').DataTable({
                processing: true,
                serverSide: true,
                ajax: "{{ route('admin.providers') }}",
                columns: [
                    {data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false},
                    { data: 'name', name: 'name' },
                    { data: 'email', name: 'email' },
                    { data: 'phone', name: 'phone' },
                    { data: 'status', name: 'status' },
                    {data: 'is_admin_approved', name: 'is_admin_approved', orderable: false, searchable: false},
                    {data: 'action', name: 'action', orderable: false, searchable: false}
                ],
            });
        });
</script> 
--}}

@endpush