@extends('crm.layouts.app')

@section('title', 'Artist Dashboard')

@section('content')
<div class="max-w-6xl mx-auto py-10">
    <div class="flex justify-between items-center mb-8">
        <h1 class="text-3xl font-bold text-blue-600">My Earnings</h1>
        <div class="text-sm text-gray-500">{{ Auth::user()->name }}</div>
    </div>

    <!-- Current Month Overview -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
        <div class="bg-white dark:bg-slate-800 rounded-xl shadow p-6">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-600 dark:text-gray-300">This Month Earnings</p>
                    <p class="text-2xl font-bold text-blue-600">${{ number_format($currentMonthEarnings, 2) }}</p>
                </div>
                <div class="p-3 bg-blue-100 dark:bg-blue-900/20 rounded-full">
                    <i class="fas fa-dollar-sign text-blue-600"></i>
                </div>
            </div>
        </div>

        <div class="bg-white dark:bg-slate-800 rounded-xl shadow p-6">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-600 dark:text-gray-300">This Month Tips</p>
                    <p class="text-2xl font-bold text-green-600">${{ number_format($currentMonthTips, 2) }}</p>
                </div>
                <div class="p-3 bg-green-100 dark:bg-green-900/20 rounded-full">
                    <i class="fas fa-hand-holding-usd text-green-600"></i>
                </div>
            </div>
        </div>

        <div class="bg-white dark:bg-slate-800 rounded-xl shadow p-6">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-600 dark:text-gray-300">Appointments</p>
                    <p class="text-2xl font-bold text-purple-600">{{ $currentMonthAppointments }}</p>
                </div>
                <div class="p-3 bg-purple-100 dark:bg-purple-900/20 rounded-full">
                    <i class="fas fa-calendar-check text-purple-600"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- Payroll Settings Info -->
    @if($payrollSetting)
        <div class="bg-white dark:bg-slate-800 rounded-xl shadow p-6 mb-8">
            <h3 class="text-lg font-semibold text-blue-600 mb-4">Pay Structure</h3>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div class="text-center p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
                    <div class="text-lg font-semibold text-blue-600">{{ ucfirst(str_replace('_', ' ', $payrollSetting->pay_type)) }}</div>
                    <div class="text-sm text-gray-600 dark:text-gray-300">Pay Type</div>
                </div>
                <div class="text-center p-4 bg-green-50 dark:bg-green-900/20 rounded-lg">
                    <div class="text-lg font-semibold text-green-600">
                        @if($payrollSetting->pay_type === 'commission')
                            {{ $payrollSetting->pay_rate }}%
                        @else
                            ${{ number_format($payrollSetting->pay_rate, 2) }}
                        @endif
                    </div>
                    <div class="text-sm text-gray-600 dark:text-gray-300">Rate</div>
                </div>
                <div class="text-center p-4 bg-purple-50 dark:bg-purple-900/20 rounded-lg">
                    <div class="text-lg font-semibold text-purple-600">{{ $payrollSetting->tip_percentage }}%</div>
                    <div class="text-sm text-gray-600 dark:text-gray-300">Tip Share</div>
                </div>
            </div>
        </div>
    @endif

    <!-- Recent Payouts -->
    <div class="bg-white dark:bg-slate-800 rounded-xl shadow p-6">
        <h3 class="text-lg font-semibold text-blue-600 mb-4">Recent Payouts</h3>
        @if($recentPayouts->count() > 0)
            <div class="space-y-4">
                @foreach($recentPayouts as $payout)
                    <div class="flex justify-between items-center p-4 bg-gray-50 dark:bg-slate-700 rounded-lg">
                        <div>
                            <div class="font-medium">{{ $payout->pay_period_start->format('M j') }} - {{ $payout->pay_period_end->format('M j, Y') }}</div>
                            <div class="text-sm text-gray-600 dark:text-gray-300">
                                Earnings: ${{ number_format($payout->total_earnings, 2) }} | 
                                Tips: ${{ number_format($payout->total_tips, 2) }}
                            </div>
                        </div>
                        <div class="text-right">
                            <div class="text-xl font-bold text-green-600">${{ number_format($payout->total_payout, 2) }}</div>
                            <span class="px-2 py-1 text-xs rounded {{ $payout->status === 'paid' ? 'bg-green-100 text-green-800' : ($payout->status === 'approved' ? 'bg-blue-100 text-blue-800' : 'bg-yellow-100 text-yellow-800') }}">
                                {{ ucfirst($payout->status) }}
                            </span>
                        </div>
                    </div>
                @endforeach
            </div>
        @else
            <p class="text-gray-500 text-center py-8">No payouts available yet</p>
        @endif
    </div>
</div>
@endsection