@extends('crm.layouts.app')

@section('title', 'Payroll Management')

@section('content')
<div class="px-4 sm:px-6 lg:px-8">
    <!-- Page Header -->
    <div class="sm:flex sm:items-center sm:justify-between">
        <div class="min-w-0 flex-1">
            <nav class="flex mb-4" aria-label="Breadcrumb">
                <ol class="inline-flex items-center space-x-1 md:space-x-3">
                    <li class="inline-flex items-center">
                        <a href="{{ route('crm.dashboard') }}" class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-indigo-600">
                            <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M9.293 2.293a1 1 0 011.414 0l7 7A1 1 0 0117 11h-1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-3a1 1 0 00-1-1H9a1 1 0 00-1 1v3a1 1 0 01-1 1H5a1 1 0 01-1-1v-6H3a1 1 0 01-.707-1.707l7-7z" clip-rule="evenodd"></path>
                            </svg>
                            Dashboard
                        </a>
                    </li>
                    <li>
                        <div class="flex items-center">
                            <svg class="w-6 h-6 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
                            </svg>
                            <span class="ml-1 text-sm font-medium text-gray-500 md:ml-2">Payroll</span>
                        </div>
                    </li>
                </ol>
            </nav>
            <h1 class="text-2xl font-semibold text-gray-900">Payroll Management</h1>
            <p class="mt-2 text-sm text-gray-700">Manage artist compensation and payouts</p>
        </div>
        <div class="mt-4 sm:ml-16 sm:mt-0 flex gap-x-3" x-data="{
            showCalculateModal: false,
            startDatePicker: {
                open: false,
                selectedDate: '{{ date('Y-m-d', strtotime('-7 days')) }}',
                currentMonth: new Date('{{ date('Y-m-d', strtotime('-7 days')) }}'),
                today: new Date(),
                formattedDate() {
                    if (!this.selectedDate) return 'Select date';
                    const d = new Date(this.selectedDate);
                    return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
                },
                monthYear() {
                    return this.currentMonth.toLocaleDateString('en-US', { month: 'long', year: 'numeric' });
                },
                daysInMonth() {
                    const year = this.currentMonth.getFullYear();
                    const month = this.currentMonth.getMonth();
                    const firstDay = new Date(year, month, 1);
                    const lastDay = new Date(year, month + 1, 0);
                    const daysInMonth = lastDay.getDate();
                    const startingDayOfWeek = firstDay.getDay();
                    const days = [];
                    const prevMonthLastDay = new Date(year, month, 0).getDate();
                    for (let i = startingDayOfWeek - 1; i >= 0; i--) {
                        days.push({ day: prevMonthLastDay - i, isCurrentMonth: false, date: new Date(year, month - 1, prevMonthLastDay - i) });
                    }
                    for (let i = 1; i <= daysInMonth; i++) {
                        days.push({ day: i, isCurrentMonth: true, date: new Date(year, month, i) });
                    }
                    const remainingDays = 42 - days.length;
                    for (let i = 1; i <= remainingDays; i++) {
                        days.push({ day: i, isCurrentMonth: false, date: new Date(year, month + 1, i) });
                    }
                    return days;
                },
                isToday(date) {
                    return date.toDateString() === this.today.toDateString();
                },
                isSelected(date) {
                    if (!this.selectedDate) return false;
                    return date.toDateString() === new Date(this.selectedDate).toDateString();
                },
                selectDate(date) {
                    this.selectedDate = date.toISOString().split('T')[0];
                    this.open = false;
                },
                previousMonth() {
                    this.currentMonth = new Date(this.currentMonth.getFullYear(), this.currentMonth.getMonth() - 1);
                },
                nextMonth() {
                    this.currentMonth = new Date(this.currentMonth.getFullYear(), this.currentMonth.getMonth() + 1);
                }
            },
            endDatePicker: {
                open: false,
                selectedDate: '{{ date('Y-m-d') }}',
                currentMonth: new Date('{{ date('Y-m-d') }}'),
                today: new Date(),
                formattedDate() {
                    if (!this.selectedDate) return 'Select date';
                    const d = new Date(this.selectedDate);
                    return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
                },
                monthYear() {
                    return this.currentMonth.toLocaleDateString('en-US', { month: 'long', year: 'numeric' });
                },
                daysInMonth() {
                    const year = this.currentMonth.getFullYear();
                    const month = this.currentMonth.getMonth();
                    const firstDay = new Date(year, month, 1);
                    const lastDay = new Date(year, month + 1, 0);
                    const daysInMonth = lastDay.getDate();
                    const startingDayOfWeek = firstDay.getDay();
                    const days = [];
                    const prevMonthLastDay = new Date(year, month, 0).getDate();
                    for (let i = startingDayOfWeek - 1; i >= 0; i--) {
                        days.push({ day: prevMonthLastDay - i, isCurrentMonth: false, date: new Date(year, month - 1, prevMonthLastDay - i) });
                    }
                    for (let i = 1; i <= daysInMonth; i++) {
                        days.push({ day: i, isCurrentMonth: true, date: new Date(year, month, i) });
                    }
                    const remainingDays = 42 - days.length;
                    for (let i = 1; i <= remainingDays; i++) {
                        days.push({ day: i, isCurrentMonth: false, date: new Date(year, month + 1, i) });
                    }
                    return days;
                },
                isToday(date) {
                    return date.toDateString() === this.today.toDateString();
                },
                isSelected(date) {
                    if (!this.selectedDate) return false;
                    return date.toDateString() === new Date(this.selectedDate).toDateString();
                },
                selectDate(date) {
                    this.selectedDate = date.toISOString().split('T')[0];
                    this.open = false;
                },
                previousMonth() {
                    this.currentMonth = new Date(this.currentMonth.getFullYear(), this.currentMonth.getMonth() - 1);
                },
                nextMonth() {
                    this.currentMonth = new Date(this.currentMonth.getFullYear(), this.currentMonth.getMonth() + 1);
                }
            }
        }">
            <a href="{{ route('crm.payroll.settings') }}" class="inline-flex items-center gap-x-1.5 rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-xs ring-1 ring-inset ring-gray-300 hover:bg-gray-50">
                <svg viewBox="0 0 20 20" fill="currentColor" class="-ml-0.5 size-5 text-gray-400">
                    <path fill-rule="evenodd" d="M7.84 1.804A1 1 0 0 1 8.82 1h2.36a1 1 0 0 1 .98.804l.331 1.652a6.993 6.993 0 0 1 1.929 1.115l1.598-.54a1 1 0 0 1 1.186.447l1.18 2.044a1 1 0 0 1-.205 1.251l-1.267 1.113a7.047 7.047 0 0 1 0 2.228l1.267 1.113a1 1 0 0 1 .206 1.25l-1.18 2.045a1 1 0 0 1-1.187.447l-1.598-.54a6.993 6.993 0 0 1-1.929 1.115l-.33 1.652a1 1 0 0 1-.98.804H8.82a1 1 0 0 1-.98-.804l-.331-1.652a6.993 6.993 0 0 1-1.929-1.115l-1.598.54a1 1 0 0 1-1.186-.447l-1.18-2.044a1 1 0 0 1 .205-1.251l1.267-1.114a7.05 7.05 0 0 1 0-2.227L1.821 7.773a1 1 0 0 1-.206-1.25l1.18-2.045a1 1 0 0 1 1.187-.447l1.598.54A6.992 6.992 0 0 1 7.51 3.456l.33-1.652ZM10 13a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z" clip-rule="evenodd" />
                </svg>
                Settings
            </a>
            <button @click="showCalculateModal = true" type="button" class="inline-flex items-center gap-x-1.5 rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500">
                <svg viewBox="0 0 20 20" fill="currentColor" class="-ml-0.5 size-5">
                    <path d="M15.98 1.804a1 1 0 0 0-1.96 0l-.24 1.192a1 1 0 0 1-.784.785l-1.192.238a1 1 0 0 0 0 1.962l1.192.238a1 1 0 0 1 .785.785l.238 1.192a1 1 0 0 0 1.962 0l.238-1.192a1 1 0 0 1 .785-.785l1.192-.238a1 1 0 0 0 0-1.962l-1.192-.238a1 1 0 0 1-.785-.785l-.238-1.192ZM6.949 5.684a1 1 0 0 0-1.898 0l-.683 2.051a1 1 0 0 1-.633.633l-2.051.683a1 1 0 0 0 0 1.898l2.051.684a1 1 0 0 1 .633.632l.683 2.051a1 1 0 0 0 1.898 0l.683-2.051a1 1 0 0 1 .633-.633l2.051-.683a1 1 0 0 0 0-1.898l-2.051-.683a1 1 0 0 1-.633-.633L6.95 5.684ZM13.949 13.684a1 1 0 0 0-1.898 0l-.184.551a1 1 0 0 1-.632.633l-.551.183a1 1 0 0 0 0 1.898l.551.183a1 1 0 0 1 .633.633l.183.551a1 1 0 0 0 1.898 0l.184-.551a1 1 0 0 1 .632-.633l.551-.183a1 1 0 0 0 0-1.898l-.551-.184a1 1 0 0 1-.633-.632l-.183-.551Z" />
                </svg>
                Calculate Payroll
            </button>

            <!-- Calculate Payroll Modal -->
            <div x-show="showCalculateModal" x-cloak class="relative z-50" aria-labelledby="modal-title" role="dialog" aria-modal="true">
                <div x-show="showCalculateModal"
                     x-transition:enter="ease-out duration-300"
                     x-transition:enter-start="opacity-0"
                     x-transition:enter-end="opacity-100"
                     class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></div>

                <div class="fixed inset-0 z-50 w-screen overflow-y-auto">
                    <div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
                        <div x-show="showCalculateModal"
                             x-transition:enter="ease-out duration-300"
                             x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
                             x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
                             @click.away="showCalculateModal = false"
                             class="relative transform overflow-visible rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6">
                            <div>
                                <div class="flex items-center justify-between mb-6">
                                    <h3 class="text-base font-semibold text-gray-900">Calculate Payroll</h3>
                                    <button @click="showCalculateModal = false" type="button" class="text-gray-400 hover:text-gray-500">
                                        <svg class="size-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
                                        </svg>
                                    </button>
                                </div>

                                <form action="{{ route('crm.payroll.calculate') }}" method="POST">
                                    @csrf
                                    <div class="space-y-4">
                                        <div>
                                            <label class="block text-sm font-medium text-gray-900 mb-2">Pay Period Start</label>
                                            <div class="relative" @click.away="startDatePicker.open = false">
                                                <button type="button"
                                                        @click="startDatePicker.open = !startDatePicker.open"
                                                        class="inline-flex w-full justify-between gap-x-1.5 rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-xs inset-ring-1 inset-ring-gray-300 hover:bg-gray-50">
                                                    <div class="flex items-center gap-2">
                                                        <svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                                                        </svg>
                                                        <span x-text="startDatePicker.formattedDate()"></span>
                                                    </div>
                                                    <svg viewBox="0 0 20 20" fill="currentColor" class="-mr-1 size-5 text-gray-400">
                                                        <path d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" />
                                                    </svg>
                                                </button>

                                                <div x-show="startDatePicker.open"
                                                     x-transition:enter="transition ease-out duration-100"
                                                     x-transition:enter-start="transform opacity-0 scale-95"
                                                     x-transition:enter-end="transform opacity-100 scale-100"
                                                     x-transition:leave="transition ease-in duration-75"
                                                     x-transition:leave-start="transform opacity-100 scale-100"
                                                     x-transition:leave-end="transform opacity-0 scale-95"
                                                     class="absolute z-[200] mt-2 w-80 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
                                                    <div class="p-4">
                                                        <div class="flex items-center justify-between mb-4">
                                                            <button @click.stop="startDatePicker.previousMonth()" type="button" class="p-1 hover:bg-gray-100 rounded">
                                                                <svg class="h-5 w-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
                                                                </svg>
                                                            </button>
                                                            <span class="text-sm font-semibold text-gray-900" x-text="startDatePicker.monthYear()"></span>
                                                            <button @click.stop="startDatePicker.nextMonth()" type="button" class="p-1 hover:bg-gray-100 rounded">
                                                                <svg class="h-5 w-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                                                                </svg>
                                                            </button>
                                                        </div>
                                                        <div class="grid grid-cols-7 gap-1 text-center text-xs mb-2">
                                                            <div class="text-gray-500 font-medium">Su</div>
                                                            <div class="text-gray-500 font-medium">Mo</div>
                                                            <div class="text-gray-500 font-medium">Tu</div>
                                                            <div class="text-gray-500 font-medium">We</div>
                                                            <div class="text-gray-500 font-medium">Th</div>
                                                            <div class="text-gray-500 font-medium">Fr</div>
                                                            <div class="text-gray-500 font-medium">Sa</div>
                                                        </div>
                                                        <div class="grid grid-cols-7 gap-1">
                                                            <template x-for="day in startDatePicker.daysInMonth()" :key="day.date">
                                                                <button type="button"
                                                                        @click="startDatePicker.selectDate(day.date)"
                                                                        class="aspect-square p-1 text-sm rounded hover:bg-gray-100"
                                                                        :class="{
                                                                            'text-gray-400': !day.isCurrentMonth,
                                                                            'text-gray-900': day.isCurrentMonth,
                                                                            'bg-indigo-600 text-white hover:bg-indigo-700': startDatePicker.isSelected(day.date),
                                                                            'ring-2 ring-indigo-600': startDatePicker.isToday(day.date) && !startDatePicker.isSelected(day.date)
                                                                        }"
                                                                        x-text="day.day">
                                                                </button>
                                                            </template>
                                                        </div>
                                                    </div>
                                                </div>

                                                <input type="hidden" name="pay_period_start" :value="startDatePicker.selectedDate" required>
                                            </div>
                                        </div>

                                        <div>
                                            <label class="block text-sm font-medium text-gray-900 mb-2">Pay Period End</label>
                                            <div class="relative" @click.away="endDatePicker.open = false">
                                                <button type="button"
                                                        @click="endDatePicker.open = !endDatePicker.open"
                                                        class="inline-flex w-full justify-between gap-x-1.5 rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-xs inset-ring-1 inset-ring-gray-300 hover:bg-gray-50">
                                                    <div class="flex items-center gap-2">
                                                        <svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                                                        </svg>
                                                        <span x-text="endDatePicker.formattedDate()"></span>
                                                    </div>
                                                    <svg viewBox="0 0 20 20" fill="currentColor" class="-mr-1 size-5 text-gray-400">
                                                        <path d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" />
                                                    </svg>
                                                </button>

                                                <div x-show="endDatePicker.open"
                                                     x-transition:enter="transition ease-out duration-100"
                                                     x-transition:enter-start="transform opacity-0 scale-95"
                                                     x-transition:enter-end="transform opacity-100 scale-100"
                                                     x-transition:leave="transition ease-in duration-75"
                                                     x-transition:leave-start="transform opacity-100 scale-100"
                                                     x-transition:leave-end="transform opacity-0 scale-95"
                                                     class="absolute z-[200] mt-2 w-80 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
                                                    <div class="p-4">
                                                        <div class="flex items-center justify-between mb-4">
                                                            <button @click.stop="endDatePicker.previousMonth()" type="button" class="p-1 hover:bg-gray-100 rounded">
                                                                <svg class="h-5 w-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
                                                                </svg>
                                                            </button>
                                                            <span class="text-sm font-semibold text-gray-900" x-text="endDatePicker.monthYear()"></span>
                                                            <button @click.stop="endDatePicker.nextMonth()" type="button" class="p-1 hover:bg-gray-100 rounded">
                                                                <svg class="h-5 w-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                                                                </svg>
                                                            </button>
                                                        </div>
                                                        <div class="grid grid-cols-7 gap-1 text-center text-xs mb-2">
                                                            <div class="text-gray-500 font-medium">Su</div>
                                                            <div class="text-gray-500 font-medium">Mo</div>
                                                            <div class="text-gray-500 font-medium">Tu</div>
                                                            <div class="text-gray-500 font-medium">We</div>
                                                            <div class="text-gray-500 font-medium">Th</div>
                                                            <div class="text-gray-500 font-medium">Fr</div>
                                                            <div class="text-gray-500 font-medium">Sa</div>
                                                        </div>
                                                        <div class="grid grid-cols-7 gap-1">
                                                            <template x-for="day in endDatePicker.daysInMonth()" :key="day.date">
                                                                <button type="button"
                                                                        @click="endDatePicker.selectDate(day.date)"
                                                                        class="aspect-square p-1 text-sm rounded hover:bg-gray-100"
                                                                        :class="{
                                                                            'text-gray-400': !day.isCurrentMonth,
                                                                            'text-gray-900': day.isCurrentMonth,
                                                                            'bg-indigo-600 text-white hover:bg-indigo-700': endDatePicker.isSelected(day.date),
                                                                            'ring-2 ring-indigo-600': endDatePicker.isToday(day.date) && !endDatePicker.isSelected(day.date)
                                                                        }"
                                                                        x-text="day.day">
                                                                </button>
                                                            </template>
                                                        </div>
                                                    </div>
                                                </div>

                                                <input type="hidden" name="pay_period_end" :value="endDatePicker.selectedDate" required>
                                            </div>
                                        </div>

                                        <div>
                                            <label class="block text-sm font-medium text-gray-900 mb-2">Select Employee</label>
                                            <div class="space-y-2 max-h-32 overflow-y-auto border border-gray-200 rounded-md p-3">
                                                @foreach($artists as $artist)
                                                    <label class="flex items-center">
                                                        <input type="checkbox" name="artist_ids[]" value="{{ $artist->id }}" class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-600">
                                                        <span class="ml-2 text-sm text-gray-900">{{ $artist->name }}</span>
                                                    </label>
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>

                                    <div class="flex gap-x-3 mt-6">
                                        <button @click="showCalculateModal = false" type="button" class="flex-1 inline-flex justify-center items-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-xs ring-1 ring-inset ring-gray-300 hover:bg-gray-50">Cancel</button>
                                        <button type="submit" class="flex-1 inline-flex justify-center items-center gap-x-1.5 rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500">
                                            Calculate
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @if(session('success'))
        <div class="mt-8 rounded-lg bg-green-50 p-4 border border-green-200">
            <div class="flex">
                <div class="flex-shrink-0">
                    <svg class="h-5 w-5 text-green-400" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" />
                    </svg>
                </div>
                <div class="ml-3">
                    <p class="text-sm font-medium text-green-800">{{ session('success') }}</p>
                </div>
            </div>
        </div>
    @endif

    @if($artists->count() > 0)
        <div class="mt-8 grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-6">
            @foreach($artists as $artist)
            <div class="overflow-hidden rounded-lg bg-white shadow-sm ring-1 ring-gray-900/5">
                <div class="px-6 py-5">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-base font-semibold text-gray-900">{{ $artist->name }}</h3>
                        <span class="inline-flex items-center rounded-md px-2 py-1 text-xs font-medium ring-1 ring-inset {{ $artist->payrollSetting && $artist->payrollSetting->active ? 'bg-green-50 text-green-700 ring-green-600/20' : 'bg-red-50 text-red-700 ring-red-600/10' }}">
                            {{ $artist->payrollSetting && $artist->payrollSetting->active ? 'Active' : 'Inactive' }}
                        </span>
                    </div>

                    @if($artist->payrollSetting)
                        <div class="space-y-2 mb-4">
                            <div class="flex justify-between">
                                <span class="text-sm text-gray-500">Pay Type:</span>
                                <span class="text-sm font-medium text-gray-900">{{ ucfirst(str_replace('_', ' ', $artist->payrollSetting->pay_type)) }}</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="text-sm text-gray-500">Pay Rate:</span>
                                <span class="text-sm font-medium text-gray-900">
                                    @if($artist->payrollSetting->pay_type === 'commission')
                                        {{ $artist->payrollSetting->pay_rate }}%
                                    @else
                                        ${{ number_format($artist->payrollSetting->pay_rate, 2) }}
                                    @endif
                                </span>
                            </div>
                            <div class="flex justify-between">
                                <span class="text-sm text-gray-500">Tip Share:</span>
                                <span class="text-sm font-medium text-gray-900">{{ $artist->payrollSetting->tip_percentage }}%</span>
                            </div>
                        </div>
                    @else
                        <p class="text-sm text-gray-500 mb-4">No payroll settings configured</p>
                    @endif

                    <div class="border-t border-gray-200 pt-4">
                        <h4 class="text-sm font-medium text-gray-900 mb-3">Recent Payouts</h4>
                        @if($artist->artistPayouts->count() > 0)
                            <div class="space-y-2">
                                @foreach($artist->artistPayouts as $payout)
                                    <div class="flex justify-between items-center">
                                        <div class="flex items-center gap-x-2">
                                            <span class="text-xs text-gray-500">{{ $payout->pay_period_start->format('M j') }} - {{ $payout->pay_period_end->format('M j') }}</span>
                                            <span class="inline-flex items-center rounded-md px-1.5 py-0.5 text-xs font-medium ring-1 ring-inset {{ $payout->status === 'paid' ? 'bg-green-50 text-green-700 ring-green-600/20' : ($payout->status === 'approved' ? 'bg-blue-50 text-blue-700 ring-blue-700/10' : 'bg-yellow-50 text-yellow-800 ring-yellow-600/20') }}">
                                                {{ ucfirst($payout->status) }}
                                            </span>
                                        </div>
                                        <span class="text-sm font-semibold text-gray-900">${{ number_format($payout->total_payout, 2) }}</span>
                                    </div>
                                @endforeach
                            </div>
                        @else
                            <p class="text-xs text-gray-500">No payouts yet</p>
                        @endif
                    </div>
                </div>
            </div>
        @endforeach
        </div>
    @else
        <div class="mt-8 text-center">
            <div class="rounded-lg bg-white shadow-sm ring-1 ring-gray-900/5 px-6 py-12">
                <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z" />
                </svg>
                <h3 class="mt-4 text-base font-semibold text-gray-900">No employees yet</h3>
                <p class="mt-2 text-sm text-gray-500">Get started by adding employees to your team and configuring their payroll settings.</p>
                <div class="mt-6 flex items-center justify-center gap-x-3">
                    <a href="{{ route('crm.team.index') }}" class="inline-flex items-center gap-x-1.5 rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500">
                        <svg viewBox="0 0 20 20" fill="currentColor" class="-ml-0.5 size-5">
                            <path d="M10.75 4.75a.75.75 0 0 0-1.5 0v4.5h-4.5a.75.75 0 0 0 0 1.5h4.5v4.5a.75.75 0 0 0 1.5 0v-4.5h4.5a.75.75 0 0 0 0-1.5h-4.5v-4.5Z" />
                        </svg>
                        Add Team Members
                    </a>
                    <a href="{{ route('crm.payroll.settings') }}" class="inline-flex items-center gap-x-1.5 rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-xs ring-1 ring-inset ring-gray-300 hover:bg-gray-50">
                        <svg viewBox="0 0 20 20" fill="currentColor" class="-ml-0.5 size-5 text-gray-400">
                            <path fill-rule="evenodd" d="M7.84 1.804A1 1 0 0 1 8.82 1h2.36a1 1 0 0 1 .98.804l.331 1.652a6.993 6.993 0 0 1 1.929 1.115l1.598-.54a1 1 0 0 1 1.186.447l1.18 2.044a1 1 0 0 1-.205 1.251l-1.267 1.113a7.047 7.047 0 0 1 0 2.228l1.267 1.113a1 1 0 0 1 .206 1.25l-1.18 2.045a1 1 0 0 1-1.187.447l-1.598-.54a6.993 6.993 0 0 1-1.929 1.115l-.33 1.652a1 1 0 0 1-.98.804H8.82a1 1 0 0 1-.98-.804l-.331-1.652a6.993 6.993 0 0 1-1.929-1.115l-1.598.54a1 1 0 0 1-1.186-.447l-1.18-2.044a1 1 0 0 1 .205-1.251l1.267-1.114a7.05 7.05 0 0 1 0-2.227L1.821 7.773a1 1 0 0 1-.206-1.25l1.18-2.045a1 1 0 0 1 1.187-.447l1.598.54A6.992 6.992 0 0 1 7.51 3.456l.33-1.652ZM10 13a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z" clip-rule="evenodd" />
                        </svg>
                        Configure Payroll Settings
                    </a>
                </div>
            </div>
        </div>
    @endif
</div>
@endsection