@extends('layouts.app')

@section('title', 'Salary Components')

@section('breadcrumbs')
    <div class="breadcrumb">
        <a href="{{ route('admin.dashboard') }}">Dashboard</a>
        <span class="separator">/</span>
        <span class="current">Salary Components</span>
    </div>
@endsection

@section('content')
<div class="space-y-5" x-data="{ tab: 'earnings' }">
    {{-- Header --}}
    <div class="flex items-center justify-between">
        <div>
            <h1 class="font-display text-2xl font-semibold text-gray-900">Salary Components</h1>
            <p class="text-sm text-gray-500 mt-1">Global salary structure templates for all companies</p>
        </div>
        <a href="{{ route('admin.salary-components.create') }}" class="btn-primary">
            <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
            Add Component
        </a>
    </div>

    {{-- Tabs --}}
    <div class="flex gap-1 bg-gray-100 p-1 rounded-lg w-fit">
        <button @click="tab = 'earnings'" :class="tab === 'earnings' ? 'bg-white shadow-xs text-primary-600' : 'text-gray-600 hover:text-gray-800'" class="px-4 py-2 text-sm font-medium rounded-md transition-all">
            Earnings ({{ $earnings->count() }})
        </button>
        <button @click="tab = 'deductions'" :class="tab === 'deductions' ? 'bg-white shadow-xs text-primary-600' : 'text-gray-600 hover:text-gray-800'" class="px-4 py-2 text-sm font-medium rounded-md transition-all">
            Deductions ({{ $deductions->count() }})
        </button>
    </div>

    {{-- Earnings Table --}}
    <div x-show="tab === 'earnings'" x-transition class="card">
        <div class="card-header">
            <h2 class="card-header-title">Earning Components</h2>
        </div>
        @if($earnings->isEmpty())
            <div class="empty-state">
                <div class="empty-state-icon">
                    <svg class="w-16 h-16 mx-auto" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="16"/><line x1="8" y1="12" x2="16" y2="12"/></svg>
                </div>
                <p class="empty-state-title">No earning components</p>
                <p class="empty-state-text">Create your first earning component to get started.</p>
            </div>
        @else
            <div class="overflow-x-auto">
                <table class="data-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Code</th>
                            <th>Calculation</th>
                            <th>Part of Gross</th>
                            <th>Taxable</th>
                            <th>Status</th>
                            <th class="text-right">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($earnings as $comp)
                        <tr>
                            <td class="font-medium text-gray-900">{{ $comp->name }}</td>
                            <td><span class="badge badge-info">{{ $comp->code }}</span></td>
                            <td>
                                {{ ucfirst($comp->calculation_type) }}
                                @if($comp->calculation_type === 'percentage')
                                    <span class="text-xs text-gray-400">of {{ $comp->percentage_of }}</span>
                                @endif
                            </td>
                            <td>{!! $comp->is_part_of_gross ? '<span class="text-success-600">Yes</span>' : '<span class="text-gray-400">No</span>' !!}</td>
                            <td>{!! $comp->is_taxable ? '<span class="text-warning-600">Yes</span>' : '<span class="text-gray-400">No</span>' !!}</td>
                            <td><span class="badge {{ $comp->is_active ? 'badge-active' : 'badge-inactive' }}"><span class="badge-dot"></span>{{ $comp->is_active ? 'Active' : 'Inactive' }}</span></td>
                            <td class="text-right">
                                <div class="flex items-center justify-end gap-1">
                                    <a href="{{ route('admin.salary-components.edit', $comp->id) }}" class="btn-icon" title="Edit">
                                        <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
                                    </a>
                                </div>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @endif
    </div>

    {{-- Deductions Table --}}
    <div x-show="tab === 'deductions'" x-transition class="card">
        <div class="card-header">
            <h2 class="card-header-title">Deduction Components</h2>
        </div>
        @if($deductions->isEmpty())
            <div class="empty-state">
                <div class="empty-state-icon">
                    <svg class="w-16 h-16 mx-auto" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="10"/><line x1="8" y1="12" x2="16" y2="12"/></svg>
                </div>
                <p class="empty-state-title">No deduction components</p>
                <p class="empty-state-text">Create your first deduction component.</p>
            </div>
        @else
            <div class="overflow-x-auto">
                <table class="data-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Code</th>
                            <th>Calculation</th>
                            <th>Taxable</th>
                            <th>Status</th>
                            <th class="text-right">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($deductions as $comp)
                        <tr>
                            <td class="font-medium text-gray-900">{{ $comp->name }}</td>
                            <td><span class="badge badge-info">{{ $comp->code }}</span></td>
                            <td>
                                {{ ucfirst($comp->calculation_type) }}
                                @if($comp->calculation_type === 'percentage')
                                    <span class="text-xs text-gray-400">of {{ $comp->percentage_of }}</span>
                                @endif
                            </td>
                            <td>{!! $comp->is_taxable ? '<span class="text-warning-600">Yes</span>' : '<span class="text-gray-400">No</span>' !!}</td>
                            <td><span class="badge {{ $comp->is_active ? 'badge-active' : 'badge-inactive' }}"><span class="badge-dot"></span>{{ $comp->is_active ? 'Active' : 'Inactive' }}</span></td>
                            <td class="text-right">
                                <a href="{{ route('admin.salary-components.edit', $comp->id) }}" class="btn-icon" title="Edit">
                                    <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
                                </a>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @endif
    </div>
</div>
@endsection