@extends('layouts.app')

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

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

@section('content')
<div class="space-y-5" x-data="{ showInitModal: false }">
    {{-- Header --}}
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
        <div>
            <h1 class="font-display text-2xl font-semibold text-gray-900">Payroll Processing</h1>
            <p class="text-sm text-gray-500 mt-1">Monthly payroll management and payslip generation</p>
        </div>
        <div class="flex gap-2">
            <a href="{{ route('payroll.reports') }}" class="btn-secondary">
                <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="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
                Reports
            </a>
            <button @click="showInitModal = true" 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>
                New Payroll
            </button>
        </div>
    </div>

    {{-- Stats --}}
    @if($stats)
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        <div class="stat-card">
            <div class="stat-icon bg-primary-100 text-primary-600">
                <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="1" y="4" width="22" height="16" rx="2" ry="2"/><line x1="1" y1="10" x2="23" y2="10"/></svg>
            </div>
            <div class="stat-value">{{ $stats['total_batches'] }}</div>
            <div class="stat-label">Total Batches</div>
        </div>
        <div class="stat-card">
            <div class="stat-icon bg-success-100 text-success-600">
                <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
            </div>
            <div class="stat-value">{{ $stats['finalized'] }}</div>
            <div class="stat-label">Finalized</div>
        </div>
        <div class="stat-card">
            <div class="stat-icon bg-warning-100 text-warning-600">
                <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
            </div>
            <div class="stat-value">{{ $stats['in_progress'] }}</div>
            <div class="stat-label">In Progress</div>
        </div>
        <div class="stat-card">
            <div class="stat-icon bg-accent-100 text-accent-600">
                <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
            </div>
            <div class="stat-value">{{ number_format($stats['total_disbursed'], 3) }}</div>
            <div class="stat-label">Total Disbursed (OMR)</div>
        </div>
    </div>
    @endif

    {{-- Payroll Batches Table --}}
    <div class="card">
        <div class="card-header">
            <h2 class="card-header-title">Payroll Batches</h2>
        </div>
        @if($batches->isEmpty())
            <div class="empty-state">
                <div class="empty-state-icon">
                    <svg class="w-16 h-16 mx-auto text-gray-300" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="1" y="4" width="22" height="16" rx="2" ry="2"/><line x1="1" y1="10" x2="23" y2="10"/></svg>
                </div>
                <p class="empty-state-title">No payroll batches yet</p>
                <p class="empty-state-text">Initialize your first monthly payroll to get started.</p>
                <button @click="showInitModal = true" class="btn-primary">Initialize Payroll</button>
            </div>
        @else
            <div class="overflow-x-auto">
                <table class="data-table">
                    <thead>
                        <tr>
                            <th>Period</th>
                            <th class="text-center">Employees</th>
                            <th class="text-right">Gross (OMR)</th>
                            <th class="text-right">Deductions (OMR)</th>
                            <th class="text-right">Net (OMR)</th>
                            <th>WPS</th>
                            <th>Status</th>
                            <th class="text-right">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($batches as $batch)
                        <tr>
                            <td class="font-medium text-gray-900">
                                {{ \Carbon\Carbon::createFromDate($batch->year, $batch->month, 1)->format('F Y') }}
                            </td>
                            <td class="text-center">{{ $batch->employee_count }}</td>
                            <td class="text-right">{{ number_format($batch->total_earnings, 3) }}</td>
                            <td class="text-right text-danger-500">{{ number_format($batch->total_deductions, 3) }}</td>
                            <td class="text-right font-semibold text-gray-900">{{ number_format($batch->total_net, 3) }}</td>
                            <td>
                                @if($batch->wps_generated)
                                    <span class="badge badge-active"><span class="badge-dot"></span>Generated</span>
                                @else
                                    <span class="badge badge-inactive"><span class="badge-dot"></span>Pending</span>
                                @endif
                            </td>
                            <td>
                                @if($batch->status === 'finalized')
                                    <span class="badge badge-approved"><span class="badge-dot"></span>Finalized</span>
                                @elseif($batch->status === 'review')
                                    <span class="badge badge-pending"><span class="badge-dot"></span>Review</span>
                                @else
                                    <span class="badge badge-draft"><span class="badge-dot"></span>Draft</span>
                                @endif
                            </td>
                            <td class="text-right">
                                <div class="flex items-center justify-end gap-1">
                                    @if($batch->status === 'finalized')
                                        <a href="{{ route('payroll.finalized', $batch->id) }}" class="btn-ghost">View</a>
                                        <a href="{{ route('payroll.export', $batch->id) }}" class="btn-icon" title="Export Excel">
                                            <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
                                        </a>
                                        @if(!$batch->wps_generated)
                                        <a href="{{ route('payroll.wps.generate', $batch->id) }}" class="btn-ghost text-accent-600">WPS</a>
                                        @endif
                                    @else
                                        <a href="{{ route('payroll.review', $batch->id) }}" class="btn-ghost">
                                            {{ $batch->status === 'draft' ? 'Process' : 'Review' }}
                                        </a>
                                    @endif
                                </div>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            @if($batches->hasPages())
            <div class="px-5 py-3 border-t border-gray-100">{{ $batches->links() }}</div>
            @endif
        @endif
    </div>

    {{-- Initialize Modal --}}
    <div x-show="showInitModal" x-transition class="modal-backdrop" @click.self="showInitModal = false">
        <div class="modal">
            <div class="modal-header">
                <h3 class="font-display text-lg font-semibold text-gray-900">Initialize New Payroll</h3>
            </div>
            <form action="{{ route('payroll.initialize') }}" method="POST">
                @csrf
                <div class="modal-body space-y-4">
                    <p class="text-sm text-gray-600">Select the month and year to create a new payroll batch.</p>
                    <div class="grid grid-cols-2 gap-3">
                        <div>
                            <label class="form-label">Month</label>
                            <select name="month" class="form-select" required>
                                @for($m = 1; $m <= 12; $m++)
                                    <option value="{{ $m }}" {{ $m == date('n') ? 'selected' : '' }}>
                                        {{ \Carbon\Carbon::createFromDate(null, $m, 1)->format('F') }}
                                    </option>
                                @endfor
                            </select>
                        </div>
                        <div>
                            <label class="form-label">Year</label>
                            <select name="year" class="form-select" required>
                                @for($y = date('Y') - 1; $y <= date('Y') + 1; $y++)
                                    <option value="{{ $y }}" {{ $y == date('Y') ? 'selected' : '' }}>{{ $y }}</option>
                                @endfor
                            </select>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" @click="showInitModal = false" class="btn-secondary">Cancel</button>
                    <button type="submit" class="btn-primary">Initialize</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection