@extends('layouts.app')

@section('title', 'Generate WPS File')

@section('breadcrumbs')
    <div class="breadcrumb">
        <a href="{{ route('dashboard') }}">Dashboard</a>
        <span class="separator">/</span>
        <a href="{{ route('payroll.index') }}">Payroll</a>
        <span class="separator">/</span>
        <span class="current">Generate WPS — {{ \Carbon\Carbon::createFromDate($batch->year, $batch->month, 1)->format('F Y') }}</span>
    </div>
@endsection

@section('content')
<div class="max-w-3xl space-y-5">
    <h1 class="font-display text-2xl font-semibold text-gray-900">Generate WPS SIF File</h1>
    <p class="text-sm text-gray-500">{{ \Carbon\Carbon::createFromDate($batch->year, $batch->month, 1)->format('F Y') }} · {{ $batch->employee_count }} employees · OMR {{ number_format($batch->total_net, 3) }} net</p>

    {{-- Validation Results --}}
    @if(!empty($validation['missing_bank_details']))
    <div class="card border-danger-200 bg-danger-50/30">
        <div class="card-header border-danger-100">
            <h2 class="card-header-title text-danger-600">
                <svg class="w-5 h-5 inline mr-1" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>
                Missing Bank Details ({{ count($validation['missing_bank_details']) }})
            </h2>
        </div>
        <div class="card-body">
            <p class="text-sm text-gray-600 mb-3">These employees are missing bank details required for WPS:</p>
            <div class="space-y-1">
                @foreach($validation['missing_bank_details'] as $emp)
                <div class="flex items-center gap-2 text-sm">
                    <span class="w-2 h-2 rounded-full bg-danger-500"></span>
                    <span class="font-medium text-gray-900">{{ $emp['name'] }}</span>
                    <span class="text-gray-400">{{ $emp['code'] }}</span>
                    <span class="text-xs text-danger-500">— {{ implode(', ', $emp['missing']) }}</span>
                </div>
                @endforeach
            </div>
        </div>
    </div>
    @endif

    @if(!empty($validation['invalid_amounts']))
    <div class="card border-warning-200 bg-warning-50/30">
        <div class="card-header border-warning-100">
            <h2 class="card-header-title text-warning-600">
                <svg class="w-5 h-5 inline mr-1" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
                Invalid Amounts ({{ count($validation['invalid_amounts']) }})
            </h2>
        </div>
        <div class="card-body">
            <div class="space-y-1">
                @foreach($validation['invalid_amounts'] as $emp)
                <div class="flex items-center gap-2 text-sm">
                    <span class="w-2 h-2 rounded-full bg-warning-500"></span>
                    <span class="font-medium text-gray-900">{{ $emp['name'] }}</span>
                    <span class="text-gray-400">Net: OMR {{ number_format($emp['net_salary'], 3) }}</span>
                </div>
                @endforeach
            </div>
        </div>
    </div>
    @endif

    {{-- Ready to Generate --}}
    @if($validation['is_valid'])
    <div class="card border-success-200 bg-success-50/30">
        <div class="card-body flex items-center gap-4">
            <div class="w-12 h-12 rounded-full bg-success-100 flex items-center justify-center">
                <svg class="w-6 h-6 text-success-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
            </div>
            <div>
                <h3 class="font-display font-semibold text-success-700">Validation Passed</h3>
                <p class="text-sm text-gray-600">{{ $validation['valid_count'] }} employees ready for WPS file generation.</p>
            </div>
        </div>
    </div>

    <form action="{{ route('payroll.wps.process', $batch->id) }}" method="POST">
        @csrf
        <div class="card">
            <div class="card-body">
                <h3 class="font-display font-semibold text-gray-800 mb-3">SIF File Summary</h3>
                <div class="grid grid-cols-2 gap-3">
                    <div class="text-sm">
                        <span class="text-gray-500">Employees:</span>
                        <span class="font-medium text-gray-900 ml-1">{{ $validation['valid_count'] }}</span>
                    </div>
                    <div class="text-sm">
                        <span class="text-gray-500">Total Amount:</span>
                        <span class="font-medium text-gray-900 ml-1">OMR {{ number_format($batch->total_net, 3) }}</span>
                    </div>
                    <div class="text-sm">
                        <span class="text-gray-500">Pay Period:</span>
                        <span class="font-medium text-gray-900 ml-1">{{ \Carbon\Carbon::createFromDate($batch->year, $batch->month, 1)->format('F Y') }}</span>
                    </div>
                    <div class="text-sm">
                        <span class="text-gray-500">Format:</span>
                        <span class="font-medium text-gray-900 ml-1">Oman SIF (pipe-delimited)</span>
                    </div>
                </div>
            </div>
        </div>
        <button type="submit" class="btn-primary mt-4">
            <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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"/></svg>
            Generate SIF File
        </button>
    </form>
    @else
    <div class="p-4 bg-danger-50 border border-danger-200 rounded-lg">
        <p class="text-sm text-danger-600">Please resolve the issues above before generating the WPS file. Update employee bank details in the HR module.</p>
    </div>
    @endif
</div>
@endsection