@extends('layouts.app')

@section('title', 'WPS Submissions')

@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">WPS History</span>
    </div>
@endsection

@section('content')
<div class="space-y-5" x-data="{ showStatusModal: false, selectedId: null, selectedStatus: '' }">
    <div class="flex items-center justify-between">
        <div>
            <h1 class="font-display text-2xl font-semibold text-gray-900">WPS Submissions</h1>
            <p class="text-sm text-gray-500 mt-1">Track WPS SIF file submissions to banks</p>
        </div>
    </div>

    <div class="card">
        @if($submissions->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"><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>
                </div>
                <p class="empty-state-title">No WPS submissions yet</p>
                <p class="empty-state-text">Generate WPS files from finalized payroll batches.</p>
            </div>
        @else
            <div class="overflow-x-auto">
                <table class="data-table">
                    <thead>
                        <tr>
                            <th>Period</th>
                            <th>File</th>
                            <th class="text-center">Employees</th>
                            <th class="text-right">Amount (OMR)</th>
                            <th>Status</th>
                            <th>Generated</th>
                            <th class="text-right">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($submissions as $sub)
                        <tr>
                            <td class="font-medium text-gray-900">
                                {{ $sub->payrollBatch ? \Carbon\Carbon::createFromDate($sub->payrollBatch->year, $sub->payrollBatch->month, 1)->format('F Y') : '—' }}
                            </td>
                            <td class="text-sm text-gray-600">{{ $sub->file_name }}</td>
                            <td class="text-center">{{ $sub->employee_count }}</td>
                            <td class="text-right font-medium">{{ number_format($sub->total_amount, 3) }}</td>
                            <td>
                                @switch($sub->status)
                                    @case('generated')
                                        <span class="badge badge-draft"><span class="badge-dot"></span>Generated</span>
                                        @break
                                    @case('submitted')
                                        <span class="badge badge-pending"><span class="badge-dot"></span>Submitted</span>
                                        @break
                                    @case('confirmed')
                                        <span class="badge badge-approved"><span class="badge-dot"></span>Confirmed</span>
                                        @break
                                    @case('rejected')
                                        <span class="badge badge-rejected"><span class="badge-dot"></span>Rejected</span>
                                        @break
                                @endswitch
                            </td>
                            <td class="text-xs text-gray-500">
                                {{ $sub->created_at->format('d M Y') }}
                                <br>{{ $sub->generator->name ?? '' }}
                            </td>
                            <td class="text-right">
                                <div class="flex items-center justify-end gap-1">
                                    <a href="{{ route('payroll.wps.download', $sub->id) }}" class="btn-icon" title="Download SIF">
                                        <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($sub->status !== 'confirmed')
                                    <button @click="showStatusModal = true; selectedId = {{ $sub->id }}; selectedStatus = '{{ $sub->status }}'" class="btn-icon" title="Update Status">
                                        <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"/></svg>
                                    </button>
                                    @endif
                                </div>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            @if($submissions->hasPages())
            <div class="px-5 py-3 border-t border-gray-100">{{ $submissions->links() }}</div>
            @endif
        @endif
    </div>

    {{-- Status Update Modal --}}
    <div x-show="showStatusModal" x-transition class="modal-backdrop" @click.self="showStatusModal = false">
        <div class="modal">
            <div class="modal-header">
                <h3 class="font-display text-lg font-semibold text-gray-900">Update WPS Status</h3>
            </div>
            <form :action="'/payroll/wps/' + selectedId + '/status'" method="POST">
                @csrf
                @method('PUT')
                <div class="modal-body space-y-4">
                    <div>
                        <label class="form-label">New Status</label>
                        <select name="status" class="form-select" required>
                            <option value="submitted">Submitted to Bank</option>
                            <option value="confirmed">Confirmed by Bank</option>
                            <option value="rejected">Rejected by Bank</option>
                        </select>
                    </div>
                    <div>
                        <label class="form-label">Notes</label>
                        <textarea name="notes" rows="2" class="form-input" placeholder="Optional notes..."></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" @click="showStatusModal = false" class="btn-secondary">Cancel</button>
                    <button type="submit" class="btn-primary">Update Status</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection