@extends('layouts.school')
@section('title', 'New Payroll Run')
@section('header', 'New Payroll Run')
@section('content')
    <div class="max-w-2xl">
        <form method="POST" action="{{ route('school.payroll.store', $currentSchool->id) }}" class="space-y-6">
            @csrf

            @if ($errors->has('period'))
                <div class="rounded-lg bg-red-50 px-4 py-3 text-sm text-red-700">{{ $errors->first('period') }}</div>
            @endif

            <div class="rounded-xl bg-white p-6 shadow-sm ring-1 ring-gray-900/5">
                <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                    <div>
                        <label class="block text-xs font-medium text-gray-500 mb-1">Period start</label>
                        <input type="date" name="period_start" value="{{ old('period_start') }}"
                               required class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-primary-500 focus:outline-none">
                        @error('period_start')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                    </div>
                    <div>
                        <label class="block text-xs font-medium text-gray-500 mb-1">Period end</label>
                        <input type="date" name="period_end" value="{{ old('period_end') }}"
                               required class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-primary-500 focus:outline-none">
                        @error('period_end')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                    </div>
                </div>

                <div class="mt-4">
                    <label class="block text-xs font-medium text-gray-500 mb-1">Notes</label>
                    <input type="text" name="notes" value="{{ old('notes') }}" maxlength="500"
                           class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-primary-500 focus:outline-none">
                </div>
            </div>

            <div class="rounded-xl bg-white p-6 shadow-sm ring-1 ring-gray-900/5">
                <h3 class="text-sm font-semibold text-gray-900 mb-3">Include active profiles ({{ $profiles->count() }})</h3>
                @if ($profiles->isNotEmpty())
                    <div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
                        @foreach ($profiles as $profile)
                            <label class="flex items-center gap-2 rounded-lg border border-gray-200 px-3 py-2 text-sm">
                                <input type="checkbox" name="profiles[]" value="{{ $profile->id }}"
                                       {{ in_array($profile->id, old('profiles', [])) ? 'checked' : '' }}>
                                <span class="text-gray-800">{{ $profile->full_name }}</span>
                                <span class="ml-auto text-xs text-gray-400">₦{{ number_format($profile->net, 2) }}</span>
                            </label>
                        @endforeach
                    </div>
                    <p class="mt-2 text-xs text-gray-400">Leave all unchecked to include every active profile.</p>
                @else
                    <p class="text-sm text-gray-400">No active payroll profiles yet. Add them under Payroll Profiles first.</p>
                @endif
            </div>

            <div class="flex items-center gap-3">
                <button type="submit" class="rounded-lg bg-primary-600 px-4 py-2 text-sm font-medium text-white hover:bg-primary-700">Create Run</button>
                <a href="{{ route('school.payroll.index', $currentSchool->id) }}" class="text-sm text-gray-500 hover:text-gray-700">Cancel</a>
            </div>
        </form>
    </div>
@endsection