@extends('layouts.app')
@section('title','New Payroll Period')
@section('content')
<x-ui.page-toolbar title="New Payroll Period" description="Create a draft payroll snapshot for all active employees whose primary branch is selected." :breadcrumbs="[['label'=>'Dashboard','url'=>route('dashboard')],['label'=>'Payroll','url'=>route('payroll.index')],['label'=>'New Period']]" />

<form method="POST" action="{{ route('payroll.store') }}" class="mf-card mf-card-body max-w-4xl" data-ui="form-shell">
    @csrf
    <div class="grid gap-3 md:grid-cols-2">
        <label class="text-sm">Branch<select class="mf-select mt-1" name="branch_id" required><option value="">Select branch</option>@foreach($branches as $branch)<option value="{{ $branch->id }}" @selected((string)old('branch_id')===(string)$branch->id)>{{ $branch->name }}</option>@endforeach</select></label>
        <label class="text-sm">Period name<input class="mf-input mt-1" name="name" value="{{ old('name') }}" placeholder="August 2026 Payroll" required></label>
        <label class="text-sm">Start date<input class="mf-input mt-1" type="date" name="start_date" value="{{ old('start_date') }}" required></label>
        <label class="text-sm">End date<input class="mf-input mt-1" type="date" name="end_date" value="{{ old('end_date') }}" required></label>
        <label class="text-sm">Scheduled pay date<input class="mf-input mt-1" type="date" name="pay_date" value="{{ old('pay_date') }}" required></label>
    </div>
    <div class="mt-4 border-t pt-3 text-sm text-muted-foreground">The period is created as a draft. Current compensation settings are copied into permanent payroll-entry snapshots and can be adjusted before approval.</div>
    <div class="mt-4 flex justify-end gap-2"><a class="mf-btn" href="{{ route('payroll.index') }}">Cancel</a><button class="mf-btn mf-btn-primary">Create Draft Payroll</button></div>
</form>
@endsection
