@extends('layouts.app')

@section('content')
<div class="container mx-auto px-2 py-6">
    <h1 class="text-2xl font-bold text-gray-800 mb-6">Set Agent Commission for Order #{{ $serviceOrder->id }}</h1>

    @if (session('success'))
        <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-4">
            {{ session('success') }}
        </div>
    @endif
    @if (session('error'))
        <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
            {{ session('error') }}
        </div>
    @endif

    <form action="{{ route('service-orders.update-commission', $serviceOrder) }}" method="POST" class="max-w-md">
        @csrf
        @method('POST')
        <div class="mb-4">
            <label for="agent_commission" class="block text-sm font-bold text-gray-600">Agent Commission</label>
            <input type="number" step="0.01" min="0" name="agent_commission" id="agent_commission" value="{{ number_format($serviceOrder->agent_commission ?? 0, 2) }}" class="mt-1 block w-full border-gray-200 rounded-lg shadow-sm focus:ring-2 focus:ring-indigo-400 focus:border-indigo-500 text-sm">
            @error('agent_commission')
                <span class="text-red-500 text-sm mt-1">{{ $message }}</span>
            @enderror
        </div>
        <button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600">Update Commission</button>
        <a href="{{ route('service-orders.index') }}" class="ml-2 text-gray-600 hover:underline">Back</a>
    </form>
</div>
@endsection