@extends('layouts.master')
@section('title') SLA Targets @endsection
@section('content')
@component('components.breadcrumb')
@slot('li_1') Administration @endslot
@slot('title') SLA Targets @endslot
@endcomponent

@if(session('success'))
<div class="alert alert-success alert-dismissible fade show">{{ session('success') }}<button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>
@endif

<div class="row justify-content-center">
    <div class="col-lg-7">
        <div class="card">
            <div class="card-header"><h5 class="card-title mb-0">Service-Level Targets (days)</h5></div>
            <form method="POST" action="{{ route('admin.sla.update') }}">
                @csrf @method('PUT')
                <div class="card-body">
                    <p class="text-muted small">Set the maximum days allowed for each workflow milestone. Requisitions exceeding a target are flagged as SLA breaches.</p>
                    @foreach($targets as $stage => $cfg)
                    <div class="row align-items-center mb-3">
                        <label class="col-sm-8 form-label mb-0">{{ $cfg['label'] }}</label>
                        <div class="col-sm-4">
                            <div class="input-group">
                                <input type="number" min="1" max="365" name="targets[{{ $stage }}]" class="form-control" value="{{ $cfg['target_days'] }}" required>
                                <span class="input-group-text">days</span>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
                <div class="card-footer"><button class="btn btn-primary">Save Targets</button></div>
            </form>
        </div>
    </div>
</div>
@endsection