@extends('layouts.app')
@section('title', $row->exists ? 'Edit Vital Range' : 'New Vital Range')

@section('content')
<section class="content-header">
    <h1><i class="fa fa-thermometer-three-quarters"></i>
        {{ $row->exists ? 'Edit' : 'New' }} Vital Range
    </h1>
    <ol class="breadcrumb">
        <li><a href="{{ route('vc.vital-ranges.index') }}">Vital Ranges</a></li>
        <li class="active">{{ $row->exists ? 'Edit' : 'New' }}</li>
    </ol>
</section>

<section class="content">
    <form method="POST"
          action="{{ $row->exists ? route('vc.vital-ranges.update', $row->id) : route('vc.vital-ranges.store') }}">
        @csrf
        @component('components.widget', ['class' => 'box-primary'])
            <div class="row">
                <div class="col-md-4 form-group">
                    <label>Species <span class="text-danger">*</span></label>
                    <input type="text" name="species" required class="form-control"
                           value="{{ $row->species ?? '' }}"
                           placeholder="e.g. canine, feline, rabbit, bird">
                    <small class="text-muted">
                        Common spellings (dog/Dog/canine; cat/feline) are auto-normalised.
                    </small>
                </div>
                <div class="col-md-4 form-group">
                    <label>Life stage <span class="text-danger">*</span></label>
                    <select name="life_stage" required class="form-control">
                        @foreach(['all'=>'All ages','pediatric'=>'Pediatric (<1 yr)','adult'=>'Adult','senior'=>'Senior (8 yrs+)'] as $k => $v)
                            <option value="{{ $k }}" {{ ($row->life_stage ?? 'all') === $k ? 'selected' : '' }}>{{ $v }}</option>
                        @endforeach
                    </select>
                </div>
            </div>

            <h4 style="margin-top:14px;border-bottom:1px solid #e2e8f0;padding-bottom:6px;">
                Normal range bounds <small class="text-muted">(leave blank to skip a metric)</small>
            </h4>

            <div class="row">
                <div class="col-md-6">
                    <label>Temperature (°C)</label>
                    <div class="row">
                        <div class="col-xs-6"><input type="number" step="0.1" name="temperature_low"
                               class="form-control" placeholder="low" value="{{ $row->temperature_low }}"></div>
                        <div class="col-xs-6"><input type="number" step="0.1" name="temperature_high"
                               class="form-control" placeholder="high" value="{{ $row->temperature_high }}"></div>
                    </div>
                </div>
                <div class="col-md-6">
                    <label>Heart rate (bpm)</label>
                    <div class="row">
                        <div class="col-xs-6"><input type="number" step="1" name="heart_rate_low"
                               class="form-control" placeholder="low" value="{{ $row->heart_rate_low }}"></div>
                        <div class="col-xs-6"><input type="number" step="1" name="heart_rate_high"
                               class="form-control" placeholder="high" value="{{ $row->heart_rate_high }}"></div>
                    </div>
                </div>
            </div>
            <div class="row" style="margin-top:10px;">
                <div class="col-md-6">
                    <label>Respiratory rate (/min)</label>
                    <div class="row">
                        <div class="col-xs-6"><input type="number" step="1" name="respiratory_rate_low"
                               class="form-control" placeholder="low" value="{{ $row->respiratory_rate_low }}"></div>
                        <div class="col-xs-6"><input type="number" step="1" name="respiratory_rate_high"
                               class="form-control" placeholder="high" value="{{ $row->respiratory_rate_high }}"></div>
                    </div>
                </div>
                <div class="col-md-6">
                    <label>Weight (kg) <small class="text-muted">(optional — purely informational)</small></label>
                    <div class="row">
                        <div class="col-xs-6"><input type="number" step="0.01" name="weight_low_kg"
                               class="form-control" placeholder="low" value="{{ $row->weight_low_kg }}"></div>
                        <div class="col-xs-6"><input type="number" step="0.01" name="weight_high_kg"
                               class="form-control" placeholder="high" value="{{ $row->weight_high_kg }}"></div>
                    </div>
                </div>
            </div>

            <div class="form-group" style="margin-top:14px;">
                <button type="submit" class="btn btn-primary"><i class="fa fa-save"></i> Save</button>
                <a href="{{ route('vc.vital-ranges.index') }}" class="btn btn-default">
                    <i class="fa fa-times"></i> Cancel
                </a>
            </div>
        @endcomponent
    </form>
</section>
@endsection
