@extends('layouts.app')

@section('title', 'Baseline Action')

@section('content')

<!-- ✅ Bootstrap 5.3 CDN (Include in your layout if not already present) -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

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

<div class="container my-0">
  <div class="card shadow-sm">
    <div class="card-header bg-info text-white">
      <h5 class="mb-0">Baseline Action for ID #{{ $id }}</h5>
    </div>

    <form action="{{ route('baseline.action.submit') }}" method="POST" class="needs-validation" novalidate>
      @csrf
      <input type="hidden" name="id" value="{{ $id }}">
      <div class="card-body">

        <!-- Status -->
        <div class="row">
          <label for="status" class="col-md-3 col-form-label fw-semibold">Status <span class="text-danger">*</span></label>
          <div class="col-md-9">
            <select
              class="form-select @error('status') is-invalid @enderror"
              id="status"
              name="status"
              required>
              <option value="" disabled {{ old('status') ? '' : 'selected' }}>Choose status…</option>
              <option value="Approved" {{ old('status') === 'Approved' ? 'selected' : '' }}>Approved</option>
              <option value="Rejected" {{ old('status') === 'Rejected' ? 'selected' : '' }}>Rejected</option>
              <option value="Needs Correction" {{ old('status') === 'Needs Correction' ? 'selected' : '' }}>Needs Correction</option>
            </select>
            @error('status')
              <div class="invalid-feedback d-block">{{ $message }}</div>
          
            @enderror
          </div>
        </div>

        <!-- Comments -->
        <div class="row mb-3">
          <label for="admin_comments" class="col-md-3 col-form-label fw-semibold">Comment</label>
          <div class="col-md-9">
            <textarea
              class="form-control @error('admin_comments') is-invalid @enderror"
              id="admin_comments"
              name="admin_comments"
              rows="4"
              placeholder="Write your comment here…"
            >{{ old('admin_comments') }}</textarea>
            @error('admin_comments')
              <div class="invalid-feedback d-block">{{ $message }}</div>
            @else
              <div class="form-text">(Optional) Add any remarks or context.</div>
            @enderror
          </div>
        </div>
      </div>

      <!-- Footer -->
      <div class="card-footer text-center">
        <a href="{{ url()->previous() }}" class="btn btn-secondary me-3 px-4">Cancel</a>
        <button type="submit" class="btn btn-info px-4">Submit</button>
      </div>
    </form>
  </div>
</div>

<style>
  .form-text {
    font-size: 0.875rem;
    color: #6c757d;
  }
</style>

@endsection