@extends('layout')
@section('page-title', 'About / Story Section')

@section('dashboard-content')
<div class="card">
  <div class="card-header">Edit About / Story Section</div>
  <div class="card-body p-4">

    @if(session('success'))
      <div class="alert alert-success">{{ session('success') }}</div>
    @endif
    @if(session('error') || session('failed'))
      <div class="alert alert-danger">{{ session('error') ?? session('failed') }}</div>
    @endif
    @if($errors->any())
      <div class="alert alert-danger">{{ $errors->first() }}</div>
    @endif

    <form action="{{ url('admin/about/store') }}" method="POST" enctype="multipart/form-data">
      @csrf
      <input type="hidden" name="about_id" value="{{ $about->id ?? '' }}">

      <div class="row g-3">

        {{-- Images --}}
        <div class="col-md-6">
          <label class="form-label">Image 1 (Tall)</label>
          <img src="{{ $about->image1 ?? asset('images/opt/IMG_0970.jpg') }}"
               id="img1Preview" class="img-preview d-block mb-2">
          <input type="file" class="form-control" name="image1"
                 accept="image/jpeg,image/png" onchange="previewImg(event,'img1Preview')">
        </div>

        <div class="col-md-6">
          <label class="form-label">Image 2 (Wide)</label>
          <img src="{{ $about->image2 ?? asset('images/opt/IMG_0960.jpg') }}"
               id="img2Preview" class="img-preview d-block mb-2">
          <input type="file" class="form-control" name="image2"
                 accept="image/jpeg,image/png" onchange="previewImg(event,'img2Preview')">
        </div>

        {{-- Text --}}
        <div class="col-md-4">
          <label class="form-label">Eyebrow <span class="text-danger">*</span></label>
          <input type="text" class="form-control" name="eyebrow"
                 value="{{ old('eyebrow', $about->eyebrow ?? 'Our Story') }}" required>
        </div>

        <div class="col-12">
          <label class="form-label">Headline <span class="text-danger">*</span></label>
          <textarea class="form-control" name="headline" rows="2" required>{{ old('headline', $about->headline ?? '') }}</textarea>
        </div>

        <div class="col-12">
          <label class="form-label">Body Paragraph 1 <span class="text-danger">*</span></label>
          <textarea class="form-control" name="body1" rows="3" required>{{ old('body1', $about->body1 ?? '') }}</textarea>
        </div>

        <div class="col-12">
          <label class="form-label">Body Paragraph 2</label>
          <textarea class="form-control" name="body2" rows="3">{{ old('body2', $about->body2 ?? '') }}</textarea>
        </div>

        {{-- Badges --}}
        <div class="col-12"><hr><p class="fw-semibold mb-0">Badges</p></div>

        @foreach([1,2,3] as $n)
        <div class="col-md-2">
          <label class="form-label">Badge {{ $n }} Icon</label>
          <input type="text" class="form-control" name="badge{{ $n }}_icon"
                 value="{{ old("badge{$n}_icon", $about->{"badge{$n}_icon"} ?? '') }}">
          <small class="text-muted">Emoji or symbol</small>
        </div>
        <div class="col-md-4">
          <label class="form-label">Badge {{ $n }} Text</label>
          <input type="text" class="form-control" name="badge{{ $n }}_text"
                 value="{{ old("badge{$n}_text", $about->{"badge{$n}_text"} ?? '') }}">
        </div>
        @endforeach

        <div class="col-12">
          <button type="submit" class="submit-button">Save Changes</button>
        </div>
      </div>
    </form>
  </div>
</div>
@endsection

@section('scripts')
<script>
function previewImg(event, id) {
  const reader = new FileReader();
  reader.onload = () => { document.getElementById(id).src = reader.result; };
  reader.readAsDataURL(event.target.files[0]);
}
</script>
@endsection