@extends('layout')
@section('page-title', 'Hero Section')

@section('dashboard-content')
<div class="card">
  <div class="card-header d-flex justify-content-between align-items-center">
    <span>Edit Hero Section</span>
  </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/hero/store') }}" method="POST" enctype="multipart/form-data">
      @csrf
      <input type="hidden" name="hero_id" value="{{ $hero->id ?? '' }}">

      <div class="row g-3">

        <div class="col-12">
          <label class="form-label">Current Product Image</label><br>
          <img src="{{ $hero->product_image ?? asset('images/opt/IMG_0960.jpg') }}"
               id="heroPreview" class="img-preview">
        </div>

        <div class="col-12">
          <label class="form-label">Product Image</label>
          <input type="file" class="form-control" name="product_image"
                 accept="image/jpeg,image/png" onchange="previewImg(event,'heroPreview')">
        </div>

        <div class="col-md-6">
          <label class="form-label">Eyebrow Text <span class="text-danger">*</span></label>
          <input type="text" class="form-control" name="eyebrow"
                 value="{{ old('eyebrow', $hero->eyebrow ?? 'Organic Turkish Cotton') }}" required>
        </div>

        <div class="col-md-6">
          <label class="form-label">Primary Button Text <span class="text-danger">*</span></label>
          <input type="text" class="form-control" name="primary_btn_text"
                 value="{{ old('primary_btn_text', $hero->primary_btn_text ?? 'Discover EveryHer') }}" required>
        </div>

        <div class="col-md-6">
          <label class="form-label">Secondary Button Text <span class="text-danger">*</span></label>
          <input type="text" class="form-control" name="secondary_btn_text"
                 value="{{ old('secondary_btn_text', $hero->secondary_btn_text ?? 'Learn 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', $hero->headline ?? "Refined care for your\nmost intimate days.") }}</textarea>
          <small class="text-muted">Use line breaks as they will appear on screen.</small>
        </div>

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

        <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