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

@section('dashboard-content')
<div class="card">
  <div class="card-header">Edit Sensory Experience 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/sensory/store') }}" method="POST" enctype="multipart/form-data">
      @csrf
      <input type="hidden" name="sensory_id" value="{{ $sensory->id ?? '' }}">

      <div class="row g-3">

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

        <div class="col-md-3">
          <label class="form-label">Badge Number <span class="text-danger">*</span></label>
          <input type="text" class="form-control" name="badge_number"
                 value="{{ old('badge_number', $sensory->badge_number ?? '10') }}" required>
        </div>

        <div class="col-md-3">
          <label class="form-label">Badge Label <span class="text-danger">*</span></label>
          <input type="text" class="form-control" name="badge_label"
                 value="{{ old('badge_label', $sensory->badge_label ?? 'Pads per Box') }}" required>
        </div>

        <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', $sensory->eyebrow ?? 'Sensory Experience') }}" required>
        </div>

        <div class="col-md-8">
          <label class="form-label">Headline <span class="text-danger">*</span></label>
          <input type="text" class="form-control" name="headline"
                 value="{{ old('headline', $sensory->headline ?? 'Softness, redefined.') }}" required>
        </div>

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

        <div class="col-12"><hr><p class="fw-semibold mb-2">Feature List Items</p></div>

        @php $items = $sensory->list_items ?? [['icon'=>'✓','title'=>'','desc'=>''],['icon'=>'✓','title'=>'','desc'=>''],['icon'=>'✓','title'=>'','desc'=>''],['icon'=>'✓','title'=>'','desc'=>'']]; @endphp

        @foreach($items as $i => $item)
        <div class="col-12">
          <div class="card border p-3">
            <div class="row g-2">
              <div class="col-md-1">
                <label class="form-label">Icon</label>
                <input type="text" class="form-control" name="items_icon[]"
                       value="{{ old("items_icon.$i", $item['icon'] ?? '✓') }}">
              </div>
              <div class="col-md-3">
                <label class="form-label">Bold Title</label>
                <input type="text" class="form-control" name="items_title[]"
                       value="{{ old("items_title.$i", $item['title'] ?? '') }}">
              </div>
              <div class="col-md-8">
                <label class="form-label">Description</label>
                <input type="text" class="form-control" name="items_desc[]"
                       value="{{ old("items_desc.$i", $item['desc'] ?? '') }}">
              </div>
            </div>
          </div>
        </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