@extends('layout')
@section('page-title', 'Shop / Product Section')

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

      {{-- ── Section Header ─────────────────────────────────────── --}}
      <div class="row g-3">
        <div class="col-12"><p class="fw-semibold mb-0 border-bottom pb-2">Section Header</p></div>

        <div class="col-md-3">
          <label class="form-label">Eyebrow</label>
          <input type="text" class="form-control" name="section_eyebrow"
                 value="{{ old('section_eyebrow', $product->section_eyebrow ?? 'Shop') }}" required>
        </div>
        <div class="col-md-5">
          <label class="form-label">Headline <span class="text-danger">*</span></label>
          <input type="text" class="form-control" name="section_headline"
                 value="{{ old('section_headline', $product->section_headline ?? 'Choose your size.') }}" required>
        </div>
        <div class="col-12">
          <label class="form-label">Sub-text</label>
          <textarea class="form-control" name="section_sub" rows="2">{{ old('section_sub', $product->section_sub ?? '') }}</textarea>
        </div>

        {{-- ── Product Info ────────────────────────────────────────── --}}
        <div class="col-12 mt-2"><p class="fw-semibold mb-0 border-bottom pb-2">Product Info</p></div>

        <div class="col-md-3">
          <label class="form-label">Product Eyebrow</label>
          <input type="text" class="form-control" name="product_eyebrow"
                 value="{{ old('product_eyebrow', $product->product_eyebrow ?? 'EveryHer') }}" required>
        </div>
        <div class="col-md-5">
          <label class="form-label">Product Name <span class="text-danger">*</span></label>
          <input type="text" class="form-control" name="product_name"
                 value="{{ old('product_name', $product->product_name ?? 'Sanitary Pads') }}" required>
        </div>
        <div class="col-12">
          <label class="form-label">Product Tagline</label>
          <textarea class="form-control" name="product_tagline" rows="2">{{ old('product_tagline', $product->product_tagline ?? '') }}</textarea>
        </div>

        {{-- ── Sizes & Prices ──────────────────────────────────────── --}}
        <div class="col-12 mt-2"><p class="fw-semibold mb-0 border-bottom pb-2">Sizes & Prices</p></div>

        <div class="col-md-4">
          <label class="form-label">Size 1 Name <span class="text-danger">*</span></label>
          <input type="text" class="form-control" name="size1_name"
                 value="{{ old('size1_name', $product->size1_name ?? 'Regular') }}" required>
        </div>
        <div class="col-md-5">
          <label class="form-label">Size 1 Detail</label>
          <input type="text" class="form-control" name="size1_detail"
                 value="{{ old('size1_detail', $product->size1_detail ?? '240mm · Ultra Thin · 10 pads') }}" required>
        </div>
        <div class="col-md-3">
          <label class="form-label">Size 1 Price (₦) <span class="text-danger">*</span></label>
          <input type="number" class="form-control" name="size1_price" min="0"
                 value="{{ old('size1_price', $product->size1_price ?? 1500) }}" required>
          <small class="text-muted">Numeric only (e.g. 1500)</small>
        </div>

        <div class="col-md-4">
          <label class="form-label">Size 2 Name <span class="text-danger">*</span></label>
          <input type="text" class="form-control" name="size2_name"
                 value="{{ old('size2_name', $product->size2_name ?? 'Extra Long') }}" required>
        </div>
        <div class="col-md-5">
          <label class="form-label">Size 2 Detail</label>
          <input type="text" class="form-control" name="size2_detail"
                 value="{{ old('size2_detail', $product->size2_detail ?? '290mm · Ultra Thin · 10 pads') }}" required>
        </div>
        <div class="col-md-3">
          <label class="form-label">Size 2 Price (₦) <span class="text-danger">*</span></label>
          <input type="number" class="form-control" name="size2_price" min="0"
                 value="{{ old('size2_price', $product->size2_price ?? 1800) }}" required>
        </div>

        {{-- ── Product Images ──────────────────────────────────────── --}}
        <div class="col-12 mt-2"><p class="fw-semibold mb-0 border-bottom pb-2">Product Images</p></div>

        @php
          $imgDefaults = [
            'image_main'   => 'images/opt/IMG_0938.jpg',
            'image_thumb1' => 'images/opt/IMG_0938.jpg',
            'image_thumb2' => 'images/opt/IMG_0960.jpg',
            'image_thumb3' => 'images/opt/IMG_09360.jpg',
          ];
          $imgLabels = [
            'image_main'   => 'Main Image',
            'image_thumb1' => 'Thumbnail 1',
            'image_thumb2' => 'Thumbnail 2',
            'image_thumb3' => 'Thumbnail 3',
          ];
        @endphp

        @foreach(['image_main','image_thumb1','image_thumb2','image_thumb3'] as $imgField)
        <div class="col-md-3">
          <label class="form-label">{{ $imgLabels[$imgField] }}</label>
          <img src="{{ ($product->$imgField ?? null) ? asset($product->$imgField) : asset($imgDefaults[$imgField]) }}"
               id="{{ $imgField }}Preview"
               style="width:100%;height:140px;object-fit:cover;border-radius:8px;border:2px solid #e5e7eb;margin-bottom:8px;">
          <input type="file" class="form-control" name="{{ $imgField }}"
                 accept="image/jpeg,image/png"
                 onchange="previewImg(event,'{{ $imgField }}Preview')">
        </div>
        @endforeach

        {{-- ── Trust Items ─────────────────────────────────────────── --}}
        <div class="col-12 mt-2"><p class="fw-semibold mb-0 border-bottom pb-2">Trust Badges</p></div>

        @php
          $rawTrust   = $product->trust_items ?? null;
          $trustItems = is_array($rawTrust) ? $rawTrust
                        : (is_string($rawTrust) ? (json_decode($rawTrust, true) ?? []) : []);
          if (empty($trustItems)) {
            $trustItems = [
              ['icon' => '🌿', 'text' => 'Organic Cotton'],
              ['icon' => '🚚', 'text' => 'Lagos Delivery'],
              ['icon' => '🔒', 'text' => 'Secure Checkout'],
              ['icon' => '↩️', 'text' => 'Easy Returns'],
            ];
          }
        @endphp

        @foreach($trustItems as $i => $trust)
        <div class="col-md-3">
          <label class="form-label">Badge {{ $i + 1 }}</label>
          <div class="input-group">
            <input type="text" class="form-control" style="max-width:60px;" name="trust_icon[]"
                   value="{{ old("trust_icon.$i", $trust['icon'] ?? '') }}" placeholder="🌿">
            <input type="text" class="form-control" name="trust_text[]"
                   value="{{ old("trust_text.$i", $trust['text'] ?? '') }}" placeholder="Label">
          </div>
        </div>
        @endforeach

        <div class="col-12 mt-3">
          <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