@extends('dashboard.layouts.main')

@section('container')
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
    <h1 class="h2">Gambar Header</h1>
</div>

@if(session()->has('success'))
  <div class="alert alert-success col-lg-8" role="alert">
    {{ session('success') }}
  </div>
@elseif(session()->has('error'))
  <div class="alert alert-danger col-lg-8" role="alert">
    {{ session('error') }}
@endif

<div class="album py-5 bg-light">
  <div class="container">
    <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">

      @for($i = 1; $i <= 8; $i++)
      @php
          $field = 'gbr' . $i;
          $imagePath = optional($data)->$field ? asset('storage/' . $data->$field) : asset('noImage/noImage.png');
      @endphp
      <div class="col">
          @error($field)
            <div class="text-danger mb-1">{{ $message }}</div>
          @enderror
          <div class="card shadow-sm">
            <img src="{{ $imagePath }}" class="card-img-top" style="max-height: 225px; width: 100%; object-fit: contain;" alt="Gambar Header">

            <div class="card-body">
              <p class="card-text">Gambar {{ $i }}</p>
              <div class="d-flex justify-content-between align-items-center">
                <div class="btn-group">
                  <button type="button" onclick="document.getElementById('editImageForm{{ $i }}').classList.toggle('d-none')" class="btn btn-sm btn-outline-secondary">Edit Foto</button>
                </div>                 
              </div>
            </div>

            <div class="btn-group">
              <form action="{{ route('gambar_header.update') }}" class="d-none mt-3" id="editImageForm{{ $i }}" method="POST" enctype="multipart/form-data">
                  @csrf
                  @method('PUT')

                  <div class="m-3">
                      <input type="file" name="{{ $field }}" class="form-control" required>
                      <h6>(maksimal 2MB)</h6>
                  </div>

                  <button type="submit" class="mb-3 btn btn-sm btn-outline-success" style="margin-left: 16px">Simpan</button>
              </form>
            </div>
          </div>
      </div>
      @endfor

    </div>
  </div>
</div>
@endsection