@extends('layout.styleadmin')
@section('content')
<main id="main" class="main">
@if(session('success'))
    <div class="alert alert-success">
        {{ session('success') }}
    </div>
@endif
<div class="pagetitle"> 
      <h1>Add Post</h1>
      <nav>
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a href="{{ url('/') }}">Home</a></li>
          <li class="breadcrumb-item active"><a href="">Post</a></li>          
        </ol>
      </nav>
    </div>
  <div class="card" >

            <div class="card-body">
              <h5 class="card-title">Post</h5>

              <!-- General Form Elements -->

              @if ($errors->any())
    <div class="alert alert-danger">
        <ul>
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif

<!-- Show custom errors -->
@if (session('error'))
    <div class="alert alert-danger">
        {{ session('error') }}
    </div>
@endif
<form method="POST" action="{{route('posts.store')}}" enctype="multipart/form-data">
    @csrf

    <div class="row mb-3">
                  <label for="title" class="col-sm-2 col-form-label">Title</label>
                  <div class="col-sm-10">
                    <textarea class="form-control" name="title" id="title" style="height: 65px;"></textarea>
                    @error('title')
                    <span class="invalid-feedback" role="alert">
                     <strong>{{ $message }}</strong>
                    </span>
                   @enderror
                  </div>
    </div>

    <div id="photoFieldsContainer">
        <!-- Initial photo input field (without remove button) -->
        <div class="row mb-3 photo-field" data-photo-index="1">
            <label for="inputNumber" class="col-sm-2 col-form-label">Photo 1</label>
            <div class="col-sm-8">
                <input class="form-control" name="photos[]" type="file" id="formFile">
            </div>
        </div>
    </div>

    <div class="row mb-3">
        <label class="col-sm-2 col-form-label"></label>
        <div class="col-sm-10">
            <button type="button" id="addPhotoField" class="btn btn-secondary">+ Add Another Photo</button>
        </div>
    </div>

    <div class="row mb-3">
        <label class="col-sm-2 col-form-label"></label>
        <div class="col-sm-10">
            <button type="submit" class="btn btn-primary">Add</button>
        </div>
    </div>
</form><!-- End General Form Elements -->
              </div>
          </div>
        </div>
</main>
<script>
    let photoIndex = 2;  // Start counting from 2 since the first photo is already labeled "Photo 1"

    // Function to add a new photo field
    document.getElementById('addPhotoField').addEventListener('click', function() {
        // Clone the first photo field
        const photoField = document.querySelector('.photo-field').cloneNode(true);
        
        // Reset the file input value (optional)
        const fileInput = photoField.querySelector('input[type="file"]');
        fileInput.value = '';

        // Update the label text to show the correct photo number (e.g., "Photo 2")
        const label = photoField.querySelector('label');
        label.textContent = 'Photo ' + photoIndex;

        // Increment the photo index
        photoIndex++;

        // Add the remove button functionality only to new fields
        const removeButtonDiv = document.createElement('div');
        removeButtonDiv.classList.add('col-sm-2');
        const removeButton = document.createElement('button');
        removeButton.type = 'button';
        removeButton.classList.add('btn', 'btn-danger', 'remove-photo-btn');
        removeButton.textContent = '-';
        
        removeButton.addEventListener('click', function() {
            photoField.remove();
        });

        removeButtonDiv.appendChild(removeButton);
        photoField.appendChild(removeButtonDiv);  // Add remove button to the cloned field

        // Append the cloned field to the container
        document.getElementById('photoFieldsContainer').appendChild(photoField);
    });
</script>
@endsection