@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 Device</h1>
      <nav>
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a href="{{ url('/') }}">Home</a></li>
          <li class="breadcrumb-item active"><a href="">Device</a></li>          
        </ol>
      </nav>
    </div>
  <div class="card" >

            <div class="card-body">
              <h5 class="card-title">Device</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('devices.store')}}" enctype="multipart/form-data">
    @csrf

    <div class="row mb-3">
        <label class="col-sm-2 col-form-label">Tag</label>
        <div class="col-sm-10">
            <select id="tag" name="tag" class="form-control" required>
                <option value="">-- Choose Tag --</option>
                @foreach($tag as $tags)
                    <option value="{{ $tags->name }}">{{ $tags->name }}</option>
                @endforeach
            </select>
        </div>
    </div>

    <div class="row mb-3">
                <label for="name" class="col-sm-2 col-form-label">Name</label>
                  <div class="col-sm-10">
                  <input id="name" type="text" class="form-control @error('name') is-invalid @enderror" name="name" value="{{ old('name') }}" required autocomplete="name" autofocus>
                   @error('name')
                    <span class="invalid-feedback" role="alert">
                     <strong>{{ $message }}</strong>
                    </span>
                   @enderror
                  </div>
    </div>

    <div class="row mb-3">
                <label for="type" class="col-sm-2 col-form-label">Type</label>
                  <div class="col-sm-10">
                  <input id="type" type="text" class="form-control @error('type') is-invalid @enderror" name="type" value="{{ old('type') }}" required autocomplete="type" autofocus>
                   @error('type')
                    <span class="invalid-feedback" role="alert">
                     <strong>{{ $message }}</strong>
                    </span>
                   @enderror
                  </div>
    </div>

    <div class="row mb-3">
                <label for="client" class="col-sm-2 col-form-label">Client</label>
                  <div class="col-sm-10">
                  <input id="client" type="text" class="form-control @error('client') is-invalid @enderror" name="client" value="{{ old('client') }}" required autocomplete="client" autofocus>
                   @error('client')
                    <span class="invalid-feedback" role="alert">
                     <strong>{{ $message }}</strong>
                    </span>
                   @enderror
                  </div>
    </div>

    
    <div class="row mb-3">
                <label for="shortdescription" class="col-sm-2 col-form-label">Short Description</label>
                  <div class="col-sm-10">
                  <input id="shortdescription" type="text" class="form-control @error('shortdescription') is-invalid @enderror" name="shortdescription" value="{{ old('shortdescription') }}" required autocomplete="shortdescription" autofocus>
                   @error('shortdescription')
                    <span class="invalid-feedback" role="alert">
                     <strong>{{ $message }}</strong>
                    </span>
                   @enderror
                  </div>
    </div>

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

    <div id="">
        <div class="row mb-3 " data-photo-index="1">
            <label for="inputNumber" class="col-sm-2 col-form-label"> Catalog PDF</label>
            <div class="col-sm-8">
                <input class="form-control" name="catalog" type="file" id="formFile">
            </div>
        </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