@extends('admin_pages_master')
@section('styles')
<link rel="stylesheet" href="{{asset('styles/multi-step-form.css')}}" />
{{-- <style>
#basicFields, #moreFields {
  display: flex;
  flex-wrap: wrap;
}
</style> --}}
@endsection
@section('content')
<main class="main">
  <!-- Start of Breadcrumb -->
  <nav class="breadcrumb-nav">
    <div class="container">
      <ul class="breadcrumb account-breadcrumb">
        <li><a href="/">Home</a></li>
        <li>Sell</li>
      </ul>
    </div>
  </nav>
  <!-- End of Breadcrumb -->

  <!-- Start of Page Content -->
  <div class="page-content pt-5">
    <div class="container">
      <a class="back-btn" onclick="goBack()">
        <i class="w-icon-angle-left"></i>
        <div>Back</div>
      </a>
      @include('product_alert')
      <div class="account-sect-content">
        <div class="multi-step-form-con">
          <div class="stepper">
            <div class="stepper-progress-bar">
              <div class="stepper-progress"></div>
            </div>
            <div class="step active">
              <div class="step-number">1</div>
              <div class="step-title">Address</div>
            </div>
            <div class="step">
              <div class="step-number">2</div>
              <div class="step-title">Basic Info</div>
            </div>
            <div class="step">
              <div class="step-number">3</div>
              <div class="step-title">More Info</div>
            </div>
            <div class="step">
              <div class="step-number">4</div>
              <div class="step-title">Final</div>
            </div>
          </div>
          <div class="form-error appear-animate">
            Please fill in all required fields before proceeding.
          </div>
          <form id="multi-step-form" action="{{ isset($product) ? route('admin-edit-product', ['id' => $product->id]) : route('save-product') }}" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="form-step active" id="step1">
              <div class="form-group">
                <label for="street">Item Name:</label>
                <input
                  type="text"
                  id="street"
                  name="product_name"
                  placeholder="Enter product/service title"
                  value="{{ isset($product) ? $product->title : old('product_name') }}"
                  required />
              </div>
              <div class="form-group">
                <label for="street">Office Address:</label>
                <input
                  type="text"
                  id="street"
                  name="office_address"
                  placeholder="Enter office address"
                  value="{{ isset($product) ? $product->office_address : old('office_address') }}"
                  required />
              </div>
              <div class="form-group">
                <label for="city">Area/City:</label>
                <input
                  type="text"
                  id="city"
                  name="office_area"
                  placeholder="Enter area/city"
                  value="{{ isset($product) ? $product->area : old('office_area') }}"
                  required />
              </div>
              <div class="form-group">
                <label for="state">State:</label>
                <select name="office_state" id="state" required>
                  <option value="" selected disabled>
                    Choose a state
                  </option>
                  @php
                  $states = ["Abia", "Adamawa", "Akwa Ibom", "Anambra", "Bauchi", "Bayelsa", "Benue", "Borno", "Cross River", "Delta", "Ebonyi", "Edo", "Ekiti", "Enugu", "Gombe", "Imo", "Jigawa", "Kaduna", "Kano", "Katsina", "Kebbi", "Kogi", "Kwara", "Lagos", "Nasarawa", "Niger", "Ogun", "Ondo", "Osun", "Oyo", "Plateau", "Rivers", "Sokoto", "Taraba", "Yobe", "Zamfara", "Abuja"];
                  @endphp
                  @foreach ($states as $state)
                  <option value="{{ $state }}" @if(isset($product) && $product->state == $state) selected @endif>{{ $state }}</option>
                  @endforeach
                </select>
              </div>
              <div class="form-group">
                <label for="category">Category:</label>
                <select name="section" id="sectionId" class="sectionId" required>
                  <option value="" selected disabled>
                    Choose a category
                  </option>
                  @foreach ($categories as $section)
                  <option data-name="{{$section['name']}}" value="{{$section['id']}}" @if(isset($product) && $product->section_id == $section['id']) selected @endif>{{$section['name']}}</option>
                  @endforeach
                </select>
              </div>
              <div class="form-group" id="categoryDiv" style="display: none">
                <label for="sub-category" class="categoryLabel"></label>
                <select name="category" id="serviceType" class="categoryList serviceType" required>
                  <option value="0" selected disabled>
                    Choose sub category
                  </option>
                </select>
              </div>
            </div>
            <div class="form-step" id="step2 ">
              <div id="basicFields">

              </div>
            </div>
            <div class="form-step" id="step3">
              <div id="moreFields">
              </div>
            </div>
            <div class="form-step" id="step4">
              <div>
                <label for="price">Mobile:</label>
                <input
                  type="text"
                  class="phone"
                  value="{{ isset($product) ? $product->vendor->mobile : Auth::guard('admin')->user()->mobile }}"
                  name="mobile"
                  placeholder="Enter mobile number here"
                  required />
                <span id="phoneError" style="color: red; display: none;">Invalid phone number</span>
              </div>
              <div>
                <label for="price">Price:</label>
                <input
                  data-type="currency"
                  type="text"
                  id="price"
                  name="price"
                  placeholder="Enter price here"
                  value="{{ isset($product) ? $product->price : old('price') }}"
                  required />
              </div>
              <div>
                <label for="description">Description:</label>
                <textarea
                  name="description"
                  id="description"
                  placeholder="Tell us about your product"
                  rows="5"
                  required>{{ isset($product) ? $product->description : old('description') }}</textarea>
              </div>
              <div>
                <label for="display-img">Display Image:</label>
                @if(isset($product) && $product->product_image)
                <div class="current-image-preview mb-2">
                  <div class="image-preview-container">
                    <img src="{{ asset($product->product_image) }}" alt="Current Image" class="current-image">
                    <div class="image-info">
                      <small class="text-muted">✓ Current display image</small>
                    </div>
                  </div>
                </div>
                @endif
                <div class="upload-section">
                  <label for="display-img" class="img-placeholder-con single">
                    <div class="img-placeholder" id="display-img-placeholder">
                      <i class="w-icon-plus"></i>
                      <span class="upload-text">{{ isset($product) && $product->product_image ? 'Change Image' : 'Upload Image' }}</span>
                    </div>
                  </label>
                  <input
                    type="file"
                    id="display-img"
                    class="form-img"
                    name="single"
                    placeholder="Display image"
                    accept="image/*"
                    {{ !isset($product) ? 'required' : '' }} />
                  @if(isset($product))
                  <small class="text-muted-help">💡 Leave empty to keep current image</small>
                  @endif
                </div>
              </div>
              <div>
                <label for="additional-img">Additional Images:</label>
                @if(isset($product) && $product->images)
                <div class="current-images-preview mb-3">
                  <p class="section-title"><small>Current additional images:</small></p>
                  <div class="images-grid">
                    @foreach($product->images as $image)
                    <div class="image-card">
                      <img src="{{ asset($image->image) }}" alt="Gallery Image" class="gallery-image">
                    </div>
                    @endforeach
                  </div>
                </div>
                @endif
                <div class="upload-section">
                  <div class="img-placeholder-con">
                    <div class="plural" id="new-images-preview"></div>
                    <label for="additional-img">
                      <div class="img-placeholder">
                        <i class="w-icon-plus"></i>
                        <span class="upload-text">Add Images</span>
                      </div>
                    </label>
                  </div>
                  <input
                    type="file"
                    id="additional-img"
                    class="form-img-plural"
                    name="image_gallery[]"
                    placeholder="Additional images"
                    multiple
                    accept="image/*" />
                  <small class="text-muted-help">💡 You can select multiple images at once</small>
                </div>
              </div>
            </div>
            <div class="button-group">
              <button type="button" id="prev-btn" disabled>
                Previous
              </button>
              <button type="button" id="next-btn">Next</button>
            </div>
          </form>
          {{-- @include('subscription_status') --}}

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

@section('scripts')
<script src="{{asset('scripts/multi-step-form.js')}}"></script>
<script src="{{asset('scripts/image-upload.js')}}"></script>
@include('phone_js')
<script>
  $(document).ready(function() {
    // Function to load categories
    function loadCategories(sectionId, selectedCategoryId) {
      var categoryList = $(".categoryList");
      categoryList.empty();
      var name = $('#sectionId').find(':selected').data('name');
      $('.categoryLabel').text(name);
      $("#categoryDiv").show();

      $.ajax({
        url: '{{ route('get-section-categories') }}?id=' + sectionId,
        type: "GET",
        dataType: "json",
        success: function(response) {
          var len = 0;
          if (response['fields'] != null) {
            len = response['fields'].length;
          }
          categoryList.append("<option value='' selected>Choose sub category</option>");
          for (var i = 0; i < len; i++) {
            var id = response['fields'][i].id;
            var descr = response['fields'][i].category_name;
            var selected = (id == selectedCategoryId) ? 'selected' : '';
            var option = "<option value='" + id + "' " + selected + ">" + descr + "</option>";
            categoryList.append(option);
          }
        }
      });
    }

    // On section change
    $(".sectionId").on("change", function(e) {
      var id = $(this).val();
      loadCategories(id, null);
    });

    // On page load for edit
    @if(isset($product))
    var initialSectionId = $('#sectionId').val();
    if (initialSectionId) {
      loadCategories(initialSectionId, '{{ $product->category_id }}');
    }
    @endif
  });
</script>
<script>
  $(".serviceType").on("change", function(e) {
    //document.querySelector('.serviceType').addEventListener('change', function() {
    const serviceTypeId = this.value;
    // console.log(serviceTypeId)
    if (serviceTypeId) {
      fetch(`/admin/category-fields/${serviceTypeId}`)
        .then(response => response.json())
        .then(data => {
          const serviceFields = document.getElementById('moreFields');
          const basicFields = document.getElementById('basicFields');
          serviceFields.innerHTML = ''; // Clear previous fields
          basicFields.innerHTML = ''; // Clear previous fields

          data.more.forEach(field => {
            let inputField = '';

            if (field.type === 'select') {
              const options = field.options.split(',').map(option => option.trim());
              inputField = `<div class="form-group" >
                                        <label for="${field.name}" class="categoryLabel">${field.label}</label>
                                        <select name="${field.name}" ${field.required == 1 ? 'required' : ''} id="${field.name}" >
                                           ${options.map(option => `<option value="${option}">${option}</option>`).join('')}
                                        </select>
                                        </div>`;
            } else {
              inputField = `<div class="form-group">
                                <label for="${field.name}">${field.label}:</label>
                                <input
                                    type="${field.type}"
                                    id="${field.name}" ${field.required == 1 ? 'required' : ''}
                                    name="${field.name}"
                                    placeholder="${field.place_holder}" />
                                </div>`;
            }

            serviceFields.insertAdjacentHTML('beforeend', inputField);
          });
          data.basic.forEach(field => {
            let inputField = '';

            if (field.type === 'select') {
              const options = field.options.split(',').map(option => option.trim());
              inputField = `<div class="form-group" >
                                        <label for="${field.name}" class="categoryLabel">${field.label}</label>
                                        <select name="${field.name}" ${field.required == 1 ? 'required' : ''} id="${field.name}" >
                                           ${options.map(option => `<option value="${option}">${option}</option>`).join('')}
                                        </select>
                                        </div>`;
            } else {
              inputField = `<div class="form-group">
                                <label for="${field.name}">${field.label}:</label>
                                <input
                                    type="${field.type}"
                                    id="${field.name}" ${field.required == 1 ? 'required' : ''}
                                    name="${field.name}"
                                    placeholder="${field.place_holder}" />
                                </div>`;
            }

            basicFields.insertAdjacentHTML('beforeend', inputField);
          });
        });
    } else {
      document.getElementById('basicFields').innerHTML = ''; // Clear fields if no service selected
      document.getElementById('moreFields').innerHTML = ''; // Clear fields if no service selected
    }
  });
</script>
<script>
  $(document).ready(function() {
    $.ajaxSetup({
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      }
    });
    $("#productForm").on('submit', async function(e) {
      e.preventDefault();
      var form = e.target;
      var formData = new FormData(form);
      var filesInput = $('input[name="image_gallery[]"]')[0].files;
      for (var i = 0; i < filesInput.length; i++) {
        formData.append('image_gallery[]', filesInput[i]);
      }
      console.log("Form Data:");
      for (var pair of formData.entries()) {
        console.log(pair[0] + ': ', pair[1]);
      }

      $.ajax({
        type: 'POST',
        url: "{{ route('save-product') }}",
        data: formData,
        dataType: 'json',
        cache: false,
        contentType: false,
        processData: false,
        success: function(response) {
          console.log(response)
          new swal("Good Job", response.message, "success");
          // preLoader.hide();
          $('#productForm').trigger("reset");
          window.location.reload()
        },
        error: function(data) {
          // console.log(data)
          preLoader.hide();
          new swal("Opss", data.responseJSON.message, "error");
        }
      })
    });
  })
</script>

<script>
  $(document).ready(function() {
    $.ajaxSetup({
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      }
    });

    $("input[data-type='currency']").on({
      keyup: function() {
        formatCurrency($(this));
      },
      blur: function() {
        formatCurrency($(this), "blur");
      }
    });


    function formatNumber(n) {
      // format number 1000000 to 1,234,567
      return n.replace(/\D/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ",")
    }


    function formatCurrency(input, blur) {
      // appends $ to value, validates decimal side
      // and puts cursor back in right position.

      // get input value
      var input_val = input.val();

      // don't validate empty input
      if (input_val === "") {
        return;
      }

      // original length
      var original_len = input_val.length;

      // initial caret position
      var caret_pos = input.prop("selectionStart");

      // check for decimal
      if (input_val.indexOf(".") >= 0) {

        // get position of first decimal
        // this prevents multiple decimals from
        // being entered
        var decimal_pos = input_val.indexOf(".");

        // split number by decimal point
        var left_side = input_val.substring(0, decimal_pos);
        var right_side = input_val.substring(decimal_pos);

        // add commas to left side of number
        left_side = formatNumber(left_side);

        // validate right side
        right_side = formatNumber(right_side);

        // On blur make sure 2 numbers after decimal
        if (blur === "blur") {
          right_side += "00";
        }

        // Limit decimal to only 2 digits
        right_side = right_side.substring(0, 2);

        // join number by .
        input_val = left_side + "." + right_side;

      } else {
        // no decimal entered
        // add commas to number
        // remove all non-digits
        input_val = formatNumber(input_val);
        input_val = input_val;

        // final formatting
        if (blur === "blur") {
          input_val += ".00";
        }
      }

      // send updated string to input
      input.val(input_val);

      // put caret back in the right position (guarded)
      try {
        var updated_len = input_val.length;
        caret_pos = updated_len - original_len + caret_pos;
        if (input[0] && typeof input[0].setSelectionRange === 'function' && document.activeElement === input[0]) {
          input[0].setSelectionRange(caret_pos, caret_pos);
        }
      } catch (e) {
        // Silently ignore selection errors — formatting is cosmetic
        // and should not break user interaction.
        console.warn('formatCurrency: could not set selection range', e);
      }
    }


  })
</script>
{{-- Image Preview Scripts --}}
<script>
  $(document).ready(function() {
    // Preview display image
    $('#display-img').on('change', function(e) {
      const file = e.target.files[0];
      if (file) {
        const reader = new FileReader();
        reader.onload = function(event) {
          const placeholder = $('#display-img-placeholder');
          placeholder.html(`
                        <img src="${event.target.result}" 
                             style="width: 120px; height: 120px; object-fit: cover; border-radius: 15px;" 
                             alt="Preview">
                        <span class="upload-text" style="margin-top: 5px;">✓ Image selected</span>
                    `);
        };
        reader.readAsDataURL(file);
      }
    });

    // Preview additional images
    $('#additional-img').on('change', function(e) {
      const files = e.target.files;
      const previewContainer = $('#new-images-preview');
      previewContainer.empty();

      Array.from(files).forEach((file, index) => {
        const reader = new FileReader();
        reader.onload = function(event) {
          const imgCard = $('<div>')
            .addClass('image-card')
            .css({
              'position': 'relative',
              'display': 'inline-block'
            });

          const img = $('<img>')
            .attr('src', event.target.result)
            .css({
              'width': '120px',
              'height': '120px',
              'object-fit': 'cover',
              'border-radius': '15px',
              'box-shadow': '0 4px 8px rgba(0,0,0,0.15)'
            });

          imgCard.append(img);
          previewContainer.append(imgCard);
        };
        reader.readAsDataURL(file);
      });
    });
  });
</script>
{{-- END OF IMAGE PREVIEW --}}

{{-- Additional Styling --}}
<style>
  .upload-section {
    margin-top: 1rem;
  }

  .upload-text {
    display: block;
    margin-top: 0.5rem;
    font-size: 13px;
    color: #666;
    text-align: center;
  }

  .text-muted-help {
    display: block;
    margin-top: 0.75rem;
    color: #6c757d;
    font-size: 13px;
    font-style: italic;
  }

  .current-image-preview,
  .current-images-preview {
    margin-bottom: 1.5rem;
  }

  .image-preview-container {
    position: relative;
    display: inline-block;
  }

  .current-image {
    max-width: 200px;
    max-height: 200px;
    object-fit: cover;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease;
  }

  .current-image:hover {
    transform: scale(1.05);
  }

  .image-info {
    margin-top: 0.5rem;
    text-align: center;
  }

  .section-title {
    font-weight: 600;
    color: #333;
    margin-bottom: 1rem;
  }

  .images-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
  }

  .image-card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
  }

  .image-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
  }

  .gallery-image {
    width: 100%;
    height: 120px;
    object-fit: cover;
    display: block;
  }

  .mb-2 {
    margin-bottom: 0.5rem;
  }

  .mb-3 {
    margin-bottom: 1rem;
  }

  .text-muted {
    color: #6c757d !important;
  }

  /* Responsive adjustments */
  @media (max-width: 768px) {
    .images-grid {
      grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
      gap: 0.75rem;
    }

    .gallery-image {
      height: 100px;
    }

    .current-image {
      max-width: 150px;
      max-height: 150px;
    }
  }
</style>

{{-- Cleanup unused scripts --}}
<script>
  document.getElementById('imageUpload')?.addEventListener('change', function(event) {
    var imagePreview = document.getElementById('imagePreview');
    var file = event.target.files[0];

    if (file && imagePreview) {
      var reader = new FileReader();
      reader.onload = function(e) {
        imagePreview.src = e.target.result;
        imagePreview.style.display = 'block';
      };
      reader.readAsDataURL(file);
    }
  });
</script>
{{-- END OF IMAGE PREVIEW FOR THUMBNAIL IMAGES --}}

{{-- THIS IS FOR IMAGE PREVIEW FOR ADDITIONAL IMAGES --}}
{{-- THIS IS FOR IMAGE PREVIEW FOR ADDITIONAL IMAGES --}}
<script>
  $(document).ready(function() {
        $('#image-gallery-input').on('change', function(e) {
              const files = e.target.files;
              Array.from(files).forEach((file, index) => {
                const reader = new FileReader();
                reader.onload = function(event) {
                  $('#image-preview-container').append(`
                        <div class="image-preview">
                            <img src="${event.target.result}" alt="Image ${index + 1}" />
                            <span class="remove-image" data-index="${index}">&times;</span>
                        </div>
                    `);
                }
                reader.readAsDataURL(file);
              });
              ``
              `

{{-- THIS IS FOR IMAGE PREVIEW FOR ADDITIONAL IMAGES --}}
{{-- THIS IS FOR IMAGE PREVIEW FOR ADDITIONAL IMAGES --}}
<script>
    $(document).ready(function () {
        $('#image-gallery-input').on('change', function (e) {
            const files = e.target.files;
            Array.from(files).forEach((file, index) => {
                const reader = new FileReader();
                reader.onload = function (event) {
                    $('#image-preview-container').append(` <
              div class = "image-preview" >
              <
              img src = "${event.target.result}"
              alt = "Image ${index + 1}" / >
                <
                span class = "remove-image"
              data - index = "${index}" > & times; < /span> < /
              div >
                `);
                }
                reader.readAsDataURL(file);
            });
        });

        // Remove image preview
        $(document).on('click', '.remove-image', function () {
            const index = $(this).data('index');
            const fileInput = document.getElementById('image-gallery-input');
            const dt = new DataTransfer();
            const files = fileInput.files;

            for (let i = 0; i < files.length; i++) {
                if (i !== index) {
                    dt.items.add(files[i]); // Keep the files except the one to be removed
                }
            }

            fileInput.files = dt.files; // Update file input
            $(this).closest('.image-preview').remove(); // Remove the image preview
        });
    });
</script>
{{-- END OF IMAGE PREVIEW OF ADDITIONAL IMAGES --}}
{{-- END OF IMAGE PREVIEW OF ADDITIONAL IMAGES --}}
@endsection