@extends('admin.layouts.main')
@php
  $page_name = 'Sub Category';
@endphp
@section('content')
  <div class="card">
    <div class="card-body">
      <h4 class="mb-4">{{ $edit ? 'Edit' : 'Add' }} {{ $page_name }}</h4>
      <div class="mb-3">
        <form id="category_form" method="POST" action="{{ route('admin.savesubcategory') }}">
          @csrf
          @if ($edit)
            <input type="hidden" value="{{ enc($subCategory['id'] ?? '') }}" name="edit_id" id="edit_id" required>
          @endif
          <div class="row m-0">
            <div class="col-md-6">
              <div class="mb-3">
                <label class="form-label" for="sub_category">Sub Category</label>
                <input type="text" value="{{ $subCategory['name'] ?? '' }}" name="sub_category" id="sub_category"
                  placeholder="Sub Category" class="form-control" required>
              </div>
            </div>
            <div class="col-md-6">
              <div class="mb-3">
                <label class="form-label" for="category">Category</label>
                <select name="category" id="category" placeholder="Category" class="form-control" required>
                  <option value="">Select</option>
                  @foreach ($categories as $key => $value)
                    @php
                      $val = (array) $value;
                      $selected = '';
                      if (isset($subCategory['category']) && $subCategory['category'] == $val['id']) {
                          $selected = 'selected';
                      }
                    @endphp
                    <option value="{{ enc($val['id']) }}" {{ $selected }}>{{ $val['name'] }}</option>
                  @endforeach
                </select>
              </div>
            </div>
            <div class="col-12">
              <button class="btn btn-sm btn-primary" type="submit">Submit</button>
            </div>
          </div>
        </form>
      </div>
      <div class="mb-3">
      
        <h5>{{ $page_name }} List</h5>
        <small class="d-block text-left" style="color: red; font-size: 0.7rem;">
          Please upload a banner image (Recommended size: 800×800 px, Maximum size: 5MB).
        </small>
        <div class="table-responsive" id="sub_category_table">
          <table class="table table-bordered">
            <thead>
              <tr>
                <th>#</th>
                <th>Sub Category</th>
                <th>Category</th>
                <th>Banner</th>
                <th>Status</th>
                <th>Actions</th>
              </tr>
            </thead>
            <tbody>
              @foreach ($subCategories as $subCategory)
                <tr>
                  <td>{{ $loop->iteration }}</td>
                  <td>{{ $subCategory->name }}</td>
                  <td>{{ $subCategory->category_name }}</td>
                  <td>
                    <div class="d-flex justify-content-center">
                      @if ($subCategory->banner)
                        <div class="banner_imgshow">
                          <div
                            style="width: 50px; height: 50px; background-image: url('{{ url('images/subcategory_banner/' . $subCategory->banner) }}'); background-size: cover; background-position: center;">
                          </div>
                        </div>
                      @else
                        <div class="banner_imgshow">
                          <div style="width: 50px; height: 50px; background-size: cover; background-position: center;">
                          </div>
                        </div>
                      @endif
                      <span class="mx-1">
                        <label for="banner_image{{ $loop->iteration }}" class="btn btn-sm"><i
                            class="fa-solid fa-pen-to-square text-primary"></i></label>
                        <input type="file" id="banner_image{{ $loop->iteration }}"
                          data_id = "{{ enc($subCategory->id) }}" name="image[]" multiple class="d-none banner_image">
                      </span>
                    </div>
                    <div>
                      <div class="progress-bar rounded mt-1" role="progressbar" style="width: 0%" aria-valuenow="0"
                        aria-valuemin="0" aria-valuemax="100">
                      </div>
                    </div>
                  </td>
                  <td>{{ $subCategory->active ? 'Active' : 'Inactive' }}</td>
                  <td>
                    <div>
                      <a href="{{ route('admin.editsubCategory', enc($subCategory->id)) }}"
                        class="btn btn-sm btn-warning">Edit</a>
                      <button value="{{ enc($subCategory->id) }}" id="delete_button" type="submit"
                        class="btn btn-sm btn-danger">Delete</button>
                    </div>
                  </td>
                </tr>
              @endforeach
            </tbody>
          </table>
          @if (count($subCategories))
            <div class="mt-3">
              {{ $subCategories->links() }}
            </div>
          @endif
        </div>
      </div>
    </div>
  </div>
  @include('components.alertmodal', [
      'modal_id' => 'deleteSubCategoryModal',
      'form_id' => 'deleteSubCategoryForm',
      'action' => route('admin.deletesubcategory'),
      'modal_title' => 'Alert!',
      'input_id' => 'deleteSubCategoryId',
      'modal_mess' => 'Are you sure you want to delete this SubCategory?',
      'button_type' => 'submit',
      'button_id' => 'confirmDeleteSubCategoryButton',
  ])
@endsection

@section('script')
  <script>
    $(document).on("click", "#delete_button", function() {
      let val = $(this).attr("value");
      $("#deleteSubCategoryId").val(val);
      $("#deleteSubCategoryModal").modal("show");
    });
    $(document).on("change", ".banner_image", function(event) {
      let input = $(this);
      let files = event.target.files;
      if (files.length === 0) return;
      let maxFiles = 1;
      let allowedTypes = ["image/jpeg", "image/png", "image/jpg", "image/gif", "image/svg+xml"];
      let maxSize = 5 * 1024 * 1024; // 5MB
      let formData = new FormData();
      if (files.length > maxFiles) {
        showAlert(`You can upload a maximum of ${maxFiles} images.`, "danger", "");
        return;
      }
      $.each(files, function(i, file) {
        if (!allowedTypes.includes(file.type)) {
          showAlert("Only JPG, JPEG, PNG, GIF, and SVG files are allowed.", "danger", "");
          return false; // Break loop
        }

        if (file.size > maxSize) {
          showAlert(`Each file must be less than ${maxSize}MB.`, "danger", "");
          return false; // Break loop
        }
      });
      $(".progress-bar").css("width", "0%");

      $.each(files, function(i, file) {
        formData.append("image", file);
      });

      formData.append("_token", "{{ csrf_token() }}");
      formData.append("data_id", input.attr("data_id"));
      $.ajax({
        url: "{{ route('admin.uploadsubcatbannerimage') }}",
        type: "POST",
        data: formData,
        processData: false,
        contentType: false,
        xhr: function() {
          let xhr = new window.XMLHttpRequest();
          xhr.upload.addEventListener("progress", function(event) {
            if (event.lengthComputable) {
              let percentComplete = (event.loaded / event.total) * 100;
              input.closest("tr").find(".progress-bar").css("width", percentComplete + "%");
              input.closest("tr").find(".progress-bar").html(Math.floor(percentComplete) + "%");
            }
          }, false);
          return xhr;
        },
        success: function(d) {
          showAlert(d["message"], "success", "");
          input.closest("tr").find(".banner_imgshow").html(
            `<div style="width: 50px; height: 50px; background-image: url('${d["url"]}'); background-size: cover; background-position: center;"></div>`
          );
          input.closest("tr").find(".progress-bar").css("width", 0 + "%");
          input.closest("tr").find(".progress-bar").html("");
        },
        error: function() {
          showAlert(d["message"], "danger", "");
          input.closest("tr").find(".progress-bar").css("width", 0 + "%");
          input.closest("tr").find(".progress-bar").html("");
        }
      });
    });
  </script>
@endsection