@extends('admin.layouts.main')
@php
  $page_name = 'Microsite';
@endphp
@section('content')
  <div class="card">
    <div class="card-body">
      <h4 class="mb-4">Add {{ $page_name }}</h4>
      <div class="mb-3">
        <h5>{{ $page_name }} List</h5>
        <div class="table-responsive" id="category_table">
          @if ($microsites->isEmpty())
            <div class="alert alert-warning text-center">
              No Microsites Found
            </div>
          @else
            <table class="table table-bordered">
              <thead>
                <tr>
                  <th>ID</th>
                  <th>Company Name</th>
                  <th>Sub Domain</th>
                  <th>Logo</th>
                  <th>Address</th>
                  <th>Email</th>
                  <th>Mobile</th>
                  <th>Contact Person</th>
                  <th>Created At</th>
                  <th>Updated At</th>
                  <th>Actions</th>
                </tr>
              </thead>
              <tbody>
                @foreach ($microsites as $microsite)
                  <tr>
                    <td>{{ $microsite->id }}</td>
                    <td>{{ $microsite->company_name }}</td>
                    <td>{{ $microsite->sub_domain }}</td>
                    <td>
                      <div class="d-flex justify-content-center">
                        @if ($microsite->logo)
                          <div class="logo_imgshow">
                            <div
                              style="width: 50px; height: 50px; background-image: url('{{ url('images/micrositelogo/' . $microsite->logo) }}'); background-size: cover; background-position: center;">
                            </div>
                          </div>
                        @else
                          <div class="logo_imgshow">
                            <div style="width: 50px; height: 50px; background-size: cover; background-position: center;">
                            </div>
                          </div>
                        @endif
                        <span class="mx-1">
                          <label for="logo_image{{ $microsite->id }}" class="btn btn-sm"><i
                              class="fa-solid fa-pen-to-square text-primary"></i></label>
                          <input type="file" id="logo_image{{ $microsite->id }}" data_id = "{{ enc($microsite->id) }}"
                            name="image[]" multiple class="d-none logo_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>{{ $microsite->address }}</td>
                    <td>{{ $microsite->email }}</td>
                    <td>{{ $microsite->mobile }}</td>
                    <td>{{ $microsite->contact_person }}</td>
                    <td>{{ $microsite->created_at }}</td>
                    <td>{{ $microsite->updated_at }}</td>
                    <td>
                      <a href="{{ route('admin.microsite.products', enc($microsite->id)) }}" class="btn btn-primary btn-sm"> Products</a>
                      <a href="{{ route('admin.editmicrosite', enc($microsite->id)) }}"
                        class="btn btn-sm btn-warning">Edit</a>
                      <button value="{{ enc($microsite->id) }}" id="delete_button"
                        class="btn btn-sm btn-danger">Delete</button>
                    </td>
                  </tr>
                @endforeach
              </tbody>
            </table>
            <div class="mt-3">
              {{ $microsites->links() }}
            </div>
          @endif
        </div>
      </div>
    </div>
  </div>
  @include('components.alertmodal', [
      'modal_id' => 'deleteMicrositeModal',
      'form_id' => 'deleteMicrositeForm',
      'action' => route('admin.deletemicrosite'),
      'modal_title' => 'Alert!',
      'input_id' => 'deleteMicrositeId',
      'modal_mess' => 'Are you sure you want to delete this Microsite?',
      'button_type' => 'submit',
      'button_id' => 'confirmDeleteMicrositeButton',
  ])
@endsection

@section('script')
  <script>
    $(document).on("click", "#delete_button", function() {
      let val = $(this).attr("value");
      $("#deleteMicrositeId").val(val);
      $("#deleteMicrositeModal").modal("show");
    });

    $(document).on("change", ".logo_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.micrositelogoupdate') }}",
        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(".logo_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