@extends('admin.layouts.main')
@php
  $page_name = 'Microsite';
@endphp
@section('style')
  <style>
    .preview-img img {
      width: 150px;
      height: 150px;
      object-fit: cover;
      margin-right: 10px;
    }
  </style>
@endsection
@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="micrositeForm">
          @if ($edit)
            <input type="hidden" name="m_id" value="{{ old('m_id', enc($microsite['id'] ?? null)) }}">
          @endif
          @csrf
          <div class="row m-0">
            <div class="col-md-6">
              <div class="mb-3">
                <label class="form-label" for="Company">Company name</label>
                <input type="text" name="companyname" placeholder="Company Name" id="Company" class="form-control"
                  value="{{ old('companyname', $microsite->company_name ?? '') }}" required>
              </div>
            </div>
            @if (!$edit)
              <div class="col-md-6">
                <div class="mb-3">
                  <label class="form-label" for="logo">Logo</label>

                  <input type="hidden" name="uploaded_images" id="uploadedImages"
                    value="{{ old('uploaded_images', $microsite->images ?? '') }}">
                  <input type="file" name="images[]" id="micrositelogo" placeholder="Logo" class="form-control"
                    multiple accept="image/*">
                  <div class="">
                    <div class="progress-bar rounded mt-1" role="progressbar" style="width: 0%" aria-valuenow="0"
                      aria-valuemin="0" aria-valuemax="100">
                    </div>
                    <small class="d-block text-left" style="color: red; font-size: 0.7rem;">
                      Upload logo (Recommended size: 500x500 px, Maximum size: 5MB).
                    </small>
                    <div id="imagePreview" class="preview-img">

                    </div>
                  </div>
                </div>
              </div>
            @endif
            <div class="col-md-6">
              <div class="mb-3">
                <label class="form-label" for="Subdomain">Microsite</label>
                <div class="input-group">
                  <input type="text" name="subdomain" placeholder="Microsite" id="Subdomain" class="form-control"
                    value="{{ old('subdomain', $microsite->sub_domain ?? '') }}" required>
                  <button class="btn btn-outline-secondary" type="button" id="checkSubdomainBtn">Check</button>
                </div>
              </div>
            </div>
            <div class="col-md-6">
              <div class="mb-3">
                <label class="form-label" for="Subdomain">Domain</label>
                <input type="text" value=".{{ env('DOMAIN_NAME') }}" id="Subdomain" class="form-control" disabled>
              </div>
            </div>

            <div class="col-md-6">
              <div class="mb-3">
                <label class="form-label" for="email">Email</label>
                <input type="text" name="email" id="email" placeholder="Email" class="form-control"
                  value="{{ old('email', $microsite->email ?? '') }}" required>
              </div>
            </div>
            <div class="col-md-6">
              <div class="mb-3">
                <label class="form-label" for="mobile">Mobile</label>
                <input type="text" name="mobile" id="mobile" placeholder="Mobile" class="form-control"
                  value="{{ old('mobile', $microsite->mobile ?? '') }}" required>
              </div>
            </div>
            <div class="col-md-6">
              <div class="mb-3">
                <label class="form-label" for="contactperson">Contact person</label>
                <input type="text" name="contactperson" id="contactperson" placeholder="Contact Person"
                  class="form-control" value="{{ old('contactperson', $microsite->contact_person ?? '') }}" required>
              </div>
            </div>
            <div class="col-md-6">
              <div class="mb-3">
                <label class="form-label" for="theme">Theme</label>
                <select name="theme" id="theme" class="form-control" required>
                  <option value="">Select Theme</option>
                  @php
                    $microsite_themes = config('constant.microsite_theme');
                  @endphp
                  @foreach ($microsite_themes as $k => $theme)
                    <option value="{{ $k }}"
                      {{ old('theme', $microsite->theme ?? '') == $k ? 'selected' : '' }}>
                      {{ ucfirst($theme['show_name']) }}
                    </option>
                  @endforeach
                </select>
              </div>
            </div>
            <div class="col-md-12">
              <div class="mb-3">
                <label class="form-label" for="address">Address</label>
                <textarea type="text" name="address" id="address" placeholder="Address" class="form-control" required>{{ old('address', $microsite->address ?? '') }}</textarea>
              </div>
            </div>
            <div class="col-12">
              <button class="btn btn-sm btn-primary"
                type="submit">{{ isset($microsite) ? 'Update' : 'Submit' }}</button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
@endsection

@section('script')
  <script>
    var uploadInProgress = false;
    var uploadedImages = [];
    $("#micrositelogo").change(function(event) {
      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
        }

        // Show preview before upload
        let reader = new FileReader();
        reader.onload = function(e) {
          $("#imagePreview").append(
            `<img src="${e.target.result}" class="preview-img" width="100px" height="100px" style="margin:5px; border:1px solid #ddd; padding:5px;">`
          );
        };
        reader.readAsDataURL(file);
      });

      uploadInProgress = true;
      $(".progress").show();
      $(".progress-bar").css("width", "0%");

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

      formData.append("_token", "{{ csrf_token() }}");

      $.ajax({
        url: "{{ route('admin.uploadmicrositeimage') }}",
        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;
              $(".progress-bar").css("width", percentComplete + "%");
              $(".progress-bar").html(Math.floor(percentComplete) + "%");
            }
          }, false);
          return xhr;
        },
        success: function(response) {
          uploadedImages = response.paths;
          $("#uploadedImages").val(JSON.stringify(uploadedImages));
          $("#imagePreview").empty();
          $.each(uploadedImages, function(i, url) {
            $("#imagePreview").append(`<img src="${response.urls[i]}" class="preview-img">`);
          });
          $(".progress-bar").css("width", 0 + "%");
          uploadInProgress = false;
        },
        error: function() {
          showAlert("Error uploading images.", "danger", "");
          $(".progress-bar").css("width", 0 + "%");
          uploadInProgress = false;
        }
      });
    });

    $(document).ready(function() {
      $("#micrositeForm").validate({
        rules: {
          companyname: "required",
          subdomain: "required",
          email: {
            required: true,
            email: true
          },
          mobile: {
            required: true,
            digits: true,
            minlength: 10,
            maxlength: 10
          },
          contactperson: "required",
          address: "required",
          images: {
            accept: "image/*"
          }
        },
        messages: {
          companyname: "Enter company name",
          subdomain: "Enter subdomain",
          email: {
            required: "Enter email address",
            email: "Enter a valid email address"
          },
          mobile: {
            required: "Enter mobile number",
            digits: "Enter only digits",
            minlength: "Mobile number must be 10 digits",
            maxlength: "Mobile number must be 10 digits"
          },
          contactperson: "Enter contact person name",
          address: "Enter address"
        }
      });
    });

    $("#micrositeForm").on("submit", function(e) {
      e.preventDefault();
      if (uploadInProgress) {
        alert("Please wait for images to finish uploading.");
        return;
      }

      let formData = $(this).serialize();
      $.ajax({
        url: "{{ route('admin.savemicrosite') }}",
        type: "POST",
        data: formData,
        success: function(d) {
          console.log(d);
          if (d["url"] != undefined || d["url"] != "") {
            window.location.href = d["url"];
          } else {

          }
        },
        error: function(e) {
          try {
            resp = JSON.parse(e.responseText);
            showAlert(resp["message"] ?? "Error submitting form", "danger", resp["error"] ?? "");
          } catch (error) {
            showAlert("Error submitting form", "danger", "");
          }
        }
      });
    });
    $("#checkSubdomainBtn").on("click", function() {
      let subdomain = $("#Subdomain").val().trim();
      let companyname = $("input[name='companyname']").val().trim();

      if (!subdomain) {
        showAlert("Please enter a subdomain to check.", "warning", "");
        return;
      }

      $.ajax({
        url: "{{ route('admin.checksubdomain') }}",
        type: "POST",
        data: {
          _token: "{{ csrf_token() }}",
          subdomain: subdomain,
          companyname: companyname
        },
        success: function(response) {
          // Remove previous suggestions
          $("#subdomainSuggestions").remove();

          if (response.available) {
            showAlert("Subdomain is available!", "success", "");
          } else {
            showAlert("Subdomain is already taken.", "danger", "");

            // Show suggestions if available
            if (response.suggestions && response.suggestions.length > 0) {
              let suggestionHtml = '<div id="subdomainSuggestions" class="mt-2">';
              suggestionHtml += '<small>Suggestions: </small>';
              response.suggestions.forEach(function(s) {
                suggestionHtml +=
                  `<button type="button" class="btn btn-link p-0 ms-2 subdomain-suggestion" style="font-size:0.9rem;">${s}</button>`;
              });
              suggestionHtml += '</div>';

              // Append suggestions after input group
              $("#Subdomain").closest('.input-group').after(suggestionHtml);

              // Handle click on suggestions
              $(".subdomain-suggestion").on("click", function() {
                $("#Subdomain").val($(this).text());
                $("#subdomainSuggestions").remove();
              });
            }
          }
        },
        error: function() {
          showAlert("Error checking subdomain.", "danger", "");
        }
      });
    });
  </script>
@endsection