@extends('admin.layouts.main')
@section('style')
  <style>
    label.error {
      color: red;
      font-size: 14px;
    }

    .preview-img {
      width: 150px;
      height: 150px;
      object-fit: cover;
      margin-right: 10px;
    }

    .progress {
      display: none;
      margin-top: 10px;
    }

    .progress-bar {
      background: #696cff;
      height: 100%;
    }
  </style>
@endsection
@section('content')
  <div class="card">
    <div class="card-body">
      @if (Auth::guard('admin')->user()->mobile)
        <form action="{{ route('admin.products.import') }}" method="POST" enctype="multipart/form-data">
          @csrf
          <input type="file" name="excel_file" required>
          <button type="submit">Upload Excel</button>
        </form>
      @endif
      <h4 class="mb-4">Add Product</h4>
      <form id="productForm">
        @csrf
        @if ($edit)
          <input type="hidden" name="product_id" value="{{ enc($products['id']) }}">
        @endif
        <div class="row m-0">
          <div class="col-md-6">
            <div class="mb-3">
              <label class="form-label">Category</label>
              <select name="category" id="category" class="form-control form-select" required>
                <option value="">Select Category</option>
                @foreach ($categories as $category)
                  <option value="{{ enc($category->id) }}"
                    {{ (isset($products['category_id']) && $products['category_id'] == $category->id) || old('category') == $category->id ? 'selected' : '' }}>
                    {{ $category->name }}
                  </option>
                @endforeach
              </select>
            </div>
          </div>
          <div class="col-md-6">
            <div class="mb-3">
              <label class="form-label" for="sub_category">Sub Category</label>
              <select name="sub_category" id="sub_category" class="form-control" required>
                <option value="">Select Sub Category</option>
                @foreach ($sub_categories as $sub_category)
                  <option value="{{ enc($sub_category->id) }}"
                    {{ isset($products['sub_category_id']) && $products['sub_category_id'] == $sub_category->id ? 'selected' : '' }}>
                    {{ $sub_category->name }}
                  </option>
                @endforeach
              </select>
            </div>
          </div>
          <div class="col-md-6">
            <div class="mb-3">
              <label class="form-label">Size</label>
              <select name="size" id="size" class="form-control" required>
                <option value="">Select Size</option>
                @foreach ($sizes as $size)
                  <option value="{{ enc($size->id) }}"
                    {{ isset($products['size']) && $products['size'] == $size->id ? 'selected' : '' }}>
                    {{ $size->name }}
                  </option>
                @endforeach
              </select>
            </div>
          </div>
          <div class="col-md-6">
            <div class="mb-3">
              <label class="form-label">Unit</label>
              <input type="text" name="unit" id="unit" value="{{ $products['unit'] ?? '' }}"
                class="form-control" required>
            </div>
          </div>
          <div class="col-md-6">
            <div class="mb-3">
              <label class="form-label">Brand Name</label>
              <select name="brand_name" id="brand_name" class="form-control" required>
                <option value="">Select Brand</option>
                @foreach ($brands as $brand)
                  <option value="{{ enc($brand->id) }}"
                    {{ isset($products['brand_id']) && $products['brand_id'] == $brand->id ? 'selected' : '' }}>
                    {{ $brand->name }}
                  </option>
                @endforeach
              </select>
            </div>
          </div>
          <div class="col-md-6">
            <div class="mb-3">
              <label class="form-label">Product Name</label>
              <input type="text" name="product_name" class="form-control"
                value="{{ $products['product_name'] ?? '' }}" required>
            </div>
          </div>

          <div class="col-md-6">
            <div class="mb-3">
              <label class="form-label">Product Code</label>
              <input type="text" name="product_code" class="form-control"
                value="{{ $products['product_code'] ?? '' }}" required>
            </div>
          </div>

          <div class="col-md-6">
            <div class="mb-3">
              <label class="form-label">Purchase Price</label>
              <input type="number" name="purchase_price" class="form-control"
                value="{{ $products['purchase_price'] ?? '' }}" required>
            </div>
          </div>
          <div class="col-md-6">
            <div class="mb-3">
              <label class="form-label">MRP</label>
              <input type="number" id="mrp_id" name="mrp" class="form-control"
                value="{{ $products['mrp'] ?? '' }}" required>
            </div>
          </div>
          <div class="col-md-6">
            <div class="mb-3">
              <label class="form-label">Discount (%)</label>
              <input type="number" id="discount" name="discount" class="form-control"
                value="{{ $products['discount'] ?? '' }}" required>
            </div>
          </div>
          <div class="col-md-6">
            <div class="mb-3">
              <label class="form-label">Sales Price</label>
              <input type="number" id="sales_price" name="sales_price" class="form-control"
                value="{{ $products['sales_price'] ?? '' }}" required>
            </div>
          </div>
          <div class="col-md-6">
            <div class="mb-3">
              <label class="form-label">Quantity</label>
              <input type="number" name="quantity" class="form-control" value="{{ $products['quantity'] ?? '' }}"
                required>
            </div>
          </div>
          <div class="col-md-6">
            <div class="mb-3">
              <label class="form-label">Weight (kg)</label>
              <input type="text" name="weight" class="form-control" value="{{ $products['weight'] ?? '' }}"
                required>
            </div>
          </div>
          <div class="col-md-6">
            <div class="mb-3">
              <label class="form-label">Material</label>
              <input type="text" name="material" class="form-control" value="{{ $products['material'] ?? '' }}"
                required>
            </div>
          </div>

          <div class="col-md-6 d-none">
            <div class="mb-3">
              <label class="form-label">Branding Cost</label>
              <input type="number" name="branding_cost" class="form-control"
                value="{{ $products['branding_cost'] ?? '0' }}" required>
            </div>
          </div>
          <div class="col-md-6 d-none">
            <div class="mb-3">
              <label class="form-label">Shipping Cost</label>
              <input type="number" name="shipping_cost" class="form-control"
                value="{{ $products['shipping_cost'] ?? '0' }}" required>
            </div>
          </div>
          <div class="col-md-6">
            <div class="mb-3">
              <label class="form-label">HSN Code</label>
              <input type="text" name="hsn_code" class="form-control" value="{{ $products['hsn_code'] ?? '' }}"
                required>
            </div>
          </div>
          <div class="col-md-6">
            <div class="mb-3">
              <label class="form-label">CGST (%)</label>
              <input type="number" name="cgst" class="form-control cgst" value="{{ $products['cgst'] ?? '' }}"
                required>
            </div>
          </div>
          <div class="col-md-6">
            <div class="mb-3">
              <label class="form-label">SGST (%)</label>
              <input type="number" name="sgst" class="form-control sgst" value="{{ $products['sgst'] ?? '' }}"
                required>
            </div>
          </div>
          <div class="col-md-6">
            <div class="mb-3">
              <label class="form-label">GST (%)</label>
              <input type="number" name="gst" class="form-control gst" value="{{ $products['gst'] ?? '' }}"
                required>
            </div>
          </div>
          <div class="col-md-6">
            <div class="mb-3">
              <label class="form-label">Stock</label>
              <select name="instock" id="instock" class="form-control" required>
                @php $instock = ["Y"=>"In Stock","N"=>"Out Of Stock"]; @endphp
                @foreach ($instock as $k => $v)
                  <option value="{{ $k }}"
                    {{ isset($products['instock']) && $products['instock'] == $k ? 'selected' : '' }}>
                    {{ $v }}
                  </option>
                @endforeach
              </select>
            </div>
          </div>
          @if (!$edit)
            <div class="col-md-6">
              <div class="mb-3">
                <label class="form-label">Product Images</label>
                <input type="file" id="product_images" name="images[]" class="form-control" multiple
                  accept="image/*">
                <div class="progress">
                  <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 0%"></div>
                </div>
                <div id="imagePreview" class="mt-2 d-flex">
                  @if ($edit && isset($products['images']))
                    @foreach (json_decode($products['images'], true) as $image)
                      <img src="{{ asset('storage/' . $image) }}" class="preview-img">
                    @endforeach
                  @endif
                </div>
                <input type="hidden" name="uploaded_images" id="uploadedImages"
                  value="{{ $products['images'] ?? '' }}">
                <small class="text-center" style="color: red; font-size: 0.7rem;">
                  Please upload a product image (Recommended size: 800×800 px, Maximum size: 5MB).
                </small>
              </div>


            </div>
          @endif
          <div class="col-12">
            <div class="mb-3">
              <label class="form-label">Video Link</label>
              <input name="video" class="form-control" value="{{ $products['video'] ?? '' }}" required>
            </div>
          </div>
          <div class="col-12">
            <div class="mb-3">
              <label class="form-label">Product Description</label>
              <textarea name="product_description" class="form-control" required>{{ $products['description'] ?? '' }}</textarea>
            </div>
          </div>
          <button type="submit" id="add_product" class="btn btn-primary">{{ $edit ? 'Update' : 'Submit' }}</button>
        </div>
      </form>
      <div id="message" class="mt-3"></div>
    </div>
  </div>
@endsection
@section('script')
  <script>
    function calculate_saleprice() {
      let mrp = $("#mrp_id").val();
      let discount = $("#discount").val();
      let sales_price = $("#sales_price");
      let s_price = (mrp * 1) - ((mrp * 1) * (discount * 1) / 100);
      sales_price.val(s_price);
    }
    $(document).on("keyup", "#mrp_id , #discount", function() {
      calculate_saleprice();
    })
    var uploadInProgress = false;
    var uploadedImages = [];
    $(document).ready(function() {
      $("#productForm").validate({
        rules: {
          sub_category: "required",
          brand_name: "required",
          product_name: "required",
          product_description: "required",
          product_code: "required",
          purchase_price: {
            required: true,
            number: true,
            min: 0
          },
          sales_price: {
            required: true,
            number: true,
            min: 0
          },
          quantity: {
            required: true,
            number: true,
            min: 1
          },
          product_images: {
            accept: "image/*"
          }
        },
        messages: {
          sub_category: "Enter sub-category",
          brand_name: "Enter brand name",
          product_name: "Enter product name",
          product_description: "Enter product description",
          product_code: "Enter product code",
          purchase_price: "Enter valid price",
          sales_price: "Enter valid sales price",
          quantity: "Enter valid quantity"
        }
      });
    });


    $("#product_images").change(function(event) {
      let files = event.target.files;
      if (files.length === 0) return;
      let maxFiles = 5;
      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.uploadimage') }}",
        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 + "%");
            }
          }, 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").hide();
          uploadInProgress = false;
        },
        error: function(e) {
          console.log(e);
          showAlert("Error uploading images.", "danger", "");
          $(".progress").hide();
          uploadInProgress = false;
        }
      });
    });

    $("#productForm").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.saveproduct') }}",
        type: "POST",
        data: formData,
        success: function(d) {
          if (d["url"] != undefined || d["url"] != "") {
            window.location.href = d["url"];
          }
        },
        error: function() {
          showAlert("Error submitting form", "danger", "");
        }
      });
    });

    $(document).ready(function() {
      $("#category").select2({
        dropdownParent: $("#category").parent()
      });

      $("#sub_category").select2({
        dropdownParent: $("#sub_category").parent()
      });

      $("#size").select2({
        dropdownParent: $("#size").parent()
      });

      $("#brand_name").select2({
        dropdownParent: $("#brand_name").parent()
      });
    });

    $(document).on("change keyup load", ".sgst , .cgst , .gst", function() {
      let cgst = $(".cgst").val();
      let sgst = $(".sgst").val();
      $(".gst").val((cgst * 1 + sgst * 1));
    })
  </script>
@endsection