@extends('admin.layouts.main')
@php
  $page_name = 'Product Infomation';
@endphp
@section('content')
  <div class="container py-4">
    <div class="card shadow-sm">
      <div class="card-header bg-primary text-white mb-3">
        <div class="d-flex justify-content-between">
          <h4 class="mb-0 text-white">{{ $page_name }}</h4>
          <a href="{{ route('admin.mapimage', ['id' => enc($product['id'])]) }}" class="btn btn-warning btn-sm">Map
            Image</a>
        </div>
      </div>
      <div class="card-body">
        @if ($product)
          <div class="row g-4">
            <!-- Product Basic Info -->
            <div class="col-12">
              <div class="card border-0 shadow-sm">
                <div class="card-body">
                  <h5 class="card-title text-primary">Basic Information</h5>
                  <div class="row">
                    <div class="col-md-6">
                      <p><strong>ID:</strong> {{ emptyTo_mess($product['id'], 'N/A') }}</p>
                      <p><strong>Product Name:</strong> {{ emptyTo_mess($product['product_name'], 'N/A') }}</p>
                      <p><strong>Category:</strong> {{ emptyTo_mess($product['category_name'], 'N/A') }}</p>
                      <p><strong>Sub Category:</strong> {{ emptyTo_mess($product['sub_category_name'], 'N/A') }}</p>
                    </div>
                    <div class="col-md-6">
                      <p><strong>Brand:</strong> {{ emptyTo_mess($product['brand_name'], 'N/A') }}</p>
                      <p><strong>Product Code:</strong> {{ emptyTo_mess($product['product_code'], 'N/A') }}</p>
                      <p><strong>Unit:</strong> {{ emptyTo_mess($product['unit'], 'N/A') }}</p>
                      <p><strong>In Stock:</strong> {{ $product['instock'] ? 'Yes' : 'No' }}</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- Pricing Information -->
            <div class="col-12">
              <div class="card border-0 shadow-sm">
                <div class="card-body">
                  <h5 class="card-title text-primary">Pricing Information</h5>
                  <div class="row">
                    <div class="col-md-6">
                      <p><strong>Purchase Price:</strong> {{ emptyTo_mess($product['purchase_price'], 'N/A') }}</p>
                      <p><strong>MRP:</strong> {{ emptyTo_mess($product['mrp'], 'N/A') }}</p>
                      <p><strong>Discount:</strong> {{ emptyTo_mess($product['discount'], 'N/A') }}</p>
                      <p><strong>GST:</strong> {{ emptyTo_mess($product['gst'], 'N/A') }}</p>
                    </div>
                    <div class="col-md-6">
                      <p><strong>Sales Price:</strong> {{ emptyTo_mess($product['sales_price'], 'N/A') }}</p>
                      <p><strong>Branding Cost:</strong> {{ emptyTo_mess($product['branding_cost'], 'N/A') }}</p>
                      <p><strong>Shipping Cost:</strong> {{ emptyTo_mess($product['shipping_cost'], 'N/A') }}</p>
                      <p><strong>CGST:</strong> {{ emptyTo_mess($product['cgst'], 'N/A') }}</p>
                      <p><strong>SGST:</strong> {{ emptyTo_mess($product['sgst'], 'N/A') }}</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- Additional Information -->
            <div class="col-12">
              <div class="card border-0 shadow-sm">
                <div class="card-body">
                  <h5 class="card-title text-primary">Additional Information</h5>
                  <div class="row">
                    <div class="col-md-6">
                      <p><strong>Weight:</strong> {{ emptyTo_mess($product['weight'], 'N/A') }}</p>
                      <p><strong>Material:</strong> {{ emptyTo_mess($product['material'], 'N/A') }}</p>
                      <p><strong>Size:</strong> {{ emptyTo_mess($product['size_name'], 'N/A') }}</p>
                    </div>
                    <div class="col-md-6">
                      <p><strong>HSN Code:</strong> {{ emptyTo_mess($product['hsn_code'], 'N/A') }}</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            {{-- product image --}}
            @if ($product['video'] != '')
              <div>
                <iframe width="752" height="423"
                  src='{{ str_replace('youtu.be/', 'www.youtube.com/embed/', $product['video']) }}'
                  frameborder="0"
                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                  referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
              </div>
            @endif
            <!-- Product Images -->
            <div class="col-12">
              <div class="card border-0 shadow-sm">
                <div class="card-body">
                  <h5 class="card-title text-primary">Product Images</h5>
                  <div class="row g-3">
                    @for ($i = 1; $i <= 5; $i++)
                      @php
                        $imageField = 'product_image_' . $i;
                      @endphp
                      @if (!empty($product[$imageField]))
                        <div class="col-md-2 pro_img_div">
                          <div class="card border-0 shadow-sm position-relative product_image_show">
                            <label
                              class="btn rounded-pill d-flex justify-content-center align-items-center position-absolute delete_pro_img"
                              style="width:30px; height:30px; right:50px;" data_id="{{ $i }}"><i
                                class="fa-solid fa-trash text-danger"></i></label>
                            <label for="product_image{{ $i }}"
                              class="btn rounded-pill d-flex justify-content-center align-items-center position-absolute"
                              style="width:30px; height:30px; right:0px;">
                              <i class="fa-solid fa-pen-to-square text-primary bg-light"></i>
                            </label>
                            <input id="product_image{{ $i }}" data_id="{{ $i }}" type="file"
                              class="d-none product_image">
                            <div class="card-body text-center">
                              <img src="{{ url('images/products/' . $product[$imageField]) }}" alt="Product Image"
                                class="img-fluid rounded">
                            </div>
                          </div>
                        </div>
                      @else
                        <div class="col-md-2 pro_img_div">
                          <div class="card border-0 shadow-sm h-100">
                            <div class="card-body text-center h-100">
                              <div class="d-flex justify-content-center align-items-center h-100">
                                <label for="product_image{{ $i }}"
                                  class="btn rounded-pill d-flex justify-content-center align-items-center"
                                  style="width:70%; height:70%;">
                                  <i class="fa-solid fa-plus text-primary"></i>
                                </label>
                                <input id="product_image{{ $i }}" data_id="{{ $i }}"
                                  type="file" class="d-none product_image">
                              </div>
                            </div>
                          </div>
                        </div>
                      @endif
                    @endfor
                  </div>
                </div>
              </div>
            </div>


            <!-- Add More Information -->
            <div class="col-12 d-none">
              <div class="card border-0 shadow-sm">
                <form class="card-body" method="POST" action="{{ route('admin.saveproductbanner') }}"
                  enctype="multipart/form-data">
                  @csrf
                  <input type="hidden" name="product_id" value="{{ enc($product['id']) }}">
                  <h5 class="card-title text-primary">Add More Information</h5>
                  <div class="row">
                    <div class="col-6 mb-3">
                      <input type="text" id="more_info_title" name="more_info_title" placeholder="Enter Title"
                        class="form-control @error('more_info_title') is-invalid @enderror">
                      @error('more_info_title')
                        <div class="invalid-feedback">{{ $message }}</div>
                      @enderror
                    </div>
                    <div class="col-3 mb-3">
                      <input type="file" id="more_info_image" name="more_info_image"
                        class="form-control @error('more_info_image') is-invalid @enderror" placeholder="Select image">
                      @error('more_info_image')
                        <div class="invalid-feedback">{{ $message }}</div>
                      @enderror
                    </div>
                    <div class="col-3 mb-3">
                      <div class="row d-flex">
                        <div class="form-check d-inline" style="width: auto;">
                          <input name="image_side" class="form-check-input @error('image_side') is-invalid @enderror"
                            type="radio" value="left" id="image_at_left" checked>
                          <label class="form-check-label" for="image_at_left">Image at left</label>
                        </div>
                        <div class="form-check d-inline" style="width: auto;">
                          <input name="image_side" class="form-check-input @error('image_side') is-invalid @enderror"
                            type="radio" value="right" id="image_at_right">
                          <label class="form-check-label" for="image_at_right">Image at right</label>
                        </div>
                      </div>
                      @error('image_side')
                        <div class="invalid-feedback d-block">{{ $message }}</div>
                      @enderror
                    </div>
                    <div class="col-12 mb-3">
                      <textarea id="more_info_description" name="more_info_description"
                        class="form-control @error('more_info_description') is-invalid @enderror" placeholder="Enter Description"></textarea>
                      @error('more_info_description')
                        <div class="invalid-feedback">{{ $message }}</div>
                      @enderror
                    </div>
                    <div class="col-12 mb-3">
                      <button id="more_info_submit" name="more_info_submit"
                        class="btn btn-sm btn-success">Submit</button>
                    </div>
                  </div>
                </form>
              </div>
            </div>

            <!-- More Information Banners -->
            <div class="col-12 d-none">
              <div class="card border-0 shadow-sm">
                <div class="card-body">
                  <h5 class="card-title text-primary">More Information Banners</h5>
                  <div class="row g-3">
                    @foreach ($more_info as $k => $info)
                      <div class="col-md-12">
                        <div class="card border-0 shadow-sm">
                          <div class="card-body">
                            <div class="d-flex justify-content-end">
                              <button class="btn btn-sm btn-danger my-2 delete_banner"
                                data_id = "{{ enc($info->id) }}">
                                Delete
                              </button>
                            </div>
                            <div class="d-flex justify-content-between align-items-center">
                              <form action="{{ route('admin.saveinputproductbanner') }}" method="POST">
                                <div class="mb-1">
                                  <button type="button" class="btn btn-primary btn-sm edit_input">Edit</button>
                                  <button type="submit" class="btn btn-primary btn-sm d-none save_btn">Save</button>
                                </div>
                                @csrf
                                <input type="hidden" name="id" value="{{ enc($info->id) }}">
                                <input type="text" id="banner_title{{ $k }}"
                                  value="{{ $info->title }}" class="form-control edit_field" name="title" readonly>
                              </form>
                            </div>
                            <div class="row mt-3">
                              @if ($info->image_site === 'right')
                                <div class="col-md-8">
                                  <form action="{{ route('admin.saveinputproductbanner') }}" method="POST">
                                    <div class="mb-1">
                                      <button type="button" class="btn btn-primary btn-sm edit_input">Edit</button>
                                      <button type="submit"
                                        class="btn btn-primary btn-sm d-none save_btn">Save</button>
                                    </div>
                                    @csrf
                                    <input type="hidden" name="id" value="{{ enc($info->id) }}">
                                    <textarea id="banner_description{{ $k }}" name="description" class="form-control edit_field" readonly>{{ $info->description }}</textarea>
                                  </form>
                                </div>
                                <div class="col-md-4">
                                  <form action="{{ route('admin.saveinputproductbanner') }}"
                                    enctype="multipart/form-data" method="POST">
                                    <div class="my-1">
                                      <button type="button" class="btn btn-primary btn-sm edit_input">Edit</button>
                                      <button type="submit"
                                        class="btn btn-primary btn-sm d-none save_btn">Save</button>
                                    </div>
                                    @csrf
                                    <input type="file" name="more_info_image" class="form-control save_btn d-none"
                                      placeholder="Select image">
                                    <input type="hidden" name="id" value="{{ enc($info->id) }}">
                                    <img src="{{ url('images/product_banners/' . $info->image) }}"
                                      alt="{{ $info->title }}" class="img-fluid rounded">
                                  </form>
                                </div>
                              @else
                                <div class="col-md-4">
                                  <form action="{{ route('admin.saveinputproductbanner') }}" method="POST"
                                    enctype="multipart/form-data">
                                    <div class="my-1">
                                      <button type="button" class="btn btn-primary btn-sm edit_input">Edit</button>
                                      <button type="submit"
                                        class="btn btn-primary btn-sm d-none save_btn">Save</button>
                                    </div>
                                    @csrf
                                    <input type="file" name="more_info_image" class="form-control save_btn d-none"
                                      placeholder="Select image">
                                    <input type="hidden" name="id" value="{{ enc($info->id) }}">
                                    <img src="{{ url('images/product_banners/' . $info->image) }}"
                                      alt="{{ $info->title }}" class="img-fluid rounded">
                                  </form>
                                </div>
                                <div class="col-md-8">
                                  <form action="{{ route('admin.saveinputproductbanner') }}" method="POST">
                                    <div class="mb-1">
                                      <button type="button" class="btn btn-primary btn-sm edit_input">Edit</button>
                                      <button type="submit"
                                        class="btn btn-primary btn-sm d-none save_btn">Save</button>
                                    </div>
                                    @csrf
                                    <input type="hidden" name="id" value="{{ enc($info->id) }}">
                                    <textarea id="banner_description{{ $k }}" name="description" class="form-control edit_field" readonly>{{ $info->description }}</textarea>
                                  </form>
                                </div>
                              @endif
                            </div>
                            <form action="{{ route('admin.saveinputproductbanner') }}" method="POST">
                              <div class="my-1">
                                <button type="button" class="btn btn-primary btn-sm edit_input">Edit</button>
                                <button type="submit" class="btn btn-primary btn-sm d-none save_btn">Save</button>
                              </div>
                              @csrf
                              <input type="hidden" name="id" value="{{ enc($info->id) }}">
                              <div class="row d-flex">
                                <div class="form-check d-inline" style="width: auto;">
                                  <input name="image_side" class="form-check-input edit_field" type="radio"
                                    value="left" id="image_at_left{{ $k }}"
                                    {{ $info->image_site == 'left' ? 'checked' : '' }} disabled>
                                  <label class="form-check-label" for="image_at_left{{ $k }}">Image at
                                    left</label>
                                </div>
                                <div class="form-check d-inline" style="width: auto;">
                                  <input name="image_side" class="form-check-input edit_field" type="radio"
                                    value="right" id="image_at_right{{ $k }}"
                                    {{ $info->image_site == 'right' ? 'checked' : '' }} disabled>
                                  <label class="form-check-label" for="image_at_right{{ $k }}">Image at
                                    right</label>
                                </div>
                              </div>
                            </form>
                          </div>
                        </div>
                      </div>
                    @endforeach
                  </div>
                </div>
              </div>
            </div>

          </div>
        @else
          <div class="alert alert-warning" role="alert">
            Product not found.
          </div>
        @endif
      </div>
    </div>
  </div>

  @include('components.alertmodal', [
      'modal_id' => 'deletePro_imgModal',
      'form_id' => 'deletePro_imgForm',
      'action' => route('admin.deleteproductimg'),
      'modal_title' => 'Alert!',
      'input_id' => 'deletePro_imgId',
      'modal_mess' => 'Are you sure you want to delete this Image?',
      'button_type' => 'submit',
      'button_id' => 'confirmDeletePro_imgButton',
  ])

  @include('components.alertmodal', [
      'modal_id' => 'deleteBannerModal',
      'form_id' => 'deleteBannerForm',
      'action' => route('admin.deleteprojectbanner'),
      'modal_title' => 'Alert!',
      'input_id' => 'deleteBannerId',
      'modal_mess' => 'Are you sure you want to delete this Banner?',
      'button_type' => 'submit',
      'button_id' => 'confirmDeleteBannerButton',
  ])

@endsection

@section('script')
  <script>
    function no_image_div(i) {
      return `<div class="card border-0 shadow-sm h-100">
                <div class="card-body text-center h-100">
                  <div class="d-flex justify-content-center align-items-center h-100">
                    <label for="product_image${i}"
                      class="btn rounded-pill d-flex justify-content-center align-items-center"
                      style="width:70%; height:70%;">
                      <i class="fa-solid fa-plus text-primary"></i>
                    </label>
                    <input id="product_image${i}" data_id="${i}" type="file" class="d-none product_image">
                  </div>
                </div>
              </div>`;
    }

    function is_image_div(i, url) {
      return `<div class="card border-0 shadow-sm position-relative product_image_show">
                <label class="btn rounded-pill d-flex justify-content-center align-items-center position-absolute delete_pro_img" style="width:30px; height:30px; right:50px;" data_id="${i}"><i class="fa-solid fa-trash text-danger"></i></label>
                <label for="product_image${i}"
                  class="btn rounded-pill d-flex justify-content-center align-items-center position-absolute"
                  style="width:30px; height:30px; right:0px;">
                  <i class="fa-solid fa-pen-to-square text-primary bg-light"></i>
                </label>
                <input id="product_image${i}" data_id="${i}" type="file" class="d-none product_image">
                <div class="card-body text-center">
                  <img src="${url}" alt="Product Image" class="img-fluid rounded">
                </div>
              </div>`;
    }

    $(document).on("change", ".product_image", function(event) {
      let input = $(this);
      let data_id = input.attr("data_id");
      let pro_id = `{{ enc($product['id']) }}`;
      let files = event.target.files;
      if (files.length === 0) {
        showAlert(`Image not selected.`, "danger", "");
        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", data_id);
      formData.append("pro_id", pro_id);
      $.ajax({
        url: "{{ route('admin.uploadproductimage') }}",
        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(".pro_img_div").find(".progress-bar").css("width", percentComplete + "%");
              input.closest(".pro_img_div").find(".progress-bar").html(Math.floor(percentComplete) + "%");
            }
          }, false);
          return xhr;
        },
        success: function(d) {
          showAlert(d["message"], "success", "");
          input.closest(".pro_img_div").html(is_image_div(data_id, d["url"]));
          input.closest(".pro_img_div").find(".progress-bar").css("width", 0 + "%");
          input.closest(".pro_img_div").find(".progress-bar").html("");
        },
        error: function() {
          showAlert(d["message"], "danger", "");
          input.closest(".pro_img_div").find(".progress-bar").css("width", 0 + "%");
          input.closest(".pro_img_div").find(".progress-bar").html("");
        }
      });
    });

    $(document).on("click", ".delete_pro_img", function() {
      let val = $(this).attr("data_id");
      let data = btoa(JSON.stringify({
        pro_id: "{{ enc($product['id']) }}",
        data_id: val
      }));

      $("#deletePro_imgId").val(data);
      $("#deletePro_imgModal").modal("show");
    })

    $(document).on("click", ".delete_banner", function() {
      let val = $(this).attr("data_id");
      $("#deleteBannerId").val(val);
      $("#deleteBannerModal").modal("show");
    })

    $(document).on("click", ".edit_input", function() {
      let form_ele = $(this).closest("form");
      $(this).addClass("d-none");
      form_ele.find(".save_btn").removeClass("d-none");
      form_ele.find(".edit_field").prop("readonly", false);
      form_ele.find(".edit_field").prop("disabled", false);
    })
  </script>
@endsection