@extends('layouts.app')
@section('content')
<style>

     .lcslt {
   background-color: #eeecec1b !important;
       width: 100%;
       height: 47px;
}
.lcslt-placeholder {
    color: rgb(251, 251, 251) !important;
    line-height: normal;
    padding-bottom: 5px;
}
.lcslt > span:not(.lcslt-placeholder):not(.lcslt-multi-callout), #lc-select-dd li {
    color: #212121 !important;
}
#lc-select-dd li {
    width: 100%;
    margin: 0;
    background-color: #f9f7f7d1 !important;
}

.lcslt-search-li input[type=text], .lcslt-search-li input[type=text]:hover, .lcslt-search-li input[type=text]:active, .lcslt-search-li input[type=text]:focus, .lcslt-search-li input[type=text]:focus-visible {
    /* border: none; */
    background-color: #0f224284 !important;
    /* outline: none; */
}




.input-group-append .input-group-text, .input-group-prepend .input-group-text {
    border-color: #e0e0ef;
    padding: 0.175rem 0.75rem;
    color: #686868;
}
  button.dt-button, div.dt-button, a.dt-button, input.dt-button {
    border-radius: 5px;
    color: white;
    background-color: rgb(197, 7, 178);
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
}

button.dt-button:hover:not(.disabled), div.dt-button:hover:not(.disabled), a.dt-button:hover:not(.disabled), input.dt-button:hover:not(.disabled) {
    border: 1px solid #666;
    background-color: rgb(29, 29, 29);
}

.button-34 {
  background: #5E5DF0;
  border-radius: 999px;
  box-shadow: #5E5DF0 0 10px 20px -10px;
  box-sizing: border-box;
  color: #FFFFFF;
  cursor: pointer;
  font-family: Inter,Helvetica,"Apple Color Emoji","Segoe UI Emoji",NotoColorEmoji,"Noto Color Emoji","Segoe UI Symbol","Android Emoji",EmojiSymbols,-apple-system,system-ui,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans",sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  opacity: 1;
  outline: 0 solid transparent;
  padding: 8px 18px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  width: fit-content;
  word-break: break-word;
  border: 0;
}

.btn5{
  background: #670479;
  border-radius: 999px;
  box-shadow: #eb5df0 0 10px 20px -10px;  
}

/* body {
  font-family: Arial, sans-serif;
  background: #f2f2f2;
  padding: 30px;
} */

/* Overlay */
.overlay {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: 10;
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s ease;
}

.overlay.visible {
  opacity: 1;
  visibility: visible;
}

/* Popup */
.main-popup {
  position: fixed;
  left: 0;
  top: 30px;
  width: 200%;
  height: 650px;
  background-color: #ffffffeb;
  border-radius: 5px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-20px);
  transition: all .5s ease;
  z-index: 10000;
}

.main-popup.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(10px);
}

@media (min-width: 500px) {
  .main-popup {
    width: 900px;
    left: 50%;
    margin-left: -450px;
  }
}

.popup-header {
  height: 62px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

#popup-close-button a {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 22px;
  height: 22px;
}

#popup-close-button a::before,
#popup-close-button a::after {
  content: '';
  position: absolute;
  right: 10px;
  top: 0;
  width: 3px;
  height: 25px;
  background-color: #090909;
}

#popup-close-button a::before {
  transform: rotate(45deg);
}

#popup-close-button a::after {
  transform: rotate(-45deg);
}

.popup-header ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  width: 100%;
}

.popup-header ul li {
  width: 50%;
  text-align: center;
}

.popup-header ul li a {
  display: block;
  padding: 20px 0;
  text-decoration: none;
  font-size: 1.2em;
  background-color: #f5a158;
  color: #fff;
}

#sign-in.active,
#register.active {
  background-color: transparent;
  color: #2e2e2e;
}

.popup-content {
  height: 100%;
  overflow: hidden;
  position: relative;
}

form.sign-in,
form.register {
  position: absolute;
  width: 100%;
  padding-top: 30px;
  left: 0;
  top: 0;
  transition: all 0.35s ease;
}

form.sign-in.move-left {
  transform: translateX(-450px);
  opacity: 0;
}

form.register {
  opacity: 0;
  transform: translateX(450px);
}

form.register.move-left {
  transform: translateX(0);
  opacity: 1;
}

form label {
  font-size: 1.1em;
  color: #333;
  margin-left: 5%;
}

form input[type="text"],
form input[type="password"] {
  border-radius: 5px;
  width: 90%;
  height: 40px;
  margin: 5px 5% 15px 5%;
  padding: 10px;
  font-size: 1em;
  color: #333;
  border: 1px solid #ccc;
  outline: none;
}

input#submit {
  background-color: #ceaee8;
  color: #fff;
  height: 50px;
  width: 90%;
  margin: 25px 5%;
  border: none;
  border-radius: 5px;
  font-size: 1em;
  cursor: pointer;
}





/* CSS */
.button-87 {
  margin: 5px;
  padding: 10px 10px;
  text-align: center;
  text-transform: uppercase;
  transition: 0.5s;
  background-size: 200% auto;
  color: white;
  border-radius: 10px;
  display: block;
  border: 0px;
  font-weight: 700;
  box-shadow: 0px 0px 14px -7px #f09819;
  background-image: linear-gradient(45deg, #FF512F 0%, #F09819  51%, #FF512F  100%);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.button-87:hover {
  background-position: right center;
  /* change the direction of the change here */
  color: #fff;
  text-decoration: none;
}

.button-87:active {
  transform: scale(0.95);
}

</style>
<div class="overlay">
</div>
      <!-- partial -->
      <div class="main-panel">
        <div class="content-wrapper">
          <div class="page-header">
            <h3 class="page-title">
              {{-- Sale Reference : {{$sale->sale_reference }} --}}
            </h3>
          </div>
          <div class="row grid-margin">
            <div class="col-12">
              <div class="card card-statistics">
                <div class="card-body">
                  <div class="d-flex flex-column flex-md-row align-items-center justify-content-between">
                    <div class="statistics-item">
                        <p>
                            <i class="icon-sm fa fa-user mr-2"></i>
                            Branch Name
                        </p>
                        <h5>{{$branchesName}}</h5>
                    </div>
                    <div class="statistics-item">
                      <p>
                          <i class="icon-sm fas fa-hourglass-half mr-2"></i>
                          Total Cost
                      </p>
                      <h5>{{ number_format($purchaseSummary->total_cost, 2) }}</h5>
                  </div>
                   
                    <div class="statistics-item">
                        <p>
                            <i class="icon-sm fas fa-hourglass-half mr-2"></i>
                            Total Quantity
                        </p>
                        <h5>{{ number_format($purchaseSummary->total_quantity, 2) }}</h5>
                    </div>
                    
                    <div class="statistics-item">
                        <p>
                            <i class="icon-sm fas fa-hourglass-half mr-2"></i>
                            Sale Quantity
                        </p>
                                  <h5>{{ number_format($purchaseSummary->total_sale_quantity, 2) }}</h5>
                        {{-- <h5>{{ $sale->quantity }}</h5> --}}
                        {{-- <h4>{{ number_format($purchaseTotalSums->overall_total_cost - $purchaseTotalSums->overall_total_paid, 2) }}</h4>
                   
                        @if (($purchaseTotalSums->overall_total_cost - $purchaseTotalSums->overall_total_paid) > 0)
                            <label class="badge badge-outline-danger badge-pill">Outstanding Amount</label>
                        @else
                            <label class="badge badge-outline-success badge-pill">Balance Amount</label>
                        @endif --}}
                    </div>
                   
                    
                      
                  </div>
                 
                  <hr>
                  
                </div>
              </div>
            </div>
          </div>
                <div class="col-md-12 grid-margin stretch-card">
                    
              <div class="card">
                <div class="card-body">
                  {{-- <h4 class="card-title">Pills</h4>
                  <p class="card-description">Basic nav pills</p> --}}
                  <ul class="nav nav-pills nav-pills-success" id="pills-tab" role="tablist">
                    <li class="nav-item">
                      <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">PRODUCTS</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">PRODUCTS TRANSFER</a>
                    </li>
                    {{-- <div style="position: relative; width: 100%; position:relative; top:-50px">
                      <button class="button-34 return" data-id="{{ $sale->id }}" role="button" style="position: absolute; top: 0; right: 120px;">
                          Return Items
                      </button>
                      <button class="button-34 btn5 edit" data-id="{{ $sale->id }}" role="button" style="position: absolute; top: 0; right: 0;">
                          Edit Items
                      </button>
                  </div> --}}
                  
                  
                    
                  </ul>
                 
                  <div class="tab-content" id="pills-tabContent">
                    <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
                      <div class="media">
                        <div class="table-responsive" style="overflow-x: auto; -webkit-overflow-x: auto;">
                            {{-- @if($saleProduct->isNotEmpty()) --}}
                          <table id="example" class="table table-striped table-hover table-product nowrap" style="width: 100%;">
                            <thead>
                              <tr>
                                <th>Id #</th>
                                <th>Name</th>
                                <th>Cost</th>
                                <th>Quantity</th>
                                <th>Sale Quantity</th>
                                <th>Actual Quantity</th>
                                <th>Branch Name</th>
                                <th>Price</th>
                                <th>View</th>
                {{-- <th>Delete</th> --}}
                              </tr>
                            </thead>
                            <tbody>
                              @foreach($purchaseProductsBadgstocks as $purchaseProductsBadgstock)
                                <tr>
                                  <td>{{ $purchaseProductsBadgstock->id }}</td>
                                   <td>{{ $purchaseProductsBadgstock->name }}</td>
                                  <td>{{ number_format($purchaseProductsBadgstock->each_cost, 2) }}</td>
                                  <td>{{ $purchaseProductsBadgstock->quantity }}</td>
                                  <td>{{ number_format($purchaseProductsBadgstock->sale_quantity) }}</td>
                                  <td>{{ $purchaseProductsBadgstock->quantity - $purchaseProductsBadgstock->sale_quantity }}</td>
                                  <td>{{ $purchaseProductsBadgstock->branch_name }}</td>
                                  <td>{{ number_format($purchaseProductsBadgstock->price, 2) }}</td>
                                  <td><div class="container">
                                      <button class="button-87" role="button" id="view" data-name="{{ $purchaseProductsBadgstock->name }}" data-model="{{ $purchaseProductsBadgstock->model }}" data-code="{{ $purchaseProductsBadgstock->code }}"
                                       data-id="{{ $purchaseProductsBadgstock->id }}" id="view" data-image="{{ $purchaseProductsBadgstock->image }}">view</button>
                                  </div>
                                  </td>
                                </tr>
                              @endforeach
                          </tbody>
                        </table>
 
                        </div>
                      </div>
                    </div>
                    <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
                          <div class="alert">
                 
                        </div>
                        <div class="container">
                      <div class="row">
                        <div class="col-md-4">
                          <p>
                            <i class="icon-sm fa fa-user mr-2"></i>
                            Product
                        </p>
                        <div class="search-bar">
                            <input 
                                type="text" 
                                id="searchInput" 
                                class="form-control w-100 formInputField" 
                                placeholder="Search by name or code..." 
                                autocomplete="off"
                            />
                            <ul id="suggestionList" class="suggestion-list" style="width:92%; display: none; list-style: none; border: 1px solid #ccc; padding: 5px; max-height: 200px; overflow-y: auto;">
                                <!-- Suggestions will appear here -->
                            </ul>
                        </div>
                        </div>
                            <div class="col-md-4">
                                  <p>
                            <i class="icon-sm fas fa-hourglass-half mr-2"></i>
                           Select Branch
                        </p>
                                <select name="simple" data-placeholder="Select something please .." class="formInputField" id="branch">
                                @foreach ($branches as $key => $branch)
                                    <option data-name="{{ $branch->branch_name }}" value="{{ $branch->id }}" {{ $key == 0 ? 'selected' : '' }}>
                                    {{ $branch->branch_name }}  
                                    </option>
                                @endforeach
                                </select>
                            </div>
                        <div class="col-md-2">
                          <p>
                            <i class="icon-sm fas fa-hourglass-half mr-2"></i>
                           Quantity
                        </p>
                          <div class="form-group">
                          
                            <input type="number" class="form-control" id="quantity" placeholder=" Quantity"  >
                          </div>
                        </div>
                       
                        <div class="col-md-2">
                            <p>
                              <i class="icon-sm fas fa-hourglass-half mr-2"></i>
                              UPDATE
                          </p>
                            <div class="form-group">
                            
                                <h2><button type="button" class="btn btn-danger btn-sm" id="adToTable">UPDATE 😊 <i class="fa fa-play-circle ml-1"></i></button></h2>
                                <label class="badge badge-outline-success badge-pill"></label>
                            </div>
                          </div>
                        </div>
                        </div>
                        <br><br>
                       <table id="itemTable" class="table table-striped table-bordered">
                    <thead>
                        <tr>
                            <th>Product Name</th>
                            <th>From</th>
                            <th>To</th>
                            <th>Quantity</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- Rows will be dynamically added here -->
                    </tbody>
                </table>
                        <div class="form-group">
                            
                                <h2><button type="button" class="btn btn-danger btn-sm" id="sumbitData">SUBMIT <i class="fa fa-play-circle ml-1"></i></button></h2>
                                <label class="badge badge-outline-success badge-pill"></label>
                            </div> 
                    </div>
                     
                  </div>
                </div>
               
              </div>
            </div>
       
         
          <div class="content-wrapper">
            {{-- <div class="page-header">
              <h3 class="page-title">
                Data table
              </h3>
              <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                  <li class="breadcrumb-item"><a href="#">Tables</a></li>
                  <li class="breadcrumb-item active" aria-current="page">Data table</li>
                </ol>
              </nav>
            </div> --}}
            {{-- <div class="card">
              <div class="card-body">
                <h4 class="card-title">Data table</h4>
                <div class="row">
                  <div class="col-12">
                    <div class="table-responsive" style="overflow-x: auto; -webkit-overflow-x: auto;">
                        <table id="example" class="table table-striped table-hover table-product  nowrap" style="width: 100%; ">
                        <thead>
                          <tr>
                              <th>Id #</th>
                              <th>Sale Id</th>
                              <th>Date</th>
                              <th>Supplier</th>
                              <th>total Quantity</th>
                              <th>total Cost</th>
                              <th>total Paid</th>
                              <th>Profit</th>
                              <th>Profit</th>
                              <th>Delete</th>
                          </tr>
                        </thead>
                        <tbody>
                         
                      
                        </tbody>
                      </table>
                    </div>
                  </div>
                </div>
              </div>
            </div> --}}
          </div>
          <div class="row">
            <div class="col-12">
              <div class="card">
                <div class="card-body">
                  <div class="d-md-flex justify-content-between align-items-center">
                    <div class="d-flex align-items-center mb-3 mb-md-0">
                      <button class="btn btn-social-icon btn-facebook btn-rounded">
                        <i class="fab fa-facebook-f"></i>
                      </button>
                      <div class="ml-4">
                        <h5 class="mb-0">Facebook</h5>
                        <p class="mb-0">813 friends</p>
                      </div>
                    </div>
                    <div class="d-flex align-items-center mb-3 mb-md-0">
                      <button class="btn btn-social-icon btn-twitter btn-rounded">
                        <i class="fab fa-twitter"></i>
                      </button>
                      <div class="ml-4">
                        <h5 class="mb-0">Twitter</h5>
                        <p class="mb-0">9000 followers</p>
                      </div>
                    </div>
                    <div class="d-flex align-items-center mb-3 mb-md-0">
                      <button class="btn btn-social-icon btn-google btn-rounded">
                        <i class="fab fa-google-plus-g"></i>
                      </button>
                      <div class="ml-4">
                        <h5 class="mb-0">Google plus</h5>
                        <p class="mb-0">780 friends</p>
                      </div>
                    </div>
                    <div class="d-flex align-items-center">
                      <button class="btn btn-social-icon btn-linkedin btn-rounded">
                        <i class="fab fa-linkedin-in"></i>
                      </button>
                      <div class="ml-4">
                        <h5 class="mb-0">Linkedin</h5>
                        <p class="mb-0">1090 connections</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

      
        <!-- content-wrapper ends -->
        <!-- partial:../../partials/_footer.html -->
        <footer class="footer">
          <div class="d-sm-flex justify-content-center justify-content-sm-between">
            <span class="text-muted text-center text-sm-left d-block d-sm-inline-block">Copyright © 2025  <a href="https://www.urbanui.com/" target="_blank">Urbanui</a>. All rights reserved.</span>
            <span class="float-none float-sm-right d-block mt-1 mt-sm-0 text-center">Hand-crafted & made with <i class="far fa-heart text-danger"></i></span>
          </div>
        </footer>
        <!-- partial -->
      </div>
 <div class="main-popup">
  <div class="popup-header">
    <div id="popup-close-button"><a href="#"></a></div>
    <ul>
      <li><a href="#" id="sign-in">Product Details</a></li>
      <li><a href="#" id="register">Product Items</a></li>
    </ul>
  </div>

  <div class="popup-content">
    <form action="#" class="sign-in">
      <div class="container">
  <div class="row">
    <div class="col-sm">
       <img id="product-image-preview" src="" alt="Product Image" style="max-width:100%; height:auto;">
    </div>
    <div class="col-sm">
         <label for="password">NAME:</label>
      <input type="text" id="product-name">
         <label for="password">BAR CODE:</label>
      <input type="text" id="product-code">
         <label for="password">MODEL:</label>
      <input type="text" id="product-model">
      <label for="product-code"></label>
<svg id="product-barcode"></svg>
    </div>
  
  </div>
</div>

    </form>

    <form action="#" class="register">
               <div class="table-responsive" style="overflow-x: auto; -webkit-overflow-x: auto; padding: 30px;">
                            {{-- @if($saleProduct->isNotEmpty()) --}}
    <table id="example3" class="table table-striped table-hover table-product nowrap" style="width: 100%;">
        <thead>
            <tr>
                <th>Id #</th>
                <th>Purchase Id</th>
                <th>Imu</th>
                <th>Quantity</th>
                <th>Cost</th>
                <th>Status</th>
                 <th>View</th>
                {{-- <th>Delete</th> --}}
            </tr>
        </thead>
        <tbody>
          
        </tbody>
    </table>
{{-- @endif --}}

                            
                        </div>
    </form>
  </div>
</div>
     
      <script>
$(function() {
  var $overlay = $('.overlay');
  var $mainPopUp = $('.main-popup');
  var $signIn = $('#sign-in');
  var $register = $('#register');
  var $formSignIn = $('form.sign-in');
  var $formRegister = $('form.register');

  // Show popup
  
    $(document).on("click","#view",function() {

      var id = $(this).data('id'); 

        var image = $(this).data('image'); // Get the image from data-image
        var name = $(this).data('name'); 
        var model = $(this).data('model'); 
        var code = $(this).data('code'); 

      
    // Set image in the popup
    $('#product-image-preview').attr('src', image);
    $('#product-name').val(name);
    $('#product-model').val( model);
    $('#product-code').val( code);  

    JsBarcode("#product-barcode", code, {
  format: "CODE128", // or "EAN13", "UPC", etc., depending on your needs
  lineColor: "#000",
  width: 2,
  height: 50,
  displayValue: true
});
     $.ajax({
    url: '/prduct_list_data',
    headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
    type: 'POST',
    data: {
        'id': id
    },
 success: function(response) {
    const data = response.data;

    var table = $('#example3').DataTable();
    table.clear();

    data.forEach(function(item) {
        const rowClass = item.sale_status === 'sold' ? 'text-danger' : '';

        table.row.add([
            `<span class="${rowClass}">${item.id}</span>`,
            `<span class="${rowClass}">${item.purchases_id}</span>`,
            `<span class="${rowClass}">${item.imu_number}</span>`,
            `<span class="${rowClass}">${item.quantity}</span>`,
            `<span class="${rowClass}">${item.each_cost || ''}</span>`,
            `<span class="${rowClass}">${item.sale_status}</span>`,
            `<button class="btn btn-sm btn-primary">View</button>`
        ]);
    });

    table.draw();
}
,
    error: function(xhr, status, error) {
        console.error('Error:', error);
    }
});



    $overlay.addClass('visible');
    $mainPopUp.addClass('visible');
    $signIn.addClass('active');
    $register.removeClass('active');
    $formRegister.removeClass('move-left');
    $formSignIn.removeClass('move-left');
  });

  // Close popup
  $overlay.on('click', function() {
    $(this).removeClass('visible');
    $mainPopUp.removeClass('visible');
  });

  $('#popup-close-button a').on('click', function(e) {
    e.preventDefault();
    $overlay.removeClass('visible');
    $mainPopUp.removeClass('visible');
  });

  // Switch to sign in
  $signIn.on('click', function(e) {
    e.preventDefault();
    $signIn.addClass('active');
    $register.removeClass('active');
    $formSignIn.removeClass('move-left');
    $formRegister.removeClass('move-left');
  });

  // Switch to register
  $register.on('click', function(e) {
    e.preventDefault();
    $signIn.removeClass('active');
    $register.addClass('active');
    $formSignIn.addClass('move-left');
    $formRegister.addClass('move-left');
  });

  // Prevent default submit
  $('form').on('submit', function(e) {
    e.preventDefault(); // Remove this when using real backend
    alert("Form submitted (demo only)");
  });
});

$( document ).ready(function() {


    const urlParams = new URLSearchParams(window.location.search);

    var branchId = urlParams.get('id');

      $(document).on('click', '.edit', function() {
            var id = $(this).data('id');
            var url = '/edit_sale_data?id=' + id;
            window.location.href = url;
      });

        $(document).on('click', '.return', function() {
            var id = $(this).data('id');
            var url = '/return_sale_data?id=' + id;
            window.location.href = url;
        });


const branchList = $('#branch');  // Use jQuery selector instead of querySelector

// Initialize lc_select
new lc_select(branchList[0], {
    wrap_width: '100%',
    min_for_search: 2,
    pre_placeh_opt: true,
});

var branch_id = '{{ Session::get('branch_id') }}' ;


var productExsistingQuantity = '';
var productID = '';

$('#searchInput').on('input', function () {
        var id = branchId; 
    const searchTerm = $(this).val().trim();

    if (searchTerm.length >= 2) {
        $.ajax({
            url: `/search-product-for-transfer/${id}`,
            method: 'GET',
            data: { query: searchTerm },
            success: function (data) {
                console.log(data);

                $('#suggestionList').hide();
                $('.SalesCreate').show();
                $('.productDivBox').hide();

                const suggestions = Object.values(data.suggestions);
                const suggestionList = $('#suggestionList');
                suggestionList.empty();

                // Clear previous rows from DataTable
                

                if (suggestions.length === 1) {
                    const item = suggestions[0];

                    $('#searchInput')
                        .val(`${item.name.trim()} (${item.imu_number.trim()}) Price : (${item.price.trim()}) (${item.each_cost.trim()}) Qty ${item.quantity}`)
                        .attr('data-id', item.id)
                        .attr('data-quantity', item.quantity)
                        .attr('data-badgstock_id', item.badgstock_id)
                        .attr('data-each_cost', item.each_cost)
                        .attr('data-type', item.type)
                        .attr('data-imu_number', item.imu_number)
                        .attr('data-item_id', item.itemId)
                        .attr('data-price', item.price)
                        .attr('data-name', item.name);

                    suggestionList.hide();
                    productExsistingQuantity = item.quantity;
                    productID = item.id;

                    // Add new row


                } else if (suggestions.length > 1) {
                    suggestions.forEach(item => {
                        suggestionList.append(
                            `<li data-id="${item.id}" data-price="${item.price}" 
                            data-quantity="${item.quantity}"
                            data-badgstock_id="${item.badgstock_id}"
                            data-each_cost="${item.each_cost}"
                            data-type="${item.type}" 
                            data-imu_number="${item.imu_number}" 
                            data-item_id="${item.itemId}"
                            data-name="${item.name}" 
                            class="suggestion-item">
                            ${item.name.trim()} (${item.imu_number.trim()})  Price : (${item.price.trim()}) cost : (${item.each_cost.trim()} Qty ${item.quantity})  
                        </li>`
                        );

                        productExsistingQuantity = item.quantity;

                        // Add new row
                       
                    });

                    suggestionList.show();
                } else {
                    suggestionList.hide();
                }
            },
            error: function (error) {
                console.error('Error fetching suggestions:', error);
            }
        });
    } else {
        $('#suggestionList').hide();
    }
});

  $(document).on('click', '.suggestion-item', function () {
    const selectedId = $(this).data('id'); // Get data-id from clicked item
    const selectedText = $(this).text().trim(); // Get the text of the clicked item
	const quantity = $(this).data('quantity'); 
	const price = $(this).data('price'); 
	const name = $(this).data('name'); 
	const badgstock_id = $(this).data('badgstock_id'); 
	
	const each_cost = $(this).data('each_cost');
	const type = $(this).data('type');
	const imu_number = $(this).data('imu_number'); 
	const itemId = parseInt($(this).data('item_id'));

    $('#searchInput')
        .val(selectedText) // Set the input value to the selected text
        .attr('data-id', selectedId)
		.attr('data-quantity', quantity)
		.attr('data-badgstock_id', badgstock_id)
		.attr('data-each_cost', each_cost)
		.attr('data-type', type)
		.attr('data-imu_number', imu_number)
		.attr('data-item_id', itemId)
		.attr('data-price', price)
		.attr('data-name', name);	
		
		// Set the data-id to the input field
		
	

    $('#suggestionList').hide(); // Hide the suggestion list




});

  // alert("hi")
  $('#example').DataTable({
            dom: "<'row'<'col-sm-12 col-md-4'l><'col-sm-12 col-md-4'B><'col-sm-12 col-md-4'f>>" +
                "<'row'<'col-sm-12'tr>>" +
                "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
            buttons: [
                'copy', 'csv', 'excel', 'pdf', 'print'
            ],
            processing: true,
            info: true,
            responsive: true,
            lengthMenu: [
                [10, 25, 50, 100, 200, -1],
                [10, 25, 50, 100, 200, "All"]
            ],
       
            createdRow: function(row, data, dataIndex) {
            // Example condition to change font color
            // Adjust condition as needed
                $(row).css('font-size', '15px');
           
        }
        });

$('#example3').DataTable({
            dom: "<'row'<'col-sm-12 col-md-4'l><'col-sm-12 col-md-4'B><'col-sm-12 col-md-4'f>>" +
                "<'row'<'col-sm-12'tr>>" +
                "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
            buttons: [
                 'csv', 'excel', 'pdf', 'print'
            ],
            processing: true,
            info: true,
            responsive: true,
            lengthMenu: [
                [10, 25, 50, 100, 200, -1],
                [10, 25, 50, 100, 200, "All"]
            ],
       
            createdRow: function(row, data, dataIndex) {
            // Example condition to change font color
            // Adjust condition as needed
                $(row).css('font-size', '15px');
           
        }
        });


        
        $('#example2').DataTable({
            dom: "<'row'<'col-sm-12 col-md-4'l><'col-sm-12 col-md-4'B><'col-sm-12 col-md-4'f>>" +
                "<'row'<'col-sm-12'tr>>" +
                "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
            buttons: [
                'copy', 'csv', 'excel', 'pdf', 'print'
            ],
            processing: true,
            info: true,
            responsive: true,
            lengthMenu: [
                [10, 25, 50, 100, 200, -1],
                [10, 25, 50, 100, 200, "All"]
            ],
       
            createdRow: function(row, data, dataIndex) {
            // Example condition to change font color
            // Adjust condition as needed
                $(row).css('font-size', '15px');
           
        }
        });

        $(document).on('click', '.delete', function() {
        var id = $(this).data('id');
        alert(id)

            const swalWithBootstrapButtons = Swal.mixin({
                customClass: {
                    confirmButton: 'btn btn-success',
                    cancelButton: 'btn btn-danger'
                },
                buttonsStyling: false
            })

            swalWithBootstrapButtons.fire({
                title: 'Are you sure?',
                text: "You won't be able to revert this!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Yes, Do it!',
                cancelButtonText: 'No, cancel!',
                reverseButtons: true
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: "/delete-expenses",
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        type: "POST",
                        data: JSON.stringify({
                            'id': id
                        }),
                        contentType: "application/json",
                        success: function(response) {
                            window.location.reload();
                        },
                    });
                    swalWithBootstrapButtons.fire(
                        'Payment Deleted!',
                        'Your Payment has been Deleted.',
                        'success'
                    )
                } else if (
                    /* Read more about handling dismissals below */
                    result.dismiss === Swal.DismissReason.cancel
                ) {
                    swalWithBootstrapButtons.fire(
                        'Cancelled',
                        'Your imaginary file is safe  😇 ',
                        'error'
                    )
                }
            })

        });

        var ExpensesId;
        $(document).on('click', '.request', function() {
          ExpensesId = $(this).data('id');
         
        });
        $(document).on('click', '.RequestDelete', function() {
        var id = ExpensesId;
        var DeleteReason = $('#DeleteReason').val();

            const swalWithBootstrapButtons = Swal.mixin({
                customClass: {
                    confirmButton: 'btn btn-success',
                    cancelButton: 'btn btn-danger'
                },
                buttonsStyling: false
            })

            swalWithBootstrapButtons.fire({
                title: 'Are you sure?',
                text: "You won't be able to revert this!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Yes, Do it!',
                cancelButtonText: 'No, cancel!',
                reverseButtons: true
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: "/Request-delete-expenses",
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        type: "POST",
                        data: JSON.stringify({
                            'id': id,
                            'DeleteReason':DeleteReason
                        }),
                        contentType: "application/json",
                        success: function(response) {
                            window.location.reload();
                        },
                    });
                    swalWithBootstrapButtons.fire(
                        'Payment Deleted!',
                        'Your Payment has been Deleted.',
                        'success'
                    )
                } else if (
                    /* Read more about handling dismissals below */
                    result.dismiss === Swal.DismissReason.cancel
                ) {
                    swalWithBootstrapButtons.fire(
                        'Cancelled',
                        'Your imaginary file is safe  😇 ',
                        'error'
                    )
                }
            })

        });


      
        $(document).on('click', '.view', function() {
            var id = $(this).data('id');
            alert(id)

            var url = '/edit_sale_data?id=' + id;
            window.location.href = url;
        });


  var mortgageDataArray = [];

    let branchesName = @json($branchesName);


         var table = $('#itemTable').DataTable({
        dom: "<'row'<'col-sm-12 col-md-4'l><'col-sm-12 col-md-4'B><'col-sm-12 col-md-4'f>>" +
            "<'row'<'col-sm-12'tr>>" +
            "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
        buttons: [
             'excel', 'pdf', 'print'
        ],
        processing: true,
        info: true,
        responsive: true,
        lengthMenu: [
            [10, 25, 50, 100, 200, -1],
            [10, 25, 50, 100, 200, "All"]
        ]
    });

    



        function addToTable() {
    var itemDataId = $("#searchInput").attr("data-id");
    var badgstock_id = $("#searchInput").attr("data-badgstock_id");
    var each_cost = $("#searchInput").attr("data-each_cost");
    var imu_number = $("#searchInput").attr("data-imu_number");
    var type = $("#searchInput").attr("data-type");
    var itemId = $("#searchInput").attr("data-item_id");
    var price = $("#searchInput").attr("data-price");
    var name = $("#searchInput").attr("data-name");
    var product_quantity = $("#searchInput").attr("data-quantity");

  

    var branch_name = $("#branch option:selected").data("name");
    var branch = parseFloat($("#branch").val());
    var quantity = parseFloat($("#quantity").val());

       if (!quantity || quantity <= 0) {
        alert("Please enter a valid quantity.");
        return;
    }

    // Validation: Check if entered quantity exceeds sale stock
    if (parseInt(quantity) > product_quantity) {
        $(".alert").html(`
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                Entered quantity exceeds the available sale stock (${product_quantity})!
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
        `);
        return;
    }

    console.log(branch_name + " " + quantity);

    if (!branch_name || isNaN(quantity)) {
        return;
    }

    var rowData = {
        fromBranch: branchId,
        TOBranch: branch,
        itemId: itemId,
        type: type,
        each_cost: each_cost,
        price: price,
        badgstock_id: badgstock_id,
        imu_number: imu_number,
        itemDataId: itemDataId,
        quantity: quantity,
    };

    mortgageDataArray.push(rowData);
    console.log(mortgageDataArray);

    table.row.add([
        `${name} (${imu_number})`,
        branchesName,
        branch_name,
        quantity ?? '',
        "<button type='button' class='btn-remove-row btn btn-danger btn-sm'><i class='fa fa-trash'></i></button>"
    ]).draw();
}

// Trigger adding to the table on button click
$("#adToTable").click(function () {
    addToTable();
});


    $(document).on('click', '#sumbitData', function () {   
      
        
    var form_data = new FormData();
    form_data.append('_token', $('meta[name="csrf-token"]').attr('content')); 
      $.each(mortgageDataArray, function(i, rowData) {
      form_data.append('mortgageData[' + i + '][type]', rowData.type);
      form_data.append('mortgageData[' + i + '][fromBranch]', rowData.fromBranch);
      form_data.append('mortgageData[' + i + '][TOBranch]', rowData.TOBranch);
      form_data.append('mortgageData[' + i + '][each_cost]', rowData.each_cost);
      form_data.append('mortgageData[' + i + '][price]', rowData.price);
      form_data.append('mortgageData[' + i + '][imu_number]', rowData.imu_number);
      form_data.append('mortgageData[' + i + '][itemId]', rowData.itemId); 
      form_data.append('mortgageData[' + i + '][itemDataId]', rowData.itemDataId);
      form_data.append('mortgageData[' + i + '][quantity]', rowData.quantity);
      form_data.append('mortgageData[' + i + '][badgstock_id]', rowData.badgstock_id);
     
    });

   
    $.ajax({
      url: '{{ route('transfer_product') }}',
        method: 'POST',
        data: form_data,
        contentType: false,
        processData: false,
        success: function (response) {
        Swal.fire(
            'Good job!',
            response.message,
            'success'
        ).then((result) => {
            if (result.isConfirmed) {
                window.location.reload(); 
            }
        });
    },
    error: function (xhr, status, error) {
        console.error('Error:', error);
        Swal.fire(
            'Error!',
            'Something went wrong. Please try again later.',
            'error'
        );
    }
});
      



});









});



      
      </script>
@endsection
      <!-- main-panel ends -->
    <!-- HTML !-->