@extends('layouts.basic')
@section('styles')
<style>
    .check-box {
    height: 20px;
    width: 20px;
    margin-right: 10px;
    float: left;
    }
    .checkbox-label,
    .check-box {
    cursor: pointer;
    }
    .address-input {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    }
    .address-input textarea {
    flex-grow: 1;
    margin-right: 10px;
    }
    .delivery-input {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    }
    .delivery-input textarea {
    flex-grow: 1;
    margin-right: 10px;
    }
    .remove-address-btn {
    flex-shrink: 0;
    }
    .delete-address-btn {
    flex-shrink: 0;
    }
    .redC {
    color: red;
    }
    .label1,.label1.col-form-label{
    margin-bottom: 0.3rem;
    font-size: 15px;
    margin-top: 0.5rem;
    }
 </style>
@endsection
@section('content')
<div class="container-fluid">
   <div class="page-title">
      <div class="row">
         <div class="col-6">
            <h3>Customer List</h3>
         </div>
         <div class="col-6">
            <ol class="breadcrumb">
               <li class="breadcrumb-item"><a href="{{ route('home') }}"><i data-feather="home"></i></a></li>
               <li class="breadcrumb-item">Customers</li>
               <li class="breadcrumb-item active">Customer List</li>
            </ol>
         </div>
      </div>
   </div>
</div>
<section class="content content-card">
  <div class="container-fluid">
  <div class="row">
      <div class="col-12">
         <div class="card">
            <div class="card-body">
             
                    <div class="alert alert-success">
                       sddfdf
                    </div>
             
               <!-- <div>
                  <button class="btn btn-primary" data-bs-toggle="modal"
                      data-bs-target="#staticBackdrop">Add</button>
                  </div> -->
               <div class="row no-print align-items-center table-top-div">
                  <div class="col-lg-6">
                     <div>
                        <h6 class="table-headings">Customers List</h6>
                     </div>
                  </div>
                  @can(['customer-create'])
                      
                 
                  <div class="col-lg-6">
                     <div class="add-button">
                        <button class="btn btn-secondary add_modal" data-bs-toggle="modal"
                           data-bs-target="#staticBackdrop"><i class="fa fa-plus-circle"></i>&nbsp; Add</button>
                     </div>
                  </div>
                  @endcan
               </div>
               <br>
             <div class="table-responsive table-holder">
             <table id="customers_table" class="table table-bordered">
                  <thead>
                     <tr class="table table-secondary">
                        <th >S.NO</th>
                        <th >Customer Name</th>
                        <th >Mobile No</th>
                        <th >Email Id</th>
                        <th >Credit Limit</th>
                        <th >Contact Person Name</th>
                        <th >Contact Person Number</th>
                        <th >Action</th>
                     </tr>
                  </thead>
                  <tbody>
                     
                  </tbody>
               </table>
             </div>
            </div>
            <!-- Button trigger modal -->
            <!-- Modal -->
            <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false"
               tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
               <div class="modal-dialog modal-xl modal-dialog-centered">
                  <div class="modal-content">
                     <div class="modal-header content-padding1">
                        <h5 class="modal-title" id="staticBackdropLabel">Add Customer</h5>
                        <button type="button" class="btn-close" style="color:#000 !important;font-size:20px" data-bs-dismiss="modal"
                           aria-label="Close"></button>
                     </div>
                     <div class="modal-body">
                        <form id="create-form" method="POST">
                            @csrf
                           <div class="row">
                            <div class="col-lg-12">
                                <div class="row">
                                    <div class="col-lg-4">
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="form-group">
                                                    <label for="customer_name" class="label1">Customer name<span
                                                            class="redC">*</span></label>
                                                    <input type="text" name="customer_name" id="customer_name" 
                                                        class="form-control" placeholder="Enter customer name" required>
                                                    <span id="customer_name-error" class="error-msg text-danger"></span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="form-group">
                                                    <label for="mobile_no" class="label1">Mobile number<span class="redC">
                                                            *</span></label>
                                                    <input type="tel" name="mobile_no" id="mobile_no"  class="form-control"
                                                        placeholder="Enter mobile number" required>
                                                    <span id="mobile_no-error" class="error-msg"></span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="form-group">
                                                    <label for="email" class="label1">Email Address<span class="redC">
                                                            *</span></label>
                                                    <input type="email" name="email" id="email"  class="form-control"
                                                        placeholder="Enter email address" required>
                                                    <span id="email-error" class="error-msg"></span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="form-group">
                                                    <label for="contact_person" class="label1">Contact Person name<span class="redC">
                                                            *</span></label>
                                                    <input type="text" name="contact_person" id="contact_person" 
                                                        class="form-control" placeholder="Enter contact Person name" required>
                                                    <span id="contact_person-error" class="error-msg"></span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="form-group">
                                                    <label for="contact_person_number" class="label1">Contact Person Number<span
                                                            class="redC"> *</span></label>
                                                    <input type="text" name="contact_person_number" id="contact_person_number"
                                                         class="form-control" placeholder="Enter Contact Person Number" required>
                                                    <span id="contact_person_number-error" class="error-msg"></span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="form-group">
                                                    <label for="credit_limit" class="label1">Credit limit<span class="redC">
                                                            *</span></label>
                                                    <input type="number" name="credit_limit" id="credit_limit" 
                                                        class="form-control" placeholder="Enter Credit limit" min="0" required>
                                                    <span id="credit_limit-error" class="error-msg"></span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="form-group">
                                                    <label for="pan_number" class="label1">Pan Number<span class="redC">
                                                            *</span></label>
                                                    <input type="text" name="pan_number" id="pan_number" 
                                                        class="form-control" placeholder="Enter Pan Number" style="text-transform:uppercase"  required>
                                                    <span id="pan_number-error" class="error-msg"></span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="form-group">
                                                    <label for="customer_type" class="label1">Customer Type<span class="redC">
                                                            *</span></label>
                                                    <select name="customer_type" id="customer_type"  class="form-select" required  >
                                                        <option value=""> select customer type</option>
                                                        @foreach ($customer_type as $type)
                                                        <option value="{{ $type->id }}"> {{$type->name}}</option>
                                                        @endforeach
                                                       
                                                    </select>
                                                    <span id="customer_type-error" class="error-msg"></span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                        <div class="col-lg-8">
                                            <div class="row">
                                               <div class="col-lg-12">
                                                  <div id="billing_addresses" >
                                                     <div class="row">
                                                        <div class="col-md-6">
                                                           <label for="billing_address" class="label1">Billing Address<span
                                                              class="redC"> *</span></label>
                                                           <div class="row">
                                                              <div class="col-lg-2">
                                                                 <input class="form-check-input" type="checkbox" value="0" style="height: 20px;width: 20px;
                                                                    margin-top: 8px;
                                                                    float: right;">
                                                              </div>
                                                              <div class="col-lg-10" style="padding-left: 0px;">
                                                                 <textarea name="billing_address[0]" class="form-control  mb-2 billing_address" rows="5" placeholder="Enter billing address" required ></textarea>
                                                                 <span id="billing_address-error" class="error-msg"></span>
                                                              </div>
                                                           </div>
                                                        </div>
                                                        <div class="col-md-5">
                                                           <label for="gst_number" class="label1">Gst number<span class="redC">
                                                           *</span></label>
                                                           <input type="text" name="gst_number[0]" id="gst_number"  class="form-control mb-2 gst_number"
                                                              placeholder="Enter GST number " required>
                                                           <span id="gst_number-error" class="error-msg"></span>
                                                        </div>
                                                        <div class="col-md-1" >
                                                           <br>
                                                           <button type="button" id="add_billing_address_btn" class="btn btn-secondary  mt-3 add-billing"><i class="fa fa-plus"></i></button>
                                                        </div>
                                                     </div>
                                                  </div>
                                               </div>
                                            </div>
                                           
                                            <div class="row">
                                            <div class="col-lg-12" id="dell">
                                               <div class="row">
                                                  <div class="col">
                                                     <div id="delivery_addresses">       
                                                        <label for="delivery_address" class="label1"> Delivery Address<span
                                                           class="redC"> *</span></label>
                                                        <textarea name="delivery_address[0]" class="form-control mb-2 delivery_address" placeholder="Enter delivery address" required></textarea>
                                                        <span id="delivery_address-error" class="error-msg"></span>
                                                     </div>
                                                  </div>
                                                  <div class="col-md-1">
                                                     <br>
                                                     <br>
                                                     <button type="button" id="add_delivery_address_btn" class="btn btn-secondary  mt-3 add-delivery"><i
                                                        class="fa fa-plus"></i></button>
                                                  </div>
                                               </div>
                                            </div>
                                         </div>
                                          <br>
                                         <div class="row">
                                            <div class="col-md-4">
                                                <label style="font-size: 15px;">ITR filed for last two years:</label>
                                            </div>
                                            <div class="col">
                                                <div class="form-check form-check-inline">
                                                    <input class="form-check-input" type="radio" name="itr_status" id="itr_status1" value="yes">
                                                    <label class="form-check-label" for="itr_status1" >
                                                        YES
                                                    </label>
                                                  </div>
                                                  <div class="form-check form-check-inline">
                                                    <input class="form-check-input" type="radio" name="itr_status" id="itr_status2" value="no">
                                                    <label class="form-check-label" for="itr_status2">
                                                        NO
                                                    </label>
                                                  </div>
                                            </div>
                                            </div>
                                            <br>
                                            <div class="row">
                                                <div class="col-md-4">
                                                    <label style="font-size: 15px;">Turnover above 10 crores:</label>
                                                </div>
                                                <div class="col">
                                                    <div class="form-check form-check-inline">
                                                        <input class="form-check-input" type="radio" name="trunover_status" id="trunover_status1" value="yes">
                                                        <label class="form-check-label" for="trunover_status1">
                                                            YES
                                                        </label>
                                                    </div>
                                                    <div class="form-check form-check-inline">
                                                        <input class="form-check-input" type="radio" name="trunover_status" id="trunover_status2" value="no">
                                                        <label class="form-check-label" for="trunover_status2">
                                                            NO
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                        
                                         
                                      </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                        
                     <div class="modal-footer">
                        <button type="button" class="btn filter-clear" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary" id="add_btn">Save</button>
                     </div>
                    </form>
                  </div>
               </div>
            </div>


            <div class="modal fade" id="staticBackdrop1" data-bs-backdrop="static" data-bs-keyboard="false"
               tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
               <div class="modal-dialog modal-xl modal-dialog-centered">
                  <div class="modal-content">
                     <div class="modal-header content-padding1">
                        <br>
                        <h5 class="modal-title" id="staticBackdrop1Label">Edit Customer</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                           aria-label="Close"></button>
                     </div>
                     <div class="modal-body">
                        <form id="edit-form" >
                           @csrf
                           @method('PUT')
                           <div class="row">
                            <div class="col-lg-12">
                                <div class="row">
                                    <div class="col-lg-4">
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="form-group">
                                                    <label for="customer_name1" class="label1">Customer name<span
                                                            class="redC">*</span></label>
                                                    <input type="text" name="customer_name1" id="customer_name1" required
                                                        class="form-control" placeholder="Enter customer name">
                                                        <input type="text" name="id" id="id"hidden>
                                                    <span id="customer_name1-error" class="error-msg text-danger"></span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="form-group">
                                                    <label for="mobile_no1" class="label1">Mobile number<span class="redC">
                                                            *</span></label>
                                                    <input type="tel" name="mobile_no1" id="mobile_no1" required class="form-control"
                                                        placeholder="Enter mobile number">
                                                    <span id="mobile_no1-error" class="error-msg"></span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="form-group">
                                                    <label for="email1" class="label1">Email Address<span class="redC">
                                                            *</span></label>
                                                    <input type="email1" name="email1" id="email1" required class="form-control"
                                                        placeholder="Enter email address">
                                                    <span id="email1-error" class="error-msg"></span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="form-group">
                                                    <label for="contact_person1" class="label1">Contact Person name<span class="redC">
                                                            *</span></label>
                                                    <input type="text" name="contact_person1" id="contact_person1" required
                                                        class="form-control" placeholder="Enter contact Person name">
                                                    <span id="contact_person1-error" class="error-msg"></span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="form-group">
                                                    <label for="contact_person_number1" class="label1">Contact Person Number<span
                                                            class="redC"> *</span></label>
                                                    <input type="text" name="contact_person_number1" id="contact_person_number1"
                                                        required class="form-control" placeholder="Enter Contact Person Number">
                                                    <span id="contact_person_number1-error" class="error-msg"></span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="form-group">
                                                    <label for="credit_limit1" class="label1">Credit limit<span class="redC">
                                                            *</span></label>
                                                    <input type="number" name="credit_limit1" id="credit_limit1" required
                                                        class="form-control" placeholder="Enter credit limit" min="0">
                                                    <span id="credit_limit1-error" class="error-msg"></span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="form-group">
                                                    <label for="pan_number1" class="label1">Pan Number<span class="redC">
                                                            *</span></label>
                                                    <input type="text" name="pan_number1" id="pan_number1" 
                                                        class="form-control" placeholder="Enter Pan Number"  required>
                                                    <span id="pan_number1-error" class="error-msg"></span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="form-group">
                                                    <label for="customer_type1" class="label1">Customer Type<span class="redC">
                                                            *</span></label>
                                                    <select name="customer_type1" id="customer_type1"  class="form-select" required  >
                                                        <option value=""> select customer type</option>
                                                        @foreach ($customer_type as $type)
                                                        <option value="{{ $type->id }}"> {{$type->name}}</option>
                                                        @endforeach
                                                       
                                                    </select>
                                                    <span id="customer_type1-error" class="error-msg"></span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-8">

                                        <div class="container">
                                            <h3>TURNOVER IN FY 2021-22 - INR ABOVE 10 CRORES:</h3>
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" value="YES" id="above-10-crores-yes">
                                                <label class="form-check-label" for="above-10-crores-yes">
                                                    YES
                                                </label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" value="NO" id="above-10-crores-no">
                                                <label class="form-check-label" for="above-10-crores-no">
                                                    NO
                                                </label>
                                            </div>
                                        </div>

                                        <div class="row">
                                           <div class="col-lg-12">
                                              <div id="billing_addresses1" >
                                                 <div class="row">
                                                    <div class="col-md-6">
                                                       <label for="billing_address1" class="label1">Billing Address<span
                                                          class="redC"> *</span></label>
                                                       <div class="row">
                                                          <div class="col-lg-2">
                                                             <input class="form-check-input" type="checkbox" value="0" style="height: 20px;width: 20px;
                                                                margin-top: 8px;
                                                                float: right;">
                                                          </div>
                                                          <div class="col-lg-10" style="padding-left: 0px;">
                                                             <textarea name="billing_address1[0]" class="form-control  mb-2 billing_address1" rows="5" placeholder="Enter billing address" required ></textarea>
                                                             <span id="billing_address1-error" class="error-msg"></span>
                                                          </div>
                                                       </div>
                                                    </div>
                                                    <div class="col-md-5">
                                                       <label for="gst_number1" class="label1">Gst number<span class="redC">
                                                       *</span></label>
                                                       <input type="text" name="gst_number1[0]" id="gst_number1"  class="form-control mb-2 gst_number1"
                                                          placeholder="Enter GST number " required>
                                                       <span id="gst_number1-error" class="error-msg"></span>
                                                    </div>
                                                    <div class="col-md-1" >
                                                       <br>
                                                       <button type="button" id="add_billing_address_btn1" class="btn btn-secondary  mt-3 add-billing1"><i class="fa fa-plus"></i></button>
                                                    </div>
                                                 </div>
                                              </div>
                                           </div>
                                        </div>
                                        <br>
                                       
                                    <div class="row">
                                        <div class="col-lg-12" id="dell1">
                                           <div class="row">
                                              <div class="col">
                                                 <div id="delivery_addresses1">       
                                                    <label for="delivery_address1" class="label1"> Delivery Address<span
                                                       class="redC"> *</span></label>
                                                    <textarea name="delivery_address1[0]" class="form-control mb-2 delivery_address1" placeholder="Enter delivery address" required></textarea>
                                                    <span id="delivery_address1-error" class="error-msg"></span>
                                                 </div>
                                              </div>
                                              <div class="col-md-1">
                                                 <br>
                                                 <br>
                                                 <button type="button" id="add1_delivery_address_btn" class="btn btn-secondary  mt-3 add-delivery1"><i
                                                    class="fa fa-plus"></i></button>
                                              </div>
                                           </div>
                                        </div>
                                     </div>


                                </div>
                                </div>
                            </div>
                        </div>
                        </form>
                     </div>
                     <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary" id="update_btn" >Update</button>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
  </div>
</section>
@endsection
@section('script')
<!-- Include jQuery library -->

<script>





// Initialize an empty array to store the values


$.validator.addMethod("validGSTFormat", function (value, element) {
        return this.optional(element) || /^\d{2}[A-Z]{5}\d{4}[A-Z]{1}[A-Z\d]{1}[Z]{1}[A-Z\d]{1}$/
.test(value);
      }, "Invalid GST number format");

$.validator.addMethod("validpan", function (value, element) {
        return this.optional(element) || /^[A-Z]{5}[0-9]{4}[A-Z]{1}$/
.test(value);
      }, "Invalid Pan number format");



// $.validator.addMethod("uniqueGSTFormat", function (value, element) {
//     var values = [];
//     $('.gst_number').each(function() {
//         values.push($(this).val());
//     });

//     // Send the value to a Laravel route using AJAX
//     var isValid = true;

//     $.ajaxSetup({
//         headers: {
//             'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
//         }
//     });

//     $.ajax({
//         url: '{{ route('customer.unique_customer_gst') }}',
//         type: 'POST',
//         data: {
//             gst_number: values
//         },
//         async: false, // Ensure synchronous request to return isValid
//         success: function(data) {

//             if (data.unique == false) {

//                 isValid = false;
//                 iziToast.error({
//                     title: 'Error',
//                     message: data.message,
//                     position: 'topRight'
//                 });
                
//             } else {
//                 isValid = true;
//             }
//         }
//     });

//     return true;
// }, "GST number already exits");


$('#create-form').validate({
    rules: {
        customer_name: 'required',
        mobile_no: {
            required: true,
            digits: true,
            minlength: 10
        },
        email: {
            required: true,
            email: true,
            remote: {
                    url: "{{ route('customer.unique_customer_email') }}",
                    type: "post",
                    dataType: "json", // Updated to expect JSON response
                    data: {
                        email: function() {
                            return $("#email").val();
                        }
                    },
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(data) {
                        if (data.unique) {
                            // Email is unique, clear error message
                            $("#email-error").text("").css('color', '');
                        } else {
                            // Email already exists, display error message
                            $("#email-error").text("Email address already exists.").css('color', 'red');
                        }
                    },
                    error: function(xhr, status, error) {
                        // Handle other error cases if needed
                        $("#email-error").text("").css('color', '');
                    }
                }

        },
        credit_limit: {
            required: true,
            min: 0
        },
        contact_person: 'required',
        contact_person_number: {
            required: true,
            digits: true,
            minlength: 10
        },
        pan_number: {
            required: true,
            validpan: true,
        },
        'gst_number[0]': {
                required: true,
                validGSTFormat:true,
                // uniqueGSTFormat: true
               
            },
            'billing_address[]': 'required',
            'delivery_address[]': 'required'
    },
    messages: {
        customer_name: "Please enter a customer name.",
        email: {
            required: "Please enter an email address.",
            email: "Please enter a valid email address.",
        },
        mobile_no: {
            required: "Please enter mobile number.",
            digits: "Please enter a valid mobile number.",
            minlength: "Please enter a valid mobile number in 10 digits.",
        },
        contact_person_number: {
            required: "Please enter contact person mobile number.",
            digits: "Please enter a valid contact person mobile number.",
            minlength: "Please enter a valid contact person mobile number in 10 digits.",
        },
        credit_limit: {
            required: "Please enter credit limit.",
            min: "Please enter min 0.",
        },
    },
    submitHandler: function (form) {     
    // Form is valid, proceed with form submission
    var formData = $(form).serialize();

    // Clear existing error messages
    $(".text-danger").remove();

    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    $.ajax({
        url: "{{ route('customer.store') }}",
        type: "POST",
        data: formData,
        dataType: "json",
        success: function (response) {
            iziToast.success({
                title: 'Success',
                message: response.message,
                position: 'topRight'
            });
            // Reload the page after 3 seconds
            setTimeout(function () {
                location.reload();
            }, 3000); // 3000 milliseconds = 3 seconds
            $('#staticBackdrop').modal('hide');
            document.getElementById("create-form").reset();
        },
        error: function (xhr, status, error) {
            // Handle AJAX errors here
            console.log("AJAX Error:", xhr, status, error);
            // You can display an error message to the user if needed
        },
    });
},

});











</script>

<script>


   $(document).on('click', '#update_btn', function(e) {
       e.preventDefault(); // Prevent default form submission

       var recordId = $("#id").val();
       // Serialize the form data
       var formData = $('#edit-form').serialize();

       // Make an AJAX call
       $.ajaxSetup({
           headers: {
               'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
           }
       });

       $.ajax({
           url: '{{ route('product_type.update', '') }}/' + recordId,
           type: 'PUT',
           data: formData,
           success: function(response) {

               iziToast.success({
                   title: 'Success',
                   message: response.message,
                   position: 'topRight'
               });
               // Reload the page after 3 seconds
               setTimeout(function() {
                     location.reload();
                  }, 3000); // 3000 milliseconds = 3 seconds
               $('#staticBackdrop1').modal('hide');
               document.getElementById("#edit-form").reset();

           },

           error: function(xhr) {
               // $('#staticBackdrop').modal('show');
               if (xhr.responseJSON && xhr.responseJSON.errors) {
                   var errors = xhr.responseJSON.errors;
                   var errorMessages = Object.values(errors).join('<br>');
                   iziToast.error({
                       title: 'Error',
                       message: errorMessages,
                       position: 'topRight'
                   });
               } else {
                   iziToast.error({
                       title: 'Error',
                       message: xhr.responseText,
                       position: 'topRight'
                   });
               }
           }
       });
   });





   $(document).on('click', '.btn-edit', function() {
       // Open the modal
       var recordId = $(this).data('id');
       $.ajax({
           url: '{{ route('customer.edit', 'recordId') }}',
           type: 'GET',
           data: {
               id: recordId
           },
           success: function(response) {
               console.log(response);

               $('#customer_name1').val(response.data.customer_name);
               $('#mobile_no1').val(response.data.mobile);
               $('#email1').val(response.data.email);
               $('#contact_person1').val(response.data.contact_person);
               $('#contact_person_number1').val(response.data.contact_person_number);
               $('#credit_limit1').val(response.data.credit_limit);
            //    $('#contact_person_number1').val(response.data.contact_person_number);
               $('#id').val(response.data.id);

                var billingAddresses = data.customer.billing_address || [];

                $.each(billingAddresses, function(index, billingAddress) {
    // Create a new HTML element for the address input.
    var addressInput = `
      <div class="address-input1" style="display:block">
        <div class="row">
          <div class="col-md-6">
            <div class="row">
              <div class="col-lg-2">
                <input class="form-check-input" type="checkbox" value="${index}" style="  height: 20px;width: 20px;margin-top: 8px;float: right;">
              </div>
              <div class="col-lg-10" style="padding-left:0px">
                <textarea name="billing_address1[${index}]" class="form-control billing_address1"  rows="5" placeholder="Enter billing address" required>${billingAddress}</textarea>
                <span id="billing_address1-error" class="error-msg"></span>
              </div>
            </div>
          </div>
          <div class="col-md-5">
            <input type="text" name="gst_number1[${gstCount}]"  required class="form-control gst_number1" placeholder="Enter GST number" value="${gstNumbers[index] || ''}">
          </div>
          <div class="col-md-1">
            <button type="button" class="1remove-address-btn btn" style="background:#3f3f3f;color:#fff"><i class="fa fa-trash"></i></button>
          </div>
        </div>
      </div>
      <br>
    `;

    // Append the HTML element to the `#billing_addresses1` element.
    $('#billing_addresses1').append(addressInput);
  });
             


               

           },
           error: function(xhr) {
               console.log(xhr.responseText);
           }
       });
       // $('#editModal').modal('show');
   });

   $(document).on('click', '.table-del-btn', function() {
     var recordId = $(this).data('id');

       // Show a confirmation prompt using iziToast
       iziToast.question({
           timeout: false,
           close: false,
           overlay: true,
           displayMode: 'once',
           id: 'confirm',
           zindex: 999,
           title: 'Delete Confirmation',
           message: 'Are you sure you want to delete this record?',
           position: 'center',
           buttons: [
               ['<button><b>Yes</b></button>', function(instance, toast) {
                   // Delete the record
                   deleteRecord(recordId);
                   instance.hide({ transitionOut: 'fadeOut' }, toast, 'button');
                   location.reload();
               }, true],
               ['<button>No</button>', function(instance, toast) {
                   instance.hide({ transitionOut: 'fadeOut' }, toast, 'button');
               }]
           ]
       });
   });

   function deleteRecord(recordId) {
       // Ajax call to delete the record
       $.ajaxSetup({
                       headers: {
                           'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                       }
                   });
       $.ajax({
           url: '{{ route("product_type.destroy", ":id") }}'.replace(':id', recordId),
           method: 'DELETE',
           data: { id: recordId },
           success: function(response) {
               // Handle success response
               console.log("Record deleted successfully");


               iziToast.success({
                   title: 'Success',
                   message: 'Record deleted successfully',
                   position: 'topRight'
               });
               // Reload the page after 3 seconds
               setTimeout(function() {
                     location.reload();
                  }, 3000); // 3000 milliseconds = 3 seconds
           },
           error: function(xhr, status, error) {
               // Handle error response
               console.log(error);

               // Show error message using iziToast
               iziToast.error({
                   title: 'Error',
                   message: 'Failed to delete the record',
                   position: 'topRight'
               });
           }
       });
   }



   $(document).ready(function() {
        $('#customers_table').DataTable({
        processing: true,
        serverSide: true,
        responsive: true,
        ordering: false,
        ajax: "{{ route('customer.index') }}",
        columns: [
            {
                        data: null,
                        render: function (data, type, row, meta) {
                            // Render serial number
                            return meta.row + meta.settings._iDisplayStart + 1;
                        },
                        name: 's.no' // You can change this name to 's.no' or anything you prefer
                    },
        
            
                { data: 'customer_name', name: 'customer_name', title: 'Customer Name' },
                { data: 'mobile', name: 'mobile', title: 'Mobile No' },
                { data: 'email', name: 'email', title: 'Email Id' },
                { data: 'credit_limit', name: 'credit_limit', title: 'Credit Limit' },
                { data: 'contact_person', name: 'contact_person', title: 'Contact Person Name' },
                { data: 'contact_person_number', name: 'contact_person_number', title: 'Contact Person Number' },
                { data: 'action', name: 'action', title: 'Action', orderable: false, searchable: false }

        ]
        });
   });

   
</script>




<SCRipt>
      var rowCount =1;
      var gstCount =1;

    $('body').on('click', '#add_billing_address_btn', function() {
     
       var billingAddressInput =
           `
           <div class="address-input" style="display:block">
               <div class="row">
               <div class="col-md-6">
               <div class="row">
               <div class="col-lg-2">
               <input class="form-check-input" type="checkbox" value="${rowCount}" style="  height: 20px;width: 20px;margin-top: 8px;float: right;">
               </div>
               <div class="col-lg-10" style="padding-left:0px">
               <textarea name="billing_address[${rowCount}]" class="form-control billing_address"  rows="5" placeholder="Enter billing address" required></textarea>
               <span id="billing_address-error" class="error-msg"></span>
               </div>
               </div>
               </div>
               <div class="col-md-5">
               <input type="text" name="gst_number[${gstCount}]"  required class="form-control gst_number" placeholder="Enter GST number">
               </div>
               <div class="col-md-1">
               <button type="button" class="remove-address-btn btn" style="background:#3f3f3f;color:#fff"><i class="fa fa-trash"></i></button>
               </div>
               </div>
           </div>
  `;
      rowCount++;
      gstCount++;

       $('#billing_addresses').append(billingAddressInput);
   });

   var row = 1;
   $('body').on('click', '#add_delivery_address_btn', function() {
      
       var deliveryAddressInput =
        `
        <div class="row">
            <div class="col">
                <div id="delivery_addresses">       
                <label for="delivery_address" class="label1"> Delivery Address<span
                    class="redC"> *</span></label>
                <textarea name="delivery_address[${row}]" class="form-control mb-2 delivery_address" placeholder="Enter delivery address" required></textarea>
                <span id="delivery_address-error" class="error-msg"></span>
                </div>
            </div>
            <div class="col-md-1">
                <br>
                <br>
                <button type="button" class="remove-delladdress-btn btn" style="background:#3f3f3f;color:#fff">
                         <i class="fa fa-trash"></i>
                </button>
            </div>
        </div>
        `;
        row++;
       $('#dell').append(deliveryAddressInput);
    


   });
   $(document).on('click', '.remove-address-btn', function() {
       $(this).closest('.address-input').remove();
   });
   $(document).on('click', '.remove-delladdress-btn', function() {
       $(this).closest('.row').remove();
   });
</SCRipt>

{{-- <script>
    $(document).ready(function () {
        // Add billing address field and Remove button  
        $("#add_billing_address_btn").click(function () {
            var billingAddressFieldClone = $("#billing_addresses .row:first").clone();
            billingAddressFieldClone.find("textarea").val(""); // Clear the cloned textarea value
            var removeBillingButtonClone = $("<button>").addClass("btn btn-dark mt-3 remove-billing").html('<i class="fa fa-minus"></i>');
            
            // Append cloned "Add" button and "Remove" button
            billingAddressFieldClone.find("#add_billing_address_btn").after(removeBillingButtonClone);
            billingAddressFieldClone.find("#add_billing_address_btn").hide();
            $("#billing_addresses").append(billingAddressFieldClone);

        });
        // Add delivery address field and Remove button
            $("#add_delivery_address_btn").click(function () {
            var deliveryAddressFieldClone = $("#dell").clone();
            deliveryAddressFieldClone.find("textarea").val(""); // Clear the cloned textarea value
            var removeDeliveryButtonClone = $("<button>").addClass("btn btn-dark mt-3 remove-delivery").html('<i class="fa fa-minus"></i>');
            
            // Append cloned "Remove" button to the cloned container
            deliveryAddressFieldClone.find(".col-md-1").append(removeDeliveryButtonClone);
            deliveryAddressFieldClone.find("#add_delivery_address_btn").remove(); // Remove the "Add" button in the clone
            
            // Append the cloned container to the same parent
            $("#dell").after(deliveryAddressFieldClone);
        });

        // Remove billing address field
        $(document).on("click", ".remove-billing", function () {
            $(this).closest(".row").remove();
        });

        // Remove delivery address field
        $(document).on("click", ".remove-delivery", function () {
            $(this).closest(".row").remove();
            
        });
    });
</script> --}}
<SCRipt>
    var rowCount =1;
    var gstCount =1;

  $('body').on('click', '#add_billing_address_btn1', function() {
   
     var billingAddressInput =
         `
         <div class="address-input1" style="display:block">
             <div class="row">
             <div class="col-md-6">
             <div class="row">
             <div class="col-lg-2">
             <input class="form-check-input" type="checkbox" value="${rowCount}" style="  height: 20px;width: 20px;margin-top: 8px;float: right;">
             </div>
             <div class="col-lg-10" style="padding-left:0px">
             <textarea name="billing_address1[${rowCount}]" class="form-control billing_address1"  rows="5" placeholder="Enter billing address" required></textarea>
             <span id="billing_address1-error" class="error-msg"></span>
             </div>
             </div>
             </div>
             <div class="col-md-5">
             <input type="text" name="gst_number1[${gstCount}]"  required class="form-control gst_number1" placeholder="Enter GST number">
             </div>
             <div class="col-md-1">
             <button type="button" class="1remove-address-btn btn" style="background:#3f3f3f;color:#fff"><i class="fa fa-trash"></i></button>
             </div>
             </div>
         </div>
         <br>
`;
    rowCount++;
    gstCount++;

     $('#billing_addresses1').append(billingAddressInput);
 });

 var row = 1;
 $('body').on('click', '#add1_delivery_address_btn', function() {
    
     var deliveryAddressInput =
      `
      <div class="row">
          <div class="col">
              <div id="delivery_addresses1">       
              <label for="delivery_address1" class="label1"> Delivery Address<span
                  class="redC"> *</span></label>
              <textarea name="delivery_address1[${row}]" class="form-control mb-2 delivery_address1" placeholder="Enter delivery address" required></textarea>
              <span id="delivery_address1-error" class="error-msg"></span>
              </div>
          </div>
          <div class="col-md-1">
              <br>
              <br>
              <button type="button" class="remove1-delladdress-btn btn" style="background:#3f3f3f;color:#fff">
                       <i class="fa fa-trash"></i>
              </button>
          </div>
      </div>
      `;
      row++;
     $('#dell1').append(deliveryAddressInput);
  


 });
 $(document).on('click', '.1remove-address-btn', function() {
     $(this).closest('.address-input1').remove();
 });
 $(document).on('click', '.remove1-delladdress-btn', function() {
     $(this).closest('.row').remove();
 });
</SCRipt>

@endsection