@extends('layouts.app')

@section('title', 'Create Bundles')

@section('content')

<div class="container-fluid">
<form name="add_item" id="add_item" >
        {{ csrf_field() }}
        <input type="hidden"name="order_number[]" id="order_number" value="0">
<meta charset="utf-8">
    <meta name="csrf-token" content="content">
    <meta name="csrf-token" content="{{ csrf_token() }}">
 
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <!-- <link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css"> -->
    <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> -->

    <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> -->
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.1/bootstrap3-typeahead.min.js"></script> -->
    <script src="js/jquery.dataTables.min.js" type="text/javascript"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/jquery.validate.min.js"></script> 

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <!-- Page Heading -->
    <!-- Page Heading -->
    <div class="d-sm-flex align-items-center justify-content-between mb-4">
        <h1 class="h3 mb-0 text-gray-800">Create Bundles</h1>
        <div class="row">
        <div class="col-md-6">
             <!-- <a  class="btn btn-sm btn-primary" id ="new" name="new"
             onclick="getElementById('serialID').value=Math.floor(Math.random()*10000)">
            <i class="fas fa-plus"></i> New</a> -->

            <!-- <a href="{{route('serailer.getNextOrderNumber') }}" class="btn btn-sm btn-primary" id ="btn_New" name="new">
            <i class="fas fa-plus"></i> New</a> -->
            <a  class="btn btn-sm btn-primary" id ="btn_New" name="new">
            <i class="fas fa-plus"></i> New</a>

        </div> 
        <div class="col-md-4">
                    <a href="{{route('serailer.index')}}" class="btn btn-sm btn-info">
                        <i class="fas fa-arrow-left fa-sm text-white-50"></i>Back</a>
                </div>

        </div> 
      
       
        
    </div>

    {{-- Alert Messages --}}
    @include('common.alert')
    {{-- Page Content --}}
  
    <!-- DataTales Example -->
    
<!-- --------------------------------------------------------------------- -->
<div class="card shadow mb-5" >
     <div class="card-header  py-0">
            <h6 class="m-0 font-weight-bold text-primary">Item Bundle Details</h6>
            
       
        <div class="card-body">
        <!-- <form method="POST" action="{{route('bundler.storebundleReference')}}" > -->
       
        <div class="col-md-4">
                        <span style="color:red;">*</span>Bundle Serial Number</label>
                        <input 
                            type="text" 
                            class="form-control form-control-user @error('Refno') is-invalid @enderror" 
                            id="Refno"
                            placeholder="Reference Number" 
                            name="Refno[]" 
                            value="" readonly>

                        @error('refno')
                            <span class="text-danger">{{$message}}</span>
                        @enderror
                       <!-- -------------------- -->
                        <span style="color:red;">*</span>Description</label>
                        <input 
                            type="text" 
                            class="form-control form-control-user @error('rtype') is-invalid @enderror" 
                            id="rtype"
                            placeholder="description" 
                            name="rtype[]" 
                            value="description">

                        @error('rtype')
                            <span class="text-danger">{{$message}}</span>
                        @enderror
<!-- -------------------------------------------------- -->
<span style="color:red;">*</span>groupID</label>
                        <input 
                            type="text" 
                            class="form-control form-control-user @error('groupid') is-invalid @enderror" 
                            id="groupid"
                            placeholder="Groupid" 
                            name="groupid[]" 
                            value="" readonly>

                        @error('groupid')
                            <span class="text-danger">{{$message}}</span>
                        @enderror



</div>
                

        </div>  
      <div class="table-responsive">
      
      </div>
      </div> 
      
</div>

<!-- -------------------------------------------------------  -->

    <div class="card shadow mb-5" >
     <div class="card-header  py-0">
            <h6 class="m-0 font-weight-bold text-primary">Search for Products</h6>
            
        </div>
        <div class="card-body">
        
    <div class="row">
        <div class="col-md-4 py-2">
                            <span style="color:red;">*</span>Category</label>
                            <select class="form-control form-control-user @error('category') is-invalid @enderror" name="categ" id="categ">
                            <option value="0" selected disabled>Select Category</option>
                            @foreach ($categories as $rows) 
                                <option value="{{$rows->id}}">{{$rows->category}}</option>
                            @endforeach
                        </select>
                            </div>

                            <div class="col-md-8 py-0">   
                            <!-- //Products -->          
                            <label for="Type">Products:</label>
                                 <select id="goods" name="goods" class="form-control ">
                                </select>

                                @error('item')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
  
                                </div>               
        </div>

      <div class="table-responsive">
      
      </div>
     
      </div> 
      
</div>

<!-- --------------------------------------------- -->


<div class="card shadow mb-5" >
     <div class="card-header  py-0">
            <h6 class="m-0 font-weight-bold text-primary">List Items Details</h6>
            
        </div>
        <div class="card-body">
      
      <div class="table-responsive">
      <table class="table table-bordered" id="bundletable" width="100%"    style="background-color:#ddd;" >
      <thead class="table-dark">
                    
 

<tr>
                            <th style='width:10%; display:none;'>PID</th>
                            <th style='width:10%; display:none;'>SerialNo</th>
                            <th style='width:30%;'>Item</th>
                            <th style='width:30%;'>Ram</th>
                            <th style='width:10%;'>Generation</th>
                            <th style='width:10%;'>Combination</th>
                            <th style='width:10%;'>PrimaryDrive</th>
                            <th style='width:10%;'>Secondary_Drive</th>
                            <th style='width:10%;'>Skin_Type</th>
                            <th style='width:10%; display:none;' >Item_Type</th>
                            <th style='width:10%;'>Action</th>
                            <!-- <th><button type="button" name="add" class="btn btn-success btn-sm add" id="b"><span class="glyphicon glyphicon-upload"></span></button></th> -->
                       
                        </tr>
                       <!-- <tr>
                       <td class="custom-tbl"><input class='form-control input-sm'style='width:100%;' type="text" value="1" id="pid" name="pid[]" readonly required></td>

                       </tr> -->
                    </thead>

                    <tbody id="dynamic_field">

                    </tbody>

                    <tfoot>
                    <thead class="table-dark">
                    
 

                    <tr>
                                                <th style='width:10%; display:none;'>PID</th>
                                                <th style='width:10%; display:none;'>SerialNo</th>
                                                <th style='width:30%;'>Item</th>
                                                <th style='width:30%;'>Ram</th>
                                                <th style='width:10%;'>Generation</th>
                                                <th style='width:10%;'>Combination</th>
                                                <th style='width:10%;'>PrimaryDrive</th>
                                                <th style='width:10%;'>Secondary_Drive</th>
                                                <th style='width:10%;'>Skin_Type</th>
                                                <th style='width:10%; display:none;' >Item_Type</th>
                                                <th style='width:10%;'>Action</th>
                                                <!-- <th><button type="button" name="add" class="btn btn-success btn-sm add" id="b"><span class="glyphicon glyphicon-upload"></span></button></th> -->
                                           
                                            </tr>
                                           <!-- <tr>
                                           <td class="custom-tbl"><input class='form-control input-sm'style='width:100%;' type="text" value="1" id="pid" name="pid[]" readonly required></td>
                    
                                           </tr> -->
                                        </thead>
                    </tfoot>

</table>
      </div>
      <!-- ------------------------------ -->
       {{-- Save Button --}}
                
                <a  class="btn btn-success btn-user btn-block" id ="btn_Create" name="Create">
                <i class="fa fa-briefcase" aria-hidden="true"></i> Create Bundle</a>
      </div> 
     
      <div>
      
          
</div>
  
</div>
</form>     
</div>



@endsection

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/flatpickr">
        
    </script>

<script>
    flatpickr("input[type=datetime-local]");
</script>
    @endpush

    @section('scripts')
    <script>
        $(document).ready(function () {
  
            /*------------------------------------------
            --------------------------------------------
           Product type dropdown
            --------------------------------------------
            --------------------------------------------*/
            $('#categ').on('change', function () {
                var serialno=$("#Refno").val();
                if(serialno == ('')){
                    alert ("Serial Number err,empty!");
                    return;
                }
                var categoryid = this.value;
              
                $("#goods").html('');
                $.ajax({
                    
                 
                    url: "{{ url('bundler/getproductsforBundles/')}}",
                  type: "POST",
                   dataType: 'json',
                //    url: "{{url('routes/fetchState')}}",
                //    const url = "{{ url('routes/edit-route/{id}') }}"
                    // url: '/fetchState/',
                  //  url: "{{url('fetchState')}}",
                    data: {
                        categoryid: categoryid,
                        _token: '{{csrf_token()}}'
                    },
                   
                    success: function (result) {
                         if(result != null){
           $('#goods').html('<option value="">-- Select Product --</option>');
                        $.each(result.products, function (key, value) {
                            $("#goods").append('<option value="' + value
                                .id + '">' + value.item + '</option>');
                        });

             }

            
                        
                    }
                });
            });
        });

            </script>
<!-- -------------------------------------------------------------------- -->
<script >

    $(document).on('click', '#btn_New', function(event) {
        event.preventDefault();
        /* Act on the event */
        
        $.ajax({

            type:'POST',
         
             url:"{{ url('bundler/getNextBundleNumber/') }}", //Make sure your URL is correct
            dataType: 'text', //Make sure your returning data type dffine as json
         //  traditional: true,
            async: false,
            data: {
                       // order_by: orderBy,
                     _token: '{{csrf_token()}}'
                 // _token: $('meta[name="csrf-token"]').attr('content') 
                    },
            success:function(data){
              //  console.log(data); //Please share cosnole data
                if(data!= null) //Check the data.msg isset?
                {
                    // $("#msg").html(response.msg); //replace html by data.msg
                 $('#Refno').val(data);
                
                  //  document.getElementById("display").innerHTML = response; 
                //  $('tbody').html(data);
                }

            }
        });

        addMessage();
      
    });

    var addMessage = function(){
  
        $.ajax({
           
           //             headers: {
           //     'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
           //   },
                   //var refno = $("#serialID").val(),
                     //     var rtype = 'bundle',
                       type: "POST",
                      // url: "save_data.php",
                      url:"{{ url('bundler/storebundleReference/') }}",
                      //contentType: "application/json; charset=utf-8",
                      dataType: "text",
                   // traditional: true,
                     async: false,
                       data: {
                         
                   // _token: $('meta[name="csrf-token"]').attr('content') ,
                           'Refno' : $("#Refno").val(),
                           'rtype' : "bdl",
                     _token: '{{csrf_token()}}'
                     
                   },
                     
                       success: function (data) {
                           alert("This Reference Number has been saved !");
                       }
           
                   });
                  


 
        
       
        
    }
    
 </script>

<script>
$(document).ready(function(){
    href="{{route('productlist.createinventory')}}"
 $('#goods').on('change', function(){
    var id = this.value;
    var dateObj = new Date();
      //  var form_data = $(this).serialize();
var month = (dateObj.getMonth() + 1).toString().padStart(2, "0");      
var day = dateObj.getDate().toString().padStart(2, "0");
var year = dateObj.getFullYear().toString().padStart(4, "0");
var hours = dateObj.getHours().toString().padStart(2, "0");
var minutes = dateObj.getMinutes().toString().padStart(2, "0");
var seconds = dateObj.getSeconds().toString().padStart(2, "0");

var dateStr = year +"-" + month + "-" + day +" "+ hours + ":"+ minutes +":"+ seconds;
var grpid=year + month + day+  seconds;

 
 $(document).on('click', '.remove', function(){
  $(this).closest('tr').remove();
 });
 
//  $('#insert_form').on('submit', function(event){
//   event.preventDefault();
//   var error = '';
//   $('.item_name').each(function(){
//    var count = 1;
//    if($(this).val() == '')
//    {
//     error += "<p>Enter Item Name at "+count+" Row</p>";
//     return false;
//    }
//    count = count + 1;
//   });
  
//   $('.item_quantity').each(function(){
//    var count = 1;
//    if($(this).val() == '')
//    {
//     error += "<p>Enter Item Quantity at "+count+" Row</p>";
//     return false;
//    }
//    count = count + 1;
//   });
  
//   $('.item_unit').each(function(){
//    var count = 1;
//    if($(this).val() == '')
//    {
//     error += "<p>Select Unit at "+count+" Row</p>";
//     return false;
//    }
//    count = count + 1;
//   });
// });
 // var form_data = $(this).serialize();
 $.ajax({
          
    

          url: "{{ url('productlist/fetchproduct/') }}",
        type: "POST",
         dataType: 'json',
      //    url: "{{url('routes/fetchState')}}",
      //    const url = "{{ url('routes/edit-route/{id}') }}"
          // url: '/fetchState/',
        //  url: "{{url('fetchState')}}",
          data: {
              id: id,
              _token: '{{csrf_token()}}'
          },
         
          success: function (result) {
              if(result != null){
             $.each(result.products, function (key, value) {
                var values_ID=0;
          var values_ID=value.id;
        var values_ITEM=value.item;
        var values_TYPE=value.type;

    if(values_TYPE==1){
        var newgrid=grpid;
          $("#groupid").val(newgrid);
    }

    var figroupid= $("#groupid").val();
       var serialID =$("#Refno").val();
       var order_number=$("#order_number").val();
        created_date=dateStr;
          var status=1;
             //var Person="testperson";
                var html = '';
                
  html += '<tr>';
  
  html +='<input type="hidden"name="groupid[]" id="groupid0" value=' + figroupid + '>';
  html +='<td style="display:none;"class="custom-tbl">' + '<input type="text"  class="form-control"  size=60 name="id[]" id="id0" readonly="true" value= "0">' + '</td>'
  html +='<td style="display:none;"class="custom-tbl">' + '<input type="text"  class="form-control"  size=60 name="pid[]" id="pid0" readonly="true" value= "' + values_ID + '">' + '</td>'
//   html +='<td>' + '<input type= "text"   class="form-control"  size=60 name="created_date[]" id="created_date" readonly="true" value= "' + created_date + '">' + '</td>'
   html +='<td style="display:none;">' + '<input type="text" class="form-control"  size=60 name="serialID[]" id="serialID" readonly="true" value= "' + serialID + '">' + '</td>'
 // html += '<td><input type="text" name="pid" id ="pid" class="form-control " value=Values_ID disabled/></td>';
  //html += '<td><input type="text" name="item" id ="item" class="form-control " disabled value=  Values_ITEM ></td>';
  html += '<td class="custom-tbl"><select name="item[]" id ="item0" class="form-control"><option value='+values_ID+'>'+values_ITEM +'</option>'+'@foreach ($products5 as $rows) <option value="{{$rows->id}}">{{$rows->item}}</option> @endforeach </select></td>';
  //html +='<td class="custom-tbl">'+'<input type="text" class="form-control"  size="70"  name="item[]" id="item0"  readonly="true" value= "' + values_ITEM + '">' + '</td>'
  //  html += '<td><select name="item" id ="item" class="form-control"><option value=""></option>@foreach ($products as $rows) <option value="{{$rows->id}}">{{$rows->item}}</option> @endforeach </select></td>';
  //html += '<td><input type="text" name="qty" id ="qty" class="form-control " value="1" /></td>';
     
    
//html += '<td class="custom-tbl"><select name="ram[]" id ="ram0" class="form-control"></select></td>';
  

html += '<td class="custom-tbl"><select name="ram[]" id ="ram0" class="form-control"><option value="0">None</option>@foreach ($products as $rows) <option value="{{$rows->id}}">{{$rows->item}}</option> @endforeach </select></td>';
 
  // html += '<td class="custom-tbl"><select name="ram[]" id ="ram0"  class="form-control "><option value="0">None</option><option value="1">2GB</option><option value="2">4GB</option><option value="3">8GB</option><option value="4">16GB</option><option value="5">32GB</option> <option value="6">64GB</option></select></td>';
 
 html += '<td class="custom-tbl"><select name="generation[]" id ="generation0" class="form-control"><option value="0">None</option>@foreach ($gen as $rows) <option value="{{$rows->id}}">{{$rows->gen}}</option> @endforeach </select></td>';
 //html += '<td class="custom-tbl"><select name="generation[]" id ="generation0" class="form-control "><option value="0">None</option><option value="1">10TH_GEN</option><option value="2">11TH_GEN</option><option value="3">12TH_GEN</option><option value="4">13TH_GEN</option><option value="5">14TH_GEN</option> <option value="6">15TH_GEN</option></select></td>';
//  html += '<td class="custom-tbl"><select name="combination[]" id ="combination0" class="form-control"><option value="0">None</option><option value="1">Combi</option></select></td>';
html += '<td class="custom-tbl"><select name="combination[]" id ="combination0" class="form-control"><option value="0">None</option>@foreach ($combination as $rows) <option value="{{$rows->id}}">{{$rows->combination}}</option> @endforeach </select></td>';

html += '<td class="custom-tbl"><select name="booting_ssd[]" id ="booting_ssd0" class="form-control"><option value="0">None</option>@foreach ($products1 as $rows) <option value="{{$rows->id}}">{{$rows->item}}</option> @endforeach </select></td>';
   
    
//html += '<td class="custom-tbl"><select name="booting_ssd[]" id ="booting_ssd0" class="form-control"></select></td>';

//html += '<td class="custom-tbl"><select name="booting_ssd[]" id ="booting_ssd0" class="form-control"><option value="0">None</option><option value="1">250GB_SSD</option><option value="2">500GB_SSD</option><option value="3">1TB_SSD</option><option value="4">2TB_SSD</option></select></td>';
 
//html += '<td class="custom-tbl"><select name="additional_hdd[]" id ="additional_hdd0" class="form-control"><option value="0">None</option><option value="1">250GB_HDD</option><option value="2">500GB_HDD</option><option value="3">1TB_HDD</option><option value="4">2TB_HDD</option></select></td>';
html += '<td class="custom-tbl"><select name="additional_hdd[]" id ="additional_hdd0" class="form-control"><option value="0">None</option>@foreach ($products2 as $rows) <option value="{{$rows->id}}">{{$rows->item}}</option> @endforeach </select></td>';
 //html += '<td class="custom-tbl"><select name="additional_hdd[]" id ="additional_hdd0" class="form-control"></select></td>';
 html += '<td class="custom-tbl"><select name="skin_type[]" id ="skin_type0" class="form-control"><option value="0">None</option>@foreach ($products3 as $rows) <option value="{{$rows->id}}">{{$rows->item}}</option> @endforeach </select></td>';
 // html += '<td class="custom-tbl"><select name="skin_type[]" id ="skin_type0" class="form-control"><option value="0">None</option><option value="1">Skin_Type01</option></select></td>';
// html +='<td>' + '<input type="text"  class="form-control"  size=60 name="status[]" id="status" readonly="true" value= "' + status + '">' + '</td>'
// html +='<td>' + '<input type="text"  class="form-control"  size=60 name="Person[]" id="Person" readonly="true" value= "' + Person + '">' + '</td>'



html +='<td style="display:none;" class="custom-tbl">' + '<input type="text"  class="form-control"  size=60 name="item_type[]" id="item_type0" readonly="true" value= "' + values_TYPE + '">' + '</td>';
html +='<td style="display:none;" class="custom-tbl">' + '<input type="text"  class="form-control"  size=60 name="order_number[]" id="order_number0" readonly="true" value= "' + order_number + '">' + '</td>';
html += '<td class="custom-tbl"><button type="button" id ="remove" name="remove" class="btn btn-danger btn-sm remove"><i class="fa fa-times" aria-hidden="true"></i></button></td></tr>';

     
 $("#bundletable").append(html);
 $('#item_'+key+' option[value="' + values_ID + '"]').prop('selected', true);

//$('#dynamic_field').append(html);
               
            
            //     $('#pid').val(value.id);
            //   $('#item').val(value.item);

                // $('#item').append('<option value="' + value
                //                 .id + '">' + value.item + '</option>');
             
          });
          
            
  }

  
              
          }

        });
    
 });
 
});


</script>

<!-- add serialize items to  the tabel -->
<script >

    $(document).on('click', '#btn_Create', function(event) {
        event.preventDefault();
        /* Act on the event */
        var dateObj = new Date();
      //  var form_data = $(this).serialize();
var month = (dateObj.getMonth() + 1).toString().padStart(2, "0");      
var day = dateObj.getDate().toString().padStart(2, "0");
var year = dateObj.getFullYear().toString().padStart(4, "0");
var hours = dateObj.getHours().toString().padStart(2, "0");
var minutes = dateObj.getMinutes().toString().padStart(2, "0");
var seconds = dateObj.getSeconds().toString().padStart(2, "0");

var dateStr = year +"-" + month + "-" + day +" "+ hours + ":"+ minutes +":"+ seconds;



//let dateObj = new Date(dateInput);

        $.ajax({
         
                       type: "POST",
                      // url: "save_data.php",
                      url:"{{ url('serailer/storeserializedsingle/') }}",
                      //contentType: "application/json; charset=utf-8",
                      dataType: "text",
                   // traditional: true,
                     async: false,
                       data: {
                         
                   // _token: $('meta[name="csrf-token"]').attr('content') ,
                           'serialID' : $("#Refno").val(),
                           'created_date':dateStr,
                          // 'person':"test",
                           'approved_by':"Pending",
                           'approval_status':0,
                           'approved_date':"Pending",
                           'description':$("#rtype").val(),
                           'order_number':$('#order_number').val(),
                            _token: '{{csrf_token()}}'
                     
                   },
                     
                       success: function (data) {
                           alert("Processing press OK!");
                       }
           
                   });
                  

                //   var data1 = $('#add_item').serialize() + '&attendText=' + $('select option:selected').text();
                   $.ajax({
                    
          
            
                       type: "POST",
                      // url: "save_data.php",
                      url:"{{ url('serailer/storelist/') }}",
                      //contentType: "application/json; charset=utf-8",
                    //  var data1 = $('#add_item').serialize() + '&attendText=' + $('select option:selected').text(),
                        data:$('#add_item').serialize() ,
                     // data:data1,
                    //  data:$(this).serialize(),
                 //    _token: '{{csrf_token()}}',
                    
                      dataType: "json",
                   // traditional: true,
                     async: false,
               
                     //        data: {
                         
                //    // _token: $('meta[name="csrf-token"]').attr('content') ,
                //            'Refno' : $("#Refno").val(),
                //            'rtype' : "bdl",
                     // _token: '{{csrf_token()}}'
                     
                //    },
                     
                       success: function (data) {
                        alert("Done!");
                       location.reload();
                    // tag[0].reset();
                        },
                        error: function(data){
            // Error...
            var errors = $.parseJSON(data.responseText);

            console.log(errors);

            $.each(errors, function(index, value) {

            });

        }


                   });
                  
      
    });

    
    
 </script>

@endsection