@extends('dashboard.layout.partials.dashboard')

@section('content')
<style>
    select.form-control {
    padding: 0.4375rem 0.75rem;
    border: 0;
    outline: 1px solid #ebedf2;
    color: #221b1b;
    height: 45px;
}

</style>

<div class="form-group row">
    <div class="col-sm-12">
        @if ($errors->any())
            <div class="alert " style="background-color:rgb(153, 51, 0); color:white">
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif
    </div>
    <div class="col-sm-12">
        @if (session()->has('message'))
            <div class="alert alert-success">
                {{session('message')}}
            </div>
        @endif
    </div>
    <div class="col-sm-12">
        @if (session()->has('hasError'))
            <div class="alert alert-danger">
                {{session('hasError')}}
            </div>
        @endif
    </div>
</div>



    
 
              
        <div class="card shadow">
            
                 <div class="card-header bg-color">
                  <h5 class="text">Generate Product Qr-Code</h5>  
                 </div>
                 
                  <div class="card-body shadow">
                    <form class="forms-sample" method="GET" action="{{url('/generate_qrCode_example')}}">
                     <div class="row">
                         
                      <div class="form-group col">
                        <label for="product_name">Select Product<span style="color:red">*</span></label>
                        <select class="form-control" id="product_id" name="product_id" required>
                            <option >Select Product</option>
                            @foreach($product as $products)
                            <option value="{{$products->id}}">{{$products->product_name}}</option>
                            @endforeach
                        </select>
                      </div>
                      <!--<input type='hidden' name='actual_qty' id='actual_qty'>-->

                       <div class="form-group col">
                        <label for="qty">Quantity<span style="color:red">*</span></label>
                        <input type="number" class="form-control" name="given_qty" autocomplete="off" id="given_qty" placeholder="Quantity" />
                        <small id='notice'></small>
                      </div>

                      
                      <div class="form-group col">
                          <button type="submit" class="btn btn-gradient-danger mt-4" id='submit'>Submit</button>
                          <!--<a class="btn btn-light" href="{{ url()->previous() }}">Cancel</a>-->
                      </div>
                      
                      </div>
                    </form>
                    <br>   
                    <hr>
                    <div class="table-responsive ">
                    <table class="table table-hover table-border table-stripped myTable myTable">
            
            <thead>
                <tr>
                    <th>Product</th>
                    <th>Quantity</th>
                    <th>Generated QrCode </th>
                    <th>Not Generated QrCode</th>
                </tr>
            </thead>
            <tbody>
               @foreach($data as $dataa) 
                <tr>
                <td>{{$dataa['product_name']}}</td>
                <td style='text-align: right;'>{{$dataa['quantity']}}</td>
                <td style='text-align: right;'><span class="badge badge-success"><a href="{{ url('generated/QrCodes/details/' . $dataa['id'])}}" style="text-decoration:none;color:black">{{$dataa['total_generated_code']}}</a></span></td>
                <td style='text-align: right;'><span class="badge badge-primary"><a href="{{ url('notGenerated/QrCodes/details/' . $dataa['id'])}}"  style="text-decoration:none;color:black">{{$dataa['total_not_generated_code']}}</a></span></td>
                </tr>
                @endforeach 
            </tbody>
            
        </table>    
                  </div>
                </div>
              </div>
         
 

@endsection

@section('javascript')

<script>

  $(document).ready( function () {
            $('.myTable').DataTable();
        } );

	
    //data-table work
    $(document).ready( function () {
    $("#given_qty").on("input", function() {
            var given_qty = $(this).val();
            var product_id = $('#product_id').val(); 
            var csrfToken = '{{ csrf_token() }}';
            var requestData = {
            given_qty: given_qty,
            product_id: product_id,
            
        };
            $.ajax({
                
                url: '/FutureParts/check/quantity', 
                // url: 'https://futurepart.a2zcreatorz.com/futureparts/FutureParts/check/quantity', // Replace with your actual endpoint
 
                type: 'POST',
                data: requestData,
                  headers: {
                    'X-CSRF-TOKEN': csrfToken
                },
                success: function(response) {
                    console.log(response);
                    if(response.error){
                          $('#notice').text(response.error);
                          $('#notice').css('color', 'red');
                          $('#submit').prop('disabled', true);
                          
                    }else if(response.success){
                          $('#notice').text('');
                        

                        
                          $('#submit').prop('disabled', false);
                    }
                },
                error: function(xhr, status, error) {
                    // Handle error
                    console.error('Something went wrong:', error);
                }
        });
            
            
            
            
        });

   })

     

</script>
<style>
    .bg-color{
        background-color:white;
        padding-top:20px;
         text-align: center !important;
    }
    .text{
        font-size: 24px; 
        font-family: "Arial", sans-serif; 
    font-weight: bold;
    color:black;
    font-family: "Arial", sans-serif; 
    }
</style>
@endsection