@extends('layouts.app')
@section('content')
<style>
    th {
        font-size:11px;
    }
    </style>

<div  class="columns">
<div class="column is-4">
<div >Select Products to add to Quotation  </div>
</div>
</div>


<div  class="columns">
<div class="column is-12">
    

<div  class="columns" style="padding-top:13px">
<div class="column is-12"  style="padding-left:0px">
  <div class="right_panel" >
<form method="post" id="form_" action="{{route('quotations.addproducts.post', ['id' => $quotation_id])}}" >
@csrf
<table class="table  is-bordered">
    <tr>
         <th colspan="4"> </th>
         <th colspan="10"> Retail Price (Canada) </th>
       

    </tr>
    <tr>
    <th></th>
    <th>Description </th>
    <th>Model  <br> Number</th>
    <th>Sales Price </th>
    <th>Frame <br> Color</th>
    <th>Frame  <br> Price</th>
    <th>A Grade</th>
    <th>B Grade</th>
    <th>C Grade</th>
    <th>D Grade</th>
    <th>E Grade</th>
    <th>F Grade</th>
    <th>Quick Dry <br> Foam <br> Add</th>
    <th>Qty</th>
 
</tr>
 

@foreach($products as $product)
@if ($product->SalesPrice>0)

<tr>
    <td> <input type="checkbox"  name="product_ids[{{$product->id}}]" value="{{$product->id}}" /></td>
    <td> {{$product->SalesDesc}}
    <input type="hidden" name="{{$product->id}}_description" value=" {{$product->SalesDesc}}" />
    </td>
  
    <td> {{$product->Name}}
        <input type="hidden" name="{{$product->id}}_model" value=" {{$product->Name}}" />
    </td>
    <td>
        {{$product->SalesPrice}}
        <input type="hidden" name="{{$product->id}}_price" value=" {{$product->SalesPrice}}" />
    </td>
    <td> 
    @foreach($product->framecolors as $color)
       <div> <input type="radio" name="{{$product->id}}_color" value="{{$color->color}}" > {{$color->color}}</div>
    @endforeach

    </td>
    <td> {{$product->productprice->ca_r_frame_price}}</td>
    <td> 
        {{$product->productprice->ca_r_a_grade}}
        <div><input type="radio" name="{{$product->id}}_ca_r_grade" value="ca_r_a_grade#{{$product->productprice->ca_r_a_grade}}"></div>

    </td>
    <td> 
        {{$product->productprice->ca_r_b_grade}}
        <div><input type="radio" name="{{$product->id}}_ca_r_grade" value="ca_r_b_grade#{{$product->productprice->ca_r_b_grade}}"></div>

    </td>

    <td> 
        {{$product->productprice->ca_r_c_grade}}
        <div><input type="radio" name="{{$product->id}}_ca_r_grade" value="ca_r_c_grade#{{$product->productprice->ca_r_c_grade}}"></div>

    </td>
    <td> 
        {{$product->productprice->ca_r_d_grade}}
        <div><input type="radio" name="{{$product->id}}_ca_r_grade" value="ca_r_d_grade#{{$product->productprice->ca_r_d_grade}}"></div>

    </td>
    <td> 
        {{$product->productprice->ca_r_e_grade}}
        <div><input type="radio" name="{{$product->id}}_ca_r_grade" value="ca_r_e_grade#{{$product->productprice->ca_r_e_grade}}"></div>

    </td>
    <td> 
        @if($product->productprice->ca_r_f_grade)
        {{$product->productprice->ca_r_f_grade}}
        <div><input type="radio" name="{{$product->id}}_ca_r_grade" value="ca_r_f_grade#{{$product->productprice->ca_r_f_grade}}"></div>
        @endif

    </td>

    <td> {{$product->productprice->ca_r_quick_dry_foam}}</td>
    <td> 
       <input type="text" name="{{$product->id}}_qty" style="width:30px" value="1" />
        
    </td>
   </tr>
   @endif

@endforeach

</table>
<input type="hidden" name="quotation_id" value="{{$quotation_id}}" />

</form>




<div  class="columns">
    <div class="column is-12">
   <!-- <a href={{ route('quotations.step2', ['id' => 1]) }} class="button is-primary is-small" >Cancel </a> -->
    <a class="button is-primary is-small" onclick="validateFormAndSubmit()" href="javascript:void(0)">ADD </a>

    </div>
</div>

</div>
</div>
</div>
</div>
</div>

<script>
     function validateFormAndSubmit() {
        const checkboxes = document.querySelectorAll('input[name^="product_ids["]');
 // const checkboxes = document.getElementsByName("product_ids[]");
  let isChecked = false;
  //alert(checkboxes.length);
  for (let i = 0; i < checkboxes.length; i++) {
    if (checkboxes[i].checked) {
      isChecked = true;
      break;
    }
  }
  if (!isChecked) {
    alert("Please select at least one Product.");
    return false;
  }
  document.forms["form_"].submit();
  return true;
}


</script>


@endsection