@extends('inventory.layout') 
@section('title', 'Quotation Status')
@section('content')
 @push('head')
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Trading Portal</title>
    <!-- plugins:css -->
    <link rel="stylesheet" href="assets/vendors/mdi/css/materialdesignicons.min.css">
    <link rel="stylesheet" href="assets/vendors/css/vendor.bundle.base.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" integrity="sha512-5A8nwdMOWrSz20fDsjczgUidUBR8liPYU+WymTZP1lmY9G6Oc7HlZv156XqnsgNUzTyMefFTcsFH/tnJE/+xBg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap" rel="stylesheet">
    <!-- endinject -->
    <!-- Plugin css for this page -->
    <!-- End plugin css for this page -->
    <!-- inject:css -->
    <!-- endinject -->
    <style>
body {font-family: Arial;}

/ Style the tab /
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/ Style the buttons inside the tab /
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

/ Change background color of buttons on hover /
.tab button:hover {
  background-color: #ddd;
}

/ Create an active/current tablink class /
.tab button.active {
  background-color: #ccc;
}

/ Style the tab content /
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}
</style>
    <!-- Layout styles -->
    <link rel="stylesheet" href="{{ url('assets/css/style.css')}}">
    <link rel="stylesheet" href="{{ url('assets/css/custom.css')}}">
    <!-- End layout styles -->
    <link rel="shortcut icon" href="{{ url('assets/images/favicon.ico')}}" />
@endpush

    <div class="container-scroller">

      <!-- partial:partials/_navbar.html -->
     
      <!-- partial -->
      <div class="container-fluid">
       
        <div class="main-panel" style="width: 100%;">
           <div class="content-wrapper">
            <div class="page-header">
              <h3 class="page-title">
                  Supply Partner Quotation
              </h3>
            </div>



            <div class="row enq-tab">
              <div class="accordion" id="myAccordion">
                @foreach($vendors as  $key=>$vendor)
                @foreach($vendor->vendordetail as$detail)
                <div class="accordion-item">
                    <h2 class="accordion-header" id="headingOne_{{$key+1}}">
                        <button type="button" class="accordion-button" data-bs-toggle="collapse" data-bs-target="#collapseOne_{{$key+1}}">Enquiry No {{isset($vendor->enquirydetail[0]['enquiry_no']) ? $vendor->enquirydetail[0]['enquiry_no']:''}}  / {{$detail->first_name}} ({{($detail->vendor_code)}})</button>
                    </h2>
                    <div id="collapseOne_{{$key+1}}" class="accordion-collapse collapse show" data-bs-parent="#myAccordion">
                        <div class="card-body">

                        <!-- Accept and reject checkbox start -->
                        <div class="tab" style="overflow:hidden;">
                          <button class="tablinks active" onclick="openCity(event, 'London')">Quotation Accept</button>
                          <button class="tablinks" onclick="openCity(event, 'Paris')">Quotation Submitted</button>
                          <button class="tablinks" onclick="openCity(event, 'Tokyo')">Quotation Rejected</button>
                        </div>

                        <div id="London" class="tabcontent" >
                          <h3>Quotation Accept</h3>
                         <!-- <p>London is the capital city of England.</p>-->
                        </div>

                        <div id="Paris" class="tabcontent" style="display: none;">
                          <h3>Quotation Submitted</h3>
                         <!-- <p>Paris is the capital of France.</p> -->
                        </div>

                        <div id="Tokyo" class="tabcontent" style="display: none;">
                          <h3>Quotation Rejected</h3>
                         <!-- <p>Tokyo is the capital of Japan.</p>-->
                        </div>

                          <!-- <div class="custom-control custom-radio text-end">
                            <input type="radio" class="custom-control-input" id="defaultUnchecked" name="defaultExampleRadios">
                            <label class="custom-control-label" for="defaultUnchecked">Accept All</label>

                            <input type="radio" class="custom-control-input" id="defaultChecked" name="defaultExampleRadios">
                            <label class="custom-control-label" for="defaultChecked">Reject All</label>
                          </div> -->
                        <!-- Accept and reject checkbox end -->


                    <div class="row">
                        <!-- Card start -->
                        @foreach($products as $product)
                        {{--@foreach($product as $pro)--}}
                        @foreach($product->productdetail as $detail)
                        <div class="col-md-4">
                            <div class="card-detail">
                              
                               <input type="hidden" name="rfq_to_vendors_id" value="">
                               
                               
                                <input type="hidden" name="vendorquotation_id" value="">
                               
                              <table width="100%" cellpadding="1">
                                  <tr valign="top"><td width="35%"> <img src="{{ url('images/upload/item/'.$detail['image'])}}" alt="" id="output_image"  class="img" style="width: 100px; height: 70px;object-fit: contain;border: 1px solid #dbdbdb;"></td>
                                  <td width="5%">&nbsp;</td>
                                  <td width="60%"><h4></h4>
                             <p></p></td></tr>
                              </table>
                             
                            
                             <input type="hidden" name="quotationDate"  id="date" value=""/>  
                           
                             <table width="100%" cellpadding="2" >
                                  <tr valign="top"><td width="45%"><font size="2">Status:</font></td>
                                  <td width="5%">&nbsp;</td>
                                  <td width="50%"><font size="2"><input type="radio" class="custom-control-input"  name="accept" value="Yes" id="checked"  >
                                  <label class="custom-control-label" for="checked">Accept</label></font>
                                  </td>
                                  <tr valign="top"><td width="45%"><font size="2">Quantity:</font></td>
                                  <td width="5%">&nbsp;</td>
                                  <td width="50%"><font size="2">
                                   </font>
                                  </td>
                                  </tr>
                                  </tr>
                                     <tr valign="bottom"><td width="45%"><font size="2">Quotation Submission Date:</font></td>
                                  <td width="5%">&nbsp;</td>
                                  <td width="50%"><font size="2">
                                   </font>
                                  </td>
                                  </tr>
                                       <tr valign="bottom"><td width="45%"><font size="2">Remarks:</font></td>
                                  <td width="5%">&nbsp;</td>
                                  <td width="50%"><font size="2">
                                   </font>
                                  </td>
                                  </tr>
                                  
                                      <tr valign="bottom"><td width="45%"><font size="2">Enquiry Confirmed:</font></td>
                                      <td width="5%">&nbsp;</td>
                                      <td width="50%"><font size="2">
                                       </font>
                                      </td>
                                    </tr>
                                 
                                    <tr valign="bottom"><td width="45%"><font size="2">MRP:</font></td>
                                      <td width="5%">&nbsp;</td>
                                      <td width="50%"><font size="2">
                                       </font>
                                      </td>
                                    </tr>
                                  
                                    <tr valign="bottom"><td width="45%"><font size="2">Unit price without GST:</font></td>
                                      <td width="5%">&nbsp;</td>
                                      <td width="50%"><font size="2">
                                       </font>
                                      </td>
                                    </tr>

                                    <tr valign="bottom"><td width="45%"><font size="2">Total Amount:</font></td>
                                      <td width="5%">&nbsp;</td>
                                      <td width="50%"><font size="2">
                                       </font>
                                      </td>
                                    </tr>

                                    
                                   
                                    <tr valign="bottom"><td width="45%"><font size="2">Gst Percentage:</font></td>
                                      <td width="5%">&nbsp;</td>
                                      <td width="50%"><font size="2">
                                       </font>
                                      </td>
                                    </tr>

                                    <tr valign="bottom"><td width="45%"><font size="2">In Period:</font></td>
                                      <td width="5%">&nbsp;</td>
                                      <td width="50%"><font size="2">
                                       </font>
                                      </td>
                                    </tr>

                                    <tr valign="bottom"><td width="45%"><font size="2">Select Period:</font></td>
                                      <td width="5%">&nbsp;</td>
                                      <td width="50%"><font size="2">
                                       </font>
                                      </td>
                                    </tr>

                                    <tr valign="bottom"><td width="45%"><font size="2">Days required for delivery:</font></td>
                                      <td width="5%">&nbsp;</td>
                                      <td width="50%"><font size="2">
                                       </font>
                                      </td>
                                    </tr>

                                    <tr valign="bottom"><td width="45%"><font size="2">Payment Delivery Terms:</font></td>
                                      <td width="5%">&nbsp;</td>
                                      <td width="50%"><font size="2">
                                       </font>
                                      </td>
                                    </tr>


                                    <tr valign="bottom"><td width="45%"><font size="2">Quotation Validity:</font></td>
                                      <td width="5%">&nbsp;</td>
                                      <td width="50%"><font size="2">
                                       </font>
                                      </td>
                                    </tr>

                                    <tr valign="bottom"><td width="45%"><font size="2">Quotation Status:</font></td>
                                      <td width="5%">&nbsp;</td>
                                      <td width="50%"><font size="2">
                                       </font>
                                      </td>
                                    </tr>
                                  <!-- <tr valign="top"><td width="100%" colspan='3'> <input type="submit" name="Submit" value="Make Quotation" class="sign-n-btn"></td>
                                  
                                  </tr>-->
                              </table>
                            

                            </div>
                        </div>
                        @endforeach
                        {{--@endforeach--}}
                        @endforeach
                              <!-- Card end -->
                    </div>


                          <!-- date start -->
                          <!-- <div class="row mt-4">
                              <div class="col-md-8"></div>
                              <div class="col-md-4">
                            <div class="quote-date mt-4">
                              <h4> Kindly confirm the quotation date </h4>
                              <div class="input-group date" >
                                <input type="date" class="form-control" id="date"/>
                              </div>
                            </div>
                            </div>
                        </div> -->
                        <!-- date end -->

                        </div>
                    </div>
                </div>
                @endforeach
                @endforeach
                {{-- <div class="accordion-item">
                    <h2 class="accordion-header" id="headingTwo">
                        <button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#collapseTwo">Enq 000002</button>
                    </h2>
                    <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#myAccordion">
                        <div class="card-body">

                              <!-- Accept and reject checkbox start -->
                              <div class="custom-control custom-radio text-end">
                                <input type="radio" class="custom-control-input" id="defaultUnchecked3" name="defaultExampleRadios3">
                                <label class="custom-control-label" for="defaultUnchecked3">Accept All</label>

                                <input type="radio" class="custom-control-input" id="defaultChecked3" name="defaultExampleRadios3">
                                <label class="custom-control-label" for="defaultChecked3">Reject All</label>
                              </div>
                            <!-- Accept and reject checkbox end -->

                          <div class="row">
                            <!-- Card start -->
                            <div class="col-md-4">
                              <div class="card-detail">
                                 <h3> Electric Wire </h3>
                                 <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been..  </p>
                                 <div class="accept-rej-btn">
                                   <a class="accept-btn" href=""> Accept </a> <a class="reject-btn" href=""> Reject</a>
                                </div>
                              </div>
                            </div>
                            <!-- Card end -->

                                <!-- Card start -->
                                <div class="col-md-4">
                                  <div class="card-detail">
                                     <h3> Switches </h3>
                                     <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been..  </p>
                                     <div class="accept-rej-btn">
                                       <a class="accept-btn" href=""> Accept </a> <a class="reject-btn" href=""> Reject</a>
                                    </div>
                                  </div>
                                </div>
                                <!-- Card end -->

                                   <!-- Card start -->
                                   <div class="col-md-4">
                                    <div class="card-detail">
                                       <h3> Electric Wire </h3>
                                       <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been..  </p>
                                       <div class="accept-rej-btn">
                                         <a class="accept-btn" href=""> Accept </a> <a class="reject-btn" href=""> Reject</a>
                                      </div>
                                    </div>
                                  </div>
                                  <!-- Card end -->

                                   <!-- Card start -->
                                   <div class="col-md-4">
                                    <div class="card-detail">
                                       <h3> Electric Wire </h3>
                                       <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been..  </p>
                                       <div class="accept-rej-btn">
                                         <a class="accept-btn" href=""> Accept </a> <a class="reject-btn" href=""> Reject</a>
                                      </div>
                                    </div>
                                  </div>
                                  <!-- Card end -->

                                   <!-- Card start -->
                                   <div class="col-md-4">
                                    <div class="card-detail">
                                       <h3> Electric Wire </h3>
                                       <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been..  </p>
                                       <div class="accept-rej-btn">
                                         <a class="accept-btn" href=""> Accept </a> <a class="reject-btn" href=""> Reject</a>
                                      </div>
                                    </div>
                                  </div>
                                  <!-- Card end -->
                              </div>

                                <!-- date start -->
                          <!-- <div class="row mt-4">
                            <div class="col-md-8"></div>
                            <div class="col-md-4">
                          <div class="quote-date mt-4">
                            <h4> Kindly confirm the quotation date </h4>
                            <div class="input-group date" >
                              <input type="date" class="form-control" id="date"/>
                            </div>
                          </div>
                          </div>
                      </div> -->
                      <!-- date end -->


                        </div>
                    </div>
                </div>
                <div class="accordion-item">
                    <h2 class="accordion-header" id="headingThree">
                        <button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#collapseThree">Enq 000003</button>
                    </h2>
                    <div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#myAccordion">
                        <div class="card-body">

                              <!-- Accept and reject checkbox start -->
                              <div class="custom-control custom-radio text-end">
                                <input type="radio" class="custom-control-input" id="defaultUnchecked2" name="defaultExampleRadios2">
                                <label class="custom-control-label" for="defaultUnchecked2">Accept All</label>

                                <input type="radio" class="custom-control-input" id="defaultChecked2" name="defaultExampleRadios2">
                                <label class="custom-control-label" for="defaultChecked2">Reject All</label>
                              </div>
                            <!-- Accept and reject checkbox end -->

                          <div class="row">
                            <!-- Card start -->
                            <div class="col-md-4">
                              <div class="card-detail">
                                 <h3> Electric Wire </h3>
                                 <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been..  </p>
                                 <div class="accept-rej-btn">
                                   <a class="accept-btn" href=""> Accept </a> <a class="reject-btn" href=""> Reject</a>
                                </div>
                              </div>
                            </div>
                            <!-- Card end -->

                                <!-- Card start -->
                                <div class="col-md-4">
                                  <div class="card-detail">
                                     <h3> Switches </h3>
                                     <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been..  </p>
                                     <div class="accept-rej-btn">
                                       <a class="accept-btn" href=""> Accept </a> <a class="reject-btn" href=""> Reject</a>
                                    </div>
                                  </div>
                                </div>
                                <!-- Card end -->

                                   <!-- Card start -->
                                   <div class="col-md-4">
                                    <div class="card-detail">
                                       <h3> Electric Wire </h3>
                                       <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been..  </p>
                                       <div class="accept-rej-btn">
                                         <a class="accept-btn" href=""> Accept </a> <a class="reject-btn" href=""> Reject</a>
                                      </div>
                                    </div>
                                  </div>
                                  <!-- Card end -->
                              </div>

                                <!-- date start -->
                          <div class="row mt-4">
                            <div class="col-md-8"></div>
                            <div class="col-md-4">
                          <div class="quote-date mt-4">
                            <h4> Kindly confirm the quotation date </h4>
                            <div class="input-group date" >
                              <input type="date" class="form-control" id="date"/>
                            </div>
                          </div>
                          </div>
                      </div>
                      <!-- date end -->


                        </div>
                    </div>
                </div> --}}
            </div>
            </div>

            </div>

          </div>
          <!-- content-wrapper ends -->
          <!-- partial:partials/_footer.html -->
          
          <!-- partial -->
        </div>
        <!-- main-panel ends -->
      </div>
      <!-- page-body-wrapper ends -->
    
    <!-- container-scroller -->
    <!-- plugins:js -->
    @push('script')
    <script>
function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}
</script>
   
    <script src="{{ url('assets/vendors/js/vendor.bundle.base.js')}}"></script>
    <!-- endinject -->
    <!-- Plugin js for this page -->
    <script src="{{ url('assets/vendors/chart.js/Chart.min.js')}}"></script>
    <script src="{{ url('assets/js/jquery.cookie.js')}}" type="text/javascript"></script>
    <!-- End plugin js for this page -->
    <!-- inject:js -->
    <script src="{{ url('assets/js/off-canvas.js')}}"></script>
    <script src="{{ url('assets/js/hoverable-collapse.js')}}"></script>
    <script src="{{ url('assets/js/misc.js')}}"></script>
    <!-- endinject -->
    <!-- Custom js for this page -->
    <script src="{{ url('assets/js/dashboard.js')}}"></script>
    <script src="{{ url('assets/js/todolist.js')}}"></script>
    <!-- End custom js for this page -->

    <script>

    </script>
  @endpush
 @endsection