@extends('layouts.admin.app')
<style type="text/css">
  .badge-success{color: #23BF08 !important;
    border: 1px solid #23BF08;
    padding: 4px;
    font-weight: 500;background-color: transparent !important;}
    .badge-danger{
      color: #dc3545 !important;
    border: 1px solid #dc3545;
    padding: 4px;
    font-weight: 500;background-color: transparent !important;
    }
</style>
@section('content')
 <script src="{{asset('admin/js/just-validate.min.js')}}"></script>
      <div class="pd-30">
      <div class="col-sm-12 col-xl-12 " style="display: flex;">
        <h4 class="col-sm-8 col-xl-8 tx-gray-800 mg-b-5 title">Search CAS Number using JSF data</h4>
        <div class="col-sm-4 col-xl-4" style="text-align:end">
        <a class="btn btn-primary" href="/gpclrmainportal/check-highest-tonnage-band" style="border-radius: 0px;">Back</a>
        </div>
      </div>
      </div><!-- d-flex -->
      <div class="br-pagebody mg-t-5 pd-x-30">
        <div class="br-section-wrapper row row-sm p-20">
          <div class="col-sm-12 col-xl-12">
            <h6 class="filter-title">Search</h6>
            <form id="search-form" class="form" method="post" action="/gpclrmainportal/search-highest-tonnage-band">
              @csrf @method('POST')
              <div class="row">
                <div class="col-lg-6 col-md-6 col-sm-12">
                  <div  class="form-group">
                  <label>Select CAS</label>
                  <select class="form-control m-select2 m-select2-general" name="cas_no">
                    <option value="">Select CAS</option>
                    @foreach($data as $key => $n)
                    <option value="{{$n->cas_no}}"  >{{$n->cas_no}}</option>
                    @endforeach
                  </select>
                  </div>
                  @error('uuid')
                    <div class="alert alert-danger">
                      {{ $message }}
                    </div>
                  @enderror
                </div>
                <div class="col-lg-6 col-md-6 col-sm-12" style="margin-top: 30px;">
                    <button id="search" type="submit" class="btn btn-style1 text-white">Search</button>
                    <a class="btn btn-style2 text-white" href="/gpclrmainportal/search-cas">Clear</a>
                </div>
              </div>
            </form>
          </div>
          <div class="col-sm-12 col-xl-12">
            @if(count($cases) > 0)
            
            <div style="overflow-x:auto;">
              <table id="example" class="table">
                  <thead class="thead-colored">
                      <th>Sr.No</th>
                      <th>Region</th>
                      <th>CAS No</th>
                      <th>EC No</th>
                      <th>CAS Name</th>
                      <th>Tonnage Requested</th>
                  </thead>
                  <tbody>
                    @php $i = 1 @endphp
                    @foreach($cases as $key => $n)
                      <tr>
                          <td>{{$i++}}</td>
                          <td>{{$n->Region->name}}</td>
                          <td>{{$n->cas_no}}</td>
                          <td>{{$n->ec_no}}</td>
                          <td>{{$n->cas_name}}</td>
                          <td>{{$n->scope}}</td>
                          
                      </tr>
                    @endforeach
                  </tbody>
              </table>
  </div>
              @endif
          </div>
      </div>
          </div>
      

@endsection
@section('scripts')
<!-- <script>
 
$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});

$(document).ready(function(){
    $("#search").on("click", function(event){
        event.preventDefault();
        var formValues= $('#search-form').serialize();
        $.ajax({
            type: "POST",
            dataType: "json",
            url: '/gpclrmainportal/search-cas-via-uuid',
            data: formValues,
            error:function(data)
            {
                console.log(data)
                // Display the returned data in browser
            },
            success: function(data)
            {
                console.log(data);
                var table_data = JSON.parse(data);
                var table = $('#table').DataTable( {
                        data: table_data
                        });

            }
        });
        
    });
});
</script> -->
@endsection