@extends('layouts.default', ['appTopMenu' => true])
@push('scripts')
<link rel="stylesheet" href="{{ asset('css/jquery-ui.css')}}" />
<script src="{{ asset('js/jquery-ui.js') }}"></script>
<!-- <meta name="referrer" content="none-when-downgrade" />  -->
<meta name="csrf-token" content="{{ csrf_token() }}" />
<!--<link href="/assets/plugins/datatables.net-bs5/css/dataTables.bootstrap5.min.css" rel="stylesheet" />
<link href="/assets/plugins/datatables.net-responsive-bs5/css/responsive.bootstrap5.min.css" rel="stylesheet" />
<link href="/assets/plugins/datatables.net-buttons-bs5/css/buttons.bootstrap5.min.css" rel="stylesheet" />
<link href="/assets/plugins/datatables.net-colreorder-bs5/css/colReorder.bootstrap5.min.css" rel="stylesheet" />
<link href="/assets/plugins/datatables.net-keytable-bs5/css/keyTable.bootstrap5.min.css" rel="stylesheet" />
<link href="/assets/plugins/datatables.net-rowreorder-bs5/css/rowReorder.bootstrap5.min.css" rel="stylesheet" />
<link href="/assets/plugins/datatables.net-select-bs5/css/select.bootstrap5.min.css" rel="stylesheet" />-->
<link href="/assets/plugins/bootstrap-datepicker/dist/css/bootstrap-datepicker.css" rel="stylesheet" />
<script src="/assets/plugins/bootstrap-datepicker/dist/js/bootstrap-datepicker.js" defer></script>

<!-- required files -->
<link href="../assets/plugins/datatables.net-bs5/css/dataTables.bootstrap5.min.css" rel="stylesheet" />
<link href="../assets/plugins/datatables.net-responsive-bs5/css/responsive.bootstrap5.min.css" rel="stylesheet" />
<script src="../assets/plugins/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="../assets/plugins/datatables.net-bs5/js/dataTables.bootstrap5.min.js"></script>
<script src="../assets/plugins/datatables.net-responsive/js/dataTables.responsive.min.js"></script>
<script src="../assets/plugins/datatables.net-responsive-bs5/js/responsive.bootstrap5.min.js"></script>
<script src="assets/pspdfkit.js"></script>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<script type="text/javascript">
    $( "#datepicker" ).datepicker({
    dateFormat: 'dd-mm-yy'
 });

 
 
</script>
<style type="text/css">
    .dv_container
    {
        height: calc(100vh - 150px); /* Subtract 200px from the viewport height */
        /* background-color: lightgray;  */
        overflow: scroll;
    }
</style>
@endpush
@section('title', 'Cause List')
@section('content')
    <div class="container">
    
            @csrf
         
            
            </div>

            <div class="row">
        <div class="col-sm-12">
        <div class="card mb-0">
    <div class="card-header card-bg-color ">
    Honble Cause List
    </div>
<div class="card-body">
      


            <div class="row">
        <div class="col-sm-12">
        <div class="card mb-2">
    <div class="card-header card-bg-color ">
        <div class="row">
     <div class="col-sm-10">
      Cause List Details
    </div>
    <div class="col-sm-2 text-end">
    <i style="cursor: pointer;font-size: 17px;" class="fa-solid fa-minus-circle cl_fa" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="true" aria-controls="multiCollapseExample2"></i>
    </div>
    </div>
    </div>
    <div class="collapse show multi-collapse" id="multiCollapseExample2">
    <div class="card-body">
   
    <div class="row">
                        <div class="col-xl-12 mb-1" id="form_div">
                            <div class="row">
                                
                                <div class="col-sm-2 mb-3">
                                    <label class="control-label" for="app_id"><b>Honble judge</b></label>
                                    <select class="form-select" name="lst_judge" id="lst_judge">
                                    <option>Select Judge</option>
                                    @foreach ($get_judge as $judge)
                                    <option value="{{ $judge->jcode }}">{{ $judge->jname }}</option>
                                    @endforeach
                                    </select>
                                </div>
                                <div class="col-sm-2 mb-3">
                                    <label class="control-label" for="Year"><b>Cause List Date</b></label>
                                    <input class="form-control dtp" type='text' name='datepicker' id='datepicker' maxlength='10' autocomplete="on"/>
                                </div>
                                <div class="col-sm-2 mb-3" style="position: relative; top: 25px;">
                                
                                    <div class="form-check form-check-inline">   
                                            <input type="radio" name="sdbench" id="sdbench" value="1" class="form-check-input">SB
                                    </div>
                                    <div class="form-check form-check-inline">          
                                            <input type="radio" name="sdbench" id="sdbench" value="2" class="form-check-input">DB
                                    </div>
                                    <div class="form-check form-check-inline">  
                                            <input type="radio" name="sdbench" id="sdbench" value="3" class="form-check-input">FB                                            
                                    </div>
                                </div>
                                <div class="col-sm-3 mb-3" style="position: relative; top: 25px;">
                                
                                <div class="form-check form-check-inline">   
                                <input type="radio" name="mf" id="mf" value="1" checked class="form-check-input">Motion
                                </div>
                                <div class="form-check form-check-inline">          
                                <input type="radio" name="mf" id="mf" value="2"  class="form-check-input">Final
                                </div>
                                <div class="form-check form-check-inline">  
                                <input type="radio" name="mf" id="mf" value="5" class="form-check-input">Lok Adalat                                    
                                </div>
                            </div>
                                <div class="col-sm-3">
                                    <label class="control-label" for="Search"></label><br />
                                    <button type="button" class="btn btn-primary" id='btn_data'>Submit</button>
                                </div>

                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xl-12 mb-1" id="result"> 
                            
                        </div>
                </div>

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


        </div>
    </div>

    <div class="row" id="dv_view"> 
    <div class="col-sm-3 mb-3 ">
    <ul class="nav nav-tabs">
            <li class="nav-item">
                <a href="#default-tab-5" data-bs-toggle="tab" class="nav-link active">V1</a>
            </li>
            <li class="nav-item">
                <a href="#default-tab-6" data-bs-toggle="tab" class="nav-link cl_view">V2</a>
            </li>
            <li class="nav-item">
                <a href="#default-tab-7" data-bs-toggle="tab" class="nav-link cl_view">V3</a>
            </li>
            <li class="nav-item">
                <a href="#default-tab-8" data-bs-toggle="tab" class="nav-link cl_view">V4</a>
            </li>
        </ul>
        <div class="tab-content">
    <div id="default-tab-5" class="container tab-pane active"><br>
    <div class="row" id="c_results" style="display:none;">
    <div class="col-sm-12 mb-3 dv_container">
        <ul class="nav nav-tabs">
            <li class="nav-item">
                <a href="#default-tab-2" data-bs-toggle="tab" class="nav-link active">Main</a>
            </li>
            <li class="nav-item">
                <a href="#default-tab-3" data-bs-toggle="tab" class="nav-link ">LC</a>
            </li>
            <li class="nav-item">
                <a href="#default-tab-1" data-bs-toggle="tab" class="nav-link ">J/O</a>
            </li>
            <!-- <li class="nav-item">
                <a href="#default-tab-4" data-bs-toggle="tab" class="nav-link ">D</a>
            </li> -->
        </ul>
        <div class="tab-content panel p-3 rounded-0 rounded-bottom">
        <div class="tab-pane fade" id="default-tab-1">
                <div class="spinner-border" role="status" style="display:none;" id='spinner_order_table'>
                <span class="visually-hidden">Loading...</span>
                </div>
                <table class="table" id="order_table" style="display:none;width:80%;">
                    <thead>
                        <tr>
                            <th>Srno</th>
                            <th>Judgement/Orders</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
            <div class="tab-pane fade active show" id="default-tab-2">
            <div class="spinner-border" role="status" style="display:none;" id='spinner_doc_table'>
                <span class="visually-hidden">Loading...</span>
                </div>
                <table class="table" id="doc_table" style="width:80%;">
                    <thead>

                        <tr>
                            <th>Srno</th>
                            <th>Documents</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
            <div class="tab-pane fade" id="default-tab-3">
            <div class="spinner-border" role="status" style="display:none;" id='spinner_lc_table'>
                <span class="visually-hidden">Loading...</span>
                </div>
                <table class="table" id="lc_table" style="width:80%;">
                    <thead>

                        <tr>
                            <th>Srno</th>
                            <th>Particulars of Document</th>
                            <th>Page</th>
                            <th>Date</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
                <table class="table" id="lc_table_67" style="width:80%;">
                <thead>
                    <tr>
                        <th colspan=3 style="text-align: center;">JUDGMENT/ORDERS</th>                        
                    </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
            <!-- <div class="tab-pane fade" id="default-tab-4">
                <p style="text-align: justify;">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac dui eu felis hendrerit lobortis.
                    Phasellus elementum, nibh eget adipiscing porttitor, est diam sagittis orci, a ornare nisi quam
                    elementum tortor. Proin interdum ante porta est convallis dapibus dictum in nibh. Aenean quis massa
                    congue metus mollis fermentum eget et tellus. Aenean tincidunt, mauris ut dignissim lacinia, nisi
                    urna consectetur sapien, nec eleifend orci eros id lectus.
                </p>
            </div> -->
        </div>
    </div>
    <!-- <div class="col-sm-1 mb-1"></div> -->
    
</div>
    </div>

<div id="default-tab-6" class="container tab-pane fade"><br>

    </div>
    <div id="default-tab-7" class="container tab-pane fade"><br>
      <h3>Menu 2</h3>
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
    </div>
    </div>
    </div> 
    <div class="col-sm-9 mb-8">
                                <div id="pl"></div>
                                <!-- <div class="text-end mx-1" >
                                <button class="save-button btn-primary"><i class="fas fa-save"></i> Save</button>
                              
                              </div> -->

                              <div class="text-end d-none mx-1" id="dv_fillscreen">
                              <button class="reload-button rounded-circle bg-transparent border-0 p-0 text-primary me-2  mb-1">
                                <i class="fa fa-redo fa-2xl" title="Reload Annotations"></i></button>
                              <button id="saveAnnotationButton" class="save-button rounded-circle bg-transparent border-0 p-0 text-primary me-2  mb-1">
                                <i class="fas fa-save fa-2xl" title="Save Annotation"></i></button>
                                <button id="fullscreen-button" class="rounded-circle bg-transparent border-0 p-0 text-primary">
  <i id="fullscreen-icon" class="fa fa-expand fa-2xl  mb-1" title="Full Screen"></i>
                               </button>
                              </div>

                                

                            <!-- <div style="height:inherit;width: auto;overflow: hidden;word-wrap: break-word;" id="ggg">
                           <object data="./uploads/1555-03022023011918.pdf"  width="800" height="700" type="application/pdf">  </object> 
                      
                        </div> -->
                        <!-- <div id="pspdfkit"  style="height: 100vh;"></div> -->
                        <div id="pspdfkit" class="dv_container" ></div>
                        <button id="saveAnnotationButton">Save Annotation</button>
        <button id="loadAnnotationButton">Load Annotation</button>
      
      


    </div>
   

   
</div>
</div>     
            <!-- <div class="card mb-3">
            <div class="panel">
						<div class="panel-heading card-bg-color">
								<h4 class="panel-title">Honble Cause List</h4>
							<div class="panel-heading-btn">
								<a href="{{ url('/') }}/ecauselist" class="btn btn-xs btn-icon btn-circle btn-success">
										<i class="fa fa-redo"></i>
                                </a>
                                
                                <a href="javascript:;" class="btn btn-xs btn-icon btn-warning" data-toggle="panel-collapse" data-tooltip-init="true"><i class="fa fa-minus"></i></a>
                                &nbsp;&nbsp;
							</div>
						</div>
				
				</div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-xl-12 mb-1" id="form_div">
                            <div class="row">
                                
                                <div class="col-sm-2 mb-3">
                                    <label class="control-label" for="app_id"><b>Honble judge</b></label>
                                    <select class="form-select" name="lst_judge" id="lst_judge">
                                    <option>Select Judge</option>
                                    @foreach ($get_judge as $judge)
                                    <option value="{{ $judge->jcode }}">{{ $judge->jname }}</option>
                                    @endforeach
                                    </select>
                                </div>
                                <div class="col-sm-2 mb-3">
                                    <label class="control-label" for="Year"><b>Cause List Date</b></label>
                                    <input class="form-control dtp" type='text' name='datepicker' id='datepicker' maxlength='10' autocomplete="on"/>
                                </div>
                                <div class="col-sm-2 mb-3" style="position: relative; top: 25px;">
                                
                                    <div class="form-check form-check-inline">   
                                            <input type="radio" name="sdbench" id="sdbench" value="1" class="form-check-input">SB
                                    </div>
                                    <div class="form-check form-check-inline">          
                                            <input type="radio" name="sdbench" id="sdbench" value="2" class="form-check-input">DB
                                    </div>
                                    <div class="form-check form-check-inline">  
                                            <input type="radio" name="sdbench" id="sdbench" value="3" class="form-check-input">FB                                            
                                    </div>
                                </div>
                                <div class="col-sm-3 mb-3" style="position: relative; top: 25px;">
                                
                                <div class="form-check form-check-inline">   
                                <input type="radio" name="mf" id="mf" value="1" checked class="form-check-input">Motion
                                </div>
                                <div class="form-check form-check-inline">          
                                <input type="radio" name="mf" id="mf" value="2"  class="form-check-input">Final
                                </div>
                                <div class="form-check form-check-inline">  
                                <input type="radio" name="mf" id="mf" value="5" class="form-check-input">Lok Adalat                                    
                                </div>
                            </div>
                                <div class="col-sm-3">
                                    <label class="control-label" for="Search"></label><br />
                                    <button type="button" class="btn btn-primary" id='btn_data'>Submit</button>
                                </div>

                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xl-12 mb-6" id="result">
                            
                        </div>
                </div>
            </div>

       
    </div> -->

    <!--<div class="card mb-3">
            <div class="card-header card-bg-color ">Causelist</div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-xl-12 mb-3" id="result">
                            
                        </div>
                    </div>        
                </div>
            </div>
        </div>-->
@endsection
@push('scripts')
<script>
var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
    $("#btn_data").click(function(){

        var lst_judge=$("#lst_judge").val();
        var datepicker=$("#datepicker").val();
        var sdbench=$("input[name='sdbench']:checked").val();
        var mf=$("input[name='mf']:checked").val();
        $.ajax({
           url: 'get_cl_records',
           type: 'POST',
           cache: false,
            async: true,
           beforeSend:function(){
              $('#result').html("<div class='text-center'><div class='spinner-border'></div></div>");
          },
           data: {_token: CSRF_TOKEN, lst_judge: lst_judge,datepicker:datepicker,sdbench:sdbench,mf:mf},
           success: function(response){
          
           // alert(response);
            //createRows(response);
            $("#result").html(response);
        //   var lst_allcases=  $('#lst_allcases').val();
        //   alert(lst_allcases);
        //   GetDoc(lst_allcases);
            // alert("ans");
            // $('.top').addClass('row');
            // $('.dataTables_filter').addClass('col-sm-3');
            // $('#data-table-default_paginate').addClass('col-sm-9'); 
            // alert("ans1");
            // $("#form_div").hide(); 

            //GetOrder(fil_no);
           }
         }); 

    });

    $(document).on('click','.cl_fa',function(){
         if($(this).hasClass('fa-plus-circle'))
         {
            $(this).removeClass('fa-plus-circle');
            $(this).addClass('fa-minus-circle'); 
         }
         else 
         {
            $(this).addClass('fa-plus-circle');
            $(this).removeClass('fa-minus-circle');
         }
    });

    $(document).on('click','.cl_view',function(){
      var get_val=$(this).attr('href');
      $.ajax({
            url: "/ecauselist/getview",
            type: 'POST',
            cache: false,
            async: true,
            data: { get_val: get_val},
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function (data, status) {
               $(get_val).html(data);
            },
            error: function (xhr) {

                alert("Error:" + xhr.status + ' ' + xhr.statusText);
            }
        });
      
    });

</script>
@endpush