@extends('layouts.app')

@section('content')
<style>
    .modal-lg {
        max-width: 70%;
        max-height: 300px!important;
    }
    .well_details_body {
        height : 400px;
        overflow-y: auto;
    }
    .modal.well_details {
        z-index: 1050; /* or higher if needed */
    }
    
</style>
    <div class="page-header">
        <div class="row align-items-end">
            <div class="col-lg-8">

                <div class="page-header-title">
                    <div class="d-inline">
                        <h4>Well Info</h4>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <!-- Page-header end -->

    @php $user = Auth::user(); @endphp

    <!-- Page-body start -->
    <div class="page-body">
        <div class="card mb-2">
            <div class="card-block">
                <div class="row">

                    <div class="col-md-2 mb-3">
                        <label for="validationCustom02">Region<span class="red">*</span></label>
                        <select class="form-control RegionFilter" name="RegionID" id="RegionID">
                            <option value="">--select--</option>
                            @foreach ($t_Master_Region as $row)                                
                                <option value="{{ $row->RegionID }}" 
                                @if(($user->RoleID == 2) && ($row->RegionID == $user->RegionID))
                                        selected = "selected"
                                @endif
                                >{{ $row->RegionName }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-md-2 mb-3">
                        <label for="validationCustom02">State<span class="red">*</span></label>
                        <select class="form-control StateCodeFilter" name="StateCode" id="StateCode">
                            <option value="">--select--</option>                            
                        </select>
                    </div>
                    <div class="col-md-2 mb-3">
                        <label for="validationCustom02">District</label>
                        <select class="form-control district_id" name="DistrictCode" id="DistrictCode">
                            <option value="">--Select--</option>
                        </select>
                    </div>

                    <div class="col-md-2 mb-3">
                        <label for="validationCustom02">Well Type</label>
                        <select class="form-control WellType" name="WellType" id="WellType">
                            <option value="">--Select--</option>
                            @foreach ($well_type_list as $row)                                
                                <option value="{{ $row->combo_value }}">{{ $row->combo_text }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-md-4 mt-4 ">
                        <input type="bttton" class="btn btn-primary text-white filter_btn" name="Search" value="Filter">
                    </div>
                </div>
            </div>
        </div>

        
        <div class="row">            

            <div class="col-sm-12">
                <!-- Zero config.table start -->
                <div class="card">
                    <div class="card-block">

                        <div class="">
                            @include('common.error')
                            @php
                                $i = 0;
                            @endphp
                            <table id="well_info_summary_table" class="table table-striped table-bordered nowrap">
                                <thead>
                                   {{--  <th>State</th>
                                    <th>District</th>
                                    <th>Bore Well</th>
                                    <th>Tube Well</th>
                                    <th>Dug Well</th> --}}
                                    
                                </thead>
                                <tbody>

                                </tbody>

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

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


     <!-- The Modal -->
     <div class="modal well_details" id="well_details">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Well info Details</h5>
                    <button type="button" class="close close_modal" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <!-- Modal body -->
                <div class="modal-body p-0">
                    <div class="row d-flex justify-content">
                        <div class="col-sm-12">
                            <!-- Zero config.table start -->
                            <div class="card">
                                <div class="card-block">
                                       
                                        <div class="table-responsive well_details_body">
                                            <table id="well_details_table" class="table table-striped table-bordered nowrap" >
                                                <thead>
                
                                                    <tr>
                                                        <th>Well No</th>
                                                        <th>Well Type</th>
                                                        <th>District</th>
                                                        <th>Mandal</th>
                                                        <th>Location</th>
                                                        <th>Latitude</th>
                                                        <th>Longitude</th>
                                                        <th>Toposheet_No.</th>
                                                        <th>Altitude(m_amsl)</th>
                                                        <th>Ht_of_MP(m_agl)</th>
                                                        <th>Well_Depth(m_bgl)</th>
                                                        <th>Use</th>
                                                        <th>Abstraction</th>
                                                        <th>Geology</th>
                                                        <th>Geomorphology</th>
                                                        <th>stratigraphy</th>
                                                        <th>Land_Use</th>
                                                        <th>Basin</th>
                                                        <th>Sub_Basin</th>
                                                        <th>Minor_Basin</th>
                                                        <th>Command_Area</th>
                                                        <th>Rainfall_Station</th>
                                                        <th>WQ_Issue</th>
                                                        <th>WQ_Monitoring_Type</th>
                                                        <th>Water_Bearing_Zones(mbgl)</th>
                                                    </tr>
                                                </thead>
                                                <tbody id="well-details-table-body">
                
                                                </tbody>
                
                                            </table>
                                        </div>
                                    
                                </div>
                            </div>
            
                        </div>
                    </div>
                </div>  
            </div>
        </div>
    </div>

    <link rel="stylesheet" href="https://cdn.datatables.net/2.0.8/css/dataTables.dataTables.css" >
    <link rel="stylesheet" href="https://cdn.datatables.net/fixedcolumns/5.0.1/css/fixedColumns.dataTables.css" >
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/3.0.2/css/buttons.dataTables.css" >
    <script src="https://cdn.datatables.net/2.0.8/js/dataTables.js"></script>
    <script src="https://cdn.datatables.net/fixedcolumns/5.0.1/js/dataTables.fixedColumns.js"></script>
    <script src="https://cdn.datatables.net/fixedcolumns/5.0.1/js/fixedColumns.dataTables.js"></script>
    
    <script src="https://cdn.datatables.net/buttons/3.0.2/js/dataTables.buttons.js"></script>
    <script src="https://cdn.datatables.net/buttons/3.0.2/js/buttons.dataTables.js"></script>
    <script src="https://cdn.datatables.net/buttons/3.0.2/js/buttons.colVis.min.js"></script>
    

    
    <!-- <script src="{{ asset('bower_components\datatables.net-buttons\js\dataTables.buttons.min.js') }}"></script> -->
    <!-- <script src="{{ asset('bower_components\datatables.net-bs4\js\dataTables.bootstrap4.min.js') }}"></script> -->

    <!-- Column visibility JS -->
    <!-- <script src="{{ asset('bower_components\datatables.net-buttons\js\buttons.colVis.min.js') }}"></script> -->
    <!-- FixedColumns JS -->
    <!-- <script src="{{ asset('bower_components\datatables.net-fixedcolumns\js\dataTables.fixedColumns.min.js')}}"></script> -->


    <script>
        $(function() {

            @if($user->RoleID == 2)
                $(".RegionFilter").css({"pointer-events": "none","touch-action": "none","background": "#e9ecef"});
            @endif
            
            $('#well_details').modal({ show: false });
            function getResults() 
            {
                var RegionID = $("#RegionID").val();
                var StateCode = $("#StateCode").val();
                var DistrictCode = $("#DistrictCode").val();
                var WellType = $("#WellType").val();

                data =  {"regionID": RegionID, "stateCode": StateCode, "distrctCode": DistrictCode, "wellType": WellType};

                var columns = [];
                // console.log(data);

                /* var table = $('#well_info_summary_table').DataTable({
                    "processing":true,
                    "serverSide": true,
                    "bFilter" : true,
                    "bLengthChange": true,
                    "ordering"  : true,
                    "aaSorting": [],
                    "iDisplayLength" : 10,
                    "responsive"  :true,
                    "ajax": {
                        "url": "{{ route('abstract') }}",
                        "type": "GET",
                        "dataType": "json",
                        "data" : browse_data,
                        "dataSrc": function (jsonData) {
                            console.log(jsonData);
                            return jsonData.data;
                        }
                        "columns":function (jsonData){

                        }
                    }
                }); */

                $.ajax({
                    url: "{{ route('abstract') }}",
                    method: 'GET',
                    "data" : data,
                    success: function(response) {
                        var jsonObject = $.parseJSON(response);
                        var keysorder = jsonObject.keysorder;                    
                        // Initialize DataTable with server-side processing

                        $.each(jsonObject.keysorder, function(key, item) {
                            columns.push({
                                data: item,
                                title: item
                            });
                        });

                        // Destroy the existing DataTable if it exists
                        if ($.fn.DataTable.isDataTable('#well_info_summary_table')) {
                            $('#well_info_summary_table').DataTable().clear().destroy();
                        }

                        $('#well_info_summary_table').find('thead').remove();
                        $('#well_info_summary_table').append('<thead><tr id="table-header"></tr></thead>');


                        columns.forEach(function(column) {
                            $('#table-header').append('<th>' + column.title + '</th>');
                        });                        

                        
                        var table = $('#well_info_summary_table').DataTable({
                            "bDestroy": true,
                            "serverSide": true,
                            "bLengthChange" : false,
                            "iDisplayLength": 10,
                            "searching": false,
                            "dom": 'lifrtp',
                            "destroy": true,
                            "ajax": {
                                "url": "{{ route('abstract') }}",
                                "type": "GET",
                                "dataType": "json",
                                "data" : data,
                                "dataSrc": function (jsonData) {
                                    console.log(jsonData);
                                    return jsonData.data;
                                }
                            },
                            "columns": columns
                        });
                        
                    }
                });
            }


            $(".filter_btn").on('click',function() {
                getResults();                
            });

            getResults();

            $(".close_modal").click(function() {
                $('.theme-loader-black').hide();
                $("#well_details").hide();
                $('#well_details_table').DataTable().destroy();
            });


            

            

            
        });

        
        function getWellInfoDetails(RegionID,stateCode,DistrictCode,WellType){
            // Initialize DataTable with parameters
            initializeDataTable(RegionID, stateCode, DistrictCode, WellType);           
            // $('.theme-loader-black').show();
            $("#well_details").show();
        }

        function initializeDataTable(RegionID,stateCode,DistrictCode,WellType){
            // Destroy any existing DataTable instance to avoid reinitialization issues
            if ($.fn.DataTable.isDataTable('#well_details_table')) {
                $('#well_details_table').DataTable().destroy();
            }
            // Initialize DataTable with the given parameters
            $('#well_details_table').DataTable({
                "processing": true,
                "serverSide": false,
                "bFilter": true,
                "bLengthChange": false,
                "ordering": false, // Disable sorting
                "iDisplayLength": 10,
                "responsive": true,
                "scrollX": true,
                "fixedColumns": {
                    "leftColumns": 2
                },
                "dom": 'Bfrtip',
                "buttons": [
                    {
                        "extend": 'colvis'
                    }
                ],
                "ajax": {
                    "url": "{{ route('abstract_details') }}" + '?RegionID=' + RegionID + '&stateCode=' + stateCode + '&distrctCode=' + DistrictCode+ '&wellType=' + WellType,
                    "type": "GET",
                    "dataType": "json",
                    "dataSrc": function(jsonData) {
                        return jsonData.data;
                    }
                }
            });
        }
    </script>
    <style>
        th, td { white-space: nowrap; }
        #well_details div.dataTables_wrapper {
            width: 800px;
            margin: 0 auto;
        }
        </style>
@endsection