@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 Information</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 pb-2">
            <div class="row"> 
                <div class="col-md-6 col-lg-2">
                    <div class="form-group">
                        <label for="validationCustom02">Region</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>
                
                <div class="col-md-6 col-lg-2">
                    <div class="form-group">
                        <label for="validationCustom02">State</label>
                        <select class="form-control StateCodeFilter" name="StateCode" id="StateCode">
                            <option value="">--select--</option>                            
                        </select>
                    </div>
                </div>
                
                
                <div class="col-md-6 col-lg-2">
                    <div class="form-group">
                        <label for="validationCustom02">District</label>
                        <select class="form-control DistrictCodeFilter" name="DistrictCode" id="DistrictCode">
                            <option value="">--Select--</option>
                        </select>
                    </div>
                </div>

                {{-- <div class="col-md-6 col-lg-2">
                    <div class="form-group">
                        <label for="validationCustom02">Block</label>
                        <select class="form-control BlockCode" name="BlockCode" id="BlockCode">
                            <option value="">--Select--</option>
                        </select>
                    </div>
                </div> --}}
                
                
                <div class="col-md-6 col-lg-2">
                    <div class="form-group">
                        <label for="validationCustom02">Well Type</label>
                        <select class="form-control form-control js-example-basic-multiple select2 select2-hidden-accessible WellType" name="WellType[]" id="WellType" multiple tabindex="-1" aria-hidden="true">
                            <option value="">--Select--</option>
                            @foreach ($well_type_list as $row)                                
                            <option value="{{ $row->combo_value }}">{{ $row->combo_text }}</option>
                            @endforeach
                        </select>
                    </div> 
                </div> 


                <div class="col-md-6 col-lg-2">
                    <div class="form-group">
                        <label for="validationCustom02">Aquifer</label>
                        <select class="form-control AqTap" name="AqTap" id="AqTap">
                            <option value="">--Select--</option>
                            @foreach ($AqTap_list as $row)                                
                            <option value="{{ $row->combo_value }}">{{ $row->combo_text }}</option>
                            @endforeach
                        </select>
                    </div> 
                </div> 

                <div class="col-md-6 col-lg-2">
                    <div class="form-group">
                        <label for="validationCustom02">Well Status</label>
                        <select class="form-control WellStatus" name="WellStatus" id="WellStatus">
                            <option value="">--Select--</option>
                            <option value="1">Active</option>
                            <option value="2">Inactive</option>
                        </select>
                    </div> 
                </div> 
                
                <div class="col-md-6 col-lg-2">
                    <div class="form-group">
                        <label class="visibility-hidden">Filter</label>
                        <div class="d-flex">
                        <button type="bttton" class="btn btn-sm btn-primary text-white filter_btn mr-2" name="Search" value="Filter">Filter</button> 
                        <form action="/DownloadWellInfo" method="POST"> 
                            @csrf
                            
                            <input type="hidden" name="regionID" id="post_regionID" >
                            <input type="hidden" name="stateCode" id="post_stateCode" >
                            <input type="hidden" name="districtCode" id="post_districtCode" >
                            <input type="hidden" name="wellType" id="post_WellType">
                            <input type="hidden" name="AqTap" id="post_AqTap">
                           
                            <button type="submit" class="btn btn-sm btn-primary text-white" name="Search">Download</button> 
                                               
                            <!---<a href="javascript:void(0)" class="btn btn-primary mb-2" style="float: right;">
                                    <i class="fa fa-download" aria-hidden="true"></i> Download
                            </a>--->
                        </form>
                        </div>
                    </div>
                </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
                        <div class="table-responsive">
                            <table id="well_info_summary_table" class="table table-striped table-bordered nowrap">
                                <thead></thead>
                                <tbody></tbody>                            
                            </table>
                        </div>
                    </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>District</th>
                                                <th>Block</th>
                                                <th>Well No</th>
                                                <th>Well Type</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>Well Status</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="{{ asset('bower_components\data_table\dataTables.dataTables.css') }}" >
<link rel="stylesheet" href="{{ asset('bower_components\data_table\fixedColumns.dataTables.css') }}" >
<link rel="stylesheet" href="{{ asset('bower_components\data_table\buttons.dataTables.css') }}" >
<script src="{{ asset('bower_components\data_table\dataTables.js') }}"></script>
<script src="{{ asset('bower_components\data_table\dataTables.fixedColumns.js') }}"></script>
<script src="{{ asset('bower_components\data_table\fixedColumns.dataTables.js') }}"></script>

<script src="{{ asset('bower_components\data_table\dataTables.buttons.js') }}"></script>
<script src="{{ asset('bower_components\data_table\buttons.dataTables.js') }}"></script>
<script src="{{ asset('bower_components\data_table\buttons.colVis.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();
            var AqTap = $("#AqTap").val();
            var WellStatus = $("#WellStatus").val();

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

            $('#post_regionID').val(RegionID);
            $('#post_stateCode').val(StateCode);
            $('#post_districtCode').val(DistrictCode);
            $('#post_WellType').val(WellType);
            $('#post_AqTap').val(AqTap);
            $('#WellStatus').val(WellStatus);
            
            var columns = [];
            
            $.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) {
                        if(item == 'Region' || item == 'StateName' || item == 'DistrictName' || item == 'Block'){
                            var title = item+ ' (Total Wells)';
                        }else{
                            var title = item+'s';
                        }
                        columns.push({
                            data: item,
                            title: title
                        });
                    });
                    
                    // 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({
                        "processing": true, // for show progress bar,
                        retrieve: true,
                        "language": {
                            'processing': '<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i><span class="sr-only">Loading..n.</span>'
                        },
                        "bDestroy": true,
                        "serverSide": true,
                        "bLengthChange" : true,
                        "iDisplayLength": 10,
                        "searching": true,
                        // "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(WellStatus =null ,RegionID=null,stateCode=null,DistrictCode=null,BlockCode=null,WellType){
        // Initialize DataTable with parameters
        initializeDataTable(WellStatus, RegionID, stateCode, DistrictCode,BlockCode, WellType);           
        // $('.theme-loader-black').show();
        $("#well_details").show();
    }
    
    function initializeDataTable(WellStatus =null, RegionID=null,stateCode=null,DistrictCode=null,BlockCode=null,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": 4
            },
            "dom": 'Bfrtip',
            "buttons": [
            {
                "extend": 'colvis'
            }
            ],
            "ajax": {
                "url": "{{ route('abstract_details') }}" + '?RegionID=' + RegionID + '&stateCode=' + stateCode + '&distrctCode=' + DistrictCode+ '&blockCode=' + BlockCode+ '&wellType=' + WellType + '&WellStatus=' + WellStatus ,
                "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