@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>Month Wise Well Count</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<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>

                    <div class="col-md-2 mb-0">
                        <label for="validationCustom02">State<span class="red">*</span></label>
                        <select class="form-control StateCodeFilter" name="StateCode" id="StateCode" onchange="showSeason(this.value)">
                            <option value="">--Select--</option>                            
                        </select>
                    </div>

                    <div class="col-md-2 mb-0 administrative">
                        <label for="validationCustom02">District</label>
                        <select class="form-control DistrictCodeFilter" name="DistrictCode" id="DistrictCode">
                            <option value="">--All--</option>
                        </select>
                    </div>


                    <div class="col-md-6 col-lg-2">
                        <div class="form-group">
                            <label for="validationCustom02">Year</label>
                            <select class="form-control Year" name="Year" id="Year">
                                @for ($i = 2024; $i <= date('Y'); $i++)
                                    <option value="{{ $i }}">{{ $i }}</option>
                                @endfor
                            </select>
                        </div>
                    </div>

                    <div class="col-md-6 col-lg-2">
                        <div class="form-group">
                            <label for="validationCustom02">Status</label>
                            <select class="form-control status" name="status" id="status">
                                <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>
                            </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">
                        @include('common.error')
                        <div class="table-responsive">
                            <table id="simpletable" class="table table-striped table-bordered nowrap">
                                <thead>
                                    <tr role="row">
                                        <th>Sr. No.</th>
                                        <th>State</th>
                                        <th>District</th>
                                        <th>Block</th>
                                        <th>Year</th>
                                        <th>Jan</th>
                                        <th>Feb</th>
                                        <th>Mar</th>
                                        <th>Apr</th>
                                        <th>May</th>
                                        <th>Jun</th>
                                        <th>Jul</th>
                                        <th>Aug</th>
                                        <th>Sep</th>
                                        <th>Oct</th>
                                        <th>Nov</th>
                                        <th>Dec</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </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"});
                $(".RegionFilter").trigger('change');
            @endif
            function getResults() {
                var Year = $("#Year").val();
                var RegionID = $('#RegionID').val();
                var State = $('#StateCode').val();
                var Dist = $('#DistrictCode').val();
                var status = $('#status').val();
                var data = {"regionID": RegionID,"stateCode": State,"districtCode": Dist,"Year": Year, "status":status,"_token": "{{ csrf_token() }}"};

                var columns = [];

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

                var table = $('#simpletable').DataTable({
                    "processing": false,
                    retrieve: true,
                    /*
                    "language": {
                        'processing': '<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i><span class="sr-only">Loading..n.</span>'
                    },*/
                    "serverSide": true,
                    "bFilter": true,
                    "bLengthChange": true,
                    "ordering": false,
                    "iDisplayLength": 10,
                    "responsive": true,
                    "bDestroy": true,
                    // "scrollX": true,
                    // "fixedColumns": {
                    //     "leftColumns": 4
                    // },
                    "ajax": {
                        "url": "{{ url('incremental-well-summary-report') }}",
                        "type": "POST",
                        "data": data,
                        "dataType": "json",
                        beforeSend: function() {
                            $(".loaderpk").css("display", "block");
                        },
                        complete: function() {
                            $(".loaderpk").css("display", "none");
                        }, 
                        "dataSrc": function(jsonData) {
                            $('#report').show();
                            return jsonData.data;
                        }
                    },
                    "columnDefs": [
                        {
                            "targets": [4,5, 6,7,8,9,10,11,12,13,14,15,16],
                            "className": "text-right"
                        }
                    ]
                });
            }


            $(".filter_btn").on('click', function() {
                var RegionID = $('#RegionID').val();
                var State = $('#StateCode').val();
                var Dist = $('#DistrictCode').val();
                if(RegionID == ''){
                    bootbox.alert('Please select Region');
                    return false;
                }
                if(State == ''){
                    bootbox.alert('Please select state');
                    return false;
                }
                getResults();
            });

            // getResults();


        });
    </script>
    <style>
        th,td {
            white-space: nowrap;
        }

        #well_details div.dataTables_wrapper {
            width: 800px;
            margin: 0 auto;
        }
    </style>
@endsection