@extends('layouts.app')

@section('content')

    <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>Water Quality</h4>
                    </div>
                </div>
            </div>
           
        </div>
    </div>
    <!-- Page-header end -->

    <!-- Page-body start -->
    <div class="page-body">
        <div class="row">
            
            <input type="hidden" name="WellNo" id="WellNo" value="{{$WellNo}}">
            
            
            <div class="col-md-2 mb-3 administrative">
                <label for="validationCustom02">From Date<span class="red">*</span></label>
                <input type="date" name="fromDate" id="fromDate">
            </div>
            <div class="col-md-2 mb-3 administrative">
                <label for="validationCustom02">To Date</label>
                <input type="date" name="toDate" id="toDate">
            </div> 

            
             
            <div class="col-md-4 mt-4 ">
                <input type="bttton" class="btn btn-primary text-white filter" name="Search" value="Filter" >
                <a href="javascript:;" onClick="addRow()">Add Record</a>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <!-- Zero config.table start -->
                <div class="card">
                    <div class="card-block">
                        
                        <div class="dt-responsive">
                        @include('common.error')                        
                        <table id="simpletable" class="table table-striped table-bordered nowrap">
                                <thead>
                                    
                                    <tr>
                                        <th>SNo.</th>
                                        <th>Depth (mtr) </th>
                                        <th>Lithology (main)</th>
                                        <th>Texture   </th>
                                        <th> Color   </th>
                                        <th> Shape  </th>
                                        <th> Lithology (sub)</th>
                                        <th> Texture  (sub)</th>
                                        <th> Color (sub)</th>
                                        <th> Shape (sub)</th>
                                        <th> Drill_Time </th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @if(!empty($list))
                                    @php $i = 0; @endphp
                                        @foreach($list as $item)
                                            <tr>
                                                <td>{{++$i}}</td>
                                                <td>{{$item->DepthTo}}</td>
                                                <td>{{$item->LithologyID}}</td>
                                                <td>{{$item->TextureID}}</td>
                                                <td>{{$item->ColourID}}</td>
                                                <td>{{$item->ShapeID}}</td>
                                                <td>{{$item->SubLithologyID}}</td>
                                                <td>{{$item->SubTextureID}}</td>
                                                <td>{{$item->SubColourID}}</td>
                                                <td>{{$item->SubShapeID}}</td>
                                                <td>{{$item->Drill_Time}}</td>
                                                <td>dsfsd</td>
                                            </tr>
                                        @endforeach
                                    @endif
                                </tbody>

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

            </div>
        </div>
    </div>
    
    <script src="{{ asset('bower_components\datatables.net\js\jquery.dataTables.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>
    <script>
        var properties = [
                            'WellNo',
                            'SampleID',
                            'Samplingdate',
                            'pH'                  ,
                            'EC',
                            'TDS',
                            'Na'          ,
                            'K'                 ,
                            'Ca'                 ,
                            'Mg'                ,
                            'CO3',
                            'HCO3',
                            'Cl',
                            'SO4',
                            'NO3',
                            'F'                  ,
                            'T_Hard',
                            'SAR',
                            'SARclassification',
                            'RSC',
                            'RSCClassification'
                            ];
        $(function(){

            $('#simpletable').DataTable();


            // $(".filter").click(function(){
            //     districtCode = $('#districtCode').val();
            //     if(districtCode != '')
            //         getResults();
            // })

            // // getResultsInitial();

            // getResults();

            // $('a.editrow').bind('click', function (e) {
            //     alert('in');
            // });
            

            
        });

        function getResultsInitial()
        {
            $('#simpletable').DataTable( {
                "language": {
                                "emptyTable": "No data available in table"
                            }
            } );
        }

        function getResults()
        {
            WellNo = $('#WellNo').val();
            fromDate = $("#fromDate").text();
            toDate = $("#toDate").text();
            basin = $("#basin").val();
            subBasin = $("#subBasin").val();
            var table = $('#simpletable').DataTable({
                "processing":false,
                "serverSide": false, //Feature control DataTables' servermside processing mode.
                "bFilter" : false,
                "bLengthChange": false,
                "ordering"  : false,
                "paging"  : false,
                "iDisplayLength" : 25,
                "responsive"  :true,
                "bDestroy": true,
                "ajax": {
                            "url": "{{ route('general-waterquality') }}",
                            "type": "GET",
                            "data" : {"WellNo": WellNo, "fromDate": fromDate, "toDate": toDate},
                            "dataType": "json",
                            "dataSrc": function (jsonData) {
                                        // alert(JSON.Stringify(jsonData.data));
                                        return jsonData.data;

                                        
                                    }
                        },
                "language": {
                    "emptyTable": "No data available in table"
                }
            });
            
        }


        // function editRow(obj)
        // {
        //     alert(obj);
        //     var row = obj.closest("tr");
        //     var tds = row.find("td").not(':first').not(':last');

        //     $.each(tds, function(i, el) {
        //       var txt = $(this).text();
        //       $(this).html("").append("<input type='text' value=\""+txt+"\">");
        //     });
        // }

        function addRow()
        {
            var dict = {};
            dict['flag'] = 2;
            $.ajax({

                    url: "/General/WellLithologyEntryRow/",
                    type: "GET",
                    data: dict, 
                    dataType: 'JSON'

                })
                .done(function(response){
                    // alert(response)
                    $(response.row).insertAfter('#simpletable tbody tr:last');
                })
        }

        function editRow(this_)
        {
            // var tr = $(this_).closest("tr");
            // rowindex = tr.index();

            var row = $(this_).closest("tr");
            var tds = row.find("td").not(':first').not(':last');

            $.each(tds, function(i, el) {
                var txt = $(this).text();
                var type = "text";
                var dd = '';
                if (properties[i+1] == "Samplingdate")
                {
                    type = "date";

                    // if (txt.indexOf('-') == 2) {
                    //     dd = txt.split('-');
                    //     txt = dd[2] + '-' + dd[1] + '-' + dd[0];
                    // }
                    // if (txt.indexOf('/') == 2) {
                    //     dd = txt.split('/');
                    //     txt = dd[2] + '-' + dd[1] + '-' + dd[0];
                    // }


                }
                // alert(txt);
                $(this).html('<input type="'+ type +'" name="'+ properties[i+1] +'" value="'+ (txt.toString()) +'" style="width:100px">');
            });
            row.find("td:last").html('<a href="javascript:void(0)" class="edit" onclick="saveRow(this, 1)"><i class="ti-save"></i></a><a href="javascript:void(0)" class="edit" onclick="cancelEdit(this, 1)"><i class="ti-close"></i></a>');
        }

        function cancelEdit(this_, flag)
        {
            // var tr = $(this_).closest("tr");
            // rowindex = tr.index();
            if(flag == 2)
            {
                var row = $(this_).closest("tr").remove();
            }
            else
            {
                var row = $(this_).closest("tr");
                var tds = row.find("td").not(':first').not(':last');
    
                $.each(tds, function(i, el) {
                    var txt = $(this).find('input' ).val();
                    var type = "text";
                    var dd = '';
                    if (properties[i+1] == "Samplingdate")
                    {
                        type = "date";
                    }
                    // alert(txt);
                    $(this).html(txt.toString());
                });
                row.find("td:last").html('<a href="javascript:void(0)" class="edit" onclick="editRow(this)"><i class="ti-pencil-alt"></i></a>');
            }
        }

        function saveRow(this_, flag)
        {
            bootbox.confirm({
                title: "",
                message: "Do you really want to save data?",
                callback: function (result) {
                    if(result)
                    {
                        
                        
                        
                        $.ajaxSetup({
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            }
                        });
                        
                        var row = $(this_).closest("tr");
                        var tds = row.find("td").not(':first').not(':last');
                        var dict = {}
                        
                        $.each(tds, function(i, el) {
                            var data = $(this).find('input' ).val();
                            var name = $(this).find('input').attr('name');

                            dict[name] = data
                        });
                        dict['Wellno'] = row.find("td:first").text();
                        dict['flag'] = flag;
                        

                        $.ajax({

                            url: "/General/UpdateWaterQuality/",
                            type: "POST",
                            data: dict, 
                            dataType: 'JSON'

                        })
                        .done(function(response){
                            bootbox.alert({title: "Saved?", message: response.message});
                            location.reload();
                        })
                        .fail(function(response){
                            bootbox.alert({title: "Saved?",
                                message: 'Something Went Wrong..'});
                        })
                    }
                }
            });
            
        }

        
    </script>
@endsection