@extends('layouts.view')
@section('title','Users Management')
@section('content')
    <script src="{{ asset('assets/js2/js/jquery.min.js') }}"></script>

    <script src="{{ asset('assets/js2/js/bootstrap.min.js') }}"></script>
    <script src="{{ asset('assets/js2/js/jquery.form.js') }}"></script>
    <script src="{{ asset('assets/plugins/dropify/js/dropify.min.js') }}"></script>

    <script src="{{ asset('assets/pages/jquery.form-upload.init.js') }}"></script>
    <link href="{{ asset('assets/plugins/dropify/css/dropify.min.css') }}" rel="stylesheet">
    <style>
        .btn-primary{
            webkit-box-shadow: 0 7px 14px 0 rgba(80,110,228,0.5) !important;
            box-shadow: 0 7px 14px 0 rgba(80,110,228,0.5) !important;
        }
        .btn{
            color: #fff !important;
            background-color: #2449dd !important;
            border-color: #2145d4 !important;
            -webkit-transition: .3s ease-out !important;
            transition: .3s ease-out !important;
            -webkit-box-shadow: 0 7px 14px 0 rgba(234,240,249,0.5) !important;
            box-shadow: 0 7px 14px 0 rgba(234,240,249,0.5) !important;
            font-size: 12px !important;
        }
        .btn-primary:hover {
            color: #fff !important;
            background-color: #2f53df !important;
            border-color: #2449dd !important;
        }
        .report-container{
            width:1000px !important;
            max-width: 1000px;
        }
#country-list{float:left;list-style:none;margin-top:-20px;padding:0;width:40%;position: absolute;z-index:3000;}
#country-list li{padding: 10px; background: #EFF1FE; border-bottom: #bbb9b9 1px solid;z-index:3000;}
#country-list li:hover{background:#DBDBDB;cursor: pointer;z-index:3000;}
#reg_name{padding: 10px;border-radius:4px;z-index:3000;}
    </style>
    <div class="container-fluid">

        <div class="col-12" style="margin-top: 10px;">
            <div class="card">
                <div class="card-body">
                    <!-- end col -->


                    <div id="formDialog" class="card-body">

                        <div class="row">
                            <div class="col-lg-12">
                                <form class="form-horizontal row-fluid" action="{{ route('searchres') }}" method="post" enctype="multipart/form-data">
                                    {{csrf_field()}}

                                    <input type="hidden" name="btn_press" id="btn_press"  />
                                    <input type="hidden" name="increment_i" id="increment_i" value="0"/>
                                    <input type="hidden" name="the_sign" id="the_sign" />

                                        <div class="form-group row">
                                        <div class="col-sm-6">
                                            <label for="exampleInputPassword1">Select Date</label>
                                            <input required type="date" date-date-format="yyyy-mm-dd" class="form-control" name="thedate" id="mdate">
                                        </div>
                                        <div class="col-sm-6">
                                            <label for="exampleInputPassword1">Rig Name / Well Name</label>
                                            <div class="input-group">

                                                <input type="text" id="reg_name" name="reg_name" class="form-control" placeholder="Search">
                                                
                                                <span class="input-group-prepend">
                                                    <button type="submit" class="btn btn-primary" id="btn_press"><i class="fas fa-search"></i></button>
                                                </span> 
                                               
                                            </div>
                                            <br>
                                            <code style="font-size: 79%;">Note: when you search by well name you will get the rig names under this well name.</code>
                                            <br>
                                                <div id="rigList">
    </div>
                                        </div>
                                            </div >

                                <div class="progress" style="height: 20px;">
                                    <div class="progress-bar progress-bar-striped progress-bar-animated" aria-valuenow="" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
                                        0%
                                    </div>
                                </div>
                                <br />
                                <div id="success" class="row col-md-12" style="width:1000px !important;max-width: 1000px;">

                                </div>
                                <br />

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

                </div>


            </div>
        </div> <!-- end col -->
    </div>
    <script>
$(document).ready(function(){
            
    $('#reg_name').keyup(function(){ 
        var query = $(this).val();
        if(query != '')
        {
             var _token = $('input[name="_token"]').val();
             $.ajax({
              url:"{{ route('fetch') }}",
              method:"POST",
              data:{query:query, _token:_token},
              beforeSend: function(){
			$("#reg_name").css("background","#FFF url('assets/images/LoaderIcon.gif') no-repeat 165px");
	    	},
              success:function(data){
               $('#rigList').fadeIn();  
               $('#rigList').html(data);
               $("#reg_name").css("background","#FFF");
              }
             });
        }
    });

    $(document).on('click', 'li', function(){  
        $('#reg_name').val($(this).text());  
        $('#rigList').fadeOut();  
    });  
            
         $('form').ajaxForm({
                beforeSend:function(){
                    $('#success').empty();
                    $('.progress-bar').text('0%');
                    $('.progress-bar').css('width', '0%');
                },
                uploadProgress:function(event, position, total, percentComplete){
                },
                success:function(data)
                {
                    if(data.success)
                    {

                        $('#success').html('<div class="col-sm-12" style="margin-bottom: 10px;"><div class="col-sm-6" style="float: left;"><button name="prev_btn" id="prev_btn" class="btn btn-primary">Previous Day Report</button></div> <div  class="col-sm-6" style="float: right"><button name="next_btn" id="next_btn" class="btn btn-primary" style="float: right">Next Day Report</button></div></div>');
                        $('#submit').click(function(){
                         $('#btn_press').val('submit');
                            var mm=0;
                            $('#increment_i').val(0);
                            $('#the_sign').val("+");

                        });
                        $('#prev_btn').click(function(){

                            $('#increment_i').val(1);
                            $('#the_sign').val("-");
                          //  alert(mm);
                            $('#btn_press').val('prev_btn');
                        });
                        $('#next_btn').click(function(){
                            $('#increment_i').val(1);
                            $('#the_sign').val("+");
                        $('#btn_press').val('next_btn');
                        });
                        $('#success').append(data.Results);
                        $('#mdate').val(data.newdate);

                   //     alert(data.newdate);
                        $('.progress-bar').text('Search Results :');
                        $('.progress-bar').css('width', '100%');

                    }
                }
            });

        });
    </script>

@endsection