@extends('layouts.home_layout')
@php
    $title = "User Manage";
@endphp
@section('title', $title)

@section('style')
<link rel="stylesheet" href="{{ asset('app-assets/css/select2.min.css') }}" >
@endsection

@section('content')

    <div class="app-content content">
        {{-- <div class="row"> --}}
        <div class="content-wrapper">
            <div class="content-header row">
                <div class="content-header-left col-md-6 col-12 mb-2 breadcrumb-new">
                    <h3 class="content-header-title mb-0 d-inline-block">{{$title}}</h3>
                </div>
                <div class="content-header-right col-md-6 col-12">
                    <div class="dropdown float-md-right">
                        @if (is_permit('userSave'))
                            <button class="btn btn-danger round btn-glow px-2 mb-1" id="" type="button" data-toggle="modal" data-target=".bd-example-modal-lg">Add New User</button>
                        @endif
                    </div>
                </div>
            </div>
            <div class="content-body">
                @include('common.alert_msg')
                {{-- @extends('common.alert_msg') --}}
                
                <div class="card">
                    
                    <div class="card-header ">
                        {{-- <h4 class="card-title">
                        <button type="button" class="btn btn-secondary btn-sm"  data-toggle="modal" data-target=".bd-example-modal-lg">Add New</button>
                        </h4> --}}
                        <a class="heading-elements-toggle"><i class="la la-ellipsis-v font-medium-3"></i></a>
                        <div class="heading-elements">
                            <ul class="list-inline mb-0">
                                <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                                <li><a data-action="reload" onClick="location.reload()"><i class="ft-rotate-cw"></i></a></li>
                                <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                                <li><a data-action="close"><i class="ft-x"></i></a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="card-header ">
                        <div class="row">
                            <div class="col-sm">
                                <select class="form-control" id="f_row_status">
                                <option value="">Select Status</option>
                                <option value="1">Active</option>
                                <option value="2">Inactive</option>
                                </select>
                            </div>
                            <div class="col-sm">
                                <select class="form-control" id="f_dlt_status">
                                <option value="">Delete Status</option>
                                <option value="2">Deleted</option>
                                <option value="1">Not Delete</option>
                                </select>
                            </div>
                            <div class="col-sm">
                                <input class="form-control" type="text" id="f_keyword" name="f_keyword" placeholder="Keyword">   
                            </div>
                            <div class="col-sm">
                                <button type="button" id="u_filter" class="btn btn-info">Filter</button>
                                <button type="button" class="btn btn-primary" onClick="location.reload()">Reload</button>
                            </div>
                        </div>
                    </div>
                    <div class="card-content collapse show">
                        <div class="col-12">
                            <div class="table-responsive">
                                <table class="table table-bordered table-striped" id="filter_data_show">
                                    <thead>
                                        <tr class="text-center">
                                            <th>SL</th>
                                            <th>Name</th>
                                            <th>Email</th>
                                            <th>Mobile</th>
                                            <th>User Type</th>
                                            @if (Session::get('user_type') == 1)
                                                <th>User Type</th>
                                            @endif
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @php
                                            $row_count=$datashow->firstItem();
                                        @endphp
                                        @foreach ($datashow as $ds)
                                            @if ($ds->row_status==2)
                                                <tr class="bg-warning text-white ">
                                            @elseif($ds->dlt_status==2)
                                                <tr class="bg-danger text-white ">
                                            @else
                                                <tr>
                                            @endif
                                                <th scope="row" class="text-center">{{$row_count++}}</th>
                                                <td>{{$ds->name}}</td>
                                                <td>{{$ds->email}}</td>
                                                <td>{{$ds->user_id}}</td>
                                                <td class="text-center">
                                                    {{$ds->farmer_id ? 'Farmer' : ''}}
                                                </td>
                                                @if (Session::get('user_type') == 1)
                                                    <td class="text-center">{{$ds->user_type}}</td>
                                                @endif
                                                <td class="td-actions text-center">
                                                    <a href="javascript:void(0)" class="btn btn-secondary btn-sm"  data-toggle="modal" data-target=".bd-example-modal-lg" data-id="{{$ds->id}}" id="edit_user" >
                                                        <i class="ft-edit"></i>
                                                    </a>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                            <table width="100%" id="paging_tbl" class="mb-2">
                                <tr>
                                    <td >Displaying {{$datashow->firstItem()}} to {{sizeof($datashow)}} of {{$datashow->total()}}</td>
                                    <td class="pull-right">{{ $datashow->render() }}</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            {{-- </div> --}}
            {{-- Modal Start id="user_modal" --}}
            <div class="modal fade bd-example-modal-lg" id="user_modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content" id="myModal">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLabel">Creat User</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                            </button>
                        </div>

                        <form method="POST" action="{{ url('register') }}">
                            @csrf
                            <input type="hidden" name="row_id" id="row_id">
                            <div class="modal-body">
                                <div class="row">
                                    <div class="col-md-4 col-12">
                                        <div class="form-group">
                                            <label for="name">Name:</label>
                                            <input type="text" class="form-control" id="name" name="name" required value="{{old('name', empty($errors->name) ? '' : $errors->name)}}">
                                            @if ($errors->has('name'))
                                                <span class="text-danger">{{ $errors->first('name') }}</span>
                                            @endif
                                        </div>
                                    </div>
                                    <div class="col-md-4 col-12">
                                        <div class="form-group">
                                            <label for="user_id"> <span id="user_id_label">Mobile:</span> </label>
                                            <input type="text" class="form-control" id="user_id"  name="phone_no" required >
                                            @if ($errors->has('phone_no'))
                                                <span class="text-danger">{{ $errors->first('phone_no') }}</span>
                                            @endif
                                        </div>
                                    </div>
                                    <div class="col-md-4 col-12">
                                        <div class="form-group">
                                            <label for="email" >E-mail:</label>
                                            <input type="text" class="form-control" id="email" name="email"  value="{{old('email', empty($errors->email) ? '' : $errors->email)}}">
                                            @if ($errors->has('email'))
                                                <span class="text-danger">{{ $errors->first('email') }}</span>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6 col-12">
                                        <div class="form-group">
                                            <label for="password"> <span id="old_password">Password:</span> </label>
                                            <input id="password" type="password" class="form-control @error('password') is-invalid @enderror" value="{{old('password', empty($errors->password) ? '' : $errors->password)}}" name="password" autocomplete="new-password">
        
                                            @if ($errors->has('password'))
                                                <span class="text-danger">{{ $errors->first('password') }}</span>
                                            @endif
                                        </div>
                                    </div>
                                    <div class="col-md-6 col-12">
                                        <div class="form-group">
                                            <label for="password-confirm"><span id="new_password">Confirm Password</span> </label>
                                            <input id="password-confirm" type="password" class="form-control" name="password_confirmation" autocomplete="new-password">
                                        </div>
                                    </div>
                                </div>

                                {{-- <div class="row">
                                    <div class="col-md-6 col-12">
                                        <div class="form-group">
                                            <label for="farmer_group_id">Farmer Group:</label>
                                            <select name="farmer_group_id" id="farmer_group_id" class="form-control select2">
                                                <option value="" {{old('farmer_group_id')=='' ? 'selected' : ''}}>Select Group</option>
                                                @foreach ($farmerGroup as $v)
                                                    <option value="{{$v->id}}" {{old('farmer_group_id')==$v->id ? 'selected' : ''}}>{{$v->group_name_en}} {{$v->group_code ? '['.$v->group_code.']' : ''}}</option>
                                                @endforeach 
                                            </select>
                                            @if ($errors->has('farmer_group_id'))
                                                <span class="text-danger">{{ $errors->first('farmer_group_id') }}</span>
                                            @endif
                                        </div>
                                    </div>
                                    <div class="col-md-6 col-12">
                                        <div class="form-group">
                                            <label for="farmer_id">Farmer:</label>
                                            <select name="farmer_id" id="farmer_id" class="form-control select2">
                                                <option value="" {{old('farmer_id')=='' ? 'selected' : ''}}>Select Farmer</option>
                                            </select>
                                        </div>
                                    </div>
                                </div> --}}
                                <div class="row">
                                    <div class="col-md-4 col-12">
                                        <div class="form-group">
                                            <label for="user_type">User type:</label>
                                            <select name="user_type" id="user_type" class="form-control">
                                                @if (Session::get('user_type') == 1)
                                                    <option value="1" {{old('user_type')==1 ? 'selected' : ''}}>Developer</option>
                                                @endif
                                                <option value="2" {{old('user_type')==2 ? 'selected' : ''}}>User Admin</option>
                                                {{-- <option value="3" {{old('user_type')==3 ? 'selected' : ''}}>Farmer</option>
                                                <option value="4" {{old('user_type')==4 ? 'selected' : ''}}>Cooperative</option> --}}
                                               
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-4 col-12">
                                        <div class="form-group">
                                            <label for="row_status">Status:</label>
                                            <select name="row_status" id="row_status" class="form-control" required>
                                                <option value="1" {{old('row_status')==1 ? 'selected' : ''}}>Active</option>
                                                <option value="2" {{old('row_status')==2 ? 'selected' : ''}}>Inactive</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-4 col-12">
                                        <div class="form-group">
                                            <label for="dlt_status">Delete Status:</label>
                                            <select name="dlt_status" id="dlt_status" class="form-control" required>
                                                <option value="1" {{old('dlt_status')==1 ? 'selected' : ''}}>No</option>
                                                <option value="2" {{old('dlt_status')==2 ? 'selected' : ''}}>Yes</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="submit" class="btn btn-primary" id="btn_save">Save</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            {{-- Modal End  --}}
        </div>
    </div>
@endsection


@section('script')
<script src="{{asset('app-assets/js/select2.min.js')}}"></script>
<script type="text/javascript">
    $(".select2").select2({ 
        placeholder     : "Select One",
        allowClear      : true,
        width           : '100%',
        dropdownParent  : "#user_modal" // Use for Bootstrap Modal other wise no need
    });

    @if ($errors->any())
        $('#user_modal').modal('show');
    @endif 
    $(function () {
        $(".modal").on("hidden.bs.modal", function (e) {
            $("#exampleModalLabel").html("Creat Menu");
            $('#btn_save').text("Save");
            reset_form_data();
        });
    });

    function reset_form_data(){
        $('#row_id').val('');
        $('#name').val('');
        $('#email').val('');
        $('#password').val('');
        $('#user_type').val(1);
        $('#row_status').val(1);
        $('#dlt_status').val(2);



    }

    $(document).on('click', '#edit_user', function(e) {
        var  user_id= $(this).data('id');
        // alert(user_id)
        $('#exampleModalLabel').html("Edit User");
        $('#btn_save').text("Update");
        $('#user_modal').modal('show');

        $.ajaxSetup({
            headers: {
               'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $.ajax({
            type    : "get",
            url     : "{{ url('register') }}/edit/"+user_id,
            dataType: "json",
            async   : false,
            success : function(data){
                var r_val=data.row_data;
                $('#row_id').val(r_val.id);
                $('#name').val(r_val.name);
                $('#email').val(r_val.email);
                $('#user_id').val(r_val.user_id);
                $('#password').val(r_val.password);
                $('#farmer_group_id').val(r_val.farmer_group_id).trigger('change');
                // $('#farmer_group_id').val(r_val.farmer_group_id).trigger('change#farmer_id');
                $('#user_type').val(r_val.user_type);
                $('#row_status').val(r_val.row_status);
                $('#dlt_status').val(r_val.dlt_status);

                if(r_val.user_id)
                {
                    document.getElementById('user_id_label').innerText="User ID";
                    document.getElementById('old_password').innerText="Old Password";
                    document.getElementById('new_password').innerText="New Password";
                }
                
                
                setTimeout(function() { 
                    $('#farmer_id').val(r_val.farmer_id).trigger('change');
                }, 3000);
            },
            error   : function(data){
                alert("Error")
            }
        });

        e.preventDefault();
    });

    $(document).on('change','#farmer_group_id',function(){
        var id=$(this).val();
        $.ajaxSetup({
            headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        //var op1 = '<option value="0">Select One</option>';
        var op1 = '<option value="">Select One</option>';
        $('#farmer_id').html(op1);
        $.ajax({
            type    : "get",
            url     : "{{ url('/_gtFoG') }}/" + id,
            dataType: "json",
            success : function(response){
                console.log(response);
                
                $.each(response.rows, function(i, v) { 
                    op1 += '<option value="'+v.id+'">' +v.farmer_name_en+ '</option>';
                });
                $('#farmer_id').html(op1);
            },
            error : function(response){
                alert("Error")
            }
        });
    });

    $(document).on('click', '#u_filter', function(e) {

        var f_row_status=$('#f_row_status').val();
        var f_dlt_status=$('#f_dlt_status').val();
        var f_keyword=$('#f_keyword').val();
        if (f_row_status=='' && f_dlt_status=='' && f_keyword==''){
            alert('Filter is empty');
            return false;
        }


        $.ajaxSetup({
            headers: {
               'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $.ajax({
            type    : "post",
            url     : "{{ url('user_filter') }}",
            dataType: "html",
            data    : {
                row_status : f_row_status,
                dlt_status : f_dlt_status,
                keyword    : f_keyword,
            },

            success : function(data){
                $("#filter_data_show").html(data);
                $("#paging_tbl").css('display','none');
                // console.log(data);
            },
            error   : function(data){
                alert("Error")
            }
        });

        e.preventDefault();
    });
</script>
@endsection