@php
$page_name = 'Agents';
@endphp
@include('partial.header')

<div class="container-fluid">
    @include('partial.navigation')
    <div class="main-container">
            <!-- Content wrapper start -->
            <div class="content-wrapper">
                <div class="table-container">
                    @if(\Session::has('success'))
                        <div class="alert alert-success">
                            {{\Session::get('success')}}
                        </div>
                    @endif
                    
                    @if ($errors->any())
                        @foreach ($errors->all() as $error)
                            <div class="alert alert-danger">{{$error}}</div>
                        @endforeach
                        <br/>
                    @endif
                </div>  
                <table class="table" style="margin-bottom: 0px !important;">
                    <tbody>
                        <tr>
                            <td style="width:100px;">
                                <h5 class="table-title">Agent</h5>
                            </td>
                            <td style="width:60px;"><b>Search</b></td>
                            <td style="width:300px;">
                                <input autofocus="" id="SearchBox" onchange="Agents()"
                                    class="form-control form-control-sm" type="text" placeholder="">
                            </td>
                            <td style="width:150px;">
                                <!-- <button type="button" onclick="getCommanMasterAgent()" class="btn btn-info btn-block">Search
                                    <small></small></button> -->
                            </td>
                            <td></td>
                            <td style="width:350px;">
                            </td>
                            <td style="width:150px;">
                                <button type="button" id="AddButton"
                                    onclick="$('#AddModal').modal('show'); setTimeout(function(){ $('#CommanMasterName').focus(); }, 500);"
                                    class="btn btn-info btn-block">Add <small> (agent)</small></button>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <!--****************** Vertical Scroll table start ************************-->
                <div class="table-responsive CustomFixedTbl" style="min-height:60vh; max-height:60vh; ">
                    <table id="" class="table">
                        <thead>
                            <tr>
                                <th style="width:50px;">Sr</th>
                                <th style="width:250px;">Main Agent</th>
                                <th style="width:200px;">Agent</th>
                                <th style="width:200px;">Parent Agent</th>
                                <th style="width:160px;">Updated By</th>
                                <th style="width:160px;">Updated Date</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody id="AgentBody">
                        </tbody>
                        <tfoot>
                            <tr>
                                <th>Sr</th>
                                <th>Main Agent</th>
                                <th>Agent</th>
                                <th>Parent Agent</th>
                                <th>Updated By</th>
                                <th>Updated Date</th>
                                <th>Action</th>
                            </tr>
                        </tfoot>
                    </table>
                </div>
                <!--******** Vertical Scroll table end ********************-->
            </div>
    </div>
</div>

<div class="modal fade" id="AddModal" tabindex="-1" role="dialog" aria-labelledby="basicModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <form method="post" action="/addAgent" id="AddForm">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="basicModalLabel">Agents</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row gutters">
                    <div class="col-xl-4 col-lglg-4 col-md-4 col-sm-4 col-12">
                        <div class="form-group">
                            <label for="disabledInput">Agent Name</label>
                            <input type="text" name="agent_name" id="CommanMasterName" class="form-control form-control-sm" placeholder="" required>
                        </div>
                    </div>
                    <div class="col-xl-4 col-lglg-4 col-md-4 col-sm-4 col-12">
                        <div class="form-group">
                            <label for="disabledInput">Main Agent Name</label>
                            <!---input type="text" name="main_agent" id="AgentLedgerName" class="form-control form-control-sm" placeholder="" autocomplete="off"-->
                            <select id="AgentLedgerName" name="primary_cash_collection_agent_id" class="form-control form-control-sm" style="width: 100%;">
                                <option value="">Select Agent</option>
                                @if ($cashAgents->isNotEmpty())
                                    @foreach ($cashAgents as $a)
                                        <option value="{{$a->id}}"> {{$a->name}}</option>
                                    @endforeach
                                @endif
                            </select>
                        </div>
                    </div>
                    <div class="col-xl-4 col-lglg-4 col-md-4 col-sm-4 col-12">
                        <div class="form-group">
                            <label for="disabledInput">Parent Agent Name</label>
                            <!-- <input type="text" id="ParentAgentLedgerName" class="form-control form-control-sm ui-autocomplete-input" placeholder="" autocomplete="off"> -->
                            <select id="ParentAgentLedgerName" name="secondary_cash_collection_agent_id" class="form-control form-control-sm" style="width: 100%;">
                                <option value="">Select Agent</option>
                                @if ($cashAgents->isNotEmpty())
                                    @foreach ($cashAgents as $a)
                                        <option value="{{$a->id}}"> {{$a->name}}</option>
                                    @endforeach
                                @endif
                            </select>
                        </div>
                    </div>
                </div>
                
        
                <div class="row gutters">
                    
                </div>
            </div>
            <div class="modal-footer">
                @csrf
                <button onclick="Save()" type="button" class="btn btn-primary">Save</button>
                <button type="button" class="btn btn-lighten" data-dismiss="modal">Close</button>
            </div>
        </div>
        </form>
    </div>
</div>

<!-- Start Edit Modal -->
<div class="modal fade" id="ActionModal" tabindex="-1" role="dialog" aria-labelledby="basicModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Agent Update | <span id="TitleEditModel"></span></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">	
                
                        <ul class="nav nav-tabs" id="myTab" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active" id="home-tab" data-toggle="tab" href="#info" role="tab" aria-controls="home" aria-selected="true">Info</a>
                            </li>
                        </ul>
                        <div class="tab-content" id="myTabContent">
                            <div class="tab-pane fade show active" id="info" role="tabpanel" aria-labelledby="home-tab">
                                <div class="row gutters">
                                    <div class="col-xl-4 col-lglg-4 col-md-4 col-sm-4 col-12">
                                        <div class="form-group">
                                            <label for="disabledInput">Agent Name</label>
                                            <input type="text" id="edit_CommanMasterName" class="form-control form-control-sm" placeholder="">
                                        </div>
                                    </div>
                                    <div class="col-xl-4 col-lglg-4 col-md-4 col-sm-4 col-12">
                                        <div class="form-group">
                                            <label for="disabledInput">Main Agent Name</label>
                                            <select id="edit_AgentLedgerName" name="primary_cash_collection_agent_id" class="form-control form-control-sm" style="width: 100%;">
                                                <option value="">Select Agent</option>
                                                @if ($cashAgents->isNotEmpty())
                                                    @foreach ($cashAgents as $a)
                                                        <option value="{{$a->id}}"> {{$a->name}}</option>
                                                    @endforeach
                                                @endif
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-xl-4 col-lglg-4 col-md-4 col-sm-4 col-12">
                                        <div class="form-group">
                                            <label for="disabledInput">Parent Agent Name</label>
                                            <!-- <input type="text" id="edit_ParentAgentLedgerName" class="form-control form-control-sm ui-autocomplete-input" placeholder="" autocomplete="off"> -->
                                            <select id="edit_ParentAgentLedgerName" name="secondary_cash_collection_agent_id" class="form-control form-control-sm" style="width: 100%;">
                                                <option value="">Select Agent</option>
                                                @if ($cashAgents->isNotEmpty())
                                                    @foreach ($cashAgents as $a)
                                                        <option value="{{$a->id}}"> {{$a->name}}</option>
                                                    @endforeach
                                                @endif
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="row gutters">
                                    
                                </div>
                                <div class="row gutters">
                                    <div class="col-xl-4 col-lglg-4 col-md-4 col-sm-4 col-12">
                                        <div class="form-group">
                                            <button onclick="Update('Info')" type="button" class="btn btn-success  btn-block">Save</button>
                                        </div>
                                    </div>
                                </div>
                                
                            </div>
                            
                            <div class="tab-pane fade" id="password" role="tabpanel" aria-labelledby="profile-tab">
                                <div class="row gutters">
                                    <div class="col-xl-3 col-lglg-3 col-md-3 col-sm-3 col-12">
                                        <div class="form-group">
                                            <label for="inputReadOnly">Password</label>
                                            <input class="form-control form-control-sm" id="edit_Password" type="text" value="123456">
                                        </div>
                                    </div>
                                </div>
                                <div class="row gutters">
                                    
                                </div>
                                <div class="row gutters">
                                    <div class="col-xl-4 col-lglg-4 col-md-4 col-sm-4 col-12">
                                        <div class="form-group">
                                            <button onclick="Update('Password')" type="button" class="btn btn-success  btn-block">Save</button>
                                        </div>
                                    </div>
                                </div>
                            </div>							
                        </div>				
                </div>           
        </div>
    </div>
</div>
<!-- End Edit Modal -->

<script>
    var BaseUrl = "/";
    var nav = "agents";
</script>
@include('partial.footer')
<script>
    var Agent_ArrayList = [];
    var SelectedRow = [];

    $(document).ready(function () {
        /* $('#ParentAgentLedgerName, #AgentLedgerName').select2({
            dropdownParent: $('#AddModal')
        }); */
        Agents();
        $("#SearchBox").autocomplete({
            source: function(request, response){
                $.getJSON('/getAgentNames', {
                    query: request.term,
                }, function(data){
                    response(data);
                })
            },
            cache: true,
            autoSelect: true,
            autoFocus: true,
            minLength: 3
        })
    })
    function Save() {
        $("#AddForm").submit();
    }
    function Agents() {
        let agent = $('#SearchBox').val();
        var JsonData = { 'SearchAgent': agent };
        JsonData['nav'] = nav;
        JsonData['Method'] = "ajax_agents_all";
        AjaxCall("/getAgents", JsonData, function (response) {
            if (response.status == true) {
                var Row = '';
                Agent_ArrayList = [];
                $.each(response.data, function (index, obj) {
                    Agent_ArrayList[index] = obj;
                    Row += '<tr id="Agents_' + this.id + '">'
                        + '<td>' + (index + 1) + '</td>'
                        + '<td>' + this.primary_agent + '</td>'
                        + '<td>' + this.name + '</td>'
                        + '<td>' + this.secondary_agent + '</td>'
                        + '<td>' + this.updated_by + '</td>'
                        + '<td class="text-center">' + this.updated_at + '</td>'
                        + '<td class="text-center">'
                            +   '<a onclick="ActionPopup(' + index + ')" class="badge badge-primary" href="#">Edit</a>'
                        + '</td>'
                        + '</tr>';
                });
                $('#AgentBody').html(Row);
                //console.clear();
            } else if (response.status == false) {
                // Notify("Error ", response.message, "danger");
            }
        });
    }
    function ActionPopup(index)
{
	//if(IsActionAllow(Page_Edit)==false){return false;}
	LedgerRow = {};
	LedgerRow = Agent_ArrayList[index];
	$('#ActionModal').modal('show'); 
	$('[href="#info"]').tab('show');
	
	$('#TitleEditModel').text("");
	$('#edit_CommanMasterName').val("");
	$('#edit_AgentLedgerName').val("");
	$('#edit_ParentAgentLedgerName').val("");
    $('#edit_ParentAgentLedgerName option').show();

	$('#TitleEditModel').text(LedgerRow.name);
	$('#edit_CommanMasterName').val(LedgerRow.name);
	$('#edit_AgentLedgerName').val(LedgerRow.primary_cash_collection_agent_id);
	$('#edit_ParentAgentLedgerName').val(LedgerRow.secondary_cash_collection_agent_id);
    //$('#edit_ParentAgentLedgerName option[value="'+LedgerRow.id+'"]').attr('disabled', true);
    /* $('#edit_ParentAgentLedgerName, #edit_AgentLedgerName').select2({
        dropdownParent: $('#ActionModal')
    }); */

	setTimeout(function(){ 
        $('#edit_CommanMasterName').focus().select(); 
    }, 500);
}
function Update(Status)
{
    //if(IsActionAllow(Page_Edit)==false){return false;}
    if(Status=='Info'){
        var Name = $('#edit_CommanMasterName').val();
        var LedgerName = $('#edit_AgentLedgerName').val();
        var ParentAgentLedgerName = $('#edit_ParentAgentLedgerName').val();
        
        if (Name == "") {
            Notify("Invalid ","Please enter all valid fields!","danger");
            return false;
        }
        var JsonData = {'agent_name':Name, 'primary_cash_collection_agent_id': LedgerName, 'secondary_cash_collection_agent_id': ParentAgentLedgerName};
    }
    JsonData['agentId'] = LedgerRow.id;
    JsonData['Status'] = Status;
    JsonData['_token'] = _token;
    JsonData['nav'] = nav;
    JsonData['Method'] = "ajax_agent_update";
    AjaxCall("/updateAgent",JsonData,function(response) {
        if(response.status==true){
            Notify("Success ",response.message,"success");
            setTimeout(function() {
                location.reload(true);
            }, 500);
        }else if(response.status==false){
            Notify("Error ",response.message,"danger");
        }
    });
}


ko.bindingHandlers.nextFieldOnEnter = {
    init: function(element, valueAccessor, allBindingsAccessor) {
        $(element).on('keydown', 'input, select', function (e) {
            var self = $(this)
            , form = $(element)
              , focusable
              , next
            ;
            //LastFocusedControl_Id = $(":focus").attr("id");
            if (e.keyCode == 13) {
                focusable = form.find('input:enabled,select,button,textarea').filter(':visible');
                var nextIndex = focusable.index(this) == focusable.length -1 ? 0 : focusable.index(this) + 1;
                next = focusable.eq(nextIndex);
                    
                    
                next.focus().select();
                return false;
            }
        });
    }
};
ko.applyBindings({});
</script>