@extends('adminlte::page')
@section('css')
<style>
    /* .center div div label {
        float: right
    } */
    .center {
        width: 50%;
        margin: 0 auto
    }

    .item-circle {
        border: 2px solid #0f323b;
        background-color: #00acd6;
        border-radius: 50%;
        color: white;
        padding: 3px;
        width: 40px;
        margin: 2px;
        display: inline-block;
        text-align: center;
        font-family: roman;
    }

    .control-item {
        width: 100%;
        max-height: 150px;
        overflow: auto;
    }

    .ul-angency li {
        list-style-type: circle;
        margin-left: 10px;
        line-height: 30px;
        font-weight: bold
    }
</style>
@stop
@section('content')
@include('administrator.inventory.assign.form-edit-assign')
<?php Fun::lang() ?>
<div class="page">
    <div class="top-content">
        <div class="row">
            <div class="col-sm-12 col-xs-12">
                <div class="pull-left">
                    <h3>Assign Inventory</h3>
                </div>
            </div>
        </div>
    </div>
    <div class="box-body">
        <form action="{{route('assign-inventory.update',$inv->id)}}" method="POST">
            @csrf
            @method('PATCH')
            <div class="row col-sm-12" style="margin:0 auto">
                <div class="container">
                    <div class="col-sm-12 form-group">
                        <div class="col-sm-6">
                            <label for="" class="required">Inventory</label>
                        </div>
                        <div class="col-sm-6">
                            {!! Form::select('inv_id', $invs,null, ['class' => 'form-control select2','id'=>'inv_id','required']) !!}
                        </div>
                    </div>
                    <div class="col-sm-12 form-group">
                        <div class="col-sm-6">
                            <label for="" class="required">Agency Type</label>
                        </div>
                        <div class="col-sm-6">
                            <select name="agent_type" id="agent_type" class="select2" required>
                                <option value="">Please Select</option>
                                <option value="1">Agency Network</option>
                                <option value="2">Agency Group</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-sm-12 form-group" id="agencyGroup" style="display: none">
                        <div class="col-sm-6">
                            <label for="">Agency Group</label>
                        </div>
                        <div class="col-sm-6">
                            <select name="agency_group" id="agency_group" class="form-control select2">
                            </select>
                        </div>
                    </div>
                    <div class="col-sm-12 form-group">
                        <div class="col-sm-6">
                            <label for="" class="required">Agent Team</label>
                        </div>
                        <div class="col-sm-6">
                            {!! Form::select('team_id', $teams,null, ['class' => 'form-control select2','id'=>'team_id','required']) !!}
                        </div>
                    </div>
                    <div class="form-group col-sm-12">
                        <div class="col-sm-12">
                        <button type="button" class="btn btn-info btn-md fa fa-save pull-right btn-assign"> Update Assign</button>
                        </div>
                    </div>
                    <div class="col-sm-12 form-group">
                        <center>
                            <h4 style="padding: 20px">Agency List</h4>
                        </center>
                        <div style="height: 500px;overflow:auto;width:100%">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th>Agent Type</th>
                                        <th>Agenct Group Type</th>
                                        <th>Team Sale</th>
                                        <th>Agent Name</th>
                                        <th><label class="checkbox-list"><input type="checkbox" id="check_all"><span class="checkmark"></span></label></th>
                                    </tr>
                                </thead>
                                <tbody id="table_agency">
                                    <?php
                                    $arrayIDs = explode(',', $inv->ag_id);
                                    ?>
                                    @foreach($agencies as $key => $agency)
                                    <?php
                                    $check = array_search($agency->id, $arrayIDs);
                                    ?>
                                    <tr>
                                        <td>{{empty($agency->group_id)?"Network":"Group"}}</td>
                                        <td>{{$agency->group_type}}</td>
                                        <td>{{$agency->team_name}}</td>
                                        <td>{{$agency->name}}</td>
                                        <td>
                                            <label class="checkbox-list">
                                                <input type="checkbox" class="checkbox" data-id="{{$agency->id}}" {{is_numeric($check)?"checked":""}} data-name="A04" value="{{$agency->id}}">
                                                <span class="checkmark"></span>
                                            </label>
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
@endsection
@section('js')
<script>
    var checked = "<?php echo $inv->ag_id ?>";
    $(document).on('change', '#agent_type', function() {
        var tr = '';
        var id = $('#agent_type').find(':selected').val();
        var inv_id = $('#inv_id').find(':selected').val();
        var route = "{{route('filter-agency-to-edit-assign',[':inv_id',':id'])}}";

        if(inv_id == "") {
            alert("Please Select Inventory");
        } else {
            route = route.replace(":id", id).replace(':inv_id', inv_id);
            $.ajax({
                url: route,
                dataType: "JSON",
                data: {
                    "_token": "{{ csrf_token() }}",
                    id: id
                },
                success: function(data) {
                    var agent = data['agency'];
                    var groups = data['group'];
                    $.each(agent, function(index, value) {
                        var check = checked.includes(value.id);
                        tr += `<tr>
                                    <td>${!(value.group_id)?"Network":"Group"}</td>
                                    <td>${value.group_type}</td>
                                    <td>${!(value.team_name)?"":value.team_name}</td>
                                    <td>${value.name}</td>
                                    <td>
                                        <label class="checkbox-list">
                                            <input type="checkbox" class="checkbox" ${(check)?"checked":""} data-id="4" data-name="A04" value="${value.id}">
                                            <span class="checkmark"></span>
                                        </label>
                                    </td>
                                </tr>`;
                    });
                    $('#table_agency').empty().append(tr);
                    if (id == 2) {
                        $('#agencyGroup').css("display", "block");
                        $('#agency_group').empty().append("<option value=''>Please Select</option>");
                        $.each(groups, function(i, group) {
                            var option = "<option value=" + group.id + ">" + group.agency_group_name + "</option>";
                            $('#agency_group').append(option);
                        });
                    } else {
                        $('#agencyGroup').css("display", "none");
                    }
                }
            });
        }
    });
    $(document).on('change', '#check_all', function() {
        if ($(this).is(":checked")) {
            $('.checkbox').prop('checked', true);
        } else {
            $('.checkbox').prop('checked', false);
        }
    });
    $(document).on('change', '#agency_group', function() {
        var id = $(this).find(':selected').val();
        var invID = $('#inv_id').find(':selected').val();
        var route = "{{route('filter-edit-agency-by-group-based-inventory',[':inv_id',':id'])}}";
        var tr = '';
        if (invID != "") {
            route = route.replace(':inv_id', invID).replace(':id', id);
            $.ajax({
                type: "GET",
                dataType: "JSON",
                url: route,
                data: {
                    "_token": "{{ csrf_token() }}",
                },
                success: function(data) {
                    $.each(data, function(index, value) {
                        var check = checked.includes(value.id);
                        tr += `<tr>
                                    <td>${!(value.group_id)?"Network":"Group"}</td>
                                    <td>${value.group_type}</td>
                                    <td>${!(value.team_name)?"":value.team_name}</td>
                                    <td>${value.name}</td>
                                    <td>
                                        <label class="checkbox-list">
                                            <input type="checkbox" class="checkbox" data-id="4" ${(check)?"checked":""} data-name="A04" value="${value.id}">
                                            <span class="checkmark"></span>
                                        </label>
                                    </td>
                                </tr>`;
                    });
                    $('#table_agency').empty().append(tr);
                }
            });
        } else {
            alert("Please Select Inventory");
        }
    });
    $(document).on('click', '.btn-assign', function() {
        var agentIDs = [];
        var id = "<?php echo $inv->id ?>";
        var route = "{{route('assign-inventory.update',':id')}}";
        route = route.replace(':id', id);
        $('.checkbox').each(function() {
            if ($(this).is(':checked')) {
                agentIDs.push($(this).val());
            }
        });
        var invName = $('#inv_id').find(":selected").text();
        $('#edit-assign').attr('action', route);
        $('#agentIDs').val(agentIDs);
        $('#text-alert').text(agentIDs.length + " Agenc(ies) will be able to access to Inventory " + invName);
        $('#form-edit-assign').modal('show');
    });
    $(document).on('change','#team_id',function(){
        var team_id = $(this).val();
        var inv_id = $('#inv_id').val();
        var type_id = $('#agent_type').val();
        var group_id = $('#agency_group').val();
        var route = "{{route('filter-agency-by-team-edit')}}";
        var option = '';
        var tr = '';
        if (inv_id == "") {
            alert("Please Select Inventory");
        } else {
            $.ajax({
                type: "POST",
                dataType: "JSON",
                url: route,
                data: {
                    '_token': "{{csrf_token()}}",
                    team: team_id,
                    inv: inv_id,
                    type: type_id,
                    group: group_id
                },
                success: function(data) {
                    $.each(data, function(index, value) {
                        var check = checked.includes(value.id);
                        tr += `<tr>
                                    <td>${value.type}</td>
                                    <td>${value.group_type}</td>
                                    <td>${!(value.team_name)?"":value.team_name}</td>
                                    <td>${value.name}</td>
                                    <td>
                                        <label class="checkbox-list">
                                            <input type="checkbox" class="checkbox" ${(check)?"checked":""} data-id="4" data-name="A04" value="${value.id}">
                                            <span class="checkmark"></span>
                                        </label>
                                    </td>
                                </tr>`;
                        option += `<option value="${value.id}">${value.name}</option>`;
                    });
                    $('#agency_name').empty().append('<option value="">Please Select</option>' + option);
                    $('#table_agency').empty().append(tr);
                }
            });
        }
    });
    function include(arr, obj) {
        return (arr.indexOf(obj) != -1);
    }
</script>
@endsection