@extends('layouts.admin')
@section('title', 'Admin || Dashboard')
@section('styles')
<link rel="stylesheet" href="{{ asset('css/jquery.dataTables.min.css') }}">
<link rel="stylesheet" href="{{ asset('css/select2.min.css') }}">
@endsection
@section('script')
<script src="{{ asset('js/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('js/select2.min.js') }}"></script>
<script>
    $('#user_id').select2();
    $('#agency_type').select2();
    $('#agency_id').select2();
    $('#dept_dzo_id').select2();
    $('#division_id').select2();
    $('#field_regional_id').select2();
    
    
    $('#usermap').dataTable();

    $('#agency_type_id').change(function() {
        var agency_type_id = $(this).val();
        var default_html = "<option value='' selected>-- Select Any one --</option>";
        $('#dept_dzo_id').html(default_html);
        $('#division_id').html(default_html);
        $('#field_regional_id').html(default_html);

        $.ajax({
            url: "{{ route('get-agency')}}",
            type: "post",
            data: {
                _token: "{{ csrf_token() }}",
                agen_typ_id: agency_type_id
            },
            success: function(response) {
                if (typeof(response) != 'object') {
                    response = JSON.parse(response);
                }

                $('#agency_title').html(response.data.agency_type + ": ");

                var agency_html = "<option value='' selected>-- Select Any one --</option>";
                if (response.status) {
                    $.each(response.data.agencies, function(key, value) {
                        agency_html += "<option value='" + value.id + "'>" + value.agency_name + "</option>";
                    });
                    $('#agency_id').html(agency_html);
                }
            }
        });
    });

    $('#agency_id').change(function() {
        var agency_id = $(this).val();
        var default_html = "<option value='' selected>-- Select Any one --</option>";
        $('#division_id').html(default_html);
        $('#field_regional_id').html(default_html);
        $('#dept_dzo_id').html(default_html);
        $.ajax({
            url: "{{ route('get-department')}}",
            type: "post",
            data: {
                _token: "{{ csrf_token() }}",
                agen_id: agency_id
            },
            success: function(response) {
                if (typeof(response) != 'object') {
                    response = JSON.parse(response);
                }

                // $('#agency_title').html(response.data.agency_type+": ");

                var dept_html = "<option value='' selected>-- Select Any one --</option>";
                if (response.status) {
                    $.each(response.data.departments, function(key, value) {
                        dept_html += "<option value='" + value.id + "'>" + value.dept_dzo_name + "</option>";
                    });
                    $('#dept_dzo_id').html(dept_html);
                }
            }
        });
    });


    $('#dept_dzo_id').change(function() {
        var dept_id = $(this).val();
        var default_html = "<option value='' selected>-- Select Any one --</option>";
        $('#field_regional_id').html(default_html);
        $('#division_id').html(default_html);
        $.ajax({
            url: "{{ route('get-division')}}",
            type: "post",
            data: {
                _token: "{{ csrf_token() }}",
                dept_id: dept_id
            },
            success: function(response) {
                if (typeof(response) != 'object') {
                    response = JSON.parse(response);
                }

                // $('#agency_title').html(response.data.agency_type+": ");

                var division_html = "<option value='' selected>-- Select Any one --</option>";
                if (response.status) {
                    $.each(response.data.division, function(key, value) {
                        division_html += "<option value='" + value.id + "'>" + value.division_name + "</option>";
                    });
                    $('#division_id').html(division_html);
                }
            }
        });
    });

    $('#division_id').change(function() {
        var div_id = $(this).val();

        $.ajax({
            url: "{{ route('get-field-regional')}}",
            type: "post",
            data: {
                _token: "{{ csrf_token() }}",
                div_id: div_id
            },
            success: function(response) {
                if (typeof(response) != 'object') {
                    response = JSON.parse(response);
                }

                // $('#agency_title').html(response.data.agency_type+": ");

                var field_regional_html = "<option value='' selected>-- Select Any one --</option>";
                if (response.status) {
                    $.each(response.data, function(key, value) {
                        field_regional_html += "<option value='" + value.id + "'>" + value.field_regional_name + "</option>";
                    });
                    $('#field_regional_id').html(field_regional_html);
                }
            }
        });
    });

    $('#map-form').submit(function(e) {
        e.preventDefault();

        $.ajax({
            url: $(this).attr('action'),
            type: "post",
            data: {
                _token: "{{ csrf_token() }}",
                data: $(this).serialize()
            },
            success: function(response) {
                if (typeof(response) != 'object') {
                    response = JSON.parse(response);
                }
                if (response.status) {
                    // new mapping
                    if (response.data) {
                        fillTable(response.data);
                    }
                } else {
                    alert(response.msg);
                    fillTable(response.data);

                }
            }
        });

    });

    $('#user_id').change(function() {
        var user_id = $(this).val();
        $.ajax({
            url: "{{ route('get-user') }}",
            type: "post",
            data: {
                _token: "{{ csrf_token()}}",
                user_id: user_id
            },
            success: function(response) {
                if (typeof(response) != "object") {
                    response = JSON.parse(response);
                }
                console.log(response);

                if (response.status) {
                    fillTable(response.data);
                } else {
                    alert(response.msg);
                    var html_table = '<tr><td colspan="5">User not mapped</td></tr>';
                    $('#map_user_data').html(html_table);

                }
            }
        });
    });

    function fillTable(data) {
        var html_table = "";
        $.each(data, function(key, value) {
            html_table += "<tr>";
            html_table += "<td>" + value.agency_type_info.agency_type + "</td>";
            html_table += "<td>" + value.agency_info.agency_name + "</td>";
            var dept_name = null;
            if (value.dept_dzo_info) {
                dept_name = value.dept_dzo_info.dept_dzo_name;
            }
            html_table += "<td>" + dept_name + "</td>";
            var div_name = null;
            if (value.division_info) {
                div_name = value.division_info.division_name;
            }

            html_table += "<td>" + div_name + "</td>";
            var reg_field = null;
            if (value.field_regional_info) {
                reg_field = value.field_regional_info.field_regional_name;
            }

            html_table += "<td>" + reg_field + "</td>";
            html_table += "<tr>";
        });

        $('#map_user_data').html(html_table);


    }
</script>
@endsection
@section('content')
<div class="page-content fade-in-up">

    <div class="row">
        <div class="col-lg-12">
            <div class="ibox">
                <div class="ibox-head">
                    <div class="ibox-title">Latest Orders</div>

                </div>
                <div class="ibox-body">
                    {{ Form::open(['url'=>route('submit-mapping'),'id'=>'map-form'] )}}
                    <div class="form-group row">
                        {{ Form::label('user_id','User:',['class'=>'col-sm-2'])}}
                        <div class="col-sm-4">
                            <select name="user_id" id="user_id" class="user_id form-control form-control-sm">
                                <option value="" disabled selected>--Select Any one--</option>
                                @if($udata)
                                @foreach($udata as $value)
                                <option value="{{ $value->id }}">{{ $value->name.'('.$value->cid.')'}}</option>
                                @endforeach
                                @endif
                            </select>
                        </div>

                    </div>
                    <div class="form-group row">
                        {{ Form::label('agency_type','Agency Type:',['class'=>'col-sm-2'])}}
                        <div class="col-sm-4">
                            {{ Form::select('agency_type',@$agency_type,'',['class'=>'form-control form-control-sm','id'=>'agency_type_id','placeholder'=>'--Select Any One--','required'=>true])}}
                        </div>
                        {{ Form::label('agency_id','Agencies:',['class'=>'col-sm-1'])}}
                        <div class="col-sm-4">
                            {{ Form::select('agency_id',[],'',['class'=>'form-control form-control-sm','id'=>'agency_id','required'=>true,'placeholder'=>'--Select Any One--'])}}
                        </div>
                    </div>

                    <div class="form-group row">

                        {{ Form::label('dept_dzo_id','Departments:',['class'=>'col-sm-2'])}}
                        <div class="col-sm-4">
                            {{ Form::select('dept_dzo_id',[],'',['class'=>'form-control form-control-sm','id'=>'dept_dzo_id','required'=>false,'placeholder'=>'--Select Any One--'])}}
                        </div>
                        {{ Form::label('division_id','Divisions:',['class'=>'col-sm-1'])}}
                        <div class="col-sm-4">
                            {{ Form::select('division_id',[],'',['class'=>'form-control form-control-sm','id'=>'division_id','required'=>false,'placeholder'=>'--Select Any One--'])}}
                        </div>
                    </div>

                    <div class="form-group row">

                        {{ Form::label('field_regional_id','Field Regional:',['class'=>'col-sm-2'])}}
                        <div class="col-sm-4">
                            {{ Form::select('field_regional_id',[],'',['class'=>'form-control form-control-sm','id'=>'field_regional_id','required'=>false,'placeholder'=>'--Select Any One--'])}}
                        </div>
                    </div>


                    <div class="form-group row">
                        <div class="col-sm-9 offset-sm-5">
                            {{ Form::button("<i class='fa fa-paper-plane'></i> Add Mapping",['class'=>'btn btn-success', 'type'=>'submit'])}}
                        </div>
                    </div>


                    {{ Form::close()}}
                </div>
                <div class="ibox-body">
                    <table id="usermap" class="usermap table-striped table-hover">
                        <thead class="thead-dark">
                            <th>Agency Type</th>
                            <th>Agency Name</th>
                            <th>Department Name</th>
                            <th>Division Name</th>
                            <th>Field Regional Name</th>
                        </thead>
                        <tbody id="map_user_data">

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

    </div>

</div>

@endsection