<!--Reporter Information-->
<div class="row">
    <legend>Reporter information</legend>
    <div class="col-sm-6" id="home1">
        <div class="form-group row">
            <label class="col-md-4 col-form-label text-md-left">Sex <span class="text-danger">*</span></label>
            <div class="col-md-4 text-md-left">
                <input type="radio" class="radio radio-inline" name="reporter_sex" value="1" required> Male
            </div>
            <div class="col-md-4 text-md-left">
                <input type="radio" class="radio radio-inline" name="reporter_sex" value="2" required> Female
            </div>
        </div>
        <div class="form-group row">
            <label class="col-md-4 col-form-label text-md-left">Phone </label>
            <div class="col-md-8 text-md-left">
                <input type="text" class="form-control" name="reporter_phone" value="" >
            </div>
        </div>
        <div class="form-group row">
            <label class="col-md-4 col-form-label text-md-left">Email </label>
            <div class="col-md-8 text-md-left">
                <input type="text" class="form-control" name="reporter_email" value="" >
            </div>
        </div>
    </div>
    <div class="col-sm-6" id="home1">
        <div class="form-group row">
            <label class="col-md-4 col-form-label text-md-left">Incident Reported By <span class="text-danger">*</span></label>
            <div class="col-md-4 text-md-left">
                <input type="radio" class="radio radio-inline" name="reporter_type" value="1" required> Survivor
            </div>
            <div class="col-md-4 text-md-left">
                <input type="radio" class="radio radio-inline" name="reporter_type" value="2" required> Other
            </div>
        </div>
        <div class="form-group row">
            <label class="col-md-4 col-form-label text-md-left">Relationship to Survivor: </label>
            <div class="col-md-8">
                <select id="relation" class="form-control search-select" name="reporter_relation" required>
                    <option value="">Choose One</option>
                    @foreach($relations as $relation)
                        <option value="{{$relation->id}}">{{$relation->name}}</option>
                    @endforeach
                </select>
            </div>
        </div>
    </div>
</div>
<!--General Information-->
<div class="row">
    <legend>General information</legend>
    <div class="col-sm-6" id="home1">
        <div class="form-group row">
            <label class="col-md-4 col-form-label text-md-left">Reference Number <span class="text-danger">*</span></label>
            <div class="col-md-8">
                <input type="text" class="form-control" name="crb_number" id="crb_number" data-inputmask="'mask': '+GBV 99 99 99'"
                       placeholder="GBV/00/00/0000" required>
            </div>
        </div>
        <div class="form-group row">
            <label class="col-md-4 col-form-label text-md-left">Interview Date <span class="text-danger">*</span></label>
            <div class="col-md-8">
                <input type="text" readonly="readonly" class="form-control datepicker" name="interview_date" id="interview_date" required>
            </div>
        </div>
        <div class="form-group row">
            <label class="col-md-4 col-form-label text-md-left">Interview Time <span class="text-danger">*</span></label>
            <div class="col-md-8">
                <select id="interview_time" class="form-control search-select" name="interview_time" required>
                    <option value="">Choose One</option>
                    @foreach($times as $time)
                    <option value="{{$time->id}}">{{$time->name}}</option>
                    @endforeach
                </select>
            </div>
        </div>
        <div class="form-group row">
            <label class="col-md-4 col-form-label text-md-left">Refered ? </label>
            <div class="col-md-8">
                <input type="radio" class="radio radio-inline" value="0" name="reffered" id="reffered" checked> No
                <input type="radio" class="radio radio-inline" value="1" name="reffered" id="reffered"> Yes
            </div>
        </div>
    </div>
    <div class="col-sm-6" id="home1">
        <div class="form-group row">
            <label class="col-sm-4 control-label">District: <span class="text-danger">*</span></label>
            <div class="col-sm-8">
                <select id="district" class="form-control search-select" name="districtid" required>
                    <option value="">Choose One</option>
                    @foreach($districts as $district)
                    <option value="{{$district->id}}">{{$district->name}}</option>
                    @endforeach
                </select>
            </div>
        </div>
        <div class="form-group row">
            <label class="col-sm-4 control-label">Sub-County: <span class="text-danger">*</span></label>
            <div class="col-md-8" id="subcounty">
                <select id="subcountyid" class="form-control search-select" name="subcountyid" required>
                    <option value="">Choose One</option>
                    @foreach($subcounties as $subcounty)
                    <option value="{{$subcounty->id}}">{{$subcounty->name}}</option>
                    @endforeach
                </select>
            </div>
        </div>
        <div class="form-group row">
            <label class="col-sm-4 control-label">Parish: <span class="text-danger">*</span></label>
            <div id="parish" class="col-md-8">
                <select id="parishid" class="form-control search-select" name="parishid" required>
                    <option value="">Choose One</option>
                    @foreach($parishes as $parish)
                    <option value="{{$parish->id}}">{{$parish->name}}</option>
                    @endforeach
                </select>
            </div>
        </div>
        <div class="form-group row">
            <label class="col-sm-4 control-label">Village:</label>
            <div class="col-md-8">
               <input type="text" class="form-control" name="village" placeholder="Village" >
            </div>
        </div>
    </div>
</div>

<!--Survivor Information-->
<div class="row">
    <legend>Survivor information</legend>
    <div class="col-sm-6" id="home1">
        <div class="form-group row">
            <label class="col-md-4 col-form-label">Survivor Code: <span class="text-danger">*</span></label>
            <div class="col-md-8">
                <input type="text" readonly="readonly" class="form-control" name="survivor_code" id="survivor_code"
                       placeholder="Survivor Code" value="GBV" required>
            </div>
        </div>
        <div class="form-group row">
            <label class="col-md-4 col-form-label text-md-left">Identity Type </label>
            <div class="col-md-8">
                 <select id="idtype" class="form-control search-select" name="idtype" >
                    <option value="">Choose One</option>
                    @foreach($idtypes as $idtype)
                    <option value="{{$idtype->id}}">{{$idtype->name}}</option>
                    @endforeach
                </select>
            </div>
        </div>
        <div class="form-group row">
            <label class="col-md-4 col-form-label text-md-left">ID Number:</label>
            <div class="col-md-8">
                <input type="text" class="form-control" name="id_number" placeholder="ID Number" >
            </div>
        </div>
        <div class="form-group row">
            <label class="col-md-4 col-form-label text-md-left">Sex <span class="text-danger">*</span></label>
            <div class="col-md-4 text-md-left">
                <input type="radio" class="radio radio-inline" name="sex" value="1" required> Male
            </div>
            <div class="col-md-4 text-md-left">
                <input type="radio" class="radio radio-inline" name="sex" value="2" required> Female
            </div>
        </div>
        <div class="form-group row">
            <label class="col-md-4 col-form-label text-md-left">Age <span class="text-danger">*</span></label>
            <div class="col-md-8">
                <input type="number" class="form-control" name="age" id="age" required>
                <!-- <select id="national_status" class="form-control search-select" name="national_status" >
                    <option value="">Choose One</option>
                    @foreach($agegroup as $agegroup)
                        <option value="{{$agegroup->id}}">{{$agegroup->name}}</option>
                    @endforeach
                </select> -->
            </div>
        </div>
        <div class="form-group row">
            <label class="col-md-4 col-form-label text-md-left">Nationality <span class="text-danger">*</span></label>
            <div class="col-md-8">
                <select id="nationality" class="form-control search-select" name="nationality" required>
                    <option value="">Choose One</option>
                    @foreach($nationality as $nationality)

                        <option value="{{$nationality->id}}" <?= $nationality->name == "Ugandan" ? 'selected="selected"' : ""; ?>>{{$nationality->name}}</option>
                    @endforeach

                </select>
            </div>
        </div>

        <div class="form-group row">
            <label class="col-md-4 col-form-label text-md-left">Nationality Status <span class="text-danger">*</span></label>
            <div class="col-md-8">
                <select class="form-control search-select" id="nstatus" name="national_status" required>
                    <option value="">Choose One</option>
                    @foreach($status as $status)
                        <option value="{{$status->id}}">{{$status->name}}</option>
                    @endforeach
                </select>
            </div>
        </div>

        <div class="form-group row">
            <label class="col-md-4 col-form-label text-md-left">Nationality Status Category<span class="text-danger">*</span></label>
            <div id="ns_category" class="col-md-8">
                <select class="form-control search-select" name="ns_categornsy" id="nstatuscategory" required>
                    <option value="">Choose One</option>
                    {{--@foreach($nstatuscategories as $nstatuscategory)
                        <option value="{{$nstatuscategory->id}}">{{$nstatuscategory->name}}</option>
                    @endforeach--}}
                </select>
            </div>
        </div>

    </div>
    <div class="col-sm-6" id="home1">
        <div class="form-group row">
            <label class="col-sm-4 control-label">Religion: <span class="text-danger">*</span></label>
            <div class="col-sm-8">
                <select id="religion" class="form-control search-select" name="religion" required>
                    <option value="">Choose One</option>
                    @foreach($religions as $religion)
                        <option value="{{$religion->id}}">{{$religion->name}}</option>
                    @endforeach
                </select>
                <div id="country_error"></div>
            </div>
        </div>
        <div class="form-group row">
            <label class="col-sm-4 control-label">Marital Status: <span class="text-danger">*</span></label>
            <div class="col-md-8">
                <select id="marital_status" class="form-control search-select" name="marital_status" required>
                    <option value="">Choose One</option>
                    @foreach($mariage as $mariage)
                        <option value="{{$mariage->id}}">{{$mariage->name}}</option>
                    @endforeach
                </select>
            </div>
        </div>
        <div class="form-group row">
            <label class="col-sm-4 control-label">Seperated from children: </label>
            <div class="col-md-8">
                <input type="radio" class="radio radio-inline" name="separeted_children" id="separeted_children" checked value="0"> No
                &nbsp;
                <input type="radio" class="radio radio-inline" name="separeted_children" id="separeted_children" value="1"> Yes
            </div>
        </div>
        <div class="form-group row">
            <label class="col-sm-4 control-label">Disability status:</label>
            <div class="col-md-8">
                <input type="radio" class="radio radio-inline" class="form-control" name="pwd" id="pwd_no" value="0" checked> No
                &nbsp;&nbsp;
                <input type="radio" class="radio radio-inline" class="form-control" name="pwd" id="pwd_yes" value="1"> Yes
            </div>
        </div>
        <div class="form-group row" id="disabilityWrapper" data-disability-wrapper data-selected-disability="{{ old('disability', old('disability_', '')) }}">

        </div>
        <div class="form-group row">
            <label class="col-md-4 col-form-label text-md-left">Education Level<span class="text-danger">*</span></label>
            <div class="col-md-8">
                <!-- <input type="text" class="form-control" name="education" id="education" > -->
                <select id="education" class="form-control search-select" name="education" required>
                    <option value="">Choose One</option>
                    @foreach($education as $education)
                        <option value="{{$education->id}}">{{$education->name}}</option>
                    @endforeach
                </select>
            </div>
        </div>
        <div class="form-group row">
            <label class="col-md-4 col-form-label text-md-left">Employment Status </label>
            <div class="col-md-8">
                <select id="emp_status" class="form-control search-select" name="emp_status" >
                    <option value="">Choose One</option>
                    <option value="0"> Unemployed</option>
                    <option value="1"> Employed</option>
                </select>
            </div>
        </div>

        <div class="form-group row">
            <label class="col-md-4 col-form-label text-md-left">Occupation </label>
            <div class="col-md-8">
                <!-- <input type="text" class="form-control" name="occupation" id="occupation"> -->
                <select id="occupation" class="form-control search-select" name="occupation">
                    <option value="">Choose One</option>
                    @foreach($occupation as $occupation)
                        <option value="{{$occupation->id}}">{{$occupation->name}}</option>
                    @endforeach
                </select>
            </div>
        </div>

        <div class="form-group row">
            <label class="col-md-4 col-form-label text-md-left">Number of Children <span class="text-danger">*</span></label>
            <div class="col-md-8">
                <input type="number" class="form-control" name="number_children" id="number_children" required>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function(){
        $(document).on('change', '#district', function(){
            var districtid = $(this).val();
            var select = $(this).parent();

            /* security: browser console output removed */;
            var opt = " ";
            $.ajax({
                type: 'get',
                url: "{{ route('/findSubcounty') }}",
                data: {'id':districtid},
                success: function(data){
                    ///* security: browser console output removed */;
                    /* security: browser console output removed */;
                    ///* security: browser console output removed */;
                    opt+='<select id="subcountyid" class="form-control search-select" name="subcountyid" >';
                    opt+='<option value="" selected="selected">Choose One</option>';
                    for (var i = 0; i < data.length; i++) {
                        opt+='<option value="'+data[i].id+'"> '+data[i].name+'</option>';
                    }
                    opt+='</select>';

                    $("#subcounty").html("");
                    $("#subcounty").append(opt);
                },
                error: function(){
                    /* security: browser console output removed */;
                }
            });
        });

        $(document).on('change', '#subcountyid', function(){
            var subcountyid = $(this).val();
            var select = $(this).parent();

            /* security: browser console output removed */;
            var opt = " ";
            $.ajax({
                type: 'get',
                url: "{{ route('/findParish') }}",
                data: {'id':subcountyid},
                success: function(data){
                    ///* security: browser console output removed */;
                    /* security: browser console output removed */;
                    ///* security: browser console output removed */;
                    opt+='<select class="form-control search-select" name="parishid" >';
                    opt+='<option value="" selected="selected">Choose One</option>';
                    for (var i = 0; i < data.length; i++) {
                        opt+='<option value="'+data[i].id+'"> '+data[i].name+'</option>';
                    }
                    opt+='</select>';
                    $("#parish").html("");
                    $("#parish").append(opt);
                },
                error: function(){
                    /* security: browser console output removed */;
                }
            });
        });

        $(document).on('change', '#parishid', function(){
            var parishid = $(this).val();
            var select = $(this).parent();

            /* security: browser console output removed */;
            var opt = " ";
            $.ajax({
                type: 'get',
                url: "{{ route('/findVillage') }}",
                data: {'id':parishid},
                success: function(data){
                    ///* security: browser console output removed */;
                    /* security: browser console output removed */;
                    ///* security: browser console output removed */;
                    opt+='<select class="form-control search-select" name="village" >';
                    opt+='<option value="" selected="selected">Choose One</option>';
                    for (var i = 0; i < data.length; i++) {
                        opt+='<option value="'+data[i].id+'"> '+data[i].name+'</option>';
                    }
                    $("#village").html("");
                    $("#village").append(opt);
                },
                error: function(){
                    /* security: browser console output removed */;
                }
            });
        });

        $(document).on('change', 'input[name="pwd"]', function(){
            var pwdid = $(this).val();
            var select = $(this).parent();
            var opt = " ";
            if(pwdid == 1){
                /* security: browser console output removed */;
                $.ajax({
                    type: 'get',
                    url: "{{ route('/findDisability') }}",
                    data: {'id':pwdid},
                    success: function(data){
                        ///* security: browser console output removed */;
                        /* security: browser console output removed */;
                        ///* security: browser console output removed */;
                            opt+='<label class="col-sm-4 control-label">Disability:</label>';
                                opt+='<div class="col-md-8">';
                            opt+='<select class="form-control search-select" name="disability" id="disability_category">';
                            for (var i = 0; i < data.length; i++) {
                                opt+='<option value="'+data[i].id+'"> '+data[i].name+'</option>';
                            }
                            opt+='</div>';
                        $("#disabilityWrapper").html("");
                        $("#disabilityWrapper").append(opt);
                    },
                    error: function(){
                        /* security: browser console output removed */;
                    }
                });
            }else{
                $("#disabilityWrapper").html("");
                $("#disabilityWrapper").append(opt);
            }
        });

        $(document).on('keyup', '#crb_number', function (){
            var refno = $(this).val();
            $("#survivor_code").html("");
            $("#survivor_code").val(refno);
        });

        $(document).on('change', '#nstatus', function(){
            var nstatusid = $(this).val();
            var select = $(this).parent();
            /* security: browser console output removed */;
            var opt = " ";
            $.ajax({
                type: 'get',
                url: "{{ route('/findNSCategory') }}",
                data: {'id':nstatusid},
                success: function(data){
                    opt+='<select class="form-control search-select" name="ns_categornsy" required>';
                    /*opt+='<option value="" selected="selected">Choose One</option>';*/
                    for (var i = 0; i < data.length; i++) {
                        opt += '<option value="' + data[i].id + '"> ' + data[i].name + '</option>';
                    }
                    opt+='</select>';
                    /* security: browser console output removed */;
                    $("#ns_category").html("");
                    $("#ns_category").append(opt);
                },
                error: function(){
                    /* security: browser console output removed */;
                }
            });
        });
    });
</script>

