<!--Incident Information-->
<div class="row">
    <legend>Incident 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">Incident Date: <span class="text-danger">*</span></label>
            <div class="col-md-8">
                <div class="ngbvd-date-field">
                    <input type="text" class="form-control datepicker" name="incident_date" id="incident_date" placeholder="YYYY-MM-DD" required autocomplete="off">
                    <span class="ngbvd-date-icon"><i class="ti-calendar"></i></span>
                </div>
            </div>
        </div>
        <div class="form-group row">
            <label class="col-md-4 col-form-label text-md-left">Incident Time: <span class="text-danger">*</span></label>
            <div class="col-md-8">
                <select id="interview_time" class="form-control search-select" name="incident_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">Reported By ?: <span class="text-danger">*</span></label>
            <div class="col-md-8">
                <select id="reportedby" class="form-control search-select" name="reportedby" required>
                    <option value="">Choose One</option>
                    @foreach($authorities as $authorities)
                        <option value="{{$authorities->id}}">{{$authorities->name}}</option>
                    @endforeach
                </select>
            </div>
        </div>
        <div class="form-group row">
            <label class="col-md-4 col-form-label text-md-left">Contact:
                <span class="text-danger" style="visibility: hidden">*</span></label>
            <div class="col-md-8">
                <input type="text" class="form-control" name="reportedbycontact" id="reportedbycontact"  placeholder="Reported by contact">
            </div>
        </div>
        <div class="form-group row">
            <label class="col-md-4 col-form-label text-md-left">Place of Occurrence: <span class="text-danger">*</span></label>
            <div class="col-md-8">
                <select id="placeoccured" class="form-control search-select" name="placeoccured" required>
                    <option value="">Choose One</option>
                    @foreach($places as $place)
                        <option value="{{$place->id}}">{{$place->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">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 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="relation" >
                    <option value="">Choose One</option>
                    @foreach($relations as $relation)
                        <option value="{{$relation->id}}">{{$relation->name}}</option>
                    @endforeach
                </select>
            </div>
        </div>
    </div>
</div>
<div class="row ngbvd-incident-picker-section">
    <div class="col-sm-12">
        <div class="ngbvd-section-heading">
            <div>
                <legend>Incidents</legend>
                <p>Select one or more incident categories. Use search to quickly find a category.</p>
            </div>
            <span class="ngbvd-selected-count" id="incidentSelectedCount">0 selected</span>
        </div>
        <div class="ngbvd-incident-search-wrap">
            <i class="ti-search"></i>
            <input type="text" class="form-control" id="incidentSearch" placeholder="Search incident category...">
        </div>
    </div>
    <div class="col-sm-12">
        <div class="ngbvd-incident-grid" id="incidentPickerGrid">
            @foreach($incidents as $incident)
                <label class="ngbvd-incident-option" data-incident-name="{{ strtolower($incident->name) }}">
                    <input type="checkbox" class="checkbox checkbox-inline" value="{{ $incident->id }}" name="incidentid[]">
                    <span class="ngbvd-incident-check"><i class="ti-check"></i></span>
                    <span class="ngbvd-incident-name">{{ $incident->name }}</span>
                </label>
            @endforeach
        </div>
    </div>
</div>
<div class="row">
    <div class="col-sm-12" id="home1">
        <label class="col-sm-2 col-form-label">Details</label>
        <div class="col-sm-12">
            <textarea rows="5" cols="5" class="form-control" name="notes" placeholder="Incident Details"></textarea>
        </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', '#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="village" >';
                        for (var i = 0; i < data.length; i++) {
                            opt+='<option value="'+data[i].id+'"> '+data[i].name+'</option>';
                        }
                        opt+='</div>';
                        $("#disability").html("");
                        $("#disability").append(opt);
                    },
                    error: function(){
                        /* security: browser console output removed */;
                    }
                });
            }else{
                $("#disability").html("");
                $("#disability").append(opt);
            }
        });
    });
</script>
