@extends('layouts.accountingapp')
@section('content')
<style>
    .label{color: gray;}
</style>

<div class="row">
    <div class='col-sm-12'>
        <div id="imaginary_container">
            <h3>Plans and Due Date Setup</h3>
            <a type="button" class="btn btn-success" href="{{url("/new/due_dates")}}"><span class="fa fa-plus"></span><b> New Plan</b></a>
            <br><br>
            <div class="form form-group">
                <input type="hidden" name="indic" value="1">
                <div class="col-sm-12">
                    <div class='col-sm-6'>
                        <label class='label'>Select Academic Type</label>
                        <select class='form form-control' id="acad_type" name="acad_type" onchange="getplan();getdues()">
                            <option value='' readonly>Select Academic Type</option>
                            @foreach($types as $type)
                            <option value='{{$type->academic_type}}'>{{$type->academic_type}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-sm-6">
                        <label class="label">Select Type of Plan</label>
                        <select id="account_type" class="form form-control" name="account_type" onchange="getdues()">
                            <option value="">Select Type of Plan</option>
                            <option value="Full Payment">Cash Basis</option>
                            @foreach ($plans as $plan)
                            <option value="{{$plan->plan}}">{{$plan->plan}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col-sm-12">
                    <div class="col-md-12" id="display_dates">
                        
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    function getplan() {
        array = {};
        array['acad'] = $("#acad_type").val();
        $.ajax({
            type: "GET",
            url: "/ajax/setup/getPlan/",
            data: array,
            success: function (data) {
                $('#account_type').html(data);
            }
        }
        );
    }
     var b = 0;
    
    function getdues() {
        array = {};
        array['acad'] = $("#acad_type").val();
        array['account'] = $("#account_type").val();
        $.ajax({
            type: "GET",
            url: "/ajax/setup/getDates/",
            data: array,
            success: function (data) {
                $('#display_dates').html(data);
                    b = $("#b").val(); 
                    $('#add_date').click(function(){
                        b++;
                        $('#dues_table').append('<tr id="row' + b + '"><td></td>\n\
                            <td><input type="date" class="form form-control" name="option_due[]"></td>\n\
                            <td><a href="javascript:void()" class="btn btn-sm btn-danger btn_remove_record pull-right" id="' + b + '"><b>X</b> Delete </a></td></tr>');
                    });

                    $('#dues_table').on('click', '.btn_remove_record', function(){
                        var button_id = $(this).attr("id");
                        $("#row" + button_id).remove();
                        b--;
                    });
                }
        });
    }
    
    $('#add_dat33e').click(function(){
        b++;
        $('#dues_table').append('<tr id="row' + b + '"><td></td>\n\
        <input class="form form-control" type="text" name="sibling_name[]"></td>\n\\n\
        <td width="8%"><label class="label">Age</label><input class="form form-control" type="text" name="sibling_age[]"></td>\n\\n\
        <td width="20%"><label class="label">Level/Occupation</label><input class="form form-control" type="text" name="sibling_level[]"></td>\n\\n\
        <td width="20%"><label class="label">School/Office</label><input class="form form-control" type="text" name="sibling_school[]"></td>\n\\n\
        <td width="5%"><label class="label">&nbsp;</label><a href="javascript:void()" name="remove_siblings"  id="' + b + '" class="btn btn-danger btn_remove btn_remove_siblings">X</a>\n\
        \n\</td></tr>');});
</script>
@stop