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

<div class="row">
    <div class='col-sm-12'>
        <div id="imaginary_container">
            <h3>New Plan and Due Date</h3>
            <br>
            <div class="row">
                <div class="col-md-12">
                    <form class="form form-horizontal" action="{{ url('/save/due_dates') }}" method="POST">
                        {{csrf_field()}}
                        <div class="form-group">
                            <div class="col-sm-12">
                                <div class='col-sm-4'>
                                    <label>Select Academic Type</label><span class="fa fa-asterisk" style="color:red;font-size:4pt;"></span>
                                    <select class='form form-control' id="acad_type" name="academic_type" required>
                                        <option value='' readonly>Select Academic Type</option>
                                        @foreach($types as $type)
                                        <option value='{{$type->academic_type}}'>{{$type->academic_type}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-12">
                                <div class="col-md-4">
                                    <label>Plan Name</label> <span class="fa fa-asterisk" style="color:red;font-size:4pt;"></span>
                                    <input type="text" name="plan_name" class="form-control" required>
                                    <p>
                                    <b>NOTE:</b>     
                                    <ul>
                                        <li>Must be <b>unique</b> for this academic type.</li>
                                        <li>Records with <b>similar</b> name will be <b>deleted.</b></li>
                                    </ul>
                                    </p>
                                </div>
                                <div class="col-md-8">
                                    <label>Due Dates&nbsp;&nbsp;&nbsp;(dd/mm/yyyy)</label>
                                    <table class="table table-condensed" width="100%" id="dues_table">
                                        <tr>
                                            <td>Downpayment <span class="fa fa-asterisk" style="color:red;font-size:4pt;"></span></td>
                                            <td><input type="date" class="form form-control" name="dp_due" required></td>
                                            <td><a class="btn btn-sm btn-primary pull-right" id="add_date"><span class="fa fa-plus"></span> Add</a></td>
                                        </tr>
                                                                            </table>
                                    <div class="col-md-12">
                                        <button type="submit" class="form-control btn-success btn"><b>Save New Plan</b></button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    var b = 0;

    $('#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--;
    });
</script>
@stop