<div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
        <div class="subprojectModalContainer">
            <div class="modal-header">
                <h1>Deelproject maken </h1>
            </div>
            <div class="modal-body">
                <form method="POST" class="subprojectForm" id="subprojectForm" onsubmit="event.preventDefault();">
                    <div class="form-group">
                        <div class="col-lg-12">
                            <hr>
                            <h3><label>Project: </label> {{$project->name}}</h3>
                        </div>
                        <div class="col-lg-12">
                            <label>Template</label>
                        </div>
                        <div class="col-lg-11">
                            <select name="subproject" id="subproject" form="subprojectForm" class="form-control selectpicker"
                                    data-live-search="true" title="Kies deelproject">
                                @foreach($subprojectTemplates as $subprojectTemplate)
                                    <option value="{{$subprojectTemplate->id}}">{{$subprojectTemplate->name}}</option>
                                @endforeach
                            </select>
                        </div>
                        @can('template_control')
                            <div class="col-lg-1">
                                <a onclick="goPjax('/instellingen/deelprojecten/create?ref=subprojecten-create-{{$project->id}}&secondRef=projecten-{{$project->id}}')" class="btn btn-default pull-right">+</a>
                            </div>
                        @endcan
                        <div class="col-lg-12">
                            <label>Koppel taken</label>
                        </div>
                        <div class="col-lg-11">
                            <select name="tasks[]" id="taskMultiSelect" form="subprojectForm" class="form-control selectpicker"
                                    data-live-search="true"
                                    title="Kies deelproject" multiple disabled>
                                @foreach($taskTemplates as $taskTemplate)
                                    <option value="{{$taskTemplate->id}}">{{$taskTemplate->name}}</option>
                                @endforeach
                            </select>
                        </div>
                        @can('template_control')
                            <div class="col-lg-1">
                                <a onclick="goPjax('/instellingen/taken/create?ref=subprojecten-create-{{$project->id}}&secondRef=projecten-{{$project->id}}')"
                                   class="btn btn-default pull-right">+</a>
                            </div>
                        @endcan
                        <div class="col-lg-12">
                            <label>Naam</label>
                            <input name="name" id="name" class="form-control" value="">
                            <label>Budget</label>
                            <input type="number" step="0.25" min="0" class="form-control spinner" name="budget" id="budget" value="0">
                            <label style="width: 50%; float:left;">Uurprijs
                            <input name="hourly_rate" id="hourlyRate" type="number" step="0.01" min="0" class="form-control spinner" value="{{$project->hourly_rate}}">
                            </label>
                            <label class="control-label pull-right" style="width: 45%">
                                <br>
                                <input name="billable" type="radio" value="0"> Niet facturabel</label>
                            <label class="control-label pull-right" style="width: 45%">
                                <input id="billable" name="billable" type="radio" value="1"> Facturabel</label>

                            <br>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <div class="form-group col-lg-12">
                            <div class="error-container"></div>
                            <hr>
                            <a name="cancel" data-dismiss="modal" class="btn btn-default">Annuleren</a>
                            <input type="submit" form="subprojectForm" value="Maak deelproject" class="btn btn-primary"/>

                        </div>
                        <input type="hidden" form="subprojectForm" name="_token" value="{{ csrf_token() }}">
                        <input type="hidden" form="subprojectForm" name="ref" value="{{ $ref }}">
                        <input type="hidden" form="subprojectForm" name="project" value="{{ $project->id }}">
                    </div>
                </form>
            </div>
            @if(count($errors))
                @foreach($errors->all() as $error)
                    <div class="alert alert-danger" role="alert">{{$error}}</div>
                @endforeach
            @endif
        </div>
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        function refreshSelectBox(taskTemplates) {
            $('select[id=taskMultiSelect]').val(taskTemplates);
            $('select[id=taskMultiSelect]').prop('disabled', false);
            $('.selectpicker').selectpicker('refresh');
        }

        // $('#name').change(function () {
        //     var name = $(this).val();
        //     //$('select[id=taskMultiSelect]').attr('name', name + "-tasks[]");
        // });

    //.off( "change", "#selectTask").on( "change", "#selectTask", function () {
        $("#subproject").change(function () {
            $value = $(this).val();

            $("#name").val($("#subproject option:selected").text());
            //$('select[id=taskMultiSelect]').attr('name', $("#name").val() + "-tasks[]");

            $.ajax({
                type: 'get',
                url: '{{URL::to('chosenOptionData')}}',
                data: {
                    'search': $value,
                    'table': 'subproject_templates',
                    'column': 'budget'
                },
                success: function (data) {
                    if(parseInt(data) > 0) {
                        $('#budget').val(data);
                    }
                },
                error: function (jqXHR, textStatus) {
                    var errorList = "";
                    $.each(JSON.parse(jqXHR.responseText), function(i, val) {
                        errorList += '<div class="alert alert-danger" role="alert">' + val + '</div>';
                    });

                    $(".error-container").html(errorList);
                }
            });

            {{--$.ajax({--}}
                {{--type: 'get',--}}
                {{--url: '{{URL::to('chosenOptionData')}}',--}}
                {{--data: {--}}
                    {{--'search': $value,--}}
                    {{--'table': 'subproject_templates',--}}
                    {{--'column': 'standard_billable'--}}
                {{--},--}}
                {{--success: function (data) {--}}
                    {{--console.log(data);--}}
                    {{--$('#billable').prop('checked', data==1);--}}
                {{--},--}}
                {{--error: function (jqXHR, textStatus) {--}}
                    {{--var errorList = "";--}}
                    {{--$.each(JSON.parse(jqXHR.responseText), function(i, val) {--}}
                        {{--errorList += '<div class="alert alert-danger" role="alert">' + val + '</div>';--}}
                    {{--});--}}

                    {{--$(".error-container").html(errorList);--}}
                {{--}--}}
            {{--});--}}

            $.ajax({
                type: 'get',
                url: '{{URL::to('relatedTasks')}}',
                data: {
                    'id': $value
                },
                success: function (data) {
                    refreshSelectBox(data);
                    return false;
                },
                error: function (jqXHR, textStatus) {
                    var errorList = "";
                    $.each(JSON.parse(jqXHR.responseText), function(i, val) {
                        errorList += '<div class="alert alert-danger" role="alert">' + val + '</div>';
                    });

                    $(".error-container").html(errorList);
                }
            });
            return false;
        });
    });

    /* attach a submit handler to the form */
    $(document).off("submit", ".subprojectForm").on("submit", ".subprojectForm", function (event) {
        var ref = window.location.pathname.split("/")[1];
        var ev = event;
        $.ajax({
            type: 'POST',
            url: '/subprojecten',
            data: $('.subprojectForm').serialize(),
            success: function (data, jqXHR) {

                $(document).off( "submit", ".subprojectForm");
                $('#createSubProjectModal').modal('hide');
                $('#createSubProjectModal').html('');
                //var url = "/hours?project={{$project->id}}&subproject=" + data;
                if (ref == "projecten") {
                    var url = "/projecten/{{$project->id}}";
                    goPjax(url);
                } else {
                    console.log("refreshSubprojectSelect", data);
                    refreshSubprojectSelect(data);
                }

                return false;
            },
            error: function (jqXHR) {
                var errorList = "";
                $.each(JSON.parse(jqXHR.responseText), function(i, val) {
                    errorList += '<div class="alert alert-danger" role="alert">' + val + '</div>';
                });
                $(".error-container").html(errorList);
                return false;
            }
        });
        ev.preventDefault();
        return false;
    });
</script>