<div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
        <form method="POST" class="projectForm" id="projectForm" onsubmit="event.preventDefault();">
            <div class="projectModalContainer">
                <div class="modal-header">
                    <h1>Project maken</h1>
                </div>
                <div class="modal-body">

                    <div class="form-group">
                        <div class="col-lg-12">
                            <label>Klant</label>
                        </div>
                        <div class="col-lg-11">
                            <select name="company" id="company" class="form-control selectpicker"
                                    data-live-search="true" title="Kies een klant"
                                    data-validation="length" data-validation-length="min1"
                                    data-validation-error-msg="Vergeet niet om een klant te kiezen!">
                                {{--if cache has company--}}
                                @if(!empty($company))
                                    @foreach($companies as $getCompany)
                                        @if($getCompany->id == $company)
                                            <option value="{{$getCompany->id}}"
                                                    selected>{{$getCompany->name}}</option>
                                        @else
                                            <option value="{{$getCompany->id}}">{{$getCompany->name}}</option>
                                        @endif
                                    @endforeach
                                @else
                                    <option></option>
                                    @foreach($companies as $companies)
                                        <option value="{{$companies->id}}">{{$companies->name}}</option>
                                    @endforeach
                                @endif
                            </select>
                        </div>
                        @can('template_control')
                            <div class="col-lg-1">
                                <a href="/klanten/create?ref=hours" class="btn btn-default pull-right">+</a>
                            </div>
                        @endcan
                        <div class="col-lg-12">
                            <label>Project</label>
                        </div>
                        <div class="col-lg-11">
                            <select name="project" id="project" class="form-control selectpicker"
                                    data-live-search="true" title="Kies een soort project"
                                    data-validation="length" data-validation-length="min1"
                                    data-validation-error-msg="Vergeet niet om een project te kiezen!">
                                {{--if cache has project--}}
                                @if(!empty($project))
                                    @foreach($projectTemplates as $projectTemplate)
                                        @if($projectTemplate->id == $project)
                                            <option value="{{$projectTemplate->id}}"
                                                    selected>{{$projectTemplate->name}}</option>
                                        @else
                                            <option value="{{$projectTemplate->id}}">{{$projectTemplate->name}}</option>
                                        @endif
                                    @endforeach
                                @else
                                    <option selected disabled></option>
                                    @foreach($projectTemplates as $projectTemplate)
                                        <option value="{{$projectTemplate->id}}">{{$projectTemplate->name}}</option>
                                    @endforeach
                                @endif
                            </select>
                        </div>
                        @can('template_control')
                            <div class="col-lg-1">
                                <a href="/instellingen/projecten/create?ref=hours"
                                   class="btn btn-default pull-right">+</a>
                            </div>
                        @endcan
                        <div class="col-lg-11">
                            <label>Projectnaam</label>
                            <input name="name" id="name" class="form-control"
                                   value="{{$cache->name ?? old('name')}}">
                            <label>Uurprijs</label>
                            <input name="hourlyRate" id="hourlyRate" type="number" step="0.01" min="0"
                                   class="form-control spinner" value="{{$cache->hourlyRate ?? old('hourlyRate')}}"
                                   data-validation="length" data-validation-length="min1"
                                   data-validation-error-msg="Vergeet niet om een uurprijs in te vullen!"/>
                            <div class="form-group">
                                <br>
                                <label class="control-label">
                                    <input type="hidden" name="internal" value="0">
                                    <input type="checkbox" name="internal" id="internal_yes" value="1">
                                    Intern project / Sponsor project</label>
                                <br>
                            </div>
                            <div class="form-group">
                                <label class="control-label">Soort werkzaamheden</label><br>
                                <div class="btn-group btn-radio">
                                    <input type="radio" name="reserved" id="reserved_yes" value="1">
                                    <label for="reserved_yes">Project</label>
                                    &nbsp;&nbsp;
                                    <input type="radio" name="reserved" id="reserved_no" value="0"> <label
                                            for="reserved_no">Onderhoud</label>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="monthly_project_label">
                                    <input name="monthly_project" type="checkbox" value="yes"> Maandelijks project
                                </label><br>
                                    <input type="hidden" name="xMonths" id="xMonths" class="form-control" value="1"/>
                            </div>
                            <label>Owner</label>
                            <select name="projectManager" id="projectManager" class="form-control selectpicker"
                                    data-live-search="true" title="Kies een owner"
                                    data-validation="length" data-validation-length="min1"
                                    data-validation-error-msg="Vergeet niet om een projectleider te kiezen!">
                                {{--if cache has project--}}
                                @if(!empty($projectManager))
                                    @foreach($projectOwners as $projectOwner)
                                        @if($projectOwner->id == $projectManager)
                                            <option value="{{$projectOwner->id}}" selected>{{$projectOwner->name}}</option>
                                        @else
                                            <option value="{{$projectOwner->id}}">{{$projectOwner->name}}</option>
                                        @endif
                                    @endforeach
                                @else
                                    @foreach($projectOwners as $projectOwner)
                                        <option value="{{$projectOwner->id}}">{{$projectOwner->name}}</option>
                                    @endforeach
                                @endif
                            </select>
                            <div class="exUsersHolder" @cannot('edit_allowed_users') style="visibility: hidden;" @endcannot>
                                <label>Alleen zichtbaar voor:</label>
                                <select class="selectpicker form-control" name="excluded_users[]" multiple>
                                    @foreach($users as $user)
                                        <option value="{{$user->id}}" selected>{{$user->name}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <div class="form-group col-lg-12">
                        <hr>
                        <button name="cancel" data-dismiss="modal" class="btn btn-default">Annuleren</button>
                        <button type="button" class="btn btn-primary" onclick="showBudgets(event);">Verder</button>

                    </div>
                    <input type="hidden" name="_token" value="{{ csrf_token() }}">
                    <input type="hidden" name="ref" value="{{ $ref }}">
                    <input type="hidden" name="currentPage" value="createProject">

                </div>
                <div class="error-container"></div>
            </div>
            @include('projects.popup.budgets')
        </form>
    </div>
</div>

@include('partials.generalElements.errorMessage')

<script type="text/javascript">
    //$(document).ready(function () {
    function cachePopUp() {
        var content = $("#budgetContent").html();
        var newContent = $("#newBudgetContent").html();
        var selectionContent = $("#selectNewSubproject").html();
        $.ajax({
            type: 'get',
            url: '{{URL::to('cacheProjectPopUp')}}',
            data: {
                'content': content,
                'newContent': newContent,
                'selectionContent': selectionContent
            },
            success: function (data) {
                console.log(data);
            }
        });
    }

    function make_name() {
        var company = $("#company option:selected").text();
        var project = $("#project option:selected").text();
        $("#name").val(company + ' - ' + project);
    }

    $("#company").change(function () {
        make_name();
        $value = $(this).val();
        setCompanyHourlyRate();
    });

    $('.subprojectsBudgets').on('change', function () {
        $(this).attr('value', $(this).val());
        updateBudget();
    });

    $("#xMonths").change(function () {
        var name = $("#name");
        var value = name.val().split(' |')[0];

        if ($(this).val() <= 1) {
            var date = "{{\Carbon\Carbon::today()->formatLocalized(' | %B %Y')}}";
        } else {
            var date = "{{\Carbon\Carbon::today()->format(' | Y-Q' . \Carbon\Carbon::today()->quarter)}}";
        }

        name.val(value + date);
    });

    $("#selectNewSubproject").on('change', function () {
        $value = $("#selectNewSubproject").val();
        $text = $("#selectNewSubproject option:selected").text();
        $rowCount = $("#budgetContent").children().length + $("#newBudgetContent").children().length;

        if ($value) {
            $output = '<div class="form-group row"> ' +
                '<label for="budget" class="col-md-4 control-label">' + $text + '</label> ' +
                '<div class="col-md-2">' +
                '<input type="hidden" name="subprojects[' + $rowCount + '][name]" value="' + $text + '">  ' +
                '<input id="budget" type="number" step="0.25" min="0" class="form-control subprojectsBudgets spinner" name="subprojects[' + $rowCount + '][budget]" placeholder="0" autofocus> ' +
                '</div>' +
                '<div class="col-md-2">' +
                '<input name="subprojects[' + $rowCount + '][hourlyRate]" id="hourlyRate" type="number" step="0.01" min="0" class="form-control spinner" value=""> ' +
                '</div>' +
                '<div class="col-md-3">' +
                '<label class="control-label" style="padding-top: 5px;">' +
                '<input type="radio" name="subprojects[' + $rowCount + '][billable]" value="1"> Ja ' +
                '</label>' +
                '&nbsp; ' +
                '<label class="control-label" style="padding-top: 5px;">' +
                '<input type="radio" name="subprojects[' + $rowCount + '][billable]" value="0"> Nee ' +
                '</label>' +
                '</div>' +
                '<div class="col-md-1" style="padding-top: 5px;">' +
                '<span onclick="removeSubproject(this)" class="glyphicon glyphicon-trash">' +
                '</span></div>' +
                '</div>';

            $('#newBudgetContent').append($output);
            $('.subprojectsBudgets').on('change', function () {
                $(this).attr('value', $(this).val());
                updateBudget();
            });
            $('.selectpicker').selectpicker('refresh');
            $(".spinner").each(function () {
                $(this).spinner({
                    step: 0.25,
                    numberFormat: "n",
                    disabled: this.disabled,
                    stop: function () {
                        $(this).attr('value', $(this).val());
                        updateBudget();
                    }
                });
            });
        }
        //cachePopUp();
    });

    $("#addNewCustomSubproject").click(function () {
        $value = $("#CustomSubprojectName").val();
        $rowsCount = $("#budgetContent").children().length + $("#newBudgetContent").children().length;
        if ($value) {
            // $output = ' <div class="form-group row"> ' +
            //     '<label for="budget" class="col-md-4 control-label">' + $value + '</label> ' +
            //     '<div class="col-md-6"><input type="hidden" name="subprojects[]" value="' + $value + '">  ' +
            //     '<input id="budget" type="number" step="0.25" min="0" class="form-control subprojectsBudgets spinner" name="' + $value + '" placeholder="0" autofocus> ' +
            //     '</div> ' +
            //     '<div class="col-md-2" style="padding-top: 5px;"><span onclick="removeSubproject(this)" class="glyphicon glyphicon-trash"></span></div> ' +
            //
            //     '</div>';

            $output = '<div class="form-group row"> ' +
                '<label for="budget" class="col-md-4 control-label">' + $value + '</label> ' +
                '<div class="col-md-2">' +
                '<input type="hidden" name="subprojects[' + $rowsCount + '][name]" value="' + $value + '">  ' +
                '<input id="budget" type="number" step="0.25" min="0" class="form-control subprojectsBudgets spinner" name="subprojects[' + $rowsCount + '][budget]" placeholder="0" autofocus> ' +
                '</div>' +
                '<div class="col-md-2">' +
                '<input name="subprojects[' + $rowsCount + '][hourlyRate]" id="hourlyRate" type="number" step="0.01" min="0" class="form-control spinner" placeholder="0" value=""> ' +
                '</div>' +
                '<div class="col-md-3">' +
                '<label class="control-label" style="padding-top: 5px;">' +
                '<input type="radio" name="subprojects[' + $rowsCount + '][billable]" value="1"> Ja ' +
                '</label>' +
                '&nbsp; ' +
                '<label class="control-label" style="padding-top: 5px;">' +
                '<input type="radio" name="subprojects[' + $rowsCount + '][billable]" value="0"> Nee ' +
                '</label>' +
                '</div>' +
                '<div class="col-md-1" style="padding-top: 5px;">' +
                '<span onclick="removeSubproject(this)" class="glyphicon glyphicon-trash">' +
                '</span></div>' +
                '<div class="col-md-6 col-md-offset-4"> ' +
                '<select name="subprojects[' + $rowsCount + '][tasks][]" id="taskMultiSelect-' + $value + '" class="form-control selectpicker" data-live-search="true" title="Kies taken" multiple>' +
                    @foreach($taskTemplates as $taskTemplate)
                        '<option value="{{$taskTemplate->id}}" {{ in_array($taskTemplate->id, array(2,3,4) ) ? 'selected' : ''}}>{{$taskTemplate->name}}</option>' +
                    @endforeach
                        '</select>' +
                '</div> ' +
                '</div>';

            $('#newBudgetContent').append($output);
            $('.selectpicker').selectpicker('refresh');
            $(".spinner").each(function () {
                $(this).spinner({
                    step: 0.25,
                    numberFormat: "n",
                    disabled: this.disabled,
                    stop: function () {
                        $(this).attr('value', $(this).val());
                        updateBudget();
                    }
                });
            });
            $("#CustomSubprojectName").val("");
            $('.subprojectsBudgets').on('change', function () {
                $(this).attr('value', $(this).val());
                updateBudget();
            });
        }
        //cachePopUp();
    });

    $("#project").change(function () {
        make_name();
        $value = $(this).val();
        $.ajax({
            type: 'get',
            url: '{{URL::to('chosenOptionData')}}',
            data: {
                'search': $value,
                'table': 'project_templates',
                'column': 'reserved'
            },
            success: function (data) {
                $("input[name=reserved][value=" + data + "]").prop("checked", true);
                $("input[name=reserved][value=" + (1 - parseInt(data)) + "]").prop("checked", 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>';
                });
                $(".modal-content .error-container").html(errorList);
            }
        });
        $company = $("#company").val();
        $.ajax({
            type: 'get',
            url: '{{URL::to('allSubprojectBudgets')}}',
            data: {
                'id': $value,
                'company_id': $company
            },
            success: function (data) {
                $('#budgetContent').html(data.output);
                $('#selectNewSubproject').html(data.outputSelect);
                updateBudget();
            },
            error: function (jqXHR, textStatus) {
                var errorList = '';
                $.each(JSON.parse(jqXHR.responseText), function (i, val) {
                    errorList += '<div class="alert alert-danger" role="alert">' + val + '</div>';
                });
                $(".modal-content .error-container").html(errorList);
            }
        });
    });

    function setCompanyHourlyRate(){
        $value = $("#company").val();
        $.ajax({
            type: 'get',
            url: '{{URL::to('chosenOptionData')}}',
            data: {
                'search': $value,
                'table': 'companies',
                'column': 'hourly_rate'
            },
            success: function (data) {
                $('#hourlyRate').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>';
                });
                $(".modal-content .error-container").html(errorList);
            }
        });
    }

    $('#internal_yes').change(function () {
        if($(this).prop('checked')){
            $('#hourlyRate').val(0);
        } else {
            setCompanyHourlyRate();
        }
    });

    function checkForInternalProject() {
        var internal = $('#internal_yes').prop('checked');
        if (internal) {
            var billableRadioButtons = $("#budgetContent input[name*='billable']");
            $.each(billableRadioButtons, function (i, inputEl) {
                if ($(inputEl).val() == 1 && $(inputEl).attr('checked') === "checked") {
                    $(inputEl).attr('checked', false);
                }
                if ($(inputEl).val() == 0 && $(inputEl).attr('checked') == undefined) {
                    $(inputEl).attr('checked', true);
                }
            })
            var hourlyRateInputs = $("#budgetContent input[name*='hourlyRate']");
            $.each(hourlyRateInputs, function (i, inputEl) {
                $(inputEl).val(0);
            });
        } else {
            var hourlyRateInputs = $("#budgetContent input[name*='hourlyRate']");
            var hourly_rate = $('#hourlyRate').val();
            $.each(hourlyRateInputs, function (i, inputEl) {
                if($(inputEl).val() != hourly_rate){
                    $(inputEl).val(hourly_rate);
                }
            });
        }
    }

    function showBudgets() {
        if (isFormValid($(".projectForm"))) {

            $.ajax({
                type: 'POST',
                url: '/checkDuplicateProject',
                data: $('.projectForm').serialize(),
                success: function (data) {
                    if (!data.foundProject) {
                        checkForInternalProject();
                        $(".error-container").html('');
                        $(".projectModalContainer").fadeOut("fast", function () {
                            $(".budgetModalContainer").fadeIn();
                            $('.selectpicker').selectpicker('refresh');
                            $(".spinner").each(function () {
                                $(this).spinner({
                                    //step: 0.25,
                                    numberFormat: "n",
                                    disabled: this.disabled,
                                    stop: function () {
                                        $(this).attr('value', $(this).val());
                                        updateBudget();
                                    }
                                });
                            });
                        });
                    } else {
                        $(".modal-content .error-container").html('<div class="alert alert-danger" role="alert">Naam bestaat al</div>');
                        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>';
                    });
                    $(".modal-content .error-container").html(errorList);
                    event.preventDefault();
                    return false;
                }
            });
        }
    }

    // used in the budgets view
    function removeSubproject(el) {
        var row = el.parentElement.parentElement;
        row.parentNode.removeChild(row);
        console.log("element removed");
    }

    /* attach a submit handler to the form */
    $(document).off("submit", ".projectForm").on("submit", ".projectForm", function (event) {
        var ref = window.location.pathname;
        $.ajax({
            type: 'POST',
            url: '/projecten',
            data: $('.projectForm').serialize(),
            success: function (data) {

                $(document).off("submit", ".projectForm");
                $('#createProjectModal').modal('hide');
                $('#createProjectModal').html('');

                //var url = "/hours?project=";
                if (ref === "/projecten") {
                    url = "/projecten/";
                    goPjax(url + data);
                } else {
                    refreshProjectSelect(data);
                }
            },
            error: function (jqXHR) {
                var errorList = '';
                $.each(JSON.parse(jqXHR.responseText), function (i, val) {
                    errorList += '<div class="alert alert-danger" role="alert">' + val + '</div>';
                });
                $(".modal-content .error-container").html(errorList);
                event.preventDefault();
                return false;
            }
        });
        event.preventDefault();
        return false;
    });

    function showCreateProject() {
        $(".budgetModalContainer").fadeOut("fast", function () {
            $(".projectModalContainer").fadeIn();
            $('.selectpicker').selectpicker('refresh');
        });
    }

    function updateBudget() {
        var budgetTotal = 0;
        $('.subprojectsBudgets').each(function (i, el) {
            var val = $(el).val() != "" ? parseFloat($(el).val()) : 0;
            budgetTotal += val;
        });
        $('.budgetTotal').html(budgetTotal);
    }
</script>