<form id="" class="form-horizontal">
    <div class="col-md-6 no-border">
        <div class="row form-group">
            <label class="col-md-4 control-label">* Client:</label>

            <div class="col-md-8">
                <select id="addClientSelectBox" name="client_id">
                    <option></option>
                    <?php foreach($clients as $client): ?>
                        <option value="<?php echo e($client['id']); ?>"><?php echo e($client['name']); ?></option>
                    <?php endforeach; ?>
                </select>
            </div>
        </div>
        <div class="row form-group">
            <label class="col-md-4 control-label">* Building:</label>

            <div class="col-md-8" id="addBuildingSelectBoxContent">
                <select id="addBuildingSelectBox" name="building_id">
                    <option></option>
                    <?php foreach($buildings as $building): ?>
                        <option value="<?php echo e($building['id']); ?>"><?php echo e($building['name']); ?></option>
                    <?php endforeach; ?>
                </select>
            </div>
        </div>
        <div class="row form-group <?php echo e(Auth::user()['userType']=='serviceProvider' ? 'hidden' : ''); ?>">
            <label class="col-md-4 control-label">* Contractor:</label>

            <div class="col-md-8">
                <select id="addJobServiceProvider" data-placeholder="Select a contractor"
                        class="form-control">
                    <option></option>
                    <?php foreach($serviceProviders as $serviceProvider): ?>
                        <option value="<?php echo e($serviceProvider['id']); ?>" <?php echo e((Auth::user()['userType']=='serviceProvider' && Auth::user()['userTypeId']==$serviceProvider['id']) ? 'selected' : ''); ?>><?php echo e($serviceProvider['shortName']); ?></option>
                    <?php endforeach; ?>
                </select>
            </div>
        </div>
        <div class="row form-group">
            <label class="col-md-4 control-label">* Discipline:</label>

            <div class="col-md-8">
                <select id="addDisciplineSelectBox" name="discipline">
                    <option></option>
                    <?php foreach($disciplines as $discipline): ?>
                        <option value="<?php echo e($discipline['name']); ?>"><?php echo e($discipline['name']); ?></option>
                    <?php endforeach; ?>
                </select>
            </div>
        </div>
        <div class="row form-group">
            <label class="col-md-4 control-label">* Job type:</label>

            <div class="col-md-8">
                <select id="addJobTypeSelectBox" name="jobType">
                    <option></option>
                    <?php foreach($customTypes as $customType): ?>
                        <?php if($customType['type']=='Job Type'): ?>
                            <option value="<?php echo e($customType['value']); ?>"><?php echo e($customType['value']); ?></option>
                        <?php endif; ?>
                    <?php endforeach; ?>
                </select>
            </div>
        </div>
        <div class="row form-group">
            <label class="col-md-4 control-label">Previous Job:</label>

            <div class="col-md-8" id="previousJobsSelectBox">
                <select id="addPreviousJobSelectBox" name="parentJob"></select>
            </div>
        </div>
        <div class="row form-group">
            <label class="col-md-4 control-label">Client Reference:</label>

            <div class="col-md-8">
                <input id="addClientReference" type="text" name="clientReference"
                       class="form-control" placeholder=""/>
            </div>
        </div>
        <div class="row form-group">
            <label class="col-md-4 control-label">CAPEX No:</label>

            <div class="col-md-8">
                <input id="addCapexNo" type="text" name="capexNo" class="form-control"/>
            </div>
        </div>
        <div class="row form-group">
            <label class="col-md-4 control-label">Assigned to:</label>

            <div class="col-md-8">
                <select multiple="multiple" id="addAssignedToSelectBox" name="assignedTo"
                        class="form-control" style="width: 100%">
                    <?php foreach($engineers as $engineer): ?>
                        <option value="<?php echo e($engineer['id']); ?>"><?php echo e($engineer['name']); ?>

                            (<?php echo e($engineer['email']); ?>)
                        </option>
                    <?php endforeach; ?>
                </select>
            </div>
        </div>
        <div class="row form-group">
            <label class="col-md-4 control-label">Address:</label>

            <div class="col-md-8">
                <textarea class="form-control" id="buildingAddress" rows="6" disabled></textarea>
            </div>
        </div>
        <div class="row form-group">
            <label class="col-md-4 control-label">Telephone:</label>

            <div class="col-md-8">
                <input type="text" id="clientTelephone" class="form-control" disabled/>
            </div>
        </div>
        <div class="row form-group">
            <label class="col-md-4 control-label">Opening hours:</label>

            <div class="col-md-8">
                <input type="text" id="clientOpeningHours" class="form-control" disabled/>
            </div>
        </div>
        <div class="row form-group">
            <label class="col-md-4 control-label">Client contact:</label>

            <div class="col-md-8">
                <input type="text" id="clientContact" class="form-control" disabled/>
            </div>
        </div>
    </div>

    <div class="col-md-6 no-border">
        <div class="row form-group">
            <label class="col-md-4 control-label">* Response:</label>

            <div class="col-md-8">
                <select id="addResponseTimeSelectBox" name="responseTime">
                    <option></option>
                    <?php foreach($customTypes as $customType): ?>
                        <?php if($customType['type']=='Response Time'): ?>
                            <option value="<?php echo e($customType['value']); ?>"><?php echo e($customType['value']); ?></option>
                        <?php endif; ?>
                    <?php endforeach; ?>
                </select>
            </div>
        </div>
        <div class="row form-group">
            <label class="col-md-4 control-label"></label>

            <div class="col-md-8">
                <input id="addResponseDate" type="text" class="form-control" name="responseDate"
                       placeholder="if dated, select a particular date">
            </div>
        </div>
        <div class="row form-group">
            <label class="col-md-4 control-label">* Recall:</label>

            <div class="col-md-8">
                <select id="addRecallSelectBox" name="recall">
                    <option></option>
                    <?php foreach($customTypes as $customType): ?>
                        <?php if($customType['type']=='YesOrNo'): ?>
                            <option value="<?php echo e($customType['value']); ?>"><?php echo e($customType['value']); ?></option>
                        <?php endif; ?>
                    <?php endforeach; ?>
                </select>
            </div>
        </div>
        <div class="row form-group">
            <label class="col-md-4 control-label">* Warranty:</label>

            <div class="col-md-8">
                <select id="addWarrantySelectBox" name="warranty">
                    <option></option>
                    <?php foreach($customTypes as $customType): ?>
                        <?php if($customType['type']=='YesOrNo'): ?>
                            <option value="<?php echo e($customType['value']); ?>"><?php echo e($customType['value']); ?></option>
                        <?php endif; ?>
                    <?php endforeach; ?>
                </select>
            </div>
        </div>
        <div class="row form-group">
            <label class="col-md-4 control-label">* Compliance:</label>

            <div class="col-md-8">
                <select id="addComplianceSelectBox" name="compliance">
                    <option></option>
                    <?php foreach($customTypes as $customType): ?>
                        <?php if($customType['type']=='YesOrNo'): ?>
                            <option value="<?php echo e($customType['value']); ?>"><?php echo e($customType['value']); ?></option>
                        <?php endif; ?>
                    <?php endforeach; ?>
                </select>
            </div>
        </div>
        <div class="row form-group">
            <label class="col-md-4 control-label">* Out of hours call out?:</label>

            <div class="col-md-8">
                <select id="addPayTypeSelectBox" name="payType">
                    <option></option>
                    <option value="callout">YES</option>
                    <option value="standard">NO</option>
                </select>
            </div>
        </div>
        <div class="row form-group">
            <label class="col-md-4 control-label">Cause:</label>

            <div class="col-md-8">
                <select id="addCauseSelectBox" name="cause">
                    <option></option>
                    <?php foreach($customTypes as $customType): ?>
                        <?php if($customType['type']=='Cause Reason'): ?>
                            <option value="<?php echo e($customType['value']); ?>"><?php echo e($customType['value']); ?></option>
                        <?php endif; ?>
                    <?php endforeach; ?>
                </select>
            </div>
        </div>
        <div class="row form-group">
            <label class="col-md-4 control-label">Spend limit (&pound;):</label>

            <div class="col-md-8">
                <input id="addSpendLimit" type="text" name="spendLimit" class="form-control"/>
            </div>
        </div>
        <div class="row form-group">
            <label class="col-md-4 control-label">Operative Required:</label>

            <div class="col-md-8">
                <input id="addOperativeRequest" type="text" name="operativeRequest"
                       class="form-control"/>
            </div>
        </div>
        <div class="row form-group">
            <label class="col-md-4 control-label">Quote Ref:</label>

            <div class="col-md-8">
                <input id="addQuoteReference" type="text" name="quoteReference"
                       class="form-control"/>
            </div>
        </div>
        <div class="row form-group">
            <label class="col-md-4 control-label">Quote order no:</label>

            <div class="col-md-8">
                <input id="addQuoteOrderNo" type="text" name="quoteOrderNo" class="form-control"/>
            </div>
        </div>
        <div class="row form-group">
            <label class="col-md-4 control-label">Quote value:</label>

            <div class="col-md-8">
                <input id="addQuoteValue" type="text" name="quoteValue" class="form-control"/>
            </div>
        </div>
        <div class="row form-group">
            <label class="col-md-4 control-label">Date logged:</label>

            <div class="col-md-8">
                <input id="addCreatedDate" type="text" name="createdDate" class="form-control"/>
            </div>
        </div>
        <div class="row form-group">
            <label class="col-md-4 control-label">Status:</label>

            <div class="col-md-8">
                <select id="addStatusSelectBox" name="status">
                    <option></option>
                    <?php foreach($customTypes as $customType): ?>
                        <?php if($customType['type']=='Job Status'): ?>
                            <option value="<?php echo e($customType['value']); ?>"><?php echo e($customType['value']); ?></option>
                        <?php endif; ?>
                    <?php endforeach; ?>
                </select>
            </div>
        </div>
    </div>

    <div class="row col-md-12">
        <div class="row form-group">
            <h6><b>Fault report:</b></h6>

            <div>
                                    <textarea id="addFaultReport" class="form-control" name="faultReport"
                                              id="faultReport"
                                              rows="3"></textarea>
            </div>
        </div>

        <input type="hidden" id="addToken" name="_token" value="<?php echo e(csrf_token()); ?>"/>

        <div class="panel-footer text-right">
            <a id="addJobPage" class="btn btn-success">Log</a>
        </div>
    </div>
</form>
<!-- / .panel -->
<script type="text/javascript">
    $('#addResponseDate').datepicker({
        format: 'dd/mm/yyyy'
    });
    $('#addCreatedDate').datetimepicker({
        format: 'DD/MM/YYYY HH:mm:ss'
    });
    $("#addClientSelectBox").selectize();
    $("#addBuildingSelectBox").selectize();
    $("#addDisciplineSelectBox").selectize();
    $("#addJobTypeSelectBox").selectize();
    $("#addJobServiceProvider").selectize();

    $('#addJobTypeSelectBox').change(function () {
        $.post('<?php echo e(URL::action("JobController@getClientDisciplinePrice")); ?>', {
            clientId: $('#addClientSelectBox').val(),
            discipline: $('#addDisciplineSelectBox').val(),
            jobType: $('#addJobTypeSelectBox').val(),
            _token: '<?php echo e(csrf_token()); ?>'
        }).done(function (data) {
            $('#addSpendLimit').attr('value', data);
        });
    });
    var addResponseTimeSelectBox = $("#addResponseTimeSelectBox").selectize();
    $("#addRecallSelectBox").selectize();
    $("#addWarrantySelectBox").selectize();
    $("#addComplianceSelectBox").selectize();
    $("#addCauseSelectBox").selectize();
    $("#addAssignedToSelectBox").selectize();
    $("#addPreviousJobSelectBox").selectize();
    $("#addStatusSelectBox").selectize();
    $("#addPayTypeSelectBox").selectize();

    $('#addResponseDate').change(function () {
        addResponseTimeSelectBox[0].selectize.setValue('Dated');
    });

    $('#addClientSelectBox').change(function () {
        $.post('<?php echo e(URL::action("JobController@filterClientBuilding")); ?>', {
            client_id: $(this).val(),
            _token: '<?php echo e(csrf_token()); ?>'
        }).done(function (data) {
            $('#addBuildingSelectBoxContent').html(data);
        });
    });

    $('#addClientReference').change(function () {
        $.post('<?php echo e(URL::action("JobController@isClientReferenceExisted")); ?>', {
            clientReference: $('#addClientReference').val(),
            _token: $('#addToken').val()
        }).done(function (data) {
            if (data == 'true') {
                $('#addClientReference').addClass('alert-danger');
                new PNotify({
                    title: 'Client Reference',
                    text: 'Existed! Please re-enter a new one',
                    type: 'error',
                    icon: 'fa fa-times'
                });
            } else {
                $('#addClientReference').removeClass('alert-danger');
            }
        });
    });

    // Actions on Job Page
    $('a[id^="addJobPage"]').click(function () {
        if ($('#addJobTypeSelectBox').val()
                && $('#addClientSelectBox').val()
                && $('#addBuildingSelectBox').val()
                && $('#addRecallSelectBox').val()
                && $('#addWarrantySelectBox').val()
                && $('#addComplianceSelectBox').val()
                && $('#addResponseTimeSelectBox').val()
                && $('#addDisciplineSelectBox').val()
                && $('#addPayTypeSelectBox').val()
        ) {
            var ahref = $(this);
            ahref.text('adding...');
            ahref.bind('click', false);
            loadingOverlay();
            $.post('<?php echo e(URL::action("JobController@uiAdd")); ?>', {
                _token: $('#addToken').val(),
                reference: $('#addReference').val(),
                client_id: $('#addClientSelectBox').val(),
                service_provider_id: $('#addJobServiceProvider').val(),
                building_id: $('#addBuildingSelectBox').val(),
                capexNo: $('#addCapexNo').val(),
                clientReference: $('#addClientReference').val(),
                faultReport: $('#addFaultReport').val(),
                cause: $('#addCauseSelectBox').val(),
                assignedTo: $('#addAssignedToSelectBox').val(),
                spendLimit: $('#addSpendLimit').val(),
                jobType: $('#addJobTypeSelectBox').val(),
                discipline: $('#addDisciplineSelectBox').val(),
                responseTime: $('#addResponseTimeSelectBox').val(),
                responseDate: changeDateFormatToISO($('#addResponseDate').val()),
                recall: $('#addRecallSelectBox').val(),
                warranty: $('#addWarrantySelectBox').val(),
                compliance: $('#addComplianceSelectBox').val(),
                operativeRequest: $('#addOperativeRequest').val(),
                quoteOrderNo: $('#addQuoteOrderNo').val(),
                quoteValue: $('#addQuoteValue').val(),
                parentJob: $('#addPreviousJobSelectBox').val(),
                createdDate: changeDateFormat($('#addCreatedDate').val()),
                payType: $('#addPayTypeSelectBox').val(),
                status: $('#addStatusSelectBox').val()
            }).done(function (data) {
                ahref.text('Add');
                ahref.unbind('click', false);

                if ( typeof refreshJobs == 'function' ) {
                    //function_name is a function
                    refreshJobs();
                }
                generateFormAddJob('<?php echo e(URL::action("JobController@generateFormAddJob")); ?>', '<?php echo e(csrf_token()); ?>');
                loadingRemove();
                new PNotify({
                    title: 'Success',
                    text: 'Add new job successfully!',
                    type: 'success',
                    icon: 'fa fa-check'
                });
            }).fail(function (data) {
                ahref.text('Add');
                ahref.unbind('click', false);
                loadingRemove();
                new PNotify({
                    title: 'Add failed! Please check the inputs!',
                    text: '',
                    type: 'error',
                    icon: 'fa fa-times'
                });
            });
        } else {
            new PNotify({
                title: 'Add failed!',
                text: 'Field with * must be completed!',
                type: 'error',
                icon: 'fa fa-times'
            });
        }
    });
</script>