@extends('layouts.layout-auth')

@section('content')
<!-- Page Top Search / START -->
<div class="container-fluid top-status-bar bottom-shadow">
  <!--<div class="scti-container-in"> <a href="#" class="status-note"><span class="tag-pill-cart2">10</span></a> <a href="#" class="status-cart"><span class="tag-pill-cart2">10</span></a> </div>-->
</div>

<!-- Page Top Search / END -->
<div class="scti-container-in top-bot-spacer-40"> 
  <!-- Course Banner / START -->
  <div class="dashborad-profile">
    <div class="dashborad-profile-image" ng-controller="userImageController" data-ng-init="loadProfileImage('business')">
      <img ng-if="!profileImage.length" ng-click="uploadProfileImageModal('business')" src="{{ asset('images/default-profile-logo.png') }}" alt="" class="img-responsive">
      <img ng-if="profileImage.length" ng-click="uploadProfileImageModal('business')" ng-src="{{ asset('uploads/users') }}/<% profileImage %>" alt="" class="img-responsive">
    </div>
    <div class="dashborad-profile-cont-wrp">
      <div class="dashborad-profile-cont">
        <h1>{{ Auth::user()->display_name }}</h1>
        <div class="location-info">
          @if (isset($businessUser->businessProfile->county_id))
            <div class="content-det course-loc">{{ Helpers::fetchCountyName($businessUser->businessProfile->county_id) }}</div>
          @endif
          <div class="content-det course-booked">{{ $employeeCount }} Employees</div>
        </div>
        <div class="points">
          <div class="points-table">
            {{ isset($businessUser->userPoints->points) ? $businessUser->userPoints->points : '0' }}Points
            <!--<a href="">
              <img src="{{ asset('images/refresh-icon.png') }}" alt="" class="pull-right">
            </a>-->
          </div>
        </div>
      </div>
      <!--<div class="last-course">Last done course: Supervision Skills, Dublin on 22-07-2016</div>-->
    </div>
  </div>
  
  <!-- Course Banner / END -->
  <div class="clearfix"></div>
  <!-- Course Details / START -->
    <div id="dashboard-det" class="">
      <ul id="tabs" class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active"><a href="#cd1" role="tab" data-toggle="tab">Dashboard</a></li>
        <li role="presentation"><a href="#cd2" role="tab" data-toggle="tab">Employees</a></li>
        <li role="presentation"><a href="#cd3" role="tab" data-toggle="tab">Invoice</a></li>
        <li role="presentation"><a href="#cd4" role="tab" data-toggle="tab">Upcoming Course</a></li>
        <li role="presentation"><a href="#cd5" role="tab" data-toggle="tab">Settings</a></li>
      </ul>
      <div class="tab-content">
        <div role="tabpanel" class="tab-pane fade in active top-spacer" id="cd1" ng-controller="courseListingCtrl" data-ng-init="loadWishlist()">
          <!--<img src="{{ asset('images/chart.jpg') }}" alt="">-->
          <!--<div id="chart-container" style="position:relative;min-width: 400px; height: 400px; margin: 0 auto"></div>-->
          <div class="clearfix"></div>
          <div class="container bot-spacer-50 top-spacer">
            @widget('wishlistBlock')
          </div>
          <div class="clearfix"></div>
          @widget('recommendedCourses')
        </div>
        <div role="tabpanel" class="tab-pane fade course-det-cont" id="cd2" ng-controller="usersCtrl" data-ng-init="loadStaffs('{{ Auth::user()->id }}');">
          @include('frontend.business.partials._employees')
          <div class="clearfix"></div>
        </div>
        <div role="tabpanel" class="tab-pane fade course-det-cont" id="cd3">
          @include('frontend.business.partials._business_invoice')
          <div class="clearfix"></div>
        </div>
        <div role="tabpanel" class="tab-pane fade course-det-cont" id="cd4">
          @include('frontend.business.partials._bookedcourse')
          <div class="clearfix"></div>
        </div>
        <div role="tabpanel" class="tab-pane fade course-det-cont" id="cd5" ng-controller="businessSettingsCtrl" data-ng-init="loadBusinessData('{{ Auth::user()->id }}')"> 
          <!-- tabs left -->
          <div id="settings-tab" class="tabbable tabs-left">
            <ul class="nav nav-tabs">
              <li class="active"><a href="#general" data-toggle="tab">General</a></li>
              <li><a href="#security" data-toggle="tab">Security</a></li>
              <li><a href="#privacy" data-toggle="tab">Privacy</a></li>
              <li><a href="#notification" data-toggle="tab">Notification</a></li>
              <li><a href="#interest" data-toggle="tab">My Interest</a></li>
              <!--<li><a href="#department" data-toggle="tab">Department</a></li>-->
              <!--<li><a href="#admin" data-toggle="tab">Add Admin</a></li>-->
            </ul>
            <div class="tab-content">
              <div class="tab-pane active" id="general">
                <form method="post" name="frmBusinessSettings" id="frmBusinessSettings" ng-submit="saveBusinessSettings(settingsFields)">
                {!! csrf_field() !!}
                <div class="general-cont">
                  <input class="input-settings form-control uname" name="display_name" id="display_name" ng-model="settingsFields.display_name" placeholder="Name" type="text" required>
                  <div class="help-block has-error" ng-messages="frmBusinessSettings.display_name.$error" ng-if="frmBusinessSettings.display_name.$touched">
                    @include('frontend.partials.errormessages')
                  </div>
                  <label class="settingslb">SCTI ID : <% userFields.scti_id %></label>
                  <input class="input-settings form-control emailid" name="business_email" ng-model="settingsFields.business_email" placeholder="Email" type="email" value="" required>
                  <div class="help-block has-error" ng-messages="frmBusinessSettings.business_email.$error" ng-if="frmBusinessSettings.business_email.$touched">
                    @include('frontend.partials.errormessages')
                  </div>
                  <input class="input-settings form-control mobileno" name="phone" ng-model="settingsFields.phone" placeholder="Phone" type="text" value="" required>
                  <div class="help-block has-error" ng-messages="frmBusinessSettings.phone.$error" ng-if="frmBusinessSettings.phone.$touched">
                    @include('frontend.partials.errormessages')
                  </div>
                  <!--<input class="input-settings form-control dtcalender" name="created_at" id="created_at" ng-model="settingsFields.created_at" placeholder="Date" type="text" value="">-->
                  <textarea class="txtinput" name="address1" cols="" rows="" ng-model="settingsFields.address1"></textarea>
                  <ol class="nya-bs-select input-settings form-control" name="county_id" id="county_id" ng-model="settingsFields.county_id" title="County" data-live-search="true" data-size="10">
                    <li nya-bs-option="(id, value) in counties group by value.county_en" value="value.id">
                      <a>
                        <% value.county_en %>
                        <span class="glyphicon glyphicon-ok check-mark"></span>
                      </a>
                    </li>
                  </ol>
                  <label class="settingslb2"></label>
                </div>
                <div class="settings-control">
                  <button type="submit" class="btn savebtn">Save</button>
                  <button type="button" class="btn cancelbtn">Cancel</button>
                </div>
                </form>
              </div>
              <div class="tab-pane" id="security">
                <div class="security-cont">
                  <button type="button" class="btn grn-brd-btn" ng-init="showPswdResetForm=false" ng-click="showPswdResetForm = !showPswdResetForm">Change Password</button>
                  <div class="row" ng-show="showPswdResetForm">
                    <span class="help-block red" ng-if="resetFields.new_password != resetFields.confirm_password">Password not matching.</span>
                    <form name="frmPswdReset" id="frmPswdReset" ng-submit="savePassword(resetFields)">
                      <div class="form-group">
                        <input type="password" placeholder="Current Password" class="input-settings form-control" id="current_password" ng-blur="checkPassword(resetFields.current_password)" ng-model="resetFields.current_password" required>
                        <span class="help-block"><% passwordMisMatchMsg %></span>
                      </div>
                      <div class="form-group">
                        <input type="password" placeholder="New Password" class="input-settings form-control" id="new_password" ng-model="resetFields.new_password" required>
                      </div>
                      <div class="form-group">
                        <input type="password" placeholder="Confirm Password" class="input-settings form-control" id="confirm_password" ng-model="resetFields.confirm_password" required>
                      </div>
                      <div class="form-group">
                        <button type="submit" ng-disabled="resetFormValid || resetFields.new_password != resetFields.confirm_password" class="btn btn-primary">Save</button>
                      </div>
                    </form>
                  </div>
                  <h2>Login Alert</h2>
                  <form name="frmLoginAlerts" id="frmLoginAlerts" method="post" ng-submit="saveLoginAlert(login_alert)">
                  <div class="radio radio-success">
                    <input type="radio" name="login_alert" id="login_alert" ng-model="login_alert" value="1" ng-checked="settingsFields.login_alert==1">
                    <label for="radio1"> Email login alerts to <% settingsFields.business_email %> </label>
                  </div>
                  <div class="radio radio-success">
                    <input type="radio" name="login_alert" id="login_alert" ng-model="login_alert" value="0" ng-checked="settingsFields.login_alert==0">
                    <label for="radio2"> Don't get email alerts </label>
                  </div>
                  <!--<button type="button" class="btn grn-brd-btn top-margin-25">3D Password</button>-->
                  <!--<p class="color-red"><a href=""><span><img src="{{ asset('images/delete-red-icon.png') }}" alt=""></span>Delete my account</a><span class="left-margin-10"><a href="" data-toggle="tooltip" data-placement="top" title="Information"><img src="{{ asset('images/question-icon.png') }}" alt=""></a></span></p>-->
                </div>
                <div class="settings-control">
                  <button type="submit" class="btn savebtn">Save</button>
                  <button type="button" class="btn cancelbtn">Cancel</button>
                </div>
                 </form>
              </div>
              <div class="tab-pane" id="privacy" ng-controller="userPrivacyCtrl" data-ng-init="init()">
                @include('frontend.partials._settings_privacy')
              </div>
              <div class="tab-pane" id="notification" ng-controller="userNotificationCtrl" data-ng-init="init()">
                @include('frontend.partials._settings_notification')
              </div>
              <div class="tab-pane" id="interest" ng-controller="myInterestCtrl" data-ng-init="init()">
                @include('frontend.partials._settings_myinterests')
              </div>
              <div class="tab-pane" id="department">Secondo sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan. 
                Aliquam in felis sit amet augue.</div>
              <div class="tab-pane" id="admin">Duis elementum auctor accumsan. Aliquam in felis sit amet augue. Secondo sed ac orci quis tortor imperdiet venenatis.</div>
            </div>
          </div>
          <!-- /tabs -->
          <div class="clearfix"></div>
        </div>
      </div>
    </div>

  </div>
  <!-- Course Details / END -->
  <div class="clearfix"></div>


  <!-- Modals -->
  <div id="regPopup" class="modal fade" role="dialog" aria-hidden="true">
    <div class="modal-dialog fadeInUpQuick animated"> 
    
    <!-- Modal content-->
    <div class="modal-content">
      <button type="button" class="close" data-dismiss="modal"></button>
      <div class="modal-body">
        <ul id="tabs" class="nav nav-tabs" role="tablist">
          <li role="presentation" class="active"><a href="#reg1" role="tab" data-toggle="tab">Register as Individual</a></li>
          <li role="presentation"><a href="#reg2" role="tab" data-toggle="tab">Register for Business</a></li>
        </ul>
        <div class="tab-content">
          <div role="tabpanel" class="tab-pane fade in active popup-reg-cont" id="reg1">
            <div class="input-placeholder">
              <input class="col-lg-3 col-md-3 col-sm-5 col-xs-5 form-control" type="text" name="sctiid" id="sctiid" placeholder="Name"/>
              <span class="name form-control-feedback"></span> </div>
            <div class="input-placeholder">
              <input class="col-lg-3 col-md-3 col-sm-5 col-xs-5 form-control" type="text" name="sctiid" id="sctiid" placeholder="Email"/>
              <span class="envelop form-control-feedback"></span> </div>
            <div class="input-placeholder">
              <input class="col-lg-3 col-md-3 col-sm-5 col-xs-5 form-control" type="password" name="sctipw" id="sctipw" placeholder="Password"/>
              <span class="lock form-control-feedback"></span> </div>
            <div class="input-placeholder">
              <input class="col-lg-3 col-md-3 col-sm-5 col-xs-5 form-control" type="password" name="sctipw" id="sctipw" placeholder="Mobile Number"/>
              <span class="mobile form-control-feedback"></span> </div>
            <div class="checkbox checkbox-success">
              <input id="checkbox3" class="styled" type="checkbox">
              <label for="checkbox3"> I'd like to receive coupons, promotions, surveys, and updates via email about Social Care Traning Ireland. </label>
            </div>
            <p>By signing up, I agree to Social Care Traning Ireland <a href="">Terms of Service, Payments Terms of Service, Privacy Policy.</a></p>
            <button type="button" class="btn popup-login-btn">Signup</button>
            <a href="#logPopup" data-toggle="modal" data-dismiss="modal" class="have-account">Already a member | login</a>
            <div class="clearfix"></div>
          </div>
          <div role="tabpanel" class="tab-pane fade popup-reg-cont" id="reg2">
            <div class="input-placeholder">
              <input class="col-lg-3 col-md-3 col-sm-5 col-xs-5 form-control" type="text" name="sctiid" id="sctiid" placeholder="Company Name"/>
              <span class="name form-control-feedback"></span> </div>
            <div class="input-placeholder">
              <input class="col-lg-3 col-md-3 col-sm-5 col-xs-5 form-control" type="text" name="sctiid" id="sctiid" placeholder="Email"/>
              <span class="envelop form-control-feedback"></span> </div>
            <div class="input-placeholder">
              <input class="col-lg-3 col-md-3 col-sm-5 col-xs-5 form-control" type="password" name="sctipw" id="sctipw" placeholder="Password"/>
              <span class="lock form-control-feedback"></span> </div>
            <div class="input-placeholder">
              <input class="col-lg-3 col-md-3 col-sm-5 col-xs-5 form-control" type="password" name="sctipw" id="sctipw" placeholder="Business Registration No"/>
              <span class="regNo form-control-feedback"></span> </div>
            <div class="checkbox checkbox-success">
              <input id="checkbox3" class="styled" type="checkbox">
              <label for="checkbox3"> I'd like to receive coupons, promotions, surveys, and updates via email about Social Care Traning Ireland. </label>
            </div>
            <p>By signing up, I agree to Social Care Traning Ireland <a href="">Terms of Service, Payments Terms of Service, Privacy Policy.</a></p>
            <button type="button" class="btn popup-login-btn">Signup</button>
            <a href="#logPopup" data-toggle="modal" data-dismiss="modal" class="have-account">Already a member | login</a>
            <div class="clearfix"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div id="logPopup" class="modal fade" role="dialog" aria-hidden="true">
  <div class="modal-dialog fadeInUpQuick animated"> 
    
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <h2>Login</h2>
        <button type="button" class="close" data-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <div class="input-placeholder">
          <input class="col-lg-3 col-md-3 col-sm-5 col-xs-5 form-control" type="text" name="sctiid" id="sctiid" placeholder="Email"/>
          <span class="envelop form-control-feedback"></span> </div>
        <div class="input-placeholder">
          <input class="col-lg-3 col-md-3 col-sm-5 col-xs-5 form-control" type="password" name="sctipw" id="sctipw" placeholder="Password"/>
          <span class="lock form-control-feedback"></span> </div>
        <p><a href="">Forgot Password?</a></p>
        <button type="button" class="btn popup-login-btn">Login</button>
        <a href="#regPopup" data-toggle="modal" data-dismiss="modal" class="have-account">Register</a>
        <div class="clearfix"></div>
      </div>
    </div>
  </div>
</div>
<div id="addempPopup" class="modal fade" role="dialog" aria-hidden="true">
  <div class="modal-dialog fadeInUpQuick animated" style="width:600px!important;">
    
    <!-- Create / Add Employee Modal -->
    @include('frontend.business.partials._add_employee_modal')
  </div>
</div>




<!-- Modals End -->
@endsection

@push('scripts')
<script type="text/javascript">
    $(function(){
      $('#empdet').slimScroll({
          height: 'auto'
      });
    });

$(function () {
    $(document).ready(function () {
        var chart = null;

        var colors = Highcharts.getOptions().colors,
            categories = ['Firefox', 'Chrome'],
            name = 'Browser brands',
            data = [{
                y: 21.63,
                color: colors[1],
                drilldown: {
                    name: 'Firefox versions',
                    categories: ['Firefox 2.0', 'Firefox 3.0', 'Firefox 3.5', 'Firefox 3.6', 'Firefox 4.0'],
                    data: [0.20, 0.83, 1.58, 13.12, 5.43],
                    color: colors[1]
                }
            }, {
                y: 11.94,
                color: colors[2],
                drilldown: {
                    name: 'Chrome versions',
                    categories: ['Chrome 5.0', 'Chrome 6.0', 'Chrome 7.0', 'Chrome 8.0', 'Chrome 9.0',
                        'Chrome 10.0', 'Chrome 11.0', 'Chrome 12.0'],
                    data: [0.12, 0.19, 0.12, 0.36, 0.32, 9.91, 0.50, 0.22],
                    color: colors[2]
                }
            }];


        // Build the data array
        var browserData = [];
        for (var i = 0; i < data.length; i++) {

            // add browser data
            browserData.push({
                name: categories[i],
                y: data[i].y,
                color: data[i].color
            });

        }

        // Create the chart
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'chart-container',
                type: 'pie'
            },
            title: {
                text: null
            },
            series: [{
                name: 'Browsers',
                data: browserData,
                innerSize: '40%'
            }],
            tooltip: {
                valueSuffix: '%',
                positioner: function () {
                    return {
                        x: this.chart.series[0].center[0] - (this.label.width / 2) + 8,
                        y: this.chart.series[0].center[1] - (this.label.height / 2) + 8
                    };
                }
            },
            plotOptions: {
                pie: {
                    cursor: 'pointer',
                    dataLabels: {
                        connectorColor: 'white'
                    },
                    point: {
                        events: {
                            mouseOver: function () {

                                if (!this.connector.dynamicConnector) {
                                    var width = 16,
                                        height = 24;
                                    // Extract the connector start position
                                    var dArr = this.connector.d.split(' ');
                                    var startY = dArr.pop(),
                                        startX = dArr.pop();
                                    var start = [parseFloat(startX), parseFloat(startY)];
                                    // Construct the triangle
                                    var path = 'M ' + start[0] + ' ' + start[1] + 'L ' + (start[0] + height) + ' ' + (start[1] - (width / 2)) + ' L ' + (start[0] + height) + ' ' + (start[1] + (width / 2)) + ' L ' + start[0] + ' ' + start[1];

                                    // Convert the section angle from radian to degree and apply to the trangle
                                    // Setup rotation, x, y required by the updateTransform method
                                    this.connector.rotation = (this.angle * 180) / Math.PI;
                                    this.connector.x = startX;
                                    this.connector.y = startY;
                                    this.connector.updateTransform();

                                    this.connector.attr('stroke', this.color);
                                    this.connector.attr('fill', Highcharts.Color(this.color).brighten(0.2).get());
                                    this.connector.attr('d', path);

                                    this.connector.dynamicConnector = true;
                                }
                                this.connector.show();
                            },
                            mouseOut: function () {
                                this.connector.hide();
                            }
                        }
                    }
                }
            }
        });
    });
});

$('#created_at').datepicker({
  autoclose: true
});
</script>
@endpush