@extends('layouts.master')

@section('headCss')
    <link href="{{asset('assets/stylesheets/jquery.minicolors.css')}}" rel="stylesheet"/>
@stop

@section('headJs')
    <script src="{{asset('assets/javascripts/bootstrap3-typeahead.js')}}"></script>
    <script src="{{asset('assets/javascripts/jquery.minicolors.js')}}"></script>
@stop

@section('navBar')
    @include('layouts.navBar')
@stop

@section('mainMenu')
    @include('layouts.mainMenu')
@stop

@section('content')

    @if(Auth::user()['firstLogin']=='Y')
    <div class="col-sm-12">
        <div class="alert alert-danger">
            <button type="button" class="close" data-dismiss="alert">×</button>
            <strong>Password Change Required! </strong> If you see this, it means you are logged in iws at the first time.
        </div>
    </div>
    @endif

    <div class="col-sm-12">

        <ul class="nav nav-pills">
            <li class="active"><a href="#userBasic" data-toggle="tab">Basic info</a></li>
            <li><a href="#userContact" data-toggle="tab">Contact detail</a></li>
            <li><a href="#userHoliday" data-toggle="tab">Holidays</a></li>
        </ul>


        <form id="formUpdateUser" class="panel form-horizontal">
            <div class="tab-content">
                <div class="tab-pane active" id="userBasic">
                    <div class="panel-body">
                        <div class="row form-group">
                            <label class="col-sm-4 control-label">
                                <img src="{{$user['photo']}}" alt="No user photo" style="width: 120px;"/>
                            </label>

                            <div class="col-xs-8">
                                <input type="file" name="userPhoto" id="updateUserPhoto">
                                <input type="hidden" name="userPhotoData" id="updateUserPhotoData">
                            </div>
                        </div>
                        <div class="row form-group">
                            <label class="col-sm-4 control-label">Name:</label>

                            <div class="col-xs-8">
                                <input id="updateUserName" type="text" name="name" class="form-control" placeholder=""
                                       value="{{$user['name']}}">
                            </div>
                        </div>
                        <div class="row form-group">
                            <label class="col-sm-4 control-label">Email:</label>

                            <div class="col-xs-8">
                                <input id="updateUserEmail" type="text" name="email" class="form-control" placeholder=""
                                       value="{{$user['email']}}" disabled>
                            </div>
                        </div>
                        <div class="row form-group">
                            <label class="col-sm-4 control-label">Password:</label>

                            <div class="col-xs-8">
                                <input id="updateUserPassword" type="password" name="password" class="form-control"
                                       placeholder="">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="tab-pane" id="userContact">
                    <div class="panel-body">
                        <div class="row form-group">
                            <label class="col-sm-4 control-label">Address line 1:</label>

                            <div class="col-xs-8">
                                <input id="updateUserAddress1" type="text" name="address1" class="form-control"
                                       placeholder=""
                                       value="{{$user['address1']}}">
                            </div>
                        </div>
                        <div class="row form-group">
                            <label class="col-sm-4 control-label">Address line 2:</label>

                            <div class="col-xs-8">
                                <input id="updateUserAddress2" type="text" name="address2" class="form-control"
                                       placeholder=""
                                       value="{{$user['address2']}}">
                            </div>
                        </div>
                        <div class="row form-group">
                            <label class="col-sm-4 control-label">Town:</label>

                            <div class="col-xs-8">
                                <input id="updateUserTown" type="text" name="town" class="form-control" placeholder=""
                                       value="{{$user['town']}}">
                            </div>
                        </div>
                        <div class="row form-group">
                            <label class="col-sm-4 control-label">Postcode:</label>

                            <div class="col-xs-8">
                                <input id="updateUserPostcode" type="text" name="postcode" class="form-control"
                                       placeholder=""
                                       value="{{$user['postcode']}}">
                            </div>
                        </div>
                        <div class="row form-group">
                            <label class="col-sm-4 control-label">Phone:</label>

                            <div class="col-xs-8">
                                <input id="updateUserPhone" type="text" name="phone" class="form-control" placeholder=""
                                       value="{{$user['phone']}}">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="tab-pane" id="userHoliday">
                    <div class="panel-body">
                        <div class="form-group col-xs-12">
                            <label class="col-sm-4 control-label">Start Date:</label>

                            <div class="col-xs-8">
                                <input id="addUserHolidayStartTime" type="text" class="form-control" placeholder=""
                                       value="">
                            </div>
                        </div>
                        <div class="form-group col-xs-12">
                            <label class="col-sm-4 control-label">End Date:</label>

                            <div class="col-xs-8">
                                <input id="addUserHolidayEndTime" type="text" class="form-control" placeholder=""
                                       value="">
                            </div>
                        </div>
                        <div class="form-group col-xs-12">
                            <label class="col-sm-4 control-label">Day count:</label>

                            <div class="col-xs-8">
                                <input id="addUserHolidayDayCount" type="text" class="form-control" placeholder=""
                                       value="">
                            </div>
                        </div>
                        <div class="form-group col-xs-12">
                            <label class="col-sm-4 control-label">Return Date:</label>

                            <div class="col-xs-8">
                                <input id="addUserHolidayReturnTime" type="text" class="form-control" placeholder=""
                                       value="">
                            </div>
                        </div>
                        <div class="form-group col-xs-12">
                            <label class="col-sm-4 control-label">Type:</label>

                            <div class="col-xs-8">
                                <select id="addUserHolidayType" class="form-control">
                                    <option></option>
                                    @foreach($holidayTypeOptions as $holidayType)
                                        <option value="{{$holidayType['value']}}">{{$holidayType['value']}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="form-group col-xs-12">
                            <label class="col-sm-4 control-label">Note:</label>

                            <div class="col-xs-8">
                                <textarea id="addUserHolidayNote" class="form-control"></textarea>
                            </div>
                        </div>
                        <div class="form-group col-xs-12">
                            <a class="btn btn-primary col-xs-12" id="btnAddUserHoliday">ADD</a>
                        </div>
                    </div>
                    <div id="userHolidayPanel"></div>
                </div>
            </div>

            <input id="updateUserId" type="hidden" name="id" value="{{ $user['id'] }}"/>
            <input type="hidden" name="_token" value="{{ csrf_token() }}"/>

            <div class="panel-footer text-right">
                <a id="updateUserPage" class="btn btn-success">Update</a>
            </div>

        </form>
    </div>
@stop

@section('footerJs')
    <script type="text/javascript">
        if ($('#addUserHolidayUser').length > 0) {
            $('#addUserHolidayUser').selectize();
        }
        if ($('#addUserHolidayStartTime').length > 0) {
            $('#addUserHolidayStartTime').datepicker({
                format: 'dd/mm/yyyy'
            });
        }
        if ($('#addUserHolidayEndTime').length > 0) {
            $('#addUserHolidayEndTime').datepicker({
                format: 'dd/mm/yyyy'
            });
        }
        if ($('#addUserHolidayReturnTime').length > 0) {
            $('#addUserHolidayReturnTime').datepicker({
                format: 'dd/mm/yyyy'
            });
        }

        if ($('input[id^="updateUserHolidayStartTime"]').length > 0) {
            $('input[id^="updateUserHolidayStartTime"]').datepicker({
                format: 'dd/mm/yyyy'
            });
        }
        if ($('input[id^="updateUserHolidayEndTime"]').length > 0) {
            $('input[id^="updateUserHolidayEndTime"]').datepicker({
                format: 'dd/mm/yyyy'
            });
        }

        if ($('#updateRoleSelectBox').length > 0) {
            $("#updateRoleSelectBox").selectize();
        }

        if ($('#updateUserPhoto').length > 0) {
            $('#updateUserPhoto').picEdit({
                imageUpdated: function (img) {
                    $('#updateUserPhotoData').val(img.src);
                },
                formSubmitted: function () {
                },
                redirectUrl: false
            });
        }

        // Actions on User Page
        if ($('a[id^="updateUserPage"]').length > 0) {
            $('a[id^="updateUserPage"]').click(function () {
                var ahref = $(this);
                ahref.text('loading');
                loadingOverlay();
                $.post('{{URL::action("UserController@uiUpdate")}}', {
                    id: $('#updateUserId').val(),
                    name: $('#updateUserName').val(),
                    password: $('#updateUserPassword').val(),
                    address1: $('#updateUserAddress1').val(),
                    address2: $('#updateUserAddress2').val(),
                    town: $('#updateUserTown').val(),
                    postcode: $('#updateUserPostcode').val(),
                    phone: $('#updateUserPhone').val(),
                    userPhotoData: $('#updateUserPhotoData').val(),
                    _token: '{{csrf_token()}}'
                }).done(function (data) {
                    ahref.text('Update');
                    loadingRemove();
                    new PNotify({
                        title: 'Success',
                        text: 'User updated successfully!',
                        type: 'success',
                        icon: 'fa fa-check'
                    });
                    generateUserList('{{URL::action("UserController@generateUserList")}}', '{{csrf_token()}}');
                }).fail(function (data) {
                    ahref.text('Update');
                    loadingRemove();
                    new PNotify({
                        title: 'Fail',
                        text: 'User updating failed!',
                        type: 'error',
                        icon: 'fa fa-times'
                    });
                });
            });
        }

        if ($('#btnAddUserHoliday').length > 0) {
            $('#btnAddUserHoliday').click(function () {
                var ahref = $(this);
                ahref.text('loading');
                loadingOverlay();
                $.post('{{URL::action("UserController@addUserHoliday")}}', {
                    userId: '{{$user['id']}}',
                    startTime: changeDateFormatToISO($('#addUserHolidayStartTime').val()),
                    endTime: changeDateFormatToISO($('#addUserHolidayEndTime').val()),
                    returnTime: changeDateFormatToISO($('#addUserHolidayReturnTime').val()),
                    dayCount: $('#addUserHolidayDayCount').val(),
                    type: $('#addUserHolidayType').val(),
                    note: $('#addUserHolidayNote').val(),
                    _token: '{{csrf_token()}}'
                }).done(function (data) {
                    ahref.text('ADD');
                    loadingRemove();
                    new PNotify({
                        title: 'Success',
                        text: 'User holiday added successfully!',
                        type: 'success',
                        icon: 'fa fa-check'
                    });
                    generateUserHoliday('{{URL::action("UserController@generateUserHolidayTable")}}', '{{$user['id']}}', '{{csrf_token()}}');
                }).fail(function (data) {
                    ahref.text('ADD');
                    loadingRemove();
                    new PNotify({
                        title: 'Success',
                        text: 'User holiday adding failed!',
                        type: 'error',
                        icon: 'fa fa-times'
                    });
                });
            });
        }

        generateUserHoliday('{{URL::action("UserController@generateUserHolidayTable")}}', '{{$user['id']}}', '{{csrf_token()}}');
    </script>
@stop