@extends('layouts.admin')
@section('page-css')
<link rel="stylesheet" href="{{ asset('css/bootstrap-multiselect.min.css') }}">
@endsection
@section('main-content')
<div class="breadcrumb">
    <h1>Employee</h1>
    <ul>
        <li><a href="{{route('dashboard')}}">Home</a></li>
        <li><a href="{{route('admin.dashboard')}}">Manage Dashboard</a></li>
        <li><a href="{{route('admin.user.index')}}">Employee</a></li>
        <li>Edit</li>
    </ul>
</div>
<div class="separator-breadcrumb border-top"></div>
<!-- end of row -->

<div class="row mb-4">
    <div class="col-md-8 mb-4">

        <div class="card text-left">

            <div class="card-body">
                <ul class="nav nav-tabs" id="myIconTab" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" id="home-icon-tab" data-toggle="tab" href="#user_profile" role="tab" aria-controls="user_profile" aria-selected="true">Profile</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="profile-icon-tab" data-toggle="tab" href="#user_update_password" role="tab" aria-controls="user_update_password" aria-selected="false">Update Password</a>
                    </li>
                    {{--<li class="nav-item">
                        <a class="nav-link" id="contact-icon-tab" data-toggle="tab" href="#user_update_permission" role="tab" aria-controls="user_update_permission" aria-selected="false">Permission</a>
                    </li>--}}
                </ul>

                <div class="tab-content" id="myIconTabContent">
                    <div class="tab-pane fade show active" id="user_profile" role="tabpanel" aria-labelledby="home-icon-tab">
                        <form method="POST" action="{{ route('admin.user.store') }}" class="ajaxSubmit_profile" novalidate>
                            @csrf
                            <input type="hidden" name='id' value="{{$user->id}}">
                            <input type="hidden" name='action' value='modified'>
                            <div class="form-group row">
                                <label for="name" class="col-sm-2 col-form-label">Name</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" name="name" id="name" placeholder="Name" value="{{old('name',$user->name)}}" required>
                                    <div class="invalid-feedback">
                                        The name field is required.
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="email" class="col-sm-2 col-form-label">Email</label>
                                <div class="col-sm-10">
                                    <input type="email" class="form-control" name="email" id="email" placeholder="Email" value="{{old('email',$user->email)}}" required>
                                    <div class="invalid-feedback">
                                        The email field is required.
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-sm-2">Permission Template</div>
                                <div class="col-sm-10">
                                    <select type="text" name="role_id" class="form-control" required>
                                        <option value="" >--Select Permission Template--</option>
                                        @if($roles)
                                        @foreach($roles as $roleId=>$role)
                                        <option value="{{$roleId}}" {{ ($roleId == $user->role_id) ? 'selected' : '' }} >{{$role}}</option>
                                        @endforeach
                                        @endif
                                    </select>
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-sm-2 col-form-label">Team</div>
                                <div class="col-sm-10">
                                    <select type="text" name="team_ids[]" class="form-control mutiselect" required multiple="multiple">
                                        @if(isset($teams))
                                        @foreach($teams as $teamID=>$team)
                                        <option value="{{$teamID}}" {{ (count($selectTeam) > 0 && in_array($teamID,$selectTeam)) ? 'selected' : '' }} >{{$team}}</option>
                                        @endforeach
                                        @endif
                                    </select>
                                    <div class="invalid-feedback">
                                        The team field is required.
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-10 offset-2">
                                <label for="" class="col-form-label">Enable</label>
                                <div class="ul-form__radio-inline">
                                    <label class=" ul-radio__position radio radio-primary form-check-inline">
                                        <input type="radio" name="enable" value="y" {{ $user->enable == 'y' ? 'checked' : '' }}>
                                        <span class="ul-form__radio-font">Yes</span>
                                        <span class="checkmark"></span>
                                    </label>
                                    <label class="ul-radio__position radio radio-primary">
                                        <input type="radio" name="enable" value="n" {{ $user->enable == 'n' ? 'checked' : '' }}>
                                        <span class="ul-form__radio-font">No</span>
                                        <span class="checkmark"></span>
                                    </label>
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-sm-10 offset-sm-2">
                                    <button type="submit" class="btn btn-raised btn-primary m-1">Update</button>
                                    <a href="{{ route('admin.user.index') }}"><button type="button" class="btn btn-raised btn-secondary m-1">Cancel</button></a>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="tab-pane fade" id="user_update_password" role="tabpanel" aria-labelledby="profile-icon-tab">
                        <form method="POST" action="{{ route('admin.user.store') }}" class="ajaxSubmit_auth" novalidate>
                            @csrf
                            <input type="hidden" name='id' value="{{$user->id}}">
                            <input type="hidden" name='action' value='authPwd'>
                            <div class="form-group row">
                                <label for="name" class="col-sm-2 col-form-label">Password</label>
                                <div class="col-sm-10">
                                    <input type="password" class="form-control " id="password" name="password" placeholder="Name" disabled="disabled" required>
                                    <div class="invalid-feedback">
                                        The password field is required.
                                    </div>
                                    <a href="javascript:void(0);"><small class="onclickEnabled" data-refid="password">Click here to enter the new password</small></a>
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-sm-10 offset-sm-2">
                                    <button type="submit" class="btn btn-raised btn-primary m-1" id="submit_password_btn" disabled>Update</button>
                                    <a href="{{ route('admin.user.index') }}"><button type="button" class="btn btn-raised btn-secondary m-1">Cancel</button></a>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="tab-pane fade" id="user_update_permission" role="tabpanel" aria-labelledby="contact-icon-tab">
                        Permission Section will go here
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
<!-- end of row -->

@endsection

@section('bottom-js')
<script src="{{ asset('js/bootstrap-multiselect.min.js') }}"></script>
<script>
fromSubmit({formElement: ".ajaxSubmit_profile", has_modal: '', reloadTable: ''});
fromSubmit({formElement: ".ajaxSubmit_auth", has_modal: '', reloadTable: ''});
$(document).ready(function () {
    $('body').on('click', '.onclickEnabled', function () {
        $("#" + $(this).attr('data-refid')).removeAttr('disabled');
        $("#submit_password_btn").removeAttr('disabled');
    });

});
$(document).ready(function () {
    $('.mutiselect').multiselect({widthSynchronizationMode: 'always', buttonWidth: '100%'});
});
</script>
@endsection