@extends('template.master')

@section('page_styles')
{{--CUSTOM STYLES HERE--}}
    <link rel="stylesheet" href="{{ asset('css/layout/account.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/css/datatable/jquery.dataTables.min.css') }}">
@stop

@section('content')
    @include('company.edit_page')

<div class="container-fluid account-page">
    <!-- Begin Page Header-->
    <div class="row">
        <div class="page-header">
            <div class="d-flex align-items-center">
                <h2 class="page-header-title">My Company</h2>

            </div>
        </div>
    </div>
    <!-- End Page Header -->

    <!--Tabs started-->

    <ul class="nav nav-tabs nav-left flex-column nav-tabs_new" role="tablist" aria-orientation="vertical">
        <li class="nav-item">
            <a class="nav-link active" id="vert-tab-1" data-toggle="tab" href="#v-tab-1" role="tab" aria-controls="v-tab-1" aria-selected="true">
                <div class="b-icon">
                    <i class="la la-institution"></i>
                </div>
                <span class="txt">
                    <span class="txt-md">Company Details</span>
                    <span class="txt-sm">Details</span>
                </span>
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="vert-tab-2" data-toggle="tab" href="#v-tab-2" role="tab" aria-controls="v-tab-2" aria-selected="false">
                <div class="b-icon">
                    <i class="la la-users"></i>
                </div>
                <span class="txt">
                    <span class="txt-md">Users</span>
                    <span class="txt-sm">Users</span>
                </span>
            </a>
        </li>
    </ul>
    <div class="tab-content d-flex align-items-center">
        <div class="tab-pane fade show active" id="v-tab-1" role="tabpanel" aria-labelledby="vert-tab-1">
            <div class="card new-card">
                <div class="card-title">
                    <h1>Company Details</h1>
                </div>
                <div class="card-content">
                    <div class="card-group">
                        @if ($errors->any())
                        <div class="alert alert-danger tab-company tab-company-1" style="width: 100%;">
                            <ul>
                                @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                        @elseif ($error)
                        <div class="alert alert-danger tab-company tab-company-1" style="width: 100%;">
                            <ul>
                                <li>{{ $error }}</li>
                            </ul>
                        </div>
                        @elseif ($success)
                        <div class="alert alert-success tab-company tab-company-1" style="width: 100%;">
                            <ul>
                                <li>{{ $success }}</li>
                            </ul>
                        </div>
                        @endif

                        <div class="card-group-title">
                            <h3>Company Information</h3>
                        </div>
                        <div class="card-group-content">
                            <form class="shake" role="form" method="post" id="companyForm" name="company-form" data-toggle="validator" action="{{ route('company.store') }}" enctype="multipart/form-data" style="width: 100%">
                                @csrf
                                <input type="hidden" name="page" value="company_page">
                                <input type="hidden" name="id" id="id" value="{{ $user->company->id }}">
                                <div class="form-group row d-flex align-items-center mb-md-5 mb-sm-3">
                                    <label class="col-lg-3 form-control-label">Company Name<span class="text-danger ml-2">*</span></label>
                                    <div class="col-lg-9">
                                        <input type="text" name="company_name" value="{{ $user->company->name }}" class="form-control"  placeholder="Your company">
                                    </div>
                                </div>
                                <div class="form-group row d-flex align-items-center mb-md-5 mb-sm-3">
                                    <label class="col-lg-3 form-control-label">Website<span class="text-danger ml-2">*</span></label>
                                    <div class="col-lg-9">
                                        <input type="text" name="website" value="{{ $user->company->website }}" class="form-control" placeholder="Company's Website" required="required">
                                        <small>
                                            Enter Website without http:// or https://
                                        </small>
                                    </div>
                                </div>
                                <div class="form-group row d-flex align-items-center mb-md-5 mb-sm-3">
                                    <label class="col-lg-3 form-control-label">Company Email<span class="text-danger ml-2">*</span></label>
                                    <div class="col-lg-9">
                                        <input type="text" name="company_email" value="{{ $user->company->email }}" class="form-control" placeholder="Company's Email" required="required">
                                    </div>
                                </div>

                                <div class="form-group row d-flex align-items-center mb-md-5 mb-sm-3">
                                    <label class="col-lg-3 form-control-label">Company Logo</label>
                                    <div class="col-lg-9">
                                        @if(isset($user->company->logo))<img id="profilePicture" src="{{ asset('uploads/logo/'.$user->company->logo) }}" style="width: 25%;" alt="your image" />@endif
                                        <div class="file-select" select-name="companyLogo">
                                            <div class="select">
                                                <input type="file" class="form-control" name="logo" onchange="readURL(this,'companyLogo');">
                                            </div>
                                            <div class="image">
                                                <img id="companyLogo" src="{{ asset('uploads/logo/'.$user->company->logo) }}" alt="your image" />
                                                <div class="edit-icon">
                                                    <i class="la la-2x la-edit"></i>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>


                                <div class="form-group row d-flex align-items-start mb-md-5 mb-sm-3">
                                    <label class="col-lg-3 form-control-label">Company Address<span class="text-danger ml-2">*</span></label>
                                    <div class="col-lg-9">
                                        <textarea class="form-control" name="address" placeholder="Company's Address" required="required">{{ $user->company->address }}</textarea>
                                    </div>
                                </div>
                                <div class="form-group row d-flex align-items-center mb-md-5 mb-sm-3">
                                    <label class="col-lg-3 form-control-label">Company Phone<span class="text-danger ml-2">*</span></label>
                                    <div class="col-lg-9">
                                        <input type="number" name="company_phone" value="{{ $user->company->phone }}"class="form-control" placeholder="Company's Phone number" required="required">
                                    </div>
                                </div>
                                <div class="form-group row d-flex align-items-start">
                                    <label class="col-lg-3 form-control-label">Company Description</label>
                                    <div class="col-lg-9">
                                        <textarea class="form-control" name="description">{{ $user->company->description }} </textarea>
                                        <small>Describe your company</small>
                                    </div>
                                </div>
                                <div class="form-group row d-flex align-items-start mt-4 mb-md-5 mb-sm-3">
                                    <div class="col-lg-3"></div>
                                    <div class="col-lg-9 action-row">
                                        <button class="btn btn-square btn-outline-info">
                                            <span>Update Company Details</span>
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="tab-pane fade" id="v-tab-2" role="tabpanel" aria-labelledby="vert-tab-2">
            <div class="card new-card">
                <div class="card-title">
                    <h1>Users</h1>
                </div>
                <div class="card-content">
                    @if ($errors->any())
                    <div class="alert alert-danger tab-company tab-company-2" style="width: 100%;">
                        <ul>
                            @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                    @elseif ($error)
                    <div class="alert alert-danger tab-company tab-company-2" style="width: 100%;">
                        <ul>
                            <li>{{ $error }}</li>
                        </ul>
                    </div>
                    @elseif ($success)
                    <div class="alert alert-success tab-company tab-company-2" style="width: 100%;">
                        <ul>
                            <li>{{ $success }}</li>
                        </ul>
                    </div>
                    @endif
                    <div class="manage-user">
                        <a href="javascript: void(0)" class="btn btn-square btn-outline-success" data-toggle="modal" data-target="#edit-modal-page" onclick="javascript: addUser()"><i class="la la-user-plus"></i>&nbsp; Add User</a>

                        <br/><br/>
                        <div class="widget has-shadow">
                            <div class="widget-header bordered no-actions d-flex align-items-center">
                                <h4>User List</h4>
                            </div>
                            <div class="widget-body">
                                <table id="users-tbl" class="display" style="width:100%">
                                    <thead>
                                        <tr>
                                            <th style="width: 10%">Profile Picture</th>
                                            <th style="width: 30%">Name</th>
                                            <th style="width: 20%">Email</th>
                                            <th style="width: 10%">Role</th>
                                            {{-- <th>Nickname</th> --}}
                                            <th style="width: 10%">Phone</th>
                                            <th style="width: 10%">Skype</th>
                                            <th style="width: 10%">Actions</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @if(!empty($users))

                                            @foreach($users as $key => $value)
                                                <tr id="user-tbl-{{$value->id}}">
                                                    <td style="text-align: center;">
                                                        @if($value->avatar)
                                                        <img id="profilePicture" src="{{ asset('uploads/avatar/'.$value->avatar) }}" style="width: 50px; height: 50px; border-radius: 50px;" alt="your image" />
                                                        @else
                                                        <img src="{{ asset('img/defaultuser.png') }}" style="width: 50px; height: 50px; border-radius: 50px;" alt="..." class="avatar rounded-circle">
                                                        @endif
                                                    </td>
                                                    <td>{{ $value->name }}</td>
                                                    <td>{{ $value->email }}</td>
                                                    <td>
                                                        @if($value->role_id == 2 || $value->role_id == 1)
                                                            Manager
                                                        @elseif($value->role_id == 3)
                                                            Member
                                                        @endif
                                                    </td>
                                                    {{-- <td>{{ $value->nickname }}</td> --}}
                                                    <td>{{ $value->phone }}</td>
                                                    <td>{{ $value->skype }}</td>
                                                    <td>
                                                        <div class="btn-group" role="group" aria-label="Actions">
                                                            <a href="javascript: void(0)" class="btn mb-2 btn-primary" data-toggle="modal" data-target="#edit-modal-page" onclick="javascript: editUser({{$value->id}}, '{{$value->name}}', '{{$value->email}}', '{{$value->phone}}', '{{$value->role_id}}', '{{$value->skype}}')"><i class="la la-edit"></i>&nbsp; EDIT</a>
                                                            @if(auth()->user()->id != $value->id)
                                                            <button type="button" class="btn mb-2 btn-danger" onclick="javascript: deleteUser({{$value->id}})">
                                                                <i class="la la-trash"></i>&nbsp; DELETE</button>
                                                            @endif
                                                        </div>
                                                    </td>
                                                </tr>
                                            @endforeach

                                        @endif
                                    </tbody>
                                    <tfoot>
                                        <tr>
                                            <th style="width: 10%">Profile Picture</th>
                                            <th style="width: 30%">Name</th>
                                            <th style="width: 20%">Email</th>
                                            <th style="width: 10%">Role</th>
                                            {{-- <th>Nickname</th> --}}
                                            <th style="width: 10%">Phone</th>
                                            <th style="width: 10%">Skype</th>
                                            <th style="width: 10%">Actions</th>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!--Tabs End-->

<!-- End Row -->

</div>

@stop

@section('page_modals')

@stop
@section('page_scripts')
<script src="{{ asset('page_assets/accounts/js/page.js')}}"></script>
<script src="{{ asset('assets/js/datatable/jquery.dataTables.min.js') }}"></script>
<!--CUSTOM SCRIPTS-->

<script type="text/javascript">

    var table = $('#users-tbl').DataTable();
    

    $(document).ready(function() {

        var tab = getUrlVars()["tab"];

        if(tab !== undefined)
        {
            $('#vert-tab-1').removeClass('active');
            $('#v-tab-1').removeClass('active show');
            $('#vert-tab-'+tab).addClass('active');
            $('#v-tab-'+tab).addClass('active show');

            $('.tab-company').hide();
            $('.tab-company-'+tab).show();
        }

    });

    function getUrlVars() {
        var vars = {};
        var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
            vars[key] = value;
        });
        return vars;
    }

    function addUser()
    {
        $('.user_id').val(0);  
        $('.user_id').val('');
        $('#name').val('');
        $('#email').val('');
        $('#phone').val('');
        $('#nickname').val('');
        $('#skype').val(''); 
    }

    function editUser(id, name, email, phone, role_id, skype)
    {
        $('.user_id').val(id);
        $('#name').val(name);
        $('#email').val(email);
        $('#phone').val(phone);
        $('#role').val(role_id);
        $('#skype').val(skype);
    }

    function submit()
    {
        $('#userForm').submit();
    }


    function deleteUser(id)
    {
        if (confirm('Are you sure you want to delete this user?')) {
            var data = {
                "_token": "{{ csrf_token() }}"
            };

            $.ajax({
                type: 'DELETE',
                url: 'account/profile/' + id,
                data: data,
                dataType: 'json',
                success: function(resp) {
                    $('#user-tbl-'+id).remove();
                },
                error: function(xhr, status, error) {
                    
                }

            });
        }
    }

    function readCompanyURL(input, name) {
        $('.uploadLogo').hide();

        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function(e) {
                console.log(e.target.result);
                $('#' + name).attr('src', e.target.result);
                $('.file-select[select-name=' + name + ']').addClass('has-file');

            }

            reader.readAsDataURL(input.files[0]);
        }

        $('.edit-icon').click(function() {
            $(this).parents('.file-select').removeClass('has-file');
            $(this).parents('.file-select').find('input').val('');
            $('.uploadLogo').show();
        });
    }


    function readURL(input, name) {
        $('.uploadProfilePicture').hide();

        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function(e) {
                console.log(e.target.result);
                $('#' + name).attr('src', e.target.result);
                $('.file-select[select-name=' + name + ']').addClass('has-file');

            }

            reader.readAsDataURL(input.files[0]);
        }

        $('.edit-icon').click(function() {
            $(this).parents('.file-select').removeClass('has-file');
            $(this).parents('.file-select').find('input').val('');
            $('.uploadProfilePicture').show();
        });
    }

    function validateAccount(type) {
        var data = '';
        if (type == 'current_password') {
            data = {
                "_token": "{{ csrf_token() }}",
                "password": $('#current_password').val()
            };
        } else if (type == 'password' && ($('#password').val() != '' && $('#password_confirmation').val() != '')) {
            data = {
                "_token": "{{ csrf_token() }}",
                "current_password": $('#current_password').val(),
                "password": $('#password').val(),
                "password_confirmation": $('#password_confirmation').val()
            };
        }
        $.ajax({
            type: 'POST',
            url: 'validate-account/' + type,
            data: data,
            dataType: 'json',
            success: function(resp) {
                $('.password-text').text('');
                if(resp.errors && resp.errors.password != 'password')
                {
                    $('.password-text').text(resp.errors);
                }
            },
            error: function(xhr, status, error) {
                var err = xhr.responseJSON;
                $.each(err.errors, function(index, value) {
                    $('.password-text').text(value[0]);
                });
            }

        });
    }

</script>
@stop