@extends('layouts.medflixtemplate')
{{--    --}}
@section('head')
    <script src="https://kit.fontawesome.com/44222adf0b.js" crossorigin="anonymous"></script>
    <style>

        .profilepic {
            margin: auto;
            width: 150px;
            height: 150px;
            border-radius: 100%;
            background-color:#000;
            overflow:hidden;
            background-size: cover;
            background-repeat:no-repeat;
        }

    </style>
@endsection
{{--    --}}
@section('content')
<div class="row">
    <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
        <div class="page-header">
            @if ($message = Session::get('errors'))
            <div class="alert alert-danger alert-block">
                <strong><center>{{ $message }}</center></strong>
            </div>
            @elseif($message = Session::get('success'))
            <div class="alert alert-success alert-block">
                <strong><center>{{ $message }}</center></strong>
            </div>
            @endif   
        </div>
    </div>
</div>

<div class="row">                        
</div>

<div class="ecommerce-widget">
    <div class="row">
        <div class="col-md">
            <div class="card">
                <h1 class="card-header">{{$staff->user->name}}</h1>
                <div class="card-body">
                    <div class="row">
                        <div class="col col-4 col-md-4 col-lg-4">
                            <form action="" method="post" enctype="multipart/form-data">
                            <input type="hidden" name="_method" value="PUT">
                            <input type="" name="infoSection" value="2" hidden>
                            {{ csrf_field() }}
                            <input type="file" name="p_name" id="staffPhotoInput" onchange="this.form.submit()" hidden>
                            
                                <div class="text-center">
                                    <a href="javascript:staffPicture()">
                                        @if($staff->staff_pictures == null)
                                        <div class="profilepic" style="background-image:url('{{URL::asset('assets/images/avatar-1.jpg')}}');">
                                            <i class="fas fa-pen"></i>
                                        </div>
                                        @else
                                        <div class="profilepic" style="background-image:url('data:image;base64,{!! base64_encode($getStaffPicture) !!}');">
                                            <i class="fas fa-pen"></i>
                                        </div>
                                        @endif
                                    </a>       
                                </div>
                            </form>
                        </div>
                        <div class="col">
                            <div class="border-top text-center">
                                <h2 class="font-16">
                                    Contact Information <i class="fas fa-pen" data-toggle="modal" data-target="#myContactInformationModal"></i>
                                </h2>
                                <div class="">
                                    <ul class="list-unstyled">
                                        <li class="mb-2"><i class="fas fa-fw fa-envelope mr-2"></i> {{$staff->user->email}} </li>
                                        <li class="mb-0"><i class="fas fa-fw fa-phone mr-2"></i> {{$staff->user->staff_profile->phone}} </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="col">
                            <div class="border-top text-center">
                                <h2 class="font-16">
                                    @if(Auth::user()->staff_profile->user_type == "Admin")
                                    Role <i class="fas fa-pen" data-toggle="modal" data-target="#myChangeRoleModal"></i>
                                    @else
                                    Role
                                    @endif 
                                </h2> 
                                <div class="">
                                    <ul class="list-unstyled">
                                        <li class="mb-2"><i class="fas fa-fw fa-user-tag"></i> {{$staff->user->staff_profile->user_type}} </li>
                                    </ul>
                                </div>
                                <p data-toggle="modal" data-target="#myPasswordResetModal"><i class="fas fa-key"></i> Reset password</p> 
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{{--    --}}
<!-- Change Role Modal -->
<div class="modal fade" id="myChangeRoleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">Change Role</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body center">
                <div class="form-row justify-content-center">
                    <form action="" method="post">
                    <input type="hidden" name="_method" value="PUT">
                    <input type="text" name="infoSection" value="0" hidden>
                    {{ csrf_field() }}
                        <div class="form-group col-md-6">
                            <input type="text" name="role" value="Admin" hidden>
                            <button type="submit" class="btn btn-danger">Change To Admin</button>
                        </div>
                    </form>
                    {{--    --}}
                    <form action="" method="post">
                    <input type="hidden" name="_method" value="PUT">
                    <input type="" name="infoSection" value="0" hidden>
                    {{ csrf_field() }}

                        <div class="form-group col-md-6">
                            <input type="text" name="role" value="Data Entry" hidden>
                            <button type="submit" class="btn btn-info">Change To Data Entry</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
  {{--    --}}
<!-- Change Contact Information Modal -->
<div class="modal fade" id="myContactInformationModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">Change Contact Information</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body center">
                <div class="form-row justify-content-center text-align:center">
                    <form action="" method="post">
                    <input type="hidden" name="_method" value="PUT">
                    {{ csrf_field() }}
                    <input type="" name="infoSection" value="1" hidden>
                        <div class="form-group col-80">
                            <input class="form-control" type="email" name="email" value="{{$staff->user->email}}">                            
                        </div>
                        <div class="form-group col-40">
                            <input class="form-control" type="text" name="phone" value="{{$staff->user->staff_profile->phone}}">
                        </div>
                        <div class="form-group col-md-6">
                            <button type="submit" class="btn btn-primary">Save Information</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{{--    --}}
<!-- Password Reset Model-->
<div class="modal fade" id="myPasswordResetModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content modal-lg">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">Change Password</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body center">
                <div class="form-row justify-content-center text-align:center">
                    <form action="" method="post">
                    <input type="hidden" name="_method" value="PUT">
                    {{ csrf_field() }}
                    <input type="" name="infoSection" value="3" hidden>
                        @if (Auth::user()->staff_profile->user_type == !"Admin")
                            <div class="form-group">
                                <label for="new-password" class="col-md-12 control-label">Current Password</label>
                                <div class="col-md-12">
                                    <input id="current-password" type="password" class="form-control" name="current_password" required>
                                </div>
                            </div>
                        @endif
                        {{--  <div class="form-group">
                            <label for="new-password" class="col-md-12 control-label">Current Password</label>
                                <div class="col-md-12">
                                    <input id="current-password" type="password" class="form-control" name="current_password" required>
                                </div>
                        </div>  --}}

                        <div class="form-group">
                            <label for="new-password" class="col-md-12 control-label">New Password</label>
                            <div class="col-md-12">
                                <input id="new-password" type="password" class="form-control" name="new_password" required>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="new-password-confirm" class="col-md-12 control-label">Confirm New Password</label>
                            <div class="col-md-12">
                                <input id="new-password-confirm" type="password" class="form-control" name="new_password_confirmation" required>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-md-6 col-md-offset-4">
                                <button type="submit" class="btn btn-primary">
                                    Change Password
                                </button>
                            </div>
                        </div>                        
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@section('script')
    <script>
        function staffPicture(){
            //document.getElementById('staffPhotoInput').focus();
            document.getElementById('staffPhotoInput').click();
        }

    </script>
@endsection