@extends('admin::layouts.master')

@section('title','Admin Profile')

@section('content')

    <div class="card shadow mb-4">
        <div class="row">
            <div class="col-md-12">
            </div>
        </div>
        <div class="card-header py-3">
            <h4 class=" font-weight-bold">Profile</h4>
            <ul class="breadcrumbs">
                <li><a href="{{route('admin')}}" style="color:#999">Dashboard</a></li>
                <li><a href="" class="active text-primary">Profile Page</a></li>
            </ul>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-4">
                    <div class="card">
                        <div class="image">
                            @php $user = Auth()->user(); @endphp
                            @if($user && $user->getFirstMediaUrl('photo'))
                                <img class="card-img-top img-fluid roundend-circle mt-4"
                                     style="border-radius:50%;height:80px;width:80px;margin:auto;"
                                     src="{{$user->getFirstMediaUrl('photo')}}" alt="profile picture">
                            @else
                                <img class="card-img-top img-fluid roundend-circle mt-4"
                                     style="border-radius:50%;height:80px;width:80px;margin:auto;"
                                     src="{{asset('backend/img/avatar.png')}}" alt="profile picture">
                            @endif
                        </div>
                        <div class="card-body mt-4 ml-2">
                            <h5 class="card-title text-left"><small><i
                                            class="fas fa-user"></i> {{$profile['name'] ?? ''}}
                                </small></h5>
                            <p class="card-text text-left"><small><i
                                            class="fas fa-envelope"></i> {{$profile['email'] ?? ''}}
                                </small></p>
                            <p class="card-text text-left"><small class="text-muted"><i
                                            class="fas fa-hammer"></i> {{$profile['role'] ?? ''}}</small></p>
                        </div>
                    </div>
                </div>
                <div class="col-md-8">
                    <form class="border px-4 pt-2 pb-3" method="POST"
                          action="{{route('profile-update',$profile['id'] ?? '')}}">
                        @csrf
                        <div class="form-group">
                            <label for="inputTitle" class="col-form-label">Name</label>
                            <input id="inputTitle" type="text" name="name" placeholder="@lang('partials.name')"
                                   value="{{$profile['name'] ?? ''}}" class="form-control">
                            @error('name')
                            <span class="text-danger">{{$message}}</span>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label for="inputEmail" class="col-form-label">Email</label>
                            <input id="inputEmail" disabled type="email" name="email" placeholder="Enter email"
                                   value="{{$profile['email'] ?? ''}}" class="form-control">
                            @error('email')
                            <span class="text-danger">{{$message}}</span>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label for="inputPhoto" class="col-form-label">Photo</label>
                            <div class="input-group flex-wrap">
                                <span class="input-group-btn mb-2 mb-sm-0">
                                    <a id="lfm" data-input="thumbnail" data-preview="holder" class="btn btn-primary">
                                        <i class="fa fa-picture-o"></i> Choose
                                    </a>
                                </span>
                                <input id="thumbnail" class="form-control" type="text" name="photo"
                                       value="{{$profile['photo'] ?? ''}}">
                            </div>
                            @error('photo')
                            <span class="text-danger">{{$message}}</span>
                            @enderror
                        </div>
                        
                        <div class="row mt-3">
                            
                            <div class="col-12 col-sm-6 mb-3 mb-sm-0">
                                @if(isset($profile['loginSecurity']) && $profile['loginSecurity']['google2fa_enable'] ?? false)
                                    <a class="btn btn-warning btn-block btn-sm-mobile"
                                       href="{{ route('disable2fa') }}">Users 2FA Disable
                                    </a>
                                @else
                                    <a class="btn btn-secondary btn-block btn-sm-mobile"
                                       href="{{ route('enable2fa') }}">Users 2FA Enable</a>
                                @endif
                            </div>
                            
                            <div class="col-12 col-sm-6 text-left text-sm-right">
                                <button type="submit" class="btn btn-success btn-block btn-sm-mobile">Update</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

@endsection

<style>
    .breadcrumbs {
        list-style: none;
        padding-left: 0;
        margin-bottom: 0;
        display: flex;
        flex-wrap: wrap;
    }

    .breadcrumbs li {
        float: left;
        margin-right: 10px;
    }

    .breadcrumbs li a:hover {
        text-decoration: none;
    }

    .breadcrumbs li .active {
        color: red;
    }

    .breadcrumbs li + li:before {
        content: "/\00a0";
    }

    .image {
        background: url('{{asset('backend/img/background.jpg')}}');
        height: 150px;
        background-position: center;
        background-size: cover;
        position: relative;
    }

    .image img {
        position: absolute;
        top: 55%;
        left: 35%;
        margin-top: 30%;
    }

    i {
        font-size: 14px;
        padding-right: 8px;
    }

    /* Mobile Responsive Styles */
    @media (max-width: 767.98px) {
        .card-body {
            padding: 1rem;
        }
        
        .image img {
            left: 50%;
            transform: translateX(-50%);
            margin-top: 25%;
        }
        
        .image {
            height: 130px;
        }
        
        .input-group {
            flex-direction: column;
        }
        
        .input-group-btn {
            width: 100%;
            margin-bottom: 10px;
        }
        
        .input-group-btn .btn {
            width: 100%;
            border-radius: 0.25rem !important;
        }
        
        #thumbnail {
            width: 100%;
            border-radius: 0.25rem;
        }
        
        .btn-sm-mobile {
            width: 100%;
            margin-bottom: 10px;
            padding: 0.5rem 1rem;
            font-size: 0.875rem;
        }
        
        .col-sm-6:last-child .btn-sm-mobile {
            margin-bottom: 0;
        }
        
        form.border {
            padding: 1rem !important;
            margin-top: 1rem;
        }
        
        .card .card-body.mt-4 {
            margin-top: 2.5rem !important;
            text-align: center;
        }
        
        .card-title.text-left,
        .card-text.text-left {
            text-align: center !important;
        }
        
        .breadcrumbs {
            margin-top: 0.5rem;
        }
        
        .breadcrumbs li {
            font-size: 0.85rem;
        }
    }

    /* Small mobile devices */
    @media (max-width: 575.98px) {
        .image img {
            height: 70px;
            width: 70px;
        }
        
        h4.font-weight-bold {
            font-size: 1.25rem;
        }
        
        .card-header.py-3 {
            padding: 1rem;
        }
        
        .form-group label {
            font-size: 0.9rem;
        }
        
        .btn {
            font-size: 0.85rem;
        }
        
        .image {
            height: 120px;
        }
    }

    /* Tablet devices */
    @media (min-width: 768px) and (max-width: 991.98px) {
        .image img {
            left: 30%;
        }
        
        .btn-sm-mobile {
            padding: 0.4rem 0.8rem;
            font-size: 0.85rem;
        }
    }
</style>

@push('scripts')
    <script src="/vendor/laravel-filemanager/js/stand-alone-button.js"></script>
    <script>
        $('#lfm').filemanager('image');
    </script>
@endpush