@extends('layouts.layout-user')
@section('content')
<h1>PROFILE</h1>
<div class="card text-decoration-none shadow" style="margin-top:2%; padding:10px;">
    <div class="row" style="margin:5%;">
        <div class="col-12" style="text-align: center;">
            <div class="profile-info">
                <div class="row">
                    <div class="col-md-6 text-center">
                        <div style="position: relative; display: inline-block;">
                            <img src="{{ Auth::user()->foto }}" alt="Profile Picture" class="h-auto rounded-circle" style="width: 150px; height: 150px; border-radius: 50%;">
                                <div style="position: relative;">
                                    <!-- Tombol untuk memilih file -->
                                    <button type="button" class="btn btn-primary" style="position: absolute; bottom: 5px; right: 5px; background-color: rgba(255, 255, 255, 0.8); border-radius: 50px; padding: 10px; cursor: pointer;" data-toggle="modal" data-target="#modalFoto">
                                        <span><i class="fas fa-camera"></i></span>
                                      </button>
                                </div>
                        </div>
                    </div>

                    <div class="col-md-6">
                        @foreach ($profile as $profile)
                        <div style="margin-bottom: 10px; display: flex; justify-content: center; align-items: center;">
                            <label for="name" style="margin-right: 10px;"><b>Name</b></label>
                            <input class="form-control" readonly type="text" name="name" id="name" value="{{$profile->name}}" aria-describedby="defaultFormControlHelp" style="max-width: 300px;">
                        </div>
                        <div style="margin-bottom: 10px; display: flex; justify-content: center; align-items: center;">
                            <label for="email" style="margin-right: 10px;"><b>Email</b></label>
                            <input class="form-control" readonly type="text" name="email" id="email" value="{{$profile->email}}" aria-describedby="defaultFormControlHelp" style="max-width: 300px;">
                        </div>
                        <div style="margin-bottom: 10px; display: flex; justify-content: center; align-items: center;">
                            <label for="role" style="margin-right: 10px;"><b>Role</b></label>
                            <input class="form-control" readonly type="text" name="role" id="role" value="{{$profile->role}}" aria-describedby="defaultFormControlHelp" style="max-width: 300px;">
                        </div>
                        @endforeach
                    </div>
                </div>


            </div>
        </div>
    </div>
</div>


{{-- Modal --}}
<form method="post" action="{{ route('profile.update') }}" enctype="multipart/form-data">
    @csrf
    <div class="modal fade" id="modalFoto" tabindex="-1" role="dialog" aria-labelledby="modalFotoLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalFotoLabel">Upload Foto Profile</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div  class="form-group" style="display: none;">
                        <label for="inputFoto" style="font-weight: bold;">Upload Foto Profile</label>
                        <input type="file" class="form-control" id="foto" name="foto"  style="width: 100%; padding: 10px; margin-bottom: 15px; border: 1px solid #ccc; border-radius: 5px;">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>
</form>



@endsection