@extends('layouts.app')

@section('content')

<div class="container-fluid">

    @if(session('success'))
        <div class="alert alert-success">
            {{ session('success') }}
        </div>
    @endif

    @if ($errors->any())
        <div class="alert alert-danger">
            <ul class="mb-0">
                @foreach($errors->all() as $error)

                    <li>{{ $error }}</li>

                @endforeach
            </ul>
        </div>
    @endif

    <div class="card shadow border-0">

        <div class="card-header bg-warning">

            <h4 class="mb-0">

                <i class="bi bi-pencil-square"></i>

                Edit Profil

            </h4>

        </div>

        <div class="card-body">

            <form action="{{ route('profil.update') }}"
                  method="POST"
                  enctype="multipart/form-data">

                @csrf
                @method('PUT')

                <div class="row">

                    {{-- FOTO --}}
                    <div class="col-md-4 text-center">

                        @if(Auth::user()->foto)

                            <img src="{{ asset('storage/'.Auth::user()->foto) }}"
                                 class="rounded-circle shadow"
                                 width="180"
                                 height="180"
                                 style="object-fit:cover;">

                        @else

                            <img src="https://ui-avatars.com/api/?name={{ urlencode(Auth::user()->nama) }}&background=0D6EFD&color=ffffff&size=200"
                                 class="rounded-circle shadow">

                        @endif

                        <br><br>

                        <label class="form-label">

                            Ganti Foto Profil

                        </label>

                        <input type="file"
                               name="foto"
                               class="form-control">

                    </div>

                    {{-- FORM --}}
                    <div class="col-md-8">

                        <div class="mb-3">

                            <label class="form-label">

                                Nama Lengkap

                            </label>

                            <input
                                type="text"
                                name="nama"
                                class="form-control"
                                value="{{ old('nama', Auth::user()->nama) }}"
                                required>

                        </div>

                        <div class="mb-3">

                            <label class="form-label">

                                Username

                            </label>

                            <input
                                type="text"
                                name="username"
                                class="form-control"
                                value="{{ old('username', Auth::user()->username) }}"
                                required>

                        </div>

                        <div class="mb-3">

                            <label class="form-label">

                                Email

                            </label>

                            <input
                                type="email"
                                name="email"
                                class="form-control"
                                value="{{ old('email', Auth::user()->email) }}"
                                required>

                        </div>

                        <div class="mb-3">

                            <label class="form-label">

                                Role

                            </label>

                            <input
                                type="text"
                                class="form-control"
                                value="{{ ucfirst(str_replace('_',' ',Auth::user()->role)) }}"
                                readonly>

                        </div>

                        <hr>

                        <button type="submit"
                                class="btn btn-success">

                            <i class="bi bi-check-circle"></i>

                            Simpan Perubahan

                        </button>

                        <a href="{{ route('profil.index') }}"
                           class="btn btn-secondary">

                            <i class="bi bi-arrow-left"></i>

                            Kembali

                        </a>

                    </div>

                </div>

            </form>

        </div>

    </div>

</div>

@endsection