153 lines
4.3 KiB
PHP
153 lines
4.3 KiB
PHP
@extends('user.layouts.user')
|
|
|
|
@push('profile')
|
|
<script src="//unpkg.com/alpinejs" defer></script>
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
background-color: #f5f5f5;
|
|
}
|
|
|
|
.container {
|
|
background: #fff;
|
|
margin: 50px auto;
|
|
padding: 40px;
|
|
border-radius: 12px;
|
|
width: 80%;
|
|
max-width: 900px;
|
|
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.profile-header {
|
|
text-align: center;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.profile-header img {
|
|
width: 100px;
|
|
height: 100px;
|
|
border-radius: 50%;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.form-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 30px;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.form-group label {
|
|
font-weight: bold;
|
|
margin-bottom: 8px;
|
|
display: block;
|
|
}
|
|
|
|
.form-group input {
|
|
width: 100%;
|
|
padding: 12px;
|
|
border-radius: 6px;
|
|
border: 1px solid #ccc;
|
|
background: #f2f2f2;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.button-group {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 10px;
|
|
}
|
|
|
|
.button-group button {
|
|
background-color: #2196F3;
|
|
color: #fff;
|
|
border: none;
|
|
padding: 10px 30px;
|
|
border-radius: 10px;
|
|
font-size: 16px;
|
|
cursor: pointer;
|
|
transition: background-color 0.3s ease;
|
|
}
|
|
|
|
.button-group button:hover {
|
|
background-color: #1976D2;
|
|
}
|
|
|
|
.cancel-btn {
|
|
background-color: #9E9E9E;
|
|
}
|
|
|
|
.cancel-btn:hover {
|
|
background-color: #757575;
|
|
}
|
|
|
|
.alert {
|
|
background-color: #fee2e2;
|
|
color: #b91c1c;
|
|
padding: 10px;
|
|
margin-bottom: 20px;
|
|
border-radius: 6px;
|
|
}
|
|
</style>
|
|
@endpush
|
|
|
|
@section('content')
|
|
@include('user.partials.navbar')
|
|
|
|
<div x-data="{ editing: false }" class="container">
|
|
<div class="profile-header">
|
|
<img src="{{ asset('assets/gambar/profile1.png') }}" alt="Profile">
|
|
<h2>Data User</h2>
|
|
</div>
|
|
|
|
{{-- Error Handling --}}
|
|
@if ($errors->any())
|
|
<div class="alert">
|
|
<ul class="list-disc pl-5">
|
|
@foreach ($errors->all() as $error)
|
|
<li>{{ $error }}</li>
|
|
@endforeach
|
|
</ul>
|
|
</div>
|
|
@endif
|
|
|
|
<form method="POST" action="{{ route('user.profile.update') }}">
|
|
@csrf
|
|
@method('PUT')
|
|
|
|
<div class="form-grid">
|
|
<div class="form-group">
|
|
<label>Email</label>
|
|
<input type="email" name="email" :disabled="!editing" value="{{ old('email', $user->email) }}">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>No. Handphone</label>
|
|
<input type="text" name="no_hp" :disabled="!editing" value="{{ old('no_hp', $user->no_hp) }}">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Nama Peserta</label>
|
|
<input type="text" name="name" :disabled="!editing" value="{{ old('name', $user->name) }}">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Username</label>
|
|
<input type="text" name="username" :disabled="!editing"
|
|
value="{{ old('username', $user->username) }}">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="button-group">
|
|
<template x-if="!editing">
|
|
<button type="button" @click="editing = true">Edit</button>
|
|
</template>
|
|
<template x-if="editing">
|
|
<>
|
|
<button type="submit">Simpan</button>
|
|
<button type="button" @click="editing = false" class="cancel-btn">Batal</button>
|
|
</>
|
|
</template>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
@endsection
|