@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