<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Edit Pengguna - Raja Futsal</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <style>
        * {
            font-family: 'Inter', sans-serif;
        }

        .nav-link {
            transition: all 0.2s ease;
            padding: 0.5rem 1rem;
            border-radius: 0.5rem;
        }

        .nav-link:hover {
            background-color: #fff7ed;
            color: #ea580c;
        }

        .active-nav {
            background-color: #fff7ed;
            color: #ea580c;
            font-weight: 600;
        }

        .form-card {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .form-card:hover {
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
        }

        .input-focus:focus {
            border-color: #f97316;
            box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.1);
        }

        .btn-primary {
            background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
            transition: all 0.3s ease;
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3);
        }

        .btn-secondary {
            transition: all 0.3s ease;
        }

        .btn-secondary:hover {
            background-color: #f3f4f6;
            transform: translateY(-2px);
        }

        .badge {
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.4); }
            70% { box-shadow: 0 0 0 10px rgba(249, 115, 22, 0); }
            100% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0); }
        }

        .password-toggle {
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .password-toggle:hover {
            background-color: #e2e8f0;
        }

        .badge-orange {
            background: linear-gradient(135deg, #fb923c 0%, #f97316 100%);
            color: white;
        }
    </style>
</head>

<body class="bg-gray-50 min-h-screen">
    <!-- ========== KONTEN UTAMA ========== -->
    <div class="p-6">
        <!-- HEADER CARD -->
        <div class="relative mb-8 overflow-hidden rounded-2xl bg-gradient-to-r from-orange-500 via-orange-600 to-orange-700 p-6 text-white shadow-xl w-full">
            
            <div class="absolute top-0 right-0 w-64 h-64 opacity-10">
                <i class="fas fa-user-edit text-8xl absolute top-10 right-10"></i>
                <i class="fas fa-users text-7xl absolute bottom-0 right-32"></i>
                <i class="fas fa-user-check text-6xl absolute top-20 right-48"></i>
            </div>
            <div class="absolute bottom-0 left-0 w-48 h-48 bg-white opacity-5 rounded-full -ml-16 -mb-16"></div>
            
            <div class="relative flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
                <div class="flex items-center gap-3">
                    <div class="w-12 h-12 bg-white/20 backdrop-blur-sm rounded-xl flex items-center justify-center shadow-inner border border-white/30">
                        <i class="fas fa-user-edit text-white text-2xl"></i>
                    </div>
                    <div>
                        <h2 class="text-2xl font-bold text-white">Edit Pengguna ✏️</h2>
                        <p class="text-orange-100 text-sm">Memperbarui informasi pengguna <?php echo e($user->name); ?></p>
                    </div>
                </div>
                <div class="flex-shrink-0">
                    <span class="bg-white/20 backdrop-blur-sm px-4 py-2 rounded-xl text-sm font-medium inline-flex items-center gap-2">
                        <i class="fas fa-id-card mr-1"></i>ID: <?php echo e($user->ID); ?>

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

        <!-- FORM CARD -->
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
            <!-- FORM -->
            <div class="lg:col-span-2">
                <div class="bg-white rounded-xl shadow-lg border border-gray-100 overflow-hidden form-card">
                    <!-- FORM HEADER -->
                    <div class="px-6 py-4 border-b border-gray-100 bg-gradient-to-r from-orange-50 to-white">
                        <div class="flex items-center gap-3">
                            <div class="w-10 h-10 bg-orange-100 rounded-lg flex items-center justify-center">
                                <i class="fas fa-user-edit text-orange-600"></i>
                            </div>
                            <div>
                                <h3 class="font-bold text-gray-800">Form Edit Pengguna</h3>
                                <p class="text-sm text-gray-500">Perbarui informasi pengguna di bawah ini</p>
                            </div>
                        </div>
                    </div>

                    <!-- FORM CONTENT -->
                    <div class="p-6">
                        <!-- ERROR MESSAGES -->
                        <?php if($errors->any()): ?>
                            <div class="mb-6 p-4 bg-red-50 border-l-4 border-red-500 rounded-r-lg">
                                <div class="flex items-center">
                                    <i class="fas fa-exclamation-triangle text-red-500 text-xl mr-3"></i>
                                    <div>
                                        <p class="font-medium text-red-800">Perhatian!</p>
                                        <ul class="mt-2 text-red-700 text-sm list-disc list-inside">
                                            <?php $__currentLoopData = $errors->all(); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $error): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                                <li><?php echo e($error); ?></li>
                                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        <?php endif; ?>

                        <!-- FORM -->
                        <form action="<?php echo e(route('user.update', $user->ID)); ?>" method="POST" class="space-y-6">
                            <?php echo csrf_field(); ?>
                            <?php echo method_field('PUT'); ?>

                            <!-- NAMA FIELD -->
                            <div>
                                <label class="block text-sm font-semibold text-gray-700 mb-2">
                                    Nama Lengkap
                                    <span class="text-red-500 ml-1">*</span>
                                </label>
                                <div class="relative">
                                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                        <i class="fas fa-user text-gray-400"></i>
                                    </div>
                                    <input type="text"
                                           name="name"
                                           required
                                           placeholder="Masukkan nama lengkap"
                                           value="<?php echo e(old('name', $user->name)); ?>"
                                           class="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg input-focus focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-transparent transition">
                                </div>
                                <div class="mt-2 flex items-center gap-2 text-xs bg-orange-50 p-2 rounded-lg border border-orange-100">
                                    <i class="fas fa-info-circle text-orange-500"></i>
                                    <span class="text-gray-600">Nama saat ini: <span class="font-semibold text-orange-700"><?php echo e($user->name); ?></span></span>
                                </div>
                            </div>

                            <!-- EMAIL FIELD -->
                            <div>
                                <label class="block text-sm font-semibold text-gray-700 mb-2">
                                    Email
                                    <span class="text-red-500 ml-1">*</span>
                                </label>
                                <div class="relative">
                                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                        <i class="fas fa-envelope text-gray-400"></i>
                                    </div>
                                    <input type="email"
                                           name="email"
                                           required
                                           placeholder="contoh@email.com"
                                           value="<?php echo e(old('email', $user->email)); ?>"
                                           class="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg input-focus focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-transparent transition">
                                </div>
                                <div class="mt-2 flex items-center gap-2 text-xs bg-orange-50 p-2 rounded-lg border border-orange-100">
                                    <i class="fas fa-info-circle text-orange-500"></i>
                                    <span class="text-gray-600">Email saat ini: <span class="font-semibold text-orange-700"><?php echo e($user->email); ?></span></span>
                                </div>
                            </div>

                            <!-- PHONE FIELD -->
                            <div>
                                <label class="block text-sm font-semibold text-gray-700 mb-2">
                                    Nomor HP
                                    <span class="text-red-500 ml-1">*</span>
                                </label>
                                <div class="relative">
                                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                        <i class="fas fa-phone text-gray-400"></i>
                                    </div>
                                    <input type="text"
                                           name="no_hp"
                                           required
                                           placeholder="0812-3456-7890"
                                           value="<?php echo e(old('no_hp', $user->no_hp)); ?>"
                                           class="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg input-focus focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-transparent transition">
                                </div>
                                <div class="mt-2 flex items-center gap-2 text-xs bg-orange-50 p-2 rounded-lg border border-orange-100">
                                    <i class="fas fa-info-circle text-orange-500"></i>
                                    <span class="text-gray-600">No HP saat ini: <span class="font-semibold text-orange-700"><?php echo e($user->no_hp); ?></span></span>
                                </div>
                            </div>

                            <!-- PASSWORD FIELD -->
                            <div>
                                <label class="block text-sm font-semibold text-gray-700 mb-2">
                                    Password (Opsional)
                                </label>
                                <div class="relative">
                                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                        <i class="fas fa-lock text-gray-400"></i>
                                    </div>
                                    <input type="password"
                                           name="password"
                                           id="password"
                                           placeholder="Kosongkan jika tidak ingin mengubah"
                                           class="w-full pl-10 pr-12 py-3 border border-gray-300 rounded-lg input-focus focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-transparent transition">
                                    <div class="absolute inset-y-0 right-0 pr-3 flex items-center">
                                        <button type="button"
                                                onclick="togglePassword()"
                                                class="password-toggle p-1 rounded">
                                            <i class="fas fa-eye text-gray-500" id="toggleIcon"></i>
                                        </button>
                                    </div>
                                </div>
                                <p class="mt-2 text-xs text-gray-500 flex items-center gap-1">
                                    <i class="fas fa-info-circle"></i>
                                    Isi hanya jika ingin mengubah password. Minimal 8 karakter.
                                </p>
                            </div>

                            <!-- ROLE FIELD -->
                            <div>
                                <label class="block text-sm font-semibold text-gray-700 mb-2">
                                    Role / Peran
                                    <span class="text-red-500 ml-1">*</span>
                                </label>
                                <div class="relative">
                                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                        <i class="fas fa-tag text-gray-400"></i>
                                    </div>
                                    <select name="role" required
                                            class="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg input-focus focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-transparent transition appearance-none bg-white">
                                        <option value="penjual" <?php echo e($user->role == 'penjual' ? 'selected' : ''); ?>>Penjual</option>
                                        <option value="kurir" <?php echo e($user->role == 'kurir' ? 'selected' : ''); ?>>Kurir</option>
                                        <option value="user" <?php echo e($user->role == 'user' ? 'selected' : ''); ?>>User</option>
                                    </select>
                                    <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
                                        <i class="fas fa-chevron-down text-gray-400"></i>
                                    </div>
                                </div>
                                <p class="mt-2 text-xs text-gray-500 flex items-center gap-1">
                                    <i class="fas fa-info-circle"></i>
                                    Pilih peran pengguna: Penjual (menjual produk), Kurir (mengantar pesanan), User (pembeli biasa)
                                </p>
                            </div>

                            <!-- FORM ACTIONS -->
                            <div class="pt-6 border-t border-gray-100">
                                <div class="flex flex-col sm:flex-row gap-3">
                                    <button type="submit"
                                            class="btn-primary text-white px-6 py-3 rounded-lg font-semibold flex items-center justify-center gap-2 shadow-md hover:shadow-lg">
                                        <i class="fas fa-save"></i>
                                        Update Pengguna
                                    </button>

                            
                        </a>
                        <a href="<?php echo e(route('user.index')); ?>"
                                       class="btn-secondary px-6 py-3 rounded-lg font-semibold border border-gray-300 text-gray-700 flex items-center justify-center gap-2 hover:bg-gray-50 transition">
                                        Batal
                                    </a>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <!-- SIDEBAR INFO -->
            <div class="lg:col-span-1">
                <!-- INFO CARD -->
                <div class="bg-white rounded-xl shadow-lg border border-gray-100 p-6 mb-6">
                    <div class="flex items-center gap-3 mb-4">
                        <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
                            <i class="fas fa-info-circle text-blue-600"></i>
                        </div>
                        <h3 class="font-bold text-gray-800">Informasi Pengguna</h3>
                    </div>
                    <div class="space-y-4">
                        <div class="bg-gray-50 p-3 rounded-lg">
                            <p class="text-xs text-gray-500 mb-1">ID Pengguna</p>
                            <p class="font-bold text-gray-800 text-lg"><?php echo e($user->ID); ?></p>
                        </div>

                        <div class="flex items-center gap-3 p-3 bg-orange-50 rounded-lg border border-orange-200">
                            <div class="w-10 h-10 bg-orange-200 rounded-lg flex items-center justify-center">
                                <i class="fas fa-user-tag text-orange-700"></i>
                            </div>
                            <div>
                                <p class="text-xs text-gray-500 mb-1">Role / Peran</p>
                                <?php
                                    $roleIcon = [
                                        'penjual' => 'fa-store',
                                        'kurir' => 'fa-truck',
                                        'user' => 'fa-user'
                                    ];
                                    $roleColor = [
                                        'penjual' => 'bg-purple-500',
                                        'kurir' => 'bg-blue-500',
                                        'user' => 'bg-green-500'
                                    ];
                                ?>
                                <span class="inline-flex items-center px-3 py-1.5 rounded-full text-xs font-semibold <?php echo e($roleColor[$user->role] ?? 'bg-gray-500'); ?> text-white">
                                    <i class="fas <?php echo e($roleIcon[$user->role] ?? 'fa-user'); ?> mr-1"></i>
                                    <?php echo e(ucfirst($user->role)); ?>

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

                        <div class="border-t border-gray-100 pt-3">
                            <p class="text-xs text-gray-500 mb-2 flex items-center gap-1">
                                <i class="fas fa-calendar-alt"></i>
                                Tanggal Bergabung
                            </p>
                            <p class="text-sm font-medium text-gray-800">
                                <?php echo e(\Carbon\Carbon::parse($user->created_at)->format('d F Y')); ?>

                            </p>
                            <p class="text-xs text-gray-500 mt-1">
                                <?php echo e(\Carbon\Carbon::parse($user->created_at)->diffForHumans()); ?>

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

                <!-- DELETE CARD -->
                <div class="bg-white rounded-xl shadow-lg border border-red-200 p-6">
                    <div class="flex items-center gap-3 mb-3">
                        <div class="w-10 h-10 bg-red-100 rounded-lg flex items-center justify-center">
                            <i class="fas fa-exclamation-triangle text-red-600"></i>
                        </div>
                        <h3 class="font-bold text-gray-800">Zona Berbahaya</h3>
                    </div>
                    <p class="text-sm text-gray-600 mb-4">
                        Hapus pengguna ini secara permanen dari sistem.
                    </p>
                    <button onclick="showDeleteModal()"
                            class="w-full px-4 py-3 bg-red-600 text-white rounded-lg font-medium text-sm hover:bg-red-700 transition flex items-center justify-center gap-2 shadow-md hover:shadow-lg">
                        <i class="fas fa-trash"></i>
                        Hapus Pengguna
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- DELETE CONFIRMATION MODAL -->
    <div id="deleteModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
        <div class="bg-white rounded-2xl p-6 max-w-md w-full mx-4 shadow-2xl transform transition-all">
            <div class="flex items-center gap-4 mb-4">
                <div class="w-14 h-14 bg-red-100 rounded-full flex items-center justify-center">
                    <i class="fas fa-exclamation-triangle text-red-600 text-2xl"></i>
                </div>
                <div>
                    <h3 class="font-bold text-gray-800 text-lg">Hapus Pengguna?</h3>
                    <p class="text-gray-600 text-sm">Pengguna: <span class="font-semibold"><?php echo e($user->name); ?></span></p>
                </div>
                <button onclick="closeDeleteModal()" class="ml-auto text-gray-400 hover:text-gray-600">
                    <i class="fas fa-times"></i>
                </button>
            </div>

            <div class="p-4 bg-red-50 rounded-lg mb-6 border border-red-100">
                <p class="text-red-700 text-sm flex items-start gap-2">
                    <i class="fas fa-exclamation-circle mt-0.5"></i>
                    <span>
                        Aksi ini akan menghapus pengguna <strong><?php echo e($user->name); ?></strong> secara permanen.
                        <br>Semua data terkait juga akan ikut terhapus.
                    </span>
                </p>
            </div>

            <div class="flex justify-end gap-3">
                <button onclick="closeDeleteModal()"
                        class="px-5 py-2.5 text-gray-700 font-medium hover:bg-gray-100 rounded-lg transition border border-gray-300">
                    Batal
                </button>
                <form action="<?php echo e(route('user.destroy', $user->ID)); ?>" method="POST" class="inline">
                    <?php echo csrf_field(); ?>
                    <?php echo method_field('DELETE'); ?>
                    <button type="submit"
                            class="px-5 py-2.5 bg-red-600 text-white font-medium hover:bg-red-700 rounded-lg transition flex items-center gap-2 shadow-lg hover:shadow-xl">
                        <i class="fas fa-trash"></i>
                        Ya, Hapus
                    </button>
                </form>
            </div>
        </div>
    </div>

    <script>
        function toggleDropdown() {
            document.getElementById("dropdownMenu").classList.toggle("hidden");
        }

        window.addEventListener('click', function(e) {
            const dropdown = document.getElementById("dropdownMenu");
            if (!e.target.closest('.relative') && !dropdown.classList.contains('hidden')) {
                dropdown.classList.add("hidden");
            }
        });

        function togglePassword() {
            const password = document.getElementById("password");
            const icon = document.getElementById("toggleIcon");

            if (password.type === "password") {
                password.type = "text";
                icon.classList.remove("fa-eye");
                icon.classList.add("fa-eye-slash");
            } else {
                password.type = "password";
                icon.classList.remove("fa-eye-slash");
                icon.classList.add("fa-eye");
            }
        }

        function showDeleteModal() {
            const modal = document.getElementById('deleteModal');
            modal.classList.remove('hidden');
            modal.classList.add('flex');
            document.body.style.overflow = 'hidden';
        }

        function closeDeleteModal() {
            const modal = document.getElementById('deleteModal');
            modal.classList.add('hidden');
            modal.classList.remove('flex');
            document.body.style.overflow = 'auto';
        }

        document.getElementById('deleteModal').addEventListener('click', function(e) {
            if (e.target.id === 'deleteModal') {
                closeDeleteModal();
            }
        });

        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape' && !document.getElementById('deleteModal').classList.contains('hidden')) {
                closeDeleteModal();
            }
        });

        document.addEventListener('DOMContentLoaded', function() {
            const nameInput = document.querySelector('input[name="name"]');
            if (nameInput) {
                nameInput.focus();
                nameInput.select();
            }
        });
    </script>
</body>
</html><?php /**PATH C:\laragon\www\ecommerce\resources\views/user/edit.blade.php ENDPATH**/ ?>