@extends('admin::layouts.admin')

@section('title', isset($user) ? 'Edit Pengguna' : 'Tambah Pengguna')

@section('content')
<div class="cms-form-page">
    {{-- Page Header --}}
    <div class="page-header-cms">
        <h1 class="page-title-cms">{{ isset($user) ? 'Edit Pengguna' : 'Tambah Pengguna' }}</h1>
        <div class="header-actions">
            <a href="{{ route('admin.users.index') }}" class="btn-cancel">
                <i class="fas fa-times"></i> Batal
            </a>
            <button type="submit" form="userForm" class="btn-save">
                <i class="fas fa-save"></i> Simpan Data
            </button>
        </div>
    </div>

    {{-- Form Card --}}
    <div class="cms-form-card">
        <form id="userForm"
              action="{{ isset($user) ? route('admin.users.update', $user->id) : route('admin.users.store') }}"
              method="POST">
            @csrf
            @if(isset($user))
                @method('PUT')
            @endif

            {{-- Section 1: Informasi Akun --}}
            <div class="form-section">
                <h3 class="section-label">Informasi Akun</h3>

                <div class="form-group">
                    <label for="name" class="form-label">Nama Lengkap <span class="text-danger">*</span></label>
                    <input type="text"
                           class="form-control @error('name') is-invalid @enderror"
                           id="name"
                           name="name"
                           value="{{ old('name', $user->name ?? '') }}"
                           placeholder="Masukkan nama lengkap"
                           required>
                    @error('name')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="form-row">
                    <div class="form-group">
                        <label for="email" class="form-label">Email <span class="text-danger">*</span></label>
                        <input type="email"
                               class="form-control @error('email') is-invalid @enderror"
                               id="email"
                               name="email"
                               value="{{ old('email', $user->email ?? '') }}"
                               placeholder="user@example.com"
                               required>
                        @error('email')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="form-group">
                        <label for="phone" class="form-label">Nomor Telepon</label>
                        <input type="text"
                               class="form-control @error('phone') is-invalid @enderror"
                               id="phone"
                               name="phone"
                               value="{{ old('phone', $user->phone ?? '') }}"
                               placeholder="+62 812 3456 7890">
                        @error('phone')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
            </div>

            {{-- Section 2: Kata Sandi --}}
            <div class="form-section">
                <h3 class="section-label">
                    Kata Sandi
                    @if(isset($user))
                        <small class="text-muted">(Kosongkan jika tidak ingin mengubah)</small>
                    @endif
                </h3>

                <div class="form-row">
                    <div class="form-group">
                        <label for="password" class="form-label">
                            Password {{ !isset($user) ? '<span class="text-danger">*</span>' : '' }}
                        </label>
                        <input type="password"
                               class="form-control @error('password') is-invalid @enderror"
                               id="password"
                               name="password"
                               placeholder="Minimal 8 karakter"
                               {{ !isset($user) ? 'required' : '' }}>
                        @error('password')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="form-group">
                        <label for="password_confirmation" class="form-label">
                            Konfirmasi Password {{ !isset($user) ? '<span class="text-danger">*</span>' : '' }}
                        </label>
                        <input type="password"
                               class="form-control"
                               id="password_confirmation"
                               name="password_confirmation"
                               placeholder="Ulangi password"
                               {{ !isset($user) ? 'required' : '' }}>
                    </div>
                </div>
            </div>

            {{-- Section 3: Role & Status --}}
            <div class="form-section">
                <h3 class="section-label">Role & Status</h3>

                <div class="form-row">
                    <div class="form-group">
                        <label for="role" class="form-label">Role <span class="text-danger">*</span></label>
                        <select class="form-control @error('role') is-invalid @enderror"
                                id="role"
                                name="role"
                                required>
                            <option value="">Pilih Role</option>
                            <option value="user" {{ old('role', $user->role ?? '') === 'user' ? 'selected' : '' }}>User</option>
                            <option value="admin" {{ old('role', $user->role ?? '') === 'admin' ? 'selected' : '' }}>Admin</option>
                        </select>
                        @error('role')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="form-group">
                        <label for="status" class="form-label">Status <span class="text-danger">*</span></label>
                        <select class="form-control @error('status') is-invalid @enderror"
                                id="status"
                                name="status"
                                required>
                            <option value="">Pilih Status</option>
                            <option value="active" {{ old('status', $user->status ?? 'active') === 'active' ? 'selected' : '' }}>Active</option>
                            <option value="inactive" {{ old('status', $user->status ?? '') === 'inactive' ? 'selected' : '' }}>Inactive</option>
                            <option value="suspended" {{ old('status', $user->status ?? '') === 'suspended' ? 'selected' : '' }}>Suspended</option>
                        </select>
                        @error('status')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
            </div>

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

<style>
/* CMS Form Page */
.cms-form-page {
    max-width: 1200px;
    margin: 0 auto;
}

/* Page Header */
.page-header-cms {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
}

.page-title-cms {
    font-family: 'Plus Jakarta Sans', sans-serif;itron', sans-serif;
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--purple-primary);
    margin: 0;
}

.header-actions {
    display: flex;
    gap: 12px;
}

.btn-cancel,
.btn-save {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}

.btn-cancel {
    background: transparent;
    border: 1px solid rgba(239, 68, 68, 0.5);
    color: #f87171;
}

.btn-cancel:hover {
    background: rgba(239, 68, 68, 0.1);
    border-color: #ef4444;
    color: #ef4444;
}

.btn-save {
    background: linear-gradient(135deg, var(--cyan-primary) 0%, #0891b2 100%);
    color: white;
}

.btn-save:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(6, 182, 212, 0.4);
    color: white;
}

/* Form Card */
.cms-form-card {
    background: rgba(26, 23, 48, 0.6);
    border-radius: 16px;
    padding: 32px;
}

/* Form Sections */
.form-section {
    margin-bottom: 32px;
}

.form-section:last-child {
    margin-bottom: 0;
}

.section-label {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--purple-secondary);
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid rgba(139, 92, 246, 0.3);
}

.section-label small {
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--text-secondary);
}

/* Form Groups */
.form-group {
    margin-bottom: 20px;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.form-label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.form-control {
    width: 100%;
    padding: 12px 16px;
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.form-control:focus {
    outline: none;
    border-color: var(--cyan-primary);
    background: rgba(6, 182, 212, 0.05);
    box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.1);
}

.form-control.is-invalid {
    border-color: #ef4444;
}

.invalid-feedback {
    display: block;
    font-size: 0.85rem;
    color: #f87171;
    margin-top: 6px;
}

textarea.form-control {
    min-height: 120px;
    resize: vertical;
    font-family: inherit;
}

select.form-control {
    cursor: pointer;
}

.text-danger {
    color: #f87171;
}

.text-muted {
    color: var(--text-secondary);
}

/* Responsive */
@media (max-width: 768px) {
    .page-header-cms {
        flex-direction: column;
        align-items: flex-start;
    }

    .header-actions {
        width: 100%;
        flex-direction: column;
    }

    .btn-cancel,
    .btn-save {
        width: 100%;
        justify-content: center;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .cms-form-card {
        padding: 20px;
    }
}
</style>

<script>
// Show validation errors if exists
@if ($errors->any())
    Swal.fire({
        icon: 'error',
        title: 'Validasi Gagal!',
        html: `
            <ul style="text-align: left; padding-left: 20px;">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        `,
        confirmButtonColor: '#8b5cf6',
        background: 'rgba(26, 23, 48, 0.95)',
        color: '#e2e8f0'
    });
@endif
</script>

@endsection