@extends('layout.app')

@section('title', 'Tambah User - Sistem Manajemen ISP')

@section('content')
<x-material-page-header 
    title="Tambah User" 
    :breadcrumbs="[
        ['name' => 'Manajemen User', 'url' => route('user-management.index')],
        ['name' => 'Tambah User']
    ]"
/>

<div class="container-fluid py-4">
    <div class="row">
        <div class="col">
            <div class="card mb-4" style="border: none; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);">
                <div class="card-header pb-3">
                    <h6 class="mb-0 font-weight-bold d-flex align-items-center" style="font-size: 0.875rem; color: #344767;">
                        <i class="material-symbols-rounded me-2" style="font-size: 20px; line-height: 1; color: #5e72e4;">person_add</i> Form Tambah User
                    </h6>
                </div>
                <div class="card-body pt-3">
                    <form action="{{ route('user-management.store') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        
                        <div class="row">
                            <!-- Basic Information -->
                            <div class="col-md-6">
                                <div class="card mb-4" style="border: none; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);">
                                    <div class="card-header pb-3" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
                                        <h6 class="mb-0 font-weight-bold d-flex align-items-center text-white" style="font-size: 0.875rem;">
                                            <i class="material-symbols-rounded me-2" style="font-size: 20px; line-height: 1;">person</i> Informasi Dasar
                                        </h6>
                                    </div>
                                    <div class="card-body pt-3">
                                        <div class="form-group mb-3">
                                            <label for="username" class="form-label">Username <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control @error('username') is-invalid @enderror" 
                                                   id="username" name="username" value="{{ old('username') }}" required>
                                            @error('username')
                                                <div class="invalid-feedback d-block">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <div class="form-group mb-3">
                                            <label for="name" class="form-label">Nama <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control @error('name') is-invalid @enderror" 
                                                   id="name" name="name" value="{{ old('name') }}" required>
                                            @error('name')
                                                <div class="invalid-feedback d-block">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <div class="form-group mb-3">
                                            <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') }}" required>
                                            @error('email')
                                                <div class="invalid-feedback d-block">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <div class="form-group mb-3">
                                            <label for="nama_lengkap" class="form-label">Nama Lengkap <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control @error('nama_lengkap') is-invalid @enderror" 
                                                   id="nama_lengkap" name="nama_lengkap" value="{{ old('nama_lengkap') }}" required>
                                            @error('nama_lengkap')
                                                <div class="invalid-feedback d-block">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Account Settings -->
                            <div class="col-md-6">
                                <div class="card mb-4" style="border: none; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);">
                                    <div class="card-header pb-3" style="background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);">
                                        <h6 class="mb-0 font-weight-bold d-flex align-items-center text-white" style="font-size: 0.875rem;">
                                            <i class="material-symbols-rounded me-2" style="font-size: 20px; line-height: 1;">settings</i> Pengaturan Akun
                                        </h6>
                                    </div>
                                    <div class="card-body pt-3">
                                        <div class="form-group mb-3">
                                            <label for="password" class="form-label">Password <span class="text-danger">*</span></label>
                                            <input type="password" class="form-control @error('password') is-invalid @enderror" 
                                                   id="password" name="password" required>
                                            @error('password')
                                                <div class="invalid-feedback d-block">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <div class="form-group mb-3">
                                            <label for="password_confirmation" class="form-label">Konfirmasi Password <span class="text-danger">*</span></label>
                                            <input type="password" class="form-control" 
                                                   id="password_confirmation" name="password_confirmation" required>
                                        </div>

                                        <div class="form-group mb-3">
                                            <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="admin" {{ old('role') == 'admin' ? 'selected' : '' }}>Admin</option>
                                                <option value="operator" {{ old('role') == 'operator' ? 'selected' : '' }}>Operator</option>
                                                <option value="finance" {{ old('role') == 'finance' ? 'selected' : '' }}>Finance</option>
                                                <option value="support" {{ old('role') == 'support' ? 'selected' : '' }}>Support</option>
                                            </select>
                                            @error('role')
                                                <div class="invalid-feedback d-block">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <div class="form-group mb-3">
                                            <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="Aktif" {{ old('status') == 'Aktif' ? 'selected' : '' }}>Aktif</option>
                                                <option value="Nonaktif" {{ old('status') == 'Nonaktif' ? 'selected' : '' }}>Nonaktif</option>
                                            </select>
                                            @error('status')
                                                <div class="invalid-feedback d-block">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Additional Settings -->
                        <div class="row">
                            <div class="col-md-6">
                                <div class="card mb-4" style="border: none; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);">
                                    <div class="card-header pb-3" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
                                        <h6 class="mb-0 font-weight-bold d-flex align-items-center text-white" style="font-size: 0.875rem;">
                                            <i class="material-symbols-rounded me-2" style="font-size: 20px; line-height: 1;">badge</i> Role & Permission
                                        </h6>
                                    </div>
                                    <div class="card-body pt-3">
                                        <div class="form-group mb-3">
                                            <label class="form-label">Assign Roles</label>
                                            @foreach($roles as $role)
                                            <div class="form-check mb-2">
                                                <input type="checkbox" class="form-check-input" 
                                                       id="role_{{ $role->id }}" name="roles[]" value="{{ $role->id }}"
                                                       {{ in_array($role->id, old('roles', [])) ? 'checked' : '' }}>
                                                <label class="form-check-label" for="role_{{ $role->id }}">
                                                    {{ $role->display_name }}
                                                    @if($role->description)
                                                        <small class="text-muted d-block">{{ $role->description }}</small>
                                                    @endif
                                                </label>
                                            </div>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="card mb-4" style="border: none; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);">
                                    <div class="card-header pb-3" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
                                        <h6 class="mb-0 font-weight-bold d-flex align-items-center text-white" style="font-size: 0.875rem;">
                                            <i class="material-symbols-rounded me-2" style="font-size: 20px; line-height: 1;">image</i> Avatar & Pelanggan
                                        </h6>
                                    </div>
                                    <div class="card-body pt-3">
                                        <div class="form-group mb-3">
                                            <label for="avatar" class="form-label">Avatar</label>
                                            <input type="file" class="form-control @error('avatar') is-invalid @enderror" 
                                                   id="avatar" name="avatar" accept="image/*">
                                            <small class="text-muted">Format: JPG, PNG, GIF (Max: 2MB)</small>
                                            @error('avatar')
                                                <div class="invalid-feedback d-block">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <div class="form-group mb-3">
                                            <label for="pelanggan_id" class="form-label">Link ke Pelanggan</label>
                                            <select class="form-control @error('pelanggan_id') is-invalid @enderror" id="pelanggan_id" name="pelanggan_id">
                                                <option value="">Pilih Pelanggan (Opsional)</option>
                                                @foreach($pelanggans as $pelanggan)
                                                <option value="{{ $pelanggan->id }}" {{ old('pelanggan_id') == $pelanggan->id ? 'selected' : '' }}>
                                                    {{ $pelanggan->nama }} - {{ $pelanggan->nomor_pelanggan }}
                                                </option>
                                                @endforeach
                                            </select>
                                            @error('pelanggan_id')
                                                <div class="invalid-feedback d-block">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Form Actions -->
                        <div class="form-group mt-4">
                            <div class="row">
                                <div class="col-md-6">
                                    <button type="submit" class="btn bg-gradient-primary mb-0 w-100">
                                        <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">save</i> Simpan User
                                    </button>
                                </div>
                                <div class="col-md-6">
                                    <a href="{{ route('user-management.index') }}" class="btn bg-gradient-secondary mb-0 w-100">
                                        <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">arrow_back</i> Kembali
                                    </a>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Form validation
    const form = document.querySelector('form');
    const submitBtn = form.querySelector('button[type="submit"]');
    
    form.addEventListener('submit', function(e) {
        const password = document.getElementById('password').value;
        const passwordConfirmation = document.getElementById('password_confirmation').value;
        
        if (password !== passwordConfirmation) {
            e.preventDefault();
            alert('Password dan konfirmasi password tidak sama!');
            return false;
        }
        
        // Show loading state
        submitBtn.innerHTML = '<i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle; animation: spin 1s linear infinite;">sync</i> Menyimpan...';
        submitBtn.disabled = true;
    });
    
    // Avatar preview
    const avatarInput = document.getElementById('avatar');
    avatarInput.addEventListener('change', function(e) {
        const file = e.target.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                // Create preview if not exists
                let preview = document.getElementById('avatar-preview');
                if (!preview) {
                    preview = document.createElement('img');
                    preview.id = 'avatar-preview';
                    preview.className = 'img-thumbnail mt-2';
                    preview.style.maxWidth = '150px';
                    preview.style.maxHeight = '150px';
                    avatarInput.parentNode.appendChild(preview);
                }
                preview.src = e.target.result;
            };
            reader.readAsDataURL(file);
        }
    });
});
</script>
@endsection