@extends('Dashboard.layouts.main')

@section('title', 'Edit Profil')

@section('breadcrumb')
<li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
<li class="breadcrumb-item active">Edit Profil</li>
@endsection

@section('page-title', 'Edit Profil Pengguna')

@section('content')
<div class="row">
    <div class="col-12">
        <div class="card-box">
            @if(session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                {{ session('success') }}
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            @endif

            <form action="{{ route('profile.update') }}" method="POST">
                @csrf
                @method('PUT')
                
                <div class="form-group">
                    <label for="name">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) }}" required>
                    @error('name')
                        <div class="invalid-feedback">
                            {{ $message }}
                        </div>
                    @enderror
                </div>
                
                <div class="form-group">
                    <label for="email">Email <span class="text-danger">*</span></label>
                    <input name="email" type="email" class="form-control" 
                           id="email" value="{{ $user->email }}" >
                </div>
                @if($user->role === 'admin')
                <div class="form-group">
                    <label for="gender">Jenis Kelamin</label>
                    <select name="gender" class="form-control" id="gender">
                        <option value="Laki-laki" {{ $user->gender == 'Laki-laki' ? 'selected' : '' }}>Laki-laki</option>
                        <option value="Perempuan" {{ $user->gender == 'Perempuan' ? 'selected' : '' }}>Perempuan</option>
                    </select>
                </div>
                @endif

                @if($user->role === 'pelanggan')
                <div class="form-group">
                    <label for="phone">Nomor Telepon <span class="text-danger">*</span></label>
                    <input name="phone" type="text" class="form-control" 
                            id="phone" value="{{ $user->phone }}" 
                            oninput="this.value = this.value.replace(/[^0-9]/g, '')" 
                            maxlength="15" placeholder="Masukkan hanya angka">
                </div>
                
                <div class="form-group">
                    <label for="business_name">Nama Usaha <span class="text-danger">*</span></label>
                    <input type="text" class="form-control @error('business_name') is-invalid @enderror" 
                           id="business_name" name="business_name" value="{{ old('business_name', $user->business_name) }}" required>
                    @error('business_name')
                        <div class="invalid-feedback">
                            {{ $message }}
                        </div>
                    @enderror
                </div>
                
                <div class="form-group">
                    <label for="business_address">Alamat Usaha <span class="text-danger">*</span></label>
                    <textarea class="form-control @error('business_address') is-invalid @enderror" 
                              id="business_address" name="business_address" rows="3" required>{{ old('business_address', $user->business_address) }}</textarea>
                    @error('business_address')
                        <div class="invalid-feedback">
                            {{ $message }}
                        </div>
                    @enderror
                </div>
                @endif
                
                <div class="form-group">
                    <label for="current_password">Password Lama <small class="text-muted">(Diperlukan untuk mengubah password)</small></label>
                    <div class="input-group">
                        <input type="password" class="form-control @error('current_password') is-invalid @enderror" 
                               id="current_password" name="current_password">
                        <div class="input-group-append">
                            <button class="btn btn-secondary toggle-password" type="button" data-target="current_password">
                                <i class="mdi mdi-eye"></i>
                            </button>
                        </div>
                    </div>
                    @error('current_password')
                        <div class="invalid-feedback">
                            {{ $message }}
                        </div>
                    @enderror
                </div>
                
                <div class="form-group">
                    <label for="password">Password Baru <small class="text-muted">(Kosongkan jika tidak ingin mengubah password)</small></label>
                    <div class="input-group">
                        <input type="password" class="form-control @error('password') is-invalid @enderror" 
                               id="password" name="password">
                        <div class="input-group-append">
                            <button class="btn btn-secondary toggle-password" type="button" data-target="password">
                                <i class="mdi mdi-eye"></i>
                            </button>
                        </div>
                    </div>
                    @error('password')
                        <div class="invalid-feedback">
                            {{ $message }}
                        </div>
                    @enderror
                </div>
                
                <div class="form-group">
                    <label for="password_confirmation">Konfirmasi Password Baru</label>
                    <div class="input-group">
                        <input type="password" class="form-control" 
                               id="password_confirmation" name="password_confirmation">
                        <div class="input-group-append">
                            <button class="btn btn-secondary toggle-password" type="button" data-target="password_confirmation">
                                <i class="mdi mdi-eye"></i>
                            </button>
                        </div>
                    </div>
                </div>
                
                <div class="form-group text-right mb-0">
                    <a href="{{ route('dashboard') }}" class="btn btn-secondary">Batal</a>
                    <button type="submit" class="btn btn-primary">Simpan Perubahan</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    $(document).ready(function() {
        $('.toggle-password').click(function() {
            var target = $(this).data('target');
            var input = $('#' + target);
            var icon = $(this).find('i');
            
            if (input.attr('type') === 'password') {
                input.attr('type', 'text');
                icon.removeClass('mdi-eye').addClass('mdi-eye-off');
            } else {
                input.attr('type', 'password');
                icon.removeClass('mdi-eye-off').addClass('mdi-eye');
            }
        });
    });
</script>
@endsection