@extends('layouts.main')
@section('container')
    <div class="card shadow mb-4">
        <div class="card-header py-3 text-center">
            <h5 class="m-0 font-weight-bold text-primary ">{{ $heading }}</h5>
        </div>

        <div class="card-body">
            <form action ="/edit_user/update/{{ $data->id }}" method="post">
                @method('patch')
                @csrf
                <div class="form-group">
                    <label>Nama Lengkap</label>
                    <input type="text" name="nama_lengkap" class="form-control @error('nama_lengkap')is-invalid @enderror"
                        value="{{ old('nama_lengkap', $data->nama_lengkap) }}">
                    @error('nama_lengkap')
                        <div class="invalid-feedback">
                            {{ $message }}
                        </div>
                    @enderror
                </div>
                <div class="form-group">
                    <label>Username</label>
                    <input type="text" name="username" class="form-control @error('username')is-invalid @enderror"
                        value="{{ old('username', $data->username) }}">
                    @error('username')
                        <div class="invalid-feedback">
                            {{ $message }}
                        </div>
                    @enderror
                </div>
                <div class="form-group">
                    <label>Password</label>
                    <input type="text" name="password" class="form-control @error('password')is-invalid @enderror"
                        value="{{ old('password', $data->password) }}">
                    @error('password')
                        <div class="invalid-feedback">
                            {{ $message }}
                        </div>
                    @enderror
                </div>


                <div class="modal-footer">
                    <button class="btn btn-primary" type="submit">Update</button>
                </div>
                <hr>

            </form>
        </div>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', function() {

            var inputs = document.querySelectorAll('.form-control');
            inputs.forEach(function(input) {
                input.addEventListener('focus', function() {
                    this.classList.remove('is-invalid');
                    var feedback = this.parentNode.querySelector('.invalid-feedback');
                    if (feedback) {
                        feedback.style.display = 'none';
                    }
                });
            });
        });
    </script>
@endsection