@extends('layouts.app')

@section('content')
    <div class="main-content">
        @if ($errors->any())
            <div class="alert alert-danger" role="alert">
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div><br />
        @endif
        <script>
            window.setTimeout(function() {
                $(".alert").fadeTo(500, 0).slideUp(500, function(){
                    $(this).remove();
                });
            }, 4000);
        </script>

        <div class="card">
            <h4 class="card-title">Kullanıcı Ekle</h4>

            <div class="card-body">
                <form method="post" action="{{ route('kullanicilar.store') }}" enctype="multipart/form-data">
                    @csrf
                    <div class="form-group">
                        <label for="name">Adı Soyadı:</label>
                        <input type="text" class="form-control form-control-lg" name="name"  />
                    </div>
                    <div class="form-group">
                        <label for="name">E-posta:</label>
                        <input type="email" class="form-control form-control-lg" name="email"  />
                    </div>
                    <div class="form-group">
                        <label for="password">Şifre:</label>
                        <input type="password" class="form-control form-control-lg"  name="password" id="password"  />
                    </div>
                    <div class="form-group">
                        <label for="password">Tekrar Şifre:</label>
                        <input type="password" class="form-control form-control-lg"  name="password" id="confirm_password"  />
                    </div>
                    <div class="form-group">
                        <label for="resim">Profil Resimi</label>
                        <input type="file" data-provide="dropify" name="resim" id="resim" />
                    </div>




                    <script>
                        var password = document.getElementById("password")
                            , confirm_password = document.getElementById("confirm_password");

                        function validatePassword(){
                            if(password.value != confirm_password.value) {
                                confirm_password.setCustomValidity("Şifreler Eşleşmiyor !");
                            } else {
                                confirm_password.setCustomValidity('');
                            }
                        }

                        password.onchange = validatePassword;
                        confirm_password.onkeyup = validatePassword;
                    </script>

                    <button type="submit" class="btn btn-primary">Ekle</button>
                </form>
            </div>
        </div>




    </div><!--/.main-content -->
@endsection