@extends('layouts.app', ['module'=>'Profil Düzenle', 'moduleTitle' => 'Profil Ayarları', 'display' => true])
@section('bodyClass', 'dashboard-main')
@section('content')
<!-- Dropzone CSS -->
<link href="https://cdn.jsdelivr.net/npm/dropzone@5.9.3/dist/min/dropzone.min.css" rel="stylesheet">

<!-- Dropzone JS -->
<script src="https://cdn.jsdelivr.net/npm/dropzone@5.9.3/dist/min/dropzone.min.js"></script>
<style>
    .dropzone {
    min-height: 150px; /* İstediğiniz yükseklik */
    border: 2px solid #007bff; /* Özel sınır rengi */
    background: #f8f9fa; /* Açık arka plan rengi */
    padding: 20px;
    border-radius: 8px; /* Kenarları yuvarlatma */
}

.dropzone .dz-message {
    color: #007bff; /* Mesajın rengini değiştirme */
    font-size: 16px; /* Font boyutu */
}

.dropzone .dz-clickable {
    cursor: pointer; /* Tıklanabilir hale getirme */
}
</style>
<div class="col-md-12">
                <div class="card">
                    <div class="card-content collpase show">
                        <div class="card-body">

                            <form class="form" id="infoAddUser" method="post">

                            @csrf
                                <input type="hidden" name="_token" value="2H8RRDLH4WrSWTlMKrIGpwk4LIArTbH3Aol5zGxJ" autocomplete="off">                                <div class="form-body">
                                    <div class="row mt-2">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label>Kullanıcı Adı</label>
                                                <input type="text" class="form-control" placeholder="Kullanıcı Adı" value="{{auth()->user()->username}}" name="username">
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label>İsim Soyisim</label>
                                                <input type="text" class="form-control" placeholder="İsim Soyisim" value="{{auth()->user()->name}}" name="name">
                                            <br>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label>Şifre</label>
                                                <input type="text" class="form-control" placeholder="Şifre" value="" name="password">
                                            <br>
                                            </div>
                                        </div>
                                    </div>



                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group">
                                            <input type="hidden" id="avatar" name="avatar" value="{{$user->avatar}}">
                                            @csrf
                                                <div
                                                    class="dropzone dropzone-area dz-clickable" id="avatar_zone">
                                                    <div class="dz-message">
                                                        <span class="m-dropzone__msg-desc">
                                                            Profil Fotoğrafı Yükleyiniz <span class="mini-text">(İsteğe
                                                                Bağlı)</span>
                                                
                                                            </span>
                                                    </div>
                                                </div>
                                                <br>
                                            </div>
                                        </div>
                                    </div>



                                </div>
                                <button type="submit" class="btn btn-outline-success">
                                        <i class="ft-check"></i> Kaydet
                                    </button>

                            </form>

                        </div>
                    </div>
                </div>
            </div>
@endsection
@section('scripts')
    <script>
        let avatar = [],

            avatarZone = new Dropzone("#avatar_zone", {
                url: "{{ route('useravatar') }}", // Set the url for your upload script location
                paramName: "file", // The name that will be used to transfer the file
                maxFiles: 1,
                maxFilesize: 1024, // MB
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                },
                addRemoveLinks: true,
                removedfile: function(file) {

                    var _ref;
                    return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file
                            .previewElement) :
                        void 0;


                },
                accept: function(file, done) {
                    done();

                }
            });
        avatarZone.on("complete", function(file) {
            console.log(file)
            if (file.xhr) {
                $('#avatar').val(JSON.parse(file.xhr.response).file_url)
            } else {
                return;
            }
        });
        $(document).on("submit", "#infoAddUser", function(event) {
            event.preventDefault();
            var serialized = $(this).serializeArray();

            $.ajax({
                method: 'post',
                dataType: 'json',
                data: serialized,

                url: "{{ route('profileedit', $user->id ) }}",


                success: function(result) {
                    if (result.status === true) {
                        toastr.success("Profil ayarlarınız değiştirildi");
                        setTimeout(
                            function() {
                                window.location.reload();
                            }, 1500);
                    } else {
                        toastr.warning(result.error);
                    }
                },
                error: function() {
                    toastr.error("Bağlantı Hatası Tekrar Deneyin");
                    console.log(xhr.responseText);
                }
            });
        });
        </script>
@endsection