@extends('layouts.app', ['module' => 'Kullanıcı - Ekle', 'moduleTitle' => 'Kullanıcı Ekle'])
@section('bodyClass', 'dashboard-main')

@section('content')

<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>
<!-- 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>

    <div class="content-body">
        <div class="row">

            <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">
                            <input name="_method" type="hidden" value="PATCH">
                                @csrf
                                <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ı"
                                                    name="username" value="{{$user->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"
                                                    name="name" value="{{$user->name}}">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label>E-posta</label>
                                                <input type="text" class="form-control" placeholder="E-posta"
                                                    name="email" value="{{$user->email}}">
                                            </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>
                                              </div>
                                          </div>
                                      </div>
                                      <div class="col-md-2">
                                              <div class="mt-2 mr-1 text-center">
                                                  <span>Yüklü Resim</span>
                                                  <img src="{{asset('storage/'.$user->avatar)}}" alt="Holi" class="w-100 rounded img-fluid float-left mr-2 mb-1" width="400" height="300" data-action="zoom" style="">
                                              </div>
                                          </div>
                                  </div>

                                    <h4 class="form-section"><i class="la la-file-text"></i> Erişim İzni Verilecek Sayfalar
                                    </h4>
                                    <div class="row">
                                    @php
                                    $permname = [];
                                    foreach ($user->permissions as $key => $value) {
                                    $permname[]= $value->id;

                                    }
                                    @endphp
                                @foreach($permissions as $key =>$value)
                                        <div class="col-lg-4 col-sm-6 mt-2">
                                            <div class="security_box">
                                                <input  {{ in_array( $value->id,$permname) ? 'checked' : '' }}
                                                 class="inp-cbx" id="cbx-create_offer{{$value->id}}" type="checkbox"
                                                    name="permission[]" style="display: none;" value="{{$value->id}}">
                                                <label class="cbx user-cbx" for="cbx-create_offer{{$value->id}}">
                                                    {{ $value->yetkiad}} <div class="promise-box">
                                                        <span>
                                                            <svg width="12px" height="9px" viewBox="0 0 12 9">
                                                                <polyline points="1 5 4 8 11 1"></polyline>
                                                            </svg>
                                                        </span>
                                                    </div>
                                                </label>
                                            </div>

                                        </div>
                                    @endforeach
                                    </div>


                                </div>

                                <div class="form-actions right">
                                    <button type="button" class="btn btn-outline-warning mr-1"
                                        onclick="window.location.href ='{{ route('dashboard') }}'">
                                        <i class="ft-x"></i> Çık
                                    </button>
                                    <button type="submit" class="btn btn-outline-success">
                                        <i class="ft-check"></i> Kaydet
                                    </button>
                                </div>
                            </form>

                        </div>
                    </div>
                </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('users.update',$user->id) }}",
                success: function(result) {
                    if (result.status === true) {
                        toastr.success("Kullanıcı Başarıyla Kaydedildi");
                        setTimeout(
                            function() {
                                window.location.reload();
                            }, 1500);
                    } else {
                        toastr.warning(result.error);
                    }
                },
                error: function() {
                    toastr.error("Bağlantı Hatası Tekrar Deneyin");
                }
            });
        });
    </script>
@endsection