@extends('layouts.app', ['module' => 'Kullanıcı - Ekle', 'moduleTitle' => 'Kullanıcı Ekle'])
@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="card basic-data-table">
        <div class="card-header">
            <h5 class="card-title mb-0">Kullanıcılar</h5>
        </div>
        <div class="card-body">
            <form class="form" id="infoAddUser" method="post">
                @csrf
                    <div class="row gy-30">
                        <div class="col-md-6">

                                <label class="form-label">Kullanıcı Adı</label>
                                <input type="text" class="form-control" placeholder="Kullanıcı Adı" name="username">
                            </div>
                        <div class="col-md-6">

                                <label class="form-label">İsim Soyisim</label>
                                <input type="text" class="form-control" placeholder="İsim Soyisim" name="name">

                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">

                                <label class="form-label">E-posta</label>
                                <input type="text" class="form-control" placeholder="E-posta" name="email">
                            </div>
                        <div class="col-md-6">

                                <label class="form-label">Şifre</label>
                                <input type="text" class="form-control" placeholder="Şifre" name="password">
                            </div>
                        </div>

                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <input type="hidden" id="avatar" name="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>

                    <h4 class="form-section"><i class="la la-file-text"></i> Erişim İzni Verilecek Sayfalar
                    </h4>
                    <div class="row">
                        @foreach ($permissions as $key => $value)
                            <div class="col-lg-4 col-sm-6 mt-2">
                                <div class="check-box">
                                    <input class="inp-cbx input-label" id="cbx-create_offer{{ $value->id }}"
                                        type="checkbox" name="permission[]" style="display: none;"
                                        value="{{ $value->id }}">
                                    <label class="cbx user-cbx form-control" for="cbx-create_offer{{ $value->id }}">
                                        <iconify-icon style="display:none" icon="mage:check-circle-fill"
                                            id="checked"></iconify-icon>
                                        <div class="non-checked"></div>
                                        {{ $value->yetkiad }}
                                    </label>
                                </div>
                            </div>
                        @endforeach
                    </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>
    <style>
        .check-box label {
            display: flex;
            flex-direction: row;
            align-content: center;
            align-items: center;
            gap: 5px;
        }

        .check-box .inp-cbx:checked+label {
            position: relative;
        }


        .check-box label #checked {
            color: #487fff;
            position: absolute;
            font-size: 25px;
            left: 18px;
        }

        .check-box label .non-checked {
            display: block;
            width: 22px;
            height: 22px;
            background: #f5f6fa;
            border-radius: 100%;
            border: 1px solid #ddd;
        }


        .check-box .inp-cbx:checked+label .non-checked {
            opacity: 0 !important;
        }

        .check-box .inp-cbx:checked+label #checked {
            display: block !important;
        }

        .check-box {
            margin-bottom: 16px;
        }
    </style>
@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.store') }}",
                success: function(result) {
                    if (result.status === true) {
                        toastr.success("Kullanıcı Başarıyla Eklendi");
                        setTimeout(
                            function() {
                                window.location.reload();
                            }, 1500);
                    } else {
                        toastr.warning(result.error);
                    }
                },
                error: function() {
                    toastr.error("Bağlantı Hatası Tekrar Deneyin");
                }
            });
        });
    </script>
@endsection