@extends('admin.dashboard.layouts.app')

@section('title', panel_setting_title("Kullanıcı Grubu Rol Yetkilendirmesi"))

@push('style-libraries')
    <link rel="stylesheet" href="{{asset('dashboard/plugins/feather/feather.css')}}">

    <style>
        .form-container {
            display: flex;
            flex-direction: column;
            gap: 20px;
            margin-top: 20px;
        }

        .role-card {
            border: 1px solid #ddd;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            padding: 20px;
            background-color: #ffffff;
            height: 400px;
            overflow-y: auto;
        }

        .role-card h5 {
            text-align: center;
            font-size: 1.2rem;
            margin-bottom: 15px;
            color: #555;
        }

        .list-group-item {
            cursor: pointer;
            padding: 10px 15px;
            margin-bottom: 5px;
            border-radius: 5px;
            transition: all 0.2s;
        }

        .list-group-item:hover {
            background-color: #f1f1f1;
            transform: scale(1.02);
        }

        .list-group-item.selected {
            background-color: #007bff;
            color: white;
        }

        .action-buttons {
            display: flex;
            justify-content: space-around;
            align-items: center;
            margin-top: 10px;
        }

        .btn {
            padding: 10px 20px;
            font-size: 1rem;
            border-radius: 5px;
        }

        .btn-primary {
            background-color: #007bff;
            border: none;
        }

        .btn-primary:hover {
            background-color: #0056b3;
        }
    </style>

@endpush

@section('content')
<div class="page-wrapper">
    <div class="content container-fluid">
        <!-- Page Header -->
        <div class="page-header">
            <div class="row align-items-center">
                <div class="col">
                    <h3 class="page-title">Kullanıcı Grubu Rol Yetkilendirmesi</h3>
                    <ul class="breadcrumb">
                        <li class="breadcrumb-item"><a href="#">Giriş Kontrolü</a></li>
                        <li class="breadcrumb-item active">Kullanıcı Grubu Rol Yetkilendirmesi</li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- /Page Header -->

        <!-- Kullanıcı Grubu ve Rol Yetkilendirme -->
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-body">
                        <form action="#" method="POST">
                            @csrf
                            <!-- Kullanıcı Grubu -->
                            <div class="form-group">
                                <label for="userGroup" class="form-label">Kullanıcı Grubu</label>
                                <select id="userGroup" class="form-select">
                                    <option value="" selected>Lütfen seçin</option>
                                    <option value="ADMIN_ROLE">ADMIN_ROLE</option>
                                    <option value="Operation Role">Operation Role</option>
                                    <option value="IT User">IT User</option>
                                    <option value="Risk Management Role">Risk Management Role</option>
                                    <option value="Internal Control Role">Internal Control Role</option>
                                    <option value="Sales Role">Sales Role</option>
                                    <option value="Operation Manager">Operation Manager</option>
                                    <option value="Denetim">Denetim</option>
                                    <option value="Sales Director">Sales Director</option>
                                    <option value="Product Development">Product Development</option>
                                    <option value="Test Operasyon">Test Operasyon</option>
                                </select>
                            </div>

                            <!-- Mevcut ve Seçilmiş Roller -->
                            <div class="row mt-4">
                                <div class="col-md-6">
                                    <div class="role-card">
                                        <h5>Mevcut Roller</h5>
                                        <hr>
                                        <ul class="list-group" id="availableRoles">
                                            <li class="list-group-item" data-role="ADMIN_ROLE">ADMIN_ROLE</li>
                                            <li class="list-group-item" data-role="Operation Role">Operation Role</li>
                                            <li class="list-group-item" data-role="IT User">IT User</li>
                                            <li class="list-group-item" data-role="Risk Management Role">Risk Management Role</li>
                                            <li class="list-group-item" data-role="Internal Control Role">Internal Control Role</li>
                                            <li class="list-group-item" data-role="Sales Role">Sales Role</li>
                                            <li class="list-group-item" data-role="Operation Manager">Operation Manager</li>
                                            <li class="list-group-item" data-role="Denetim">Denetim</li>
                                            <li class="list-group-item" data-role="Sales Director">Sales Director</li>
                                            <li class="list-group-item" data-role="Product Development">Product Development</li>
                                            <li class="list-group-item" data-role="Test Operasyon">Test Operasyon</li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="role-card">
                                        <h5>Seçilmiş Roller</h5>
                                        <hr>
                                        <ul class="list-group" id="selectedRoles">
                                            <!-- Seçilen roller buraya dinamik olarak eklenecek -->
                                        </ul>
                                    </div>
                                </div>
                            </div>

                            <!-- Kaydet Butonu -->
                            <div class="text-end mt-4">
                                <button type="submit" class="btn btn-primary">Kaydet</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <!-- /Kullanıcı Grubu ve Rol Yetkilendirme -->
    </div>
</div>
@endsection
@push('script-libraries')
    <script src="{{asset('dashboard/plugins/datatables/datatables.min.js')}}"></script>
    <script src="{{asset('dashboard/plugins/slimscroll/jquery.slimscroll.min.js')}}"></script>
@endpush

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const availableRoles = document.getElementById('availableRoles');
        const selectedRoles = document.getElementById('selectedRoles');

        // Mevcut rollerden seçilmiş rollere taşıma
        availableRoles.addEventListener('click', function(event) {
            if (event.target && event.target.tagName === 'LI') {
                const role = event.target.cloneNode(true);

                // Sağ tabloya eklenen role geri taşınma yeteneği ekle
                role.addEventListener('click', function() {
                    // Role zaten mevcutsa tekrar ekleme
                    if (!Array.from(availableRoles.children).some(item => item.textContent === this.textContent)) {
                        availableRoles.appendChild(this); // Sol tabloya geri ekle
                    }
                    selectedRoles.removeChild(this); // Sağ tablodan kaldır
                });

                // Role zaten seçilmişse tekrar ekleme
                if (!Array.from(selectedRoles.children).some(item => item.textContent === event.target.textContent)) {
                    selectedRoles.appendChild(role); // Sağ tabloya ekle
                    availableRoles.removeChild(event.target); // Sol tablodan kaldır
                }
            }
        });

        // Seçilmiş rollerden mevcut rollere geri taşıma
        selectedRoles.addEventListener('click', function(event) {
            if (event.target && event.target.tagName === 'LI') {
                const role = event.target.cloneNode(true);

                // Sol tabloya zaten eklenmişse tekrar ekleme
                if (!Array.from(availableRoles.children).some(item => item.textContent === event.target.textContent)) {
                    availableRoles.appendChild(role); // Sol tabloya ekle
                    role.addEventListener('click', function() {
                        // Role zaten seçilmişse tekrar ekleme
                        if (!Array.from(selectedRoles.children).some(item => item.textContent === this.textContent)) {
                            selectedRoles.appendChild(this); // Sağ tabloya ekle
                        }
                        availableRoles.removeChild(this); // Sol tablodan kaldır
                    });
                }
                selectedRoles.removeChild(event.target); // Sağ tablodan kaldır
            }
        });
    });
</script>
@endpush