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

@section('title', panel_setting_title("Kullanıcı Grubu Yönetimi"))
@if (request()->has('iframe'))
    @section('menuHidden', 1)
@endif
@push('style-libraries')
    <!-- Feather CSS -->
    <link rel="stylesheet" href="{{ asset('dashboard/plugins/feather/feather.css') }}">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

        * {
            font-family: "Montserrat", serif;
        }

        .bg-primary-custom {
            color: #0052ea !important;
            background-color: rgba(33, 74, 147, 0.1) !important;
            width: 30px !important;
            height: 30px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
        }
  .custom-th {
            padding: 20px !important;
            background-color: #C9E4FF !important;
            color: #333 !important;
        }

        .custom-th:first-child {
            border-top-left-radius: 10px;
        }

        .custom-th:last-child {
            border-top-right-radius: 10px;
        }
        .btn-danger-custom {
            color: #b51515 !important;
            background-color: rgb(167 43 55 / 10%) !important;
        }

        .btn-success-custom {
            background-color: rgb(22 167 95 / 10%) !important;
            color: #258b41 !important;
        }

        .btn-warning-custom {
            background-color: rgba(220, 184, 53, 0.1) !important;
            color: #dcb535 !important;
        }

        .btn-info-custom {
            background-color: rgba(220, 53, 214, 0.1) !important;
            color: #dc35c3 !important;
        }

        .btn-primary-custom {
            background: linear-gradient(to right, #cde3fe, #cde3fe) !important;
             color: #3a3a3a !important;;
            border: none !important;
        }

        .svg-icon-bg {
            border-radius: 12px;
            background-color: #C9E4FF;
            width: 62px;
            height: 62px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .svg-icon-bg i {
            color: #1126aa;
        }

        .mini-card-title {
            color: #333;
            font-size: 20px;
            font-style: normal;
            font-weight: 600;
            line-height: normal;
        }

        .price {
            color: #1126aa;
            font-size: 28px;
            font-style: normal;
            font-weight: 700;
            line-height: normal;
        }

        .bg-danger-custom {
            color: #F83333;
            font-size: 12px;
            font-style: normal;
            font-weight: 500;
            line-height: normal;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 74px;
            height: 23px;
            border-radius: 2px;
            background-color: #FFF0F0;
        }

        .mini-card-bg-custom {
            border-radius: 8px;
            background-color: #FFF;
            padding: 24px
        }

        .success-item {
            font-size: 28px;
            color: #1126aa;
            font-weight: 700;
        }

        #polarChart {
            height: 400px !important;
            margin: 25px auto;
            height: 82% !important;
        }

        #dashboardHomeTable {
            width: 100%;
            border-collapse: collapse;
            table-layout: fixed;
            height: 400px !important;
        }

        #dashboardHomeTable th,
        #dashboardHomeTable td {
            padding: 12px;
            text-align: start;
        }

        #dashboardHomeTable th {
            padding: 20px;
            background-color: #C9E4FF;
            color: #333;
        }

        #dashboardHomeTable th:first-child {
            border-top-left-radius: 10px;
        }

        #dashboardHomeTable th:last-child {
            border-top-right-radius: 10px;
        }

        @media (max-width: 768px) {
            #dashboardHomeTable {
                width: 100%;
                font-size: 14px;
            }

            #dashboardHomeTable th,
            #dashboardHomeTable td {
                padding: 8px;
            }

            #dashboardHomeTable .container {
                padding: 10px;
            }

            #dashboardHomeTable .btn-details {
                font-size: 12px;
            }
        }

        @media (max-width: 480px) {

            #dashboardHomeTable th,
            #dashboardHomeTable td {
                display: block;
                width: 100%;
                text-align: left;
                padding: 10px 15px;
            }

            #dashboardHomeTable tr {
                margin-bottom: 20px;
            }

            #dashboardHomeTable .badge {
                display: inline-block;
                margin-top: 5px;
            }

            #dashboardHomeTable th:first-child {
                border-top-left-radius: 0px !important;
            }

            #dashboardHomeTable th:last-child {
                border-top-right-radius: 0px !important;
            }

        }

        .btn-details {
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 35px;
            width: 35px;
            margin: 0 auto;
            background-color: #C9E4FF;
            color: #0056b3;
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            cursor: pointer;
        }

        .btn-details:hover {
            background-color: #a3caf0;
            color: #0056b3;
            transition: 0.5s;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 35px;
            width: 35px;
            margin: 0 auto;
        }

        .btn-details i {
            font-size: 16px;
            margin: 0;
        }


        td {
            vertical-align: middle;
        }


        .btn-success-custom {
            background-color: #28a745;
            color: white;
            padding: 5px 10px;
            border-radius: 15px;
            font-weight: 500;
        }

        .btn-danger-custom {
            background-color: #dc3545;
            color: white;
            padding: 5px 10px;
            border-radius: 15px;
            font-weight: 500;
        }

        .btn-warning-custom {
            background-color: #ffc107;
            color: white;
            padding: 5px 10px;
            border-radius: 15px;
            font-weight: 500;
        }

        .btn-info-custom {
            background-color: #17a2b8;
            color: white;
            padding: 5px 10px;
            border-radius: 15px;
            font-weight: 500;
        }

        .username-last {
            color: #1A3C40;
            font-size: 16px;
            font-style: normal;
            font-weight: 700;
            line-height: normal;
        }

        .price-last {
            font-size: 20px;
            font-style: normal;
            font-weight: 600;
            line-height: normal;
        }

        .height-custom>div {
            margin: 16px;
        }

        .height-custom-test {
            border-radius: 20px;
            background-color: white;
        }

        .height-custom {
            height: 400px !important;
            overflow: auto !important;
        }

        .height-custom::-webkit-scrollbar {
            width: 4px;
        }

        /* Track */
        .height-custom::-webkit-scrollbar-track {
            border-radius: 10px;
        }

        /* Handle */
        .height-custom::-webkit-scrollbar-thumb {
            background: #0057b34a;
            border-radius: 10px;
        }

        /* Handle on hover */
        .height-custom::-webkit-scrollbar-thumb:hover {
            background: #0056b3;
        }

        .date-last {
            color: rgba(128, 128, 128, 0.49);
        }

        .text-primary-color {
            color: #1126AA;
            font-weight: 600;
        }

        .btn-yellow-custom {
            color: #333;
            background-color: #E7FC9A
        }

        .btn-yellow-custom:hover {
            color: #333;
            background-color: #d3e987;
            transition: 0.5s;
        }


        .position-sticky {
            position: sticky;
            top: 10px;
            background-color: white;
            padding-top: 0px;
            margin-top: 0;
        }

        .username-last,
        .date-last,
        .price-last {
            font-size: 14px;
        }
    </style>
@endpush

@section('content')
    <div class="page-wrapper">
        <div class="content container-fluid">
                        <!-- Page Header -->
                        <div class=" card rounded-3    ">
                            <div class="card-body p-4">
                                <div class="row align-items-center">
                                    <div class="col-lg-8">
                                        <!-- Title and Icon -->
                                        <div class="d-flex align-items-center mb-2">
                                            <div class="  rounded-3 p-2 me-3 svg-icon-bg">
                                                <i class="fas fa-users svg-icon fs-4"></i>
                                            </div>
                                            <div>
                                                <h1 class=" fs-3 fw-semibold mb-0 text-white-primary-color">Kullanıcı Grubu Yönetimi</h1>
                                                <nav aria-label="breadcrumb">
                                                    <ol class="breadcrumb mb-2">
                                                        <li class="breadcrumb-item">
                                                            <a href="#"
                                                                class=" text-white-primary-color text-opacity-75 text-decoration-none d-flex align-items-center">
                                                                Kullanıcı
                                                    Grupları </a>
                                                        </li>
                                                        <li class="text-white-primary-color breadcrumb-item  text-opacity-75 active"
                                                            aria-current="page">
                                                            Kullanıcı Grubu Düzenle </li>
                                                    </ol>
                                                </nav>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- Action Button -->
                                    {{-- <div class="col-lg-4 text-lg-end mt-3 mt-lg-0">
                                        <a href="{{ route('admin.dashboard.user-management.user-create') }}"
                                            class="btn btn-yellow-custom d-inline-flex align-items-center gap-2">
                                            <i class="fas fa-plus-circle"></i>
                                            <span>Yeni Kullanıcı</span>
                                        </a>
                                    </div> --}}
                                </div>
                            </div>
                        </div>
                        <!-- Page Header -->


            <!-- Kullanıcı Grubu Formu -->

            <div class="card border-0 shadow-sm">

                <div class="p-3">
                    <form method="POST">
                        <!-- Grup Bilgileri -->
                        <div class="py-3 d-flex align-items-center">
                            <h6 class="mb-0 text-primary-color" >Grup Bilgileri</h6>
                        </div>
                        <div class="row">
                            <div class="col-lg-4 col-12 mb-3">
                                <div class="form-floating">
                                    <input type="text" name="name" value="{{ $group->name ?? '' }}"
                                        class="form-control" id="groupName" placeholder="Grup İsmi">
                                    <label for="groupName">Grup İsmi</label>
                                </div>
                            </div>
                            <div class="col-lg-4 col-12 mb-3">
                                <div class="form-floating ">
                                    <input type="text" name="url" value="{{ $group->url ?? '' }}"
                                        class="form-control" id="dashboardUrl" placeholder="/">
                                    <label for="dashboardUrl">Gösterge Paneli URL</label>
                                </div>

                            </div>
                            <div class="col-lg-4 col-12 mb-3">
                                <div class="form-floating">
                                    <select class="form-select " name="user_type" id="userType">
                                        <option value="0">Tümü</option>
                                        @foreach ($userTypes as $userType)
                                            <option value="{{ $userType->value }}">{{ $userType->name }}</option>
                                        @endforeach
                                    </select>
                                    <label for="userType">Kullanıcı Türü</label>
                                </div>
                            </div>

                        </div>

                        <!-- Kullanıcılar -->
                        <div class="my-4">
                            <div class="mb-4">
                                <div class="d-flex align-items-center">
                                    <h6 class="text-primary-color">
                                        Kullanıcılar
                                    </h6>
                                </div>
                            </div>
                            <div class=" ">
                                <div class="row g-3">
                                    <div class="col-md-6">
                                        <div class="accordion" id="usersAccordion1">
                                            <!-- Mevcut Kullanıcılar -->
                                            <div class="accordion-item border-0 shadow-sm">
                                                <h2 class="accordion-header">
                                                    <button class="accordion-button collapsed "
                                                        type="button" data-bs-toggle="collapse"
                                                        data-bs-target="#collapseAvailableUsers">
                                                        <span class="">Mevcut Kullanıcılar</span>
                                                    </button>
                                                </h2>
                                                <div id="collapseAvailableUsers" class="accordion-collapse collapse">
                                                    <div class="accordion-body p-0">
                                                        <div class="list-group list-group-flush" id="userAvailableList">
                                                            @forelse($users as $user)
                                                                @if (!in_array($user->id, $groupUsers))
                                                                    <button type="button"
                                                                        class="list-group-item list-group-item-action border-0 d-flex align-items-center p-3 usersList {{ $user->type }}"
                                                                        data-userid="{{ $user->id }}">
                                                                        <i class="bi bi-person text-success me-2"></i>
                                                                        {{ $user->full_name }}
                                                                    </button>
                                                                @endif
                                                            @empty
                                                            @endforelse
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="accordion" id="usersAccordion2">
                                            <!-- Seçili Kullanıcılar -->
                                            <div class="accordion-item border-0 shadow-sm">
                                                <h2 class="accordion-header">
                                                    <button class="accordion-button collapsed "
                                                        type="button" data-bs-toggle="collapse"
                                                        data-bs-target="#collapseSelectedUsers">
                                                        <span class="">Seçili Kullanıcılar</span>
                                                    </button>
                                                </h2>
                                                <div id="collapseSelectedUsers" class="accordion-collapse collapse">
                                                    <div class="accordion-body p-0">
                                                        <div class="list-group list-group-flush" id="userSelectedList">
                                                            @forelse($users as $user)
                                                                @if (in_array($user->id, $groupUsers))
                                                                    <button type="button"
                                                                        class="list-group-item list-group-item-action border-0 d-flex align-items-center p-3 usersList {{ $user->type }}"
                                                                        data-username="{{ $user->full_name }}"
                                                                        data-userid="{{ $user->id }}">
                                                                        <input type="hidden" name="users[]"
                                                                            value="{{ $user->id }}">
                                                                        <i
                                                                            class="bi bi-person-check text-primary me-2"></i>
                                                                        {{ $user->full_name }}
                                                                    </button>
                                                                @endif
                                                            @empty
                                                            @endforelse
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Roller -->
                        <div class="my-4">
                            <div class="mb-4">
                                <div class="d-flex align-items-center">
                                    <h6 class="text-primary-color">
                                        Roller
                                    </h6>
                                </div>
                            </div>
                            <div class="">
                                <div class="row g-3">
                                    <div class="col-md-6">
                                        <div class="accordion" id="rolesAccordion1">
                                            <!-- Mevcut Roller -->
                                            <div class="accordion-item border-0 shadow-sm">
                                                <h2 class="accordion-header">
                                                    <button class="accordion-button collapsed"
                                                        type="button" data-bs-toggle="collapse"
                                                        data-bs-target="#collapseAvailableRoles">
                                                        <span class="">Mevcut Roller</span>
                                                    </button>
                                                </h2>
                                                <div id="collapseAvailableRoles" class="accordion-collapse collapse">
                                                    <div class="accordion-body p-0">
                                                        <div class="list-group list-group-flush" id="roleAvailableList">
                                                            @forelse($roles as $role)
                                                                @if (!in_array($role->id, $groupRoles))
                                                                    <button type="button"
                                                                        class="list-group-item list-group-item-action border-0 d-flex align-items-center p-3"
                                                                        data-roleid="{{ $role->id }}">
                                                                        <i class="bi bi-shield text-warning me-2"></i>
                                                                        {{ $role->name }}
                                                                    </button>
                                                                @endif
                                                            @empty
                                                            @endforelse
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="accordion" id="rolesAccordion2">
                                            <!-- Seçili Roller -->
                                            <div class="accordion-item border-0 shadow-sm">
                                                <h2 class="accordion-header">
                                                    <button class="accordion-button collapsed"
                                                        type="button" data-bs-toggle="collapse"
                                                        data-bs-target="#collapseSelectedRoles">
                                                        <span class="">Seçili Roller</span>
                                                    </button>
                                                </h2>
                                                <div id="collapseSelectedRoles" class="accordion-collapse collapse">
                                                    <div class="accordion-body p-0">
                                                        <div class="list-group list-group-flush" id="roleSelectedList">
                                                            @forelse($roles as $role)
                                                                @if (in_array($role->id, $groupRoles))
                                                                    <button type="button"
                                                                        class="list-group-item list-group-item-action border-0 d-flex align-items-center p-3"
                                                                        data-roleid="{{ $role->id }}"
                                                                        data-rolename="{{ $role->name }}">
                                                                        <input type="hidden" name="roles[]"
                                                                            value="{{ $role->id }}">
                                                                        <i
                                                                            class="bi bi-shield-check text-primary me-2"></i>
                                                                        {{ $role->name }}
                                                                    </button>
                                                                @endif
                                                            @empty
                                                            @endforelse
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Submit Button -->
                        <div class="text-end">
                            <button type="submit" class="btn d-inline-flex align-items-center gap-2 px-4 py-2"
                                style="background: linear-gradient(to right, #214a93, #4f7bb5); color: white; border: none;">
                                <i class="fas fa-save"></i>
                                <span>Kaydet</span>
                            </button>
                        </div>
                    </form>
                </div>
            </div>




            <!-- /Kullanıcı Grubu Formu -->
        </div>
    </div>
@endsection

@push('script-libraries')
    <!-- Feather Icon JS -->
    <script src="{{ asset('dashboard/js/feather.min.js') }}"></script>
    <script src="{{ asset('dashboard/plugins/slimscroll/jquery.slimscroll.min.js') }}"></script>
@endpush

@push('scripts')
    <script>
        $(document).ready(function() {

            /**Kullanıcılar**/
            $(document).on("click", "#userAvailableList .list-group-item", function() {
                let userId = $(this).data("userid");
                let userName = $(this).html();
                $("#userSelectedList").append("<li class='list-group-item usersList ' data-username='" +
                    userName.trim() + "' data-userid='" + userId +
                    "'><input type='hidden' name='users[]' value='" + userId + "'>" + userName + "</li>"
                );
                $(this).remove();
            });

            $(document).on("click", "#userSelectedList .list-group-item", function() {
                let userId = $(this).data("userid");
                let userName = $(this).data("username");
                $("#userAvailableList").append("<li class='list-group-item usersList ' data-userid='" +
                    userId + "'>" + userName + "</li>");
                $(this).remove();
            });

            /**Roller**/
            $(document).on("click", "#roleAvailableList .list-group-item", function() {
                let roleId = $(this).data("roleid");
                let roleName = $(this).html();
                $("#roleSelectedList").append("<li class='list-group-item' data-rolename='" + roleName
                    .trim() + "' data-roleid='" + roleId +
                    "'><input type='hidden' name='roles[]' value='" + roleId + "'>" + roleName + "</li>"
                );
                $(this).remove();
            });

            $(document).on("click", "#roleSelectedList .list-group-item", function() {
                let roleId = $(this).data("roleid");
                let roleName = $(this).data("rolename");
                $("#roleAvailableList").append("<li class='list-group-item' data-roleid='" + roleId + "'>" +
                    roleName + "</li>");
                $(this).remove();
            });


            $("#userType").change(function() {
                var type = $(this).val();
                if (type == 0) {
                    $(".userList").show();
                } else {
                    $(".userList").hide();
                    $("." + type).show();
                }
            });

        });
    </script>
@endpush