@extends('merchant.app')

@section('title', panel_setting_title("Kullanıcı Grubu Yönetimi"))

@section('content')

    <main class="mt-120  " id="main">
        <h6 class="my-lg-4 my-0 mb-lg-0 ">Kullanıcı Grubu Yönetimi</h6>
        @include("merchant.Components.statistics")
        <div class="row mt-4 ">
            <div class="col-12">
                <!--=============== CARD ===============-->
                <div class="card__container-all-page p-3  border-color-custom">
                    <div class="my-lg-4 my-0 d-flex justify-content-between align-items-center">
                        <h6 class="  my-0 mb-lg-0">Kullanıcı Grubu Yönetimi</h6>

                        <button type="button" class="btn btn-primary px-4 py-2" data-bs-toggle="modal"
                            data-bs-target="#exampleModal">
                            <div class="d-flex align-items-center ">
                                <span>
                                    <i class="ri-add-line fs-20"></i>
                                </span>
                                <p class="m-0 p-0 fw-500">Ekle</p>
                            </div>
                        </button>
                        <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel"
                            aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h1 class="modal-title fs-5" id="exampleModalLabel">Rol Ekle</h1>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                                            aria-label="Close"></button>
                                    </div>
                                    <div class="modal-body">
                                        <div class="row">
                                            <div class="col-lg-6 col-12">
                                                <div class="form-floating mb-3">
                                                    <input type="text" class="form-control border-color-custom"
                                                        id="grup-ismi">
                                                    <label for="grup-ismi">Grup İsmi</label>
                                                </div>
                                            </div>
                                            <div class="col-lg-6 col-12">
                                                <div class="form-floating mb-3">
                                                    <input type="text" class="form-control border-color-custom"
                                                        id="gosterge-panel-url">
                                                    <label for="gosterge-panel-url">Gösterge Paneli
                                                        Urli</label>
                                                </div>
                                            </div>
                                            <div class="col-lg-6 col-12">
                                                <p class="m-0 p-0 h6 text-custom-color">Kullanıcıları Seç
                                                </p>
                                                <ul class="list-group mt-4 ">
                                                    <li class="list-group-item bg-transparent  bg-primary fw-500">
                                                        Mevcut Kullanıcılar</li>
                                                    <li class="list-group-item bg-transparent text-custom-color"
                                                        id="item1" draggable="true">Item 1</li>
                                                    <li class="list-group-item bg-transparent text-custom-color"
                                                        id="item2" draggable="true">Item 2</li>
                                                </ul>
                                            </div>
                                            <div class="col-lg-6 col-12">
                                                <p class="m-0 p-0 h6 text-custom-color invisible">
                                                    Kullanıcıları Seç</p>
                                                <ul class="list-group mt-4 ">
                                                    <li class="list-group-item bg-transparent bg-primary fw-500">
                                                        Seçilmiş Kullanıcılar</li>
                                                    <li class="list-group-item bg-transparent text-custom-color"
                                                        id="item1" draggable="true">Item 1</li>
                                                    <li class="list-group-item bg-transparent text-custom-color"
                                                        id="item2" draggable="true">Item 2</li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary fw-500"
                                            data-bs-dismiss="modal">Kapat</button>
                                        <button type="button" class="btn btn-primary fw-500">Kaydet</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row mt-3 align-items-center justify-content-start">



                        <p class="mt-3">Tablo Gelecek</p>
                    </div>
                </div>
            </div>

    </main>
@endsection