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

@section('title', panel_setting_title("Rol ve Sayfa Yetkilendirmesi"))
@if (request()->has('iframe'))
    @section('menuHidden', 1)
@endif
@push('style-libraries')
    <link rel="stylesheet" href="{{ asset('dashboard/plugins/feather/feather.css') }}">
    <link rel="stylesheet" href="{{ asset('dashboard/css/bootstrap-datetimepicker.min.css') }}">
    <link rel="stylesheet" href="{{ asset('dashboard/plugins/datatables/datatables.min.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-white-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">Rol ve Sayfa Yetkilendirmesi
                                    </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ı Ayarları </a>
                                            </li>
                                            <li class="text-white-primary-color breadcrumb-item  text-opacity-75 active"
                                                aria-current="page">
                                                Rol ve Sayfa Yetkilendirmes</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 -->

            <!-- /Page Header -->

            <!-- Rol İsmi ve Modül Yetkilendirme -->
            <div class="card border-0 rounded-4 shadow-sm">
                <div class="card-body p-4">
                    <form action="" method="POST">
                        @csrf
                        <div class="row">
                            <!-- Rol İsmi -->
                            <div class="col-lg-6">
                                <div class="form-floating mb-3">
                                    <input type="text" value="{{ $role->name }}" class="form-control "
                                   disabled>
                                    <label class="form-label small text-secondary mb-1">Rol İsmi</label>
                                  </div>
                            </div>

                            <div class="col-lg-6">
                                <!-- Modül İsmi -->
                                <div class="form-floating">
                                    <select id="moduleName" class="form-select border-0 py-2"
                                    style="background: rgba(33, 74, 147, 0.05);">
                                    <option value="0" selected>Lütfen seçin</option>
                                    @foreach ($sidebarMenu as $module)
                                        <option value="{{ $module->id }}">{{ $module->name }}</option>
                                    @endforeach
                                </select>
                                <label class="form-label small text-secondary mb-1">Modül Adı</label>
                                  </div>

                            </div>

                            <div class="table-responsive mt-2">
                                @foreach ($sidebarMenu as $module)
                                    <!-- Ana Modül Kartı -->
                                    <div class="card border-0 shadow-sm mb-3" id="{{ $module->id }}">
                                        <!-- Ana Modül Başlığı -->
                                        <div class="card-header border-0 py-3" style="background: rgba(33, 74, 147, 0.03);">
                                            <label class="d-flex align-items-center mb-0" role="button"
                                                data-bs-toggle="collapse" href="#module-{{ $module->id }}"
                                                aria-expanded="false" aria-controls="module-{{ $module->id }}">
                                                <span class="me-2"><i class="fa-solid fa-caret-down"></i></span>
                                                <span class="fw-semibold" style="color: #1427aa;">{{ $module->name }}</span>
                                            </label>
                                        </div>

                                        <div id="module-{{ $module->id }}" class="collapse">
                                            <div class="card-body p-4">
                                                @foreach ($module->children as $subModule)
                                                    <!-- Alt Modül Bölümü -->
                                                    <div class="mb-4 ps-3 border-start"
                                                        style="border-color: rgba(33, 74, 147, 0.2) !important;">
                                                        <label class="d-flex align-items-center mb-3" role="button"
                                                            data-bs-toggle="collapse"
                                                            href="#subModule-{{ $subModule->id }}" aria-expanded="false"
                                                            aria-controls="subModule-{{ $subModule->id }}">
                                                            <span class="me-2"></span>
                                                            <span class="fw-medium"
                                                                style="color: #1427aa;">{{ $subModule->name }}</span>
                                                        </label>

                                                        <div id="subModule-{{ $subModule->id }}" class="collapse">
                                                            @if (isset($subModule->children) && count($subModule->children) > 0)
                                                                @foreach ($subModule->children as $subPage)
                                                                    <!-- Alt Sayfa Bölümü -->
                                                                    <div class="ms-4 mb-3 ps-3 border-start"
                                                                        style="border-color: rgba(33, 74, 147, 0.1) !important;">
                                                                        <label class="d-flex align-items-center mb-2"
                                                                            role="button" data-bs-toggle="collapse"
                                                                            href="#subPage-{{ $subPage->id }}"
                                                                            aria-expanded="false"
                                                                            aria-controls="subPage-{{ $subPage->id }}">
                                                                            <span class="me-2"></span>
                                                                            <span
                                                                                style="color: #1427aa;">{{ $subPage->name }}</span>
                                                                        </label>

                                                                        <div id="subPage-{{ $subPage->id }}"
                                                                            class="collapse">
                                                                            <!-- İzinler Listesi -->
                                                                            <div class="ms-4 mt-2">
                                                                                @foreach ($subPage->permission as $subPermission)
                                                                                    <div
                                                                                        class="mb-2 d-flex align-items-center">
                                                                                        <label
                                                                                            class="d-flex align-items-center mb-0 py-1 px-2 rounded"
                                                                                            style="background: rgba(33, 74, 147, 0.02);">
                                                                                            <input name="selectIds[]"
                                                                                                class="form-check-input me-2"
                                                                                                @if (in_array($subPermission->id, $permissions)) checked @endif
                                                                                                value="{{ $subPermission->id }}"
                                                                                                type="checkbox">
                                                                                            <span
                                                                                                class="small">{{ $subPermission->description }}</span>
                                                                                        </label>
                                                                                    </div>
                                                                                @endforeach
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                @endforeach
                                                            @else
                                                                <!-- Direkt İzinler Listesi -->
                                                                <div class="ms-4">
                                                                    @foreach ($subModule->permission as $permission)
                                                                        <div class="mb-2 d-flex align-items-center">
                                                                            <label
                                                                                class="d-flex align-items-center mb-0 py-1 px-2 rounded"
                                                                                style="background: rgba(33, 74, 147, 0.02);">
                                                                                <input name="selectIds[]"
                                                                                    class="form-check-input me-2"
                                                                                    @if (in_array($permission->id, $permissions)) checked @endif
                                                                                    value="{{ $permission->id }}"
                                                                                    type="checkbox">
                                                                                <span
                                                                                    class="small">{{ $permission->description }}</span>
                                                                            </label>
                                                                        </div>
                                                                    @endforeach
                                                                </div>
                                                            @endif
                                                        </div>
                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>


                            <!-- Kaydet Butonu -->
                            <div class="d-flex justify-content-end mt-4 pt-3 border-top">
                                <button type="submit" class="btn d-inline-flex align-items-center gap-2 px-4"
                                    style="background: linear-gradient(to right, #1427aa, #6e9fc4); color: white; border: none;">
                                    <i class="fas fa-save"></i>
                                    <span>Kaydet</span>
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <!-- /Rol İsmi ve Modül 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).ready(function() {


            $("#moduleName").change(function() {
                id = $(this).val();
                if (id == 0) {
                    $(".permissionRow").show();
                } else {
                    $(".permissionRow").hide();
                    $(".permissionRow[id='" + id + "']").show();
                }

            });

            $("input[type='checkbox']").change(function() {

            });




        });
    </script>
@endpush