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

@section('title', panel_setting_title("Menü"))
@push('style-libraries')
    <!-- Feather CSS -->
    <link rel="stylesheet" href="{{ asset('dashboard/plugins/feather/feather.css') }}">
    <!-- Datepicker CSS -->
    <link rel="stylesheet" href="{{ asset('dashboard/css/bootstrap-datetimepicker.min.css') }}">
    <!-- Seelct2 CSS-->
    <link href="{{ asset('dashboard/plugins/select2/css/select2.min.css') }}" rel="stylesheet" />
    <!-- Datatables CSS -->
    <link rel="stylesheet" href="{{ asset('dashboard/plugins/datatables/datatables.min.css') }}">
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
@endpush
<style>
    .sidebar {
        overflow-y: auto !important;
        max-height: 100vh;
        /* Ekran boyutuna göre yükseklik ayarla */
    }

</style>
<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: #ff0000 !important;
        background-color: rgba(220, 53, 69, 0.1) !important;
    }

    .btn-success-custom {
        background-color: rgba(53, 220, 137, 0.1) !important;
        color: #35dc64 !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;
    }

    .bg-title-custom {
        background-color: #c9e4ff !important
    }

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

    .username-last,
    .date-last,
    .price-last {
        font-size: 14px;
    }

    .nav-pills .nav-link.active,
    .nav-pills .show>.nav-link {
        color: #333 !important;
        font-weight: 600;
        background-color: #E7FC9A !important;
    }

    .dataTables_length,
    .dataTables_filter,
    .pagination {
        display: none !important;
    }
</style>
@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-bars svg-icon fs-4"></i>
                                </div>
                                <div>
                                    <h1 class=" fs-3 fw-semibold mb-0 text-white-primary-color">Menü</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">
                                                    Panel yapılandırma </a>
                                            </li>
                                            <li class="text-white-primary-color breadcrumb-item  text-opacity-75 active"
                                                aria-current="page">
                                                Menü </li>
                                        </ol>
                                    </nav>
                                </div>
                            </div>
                        </div>
                        <!-- Action Button -->
                        <div class="col-lg-4 text-lg-end mt-3 mt-lg-0">
                            <a onclick="openModal('addMenuModal')" href="javascript:void(0)"
                                class="btn btn-yellow-custom d-inline-flex align-items-center gap-2">
                                <i class="fas fa-plus-circle"></i>
                                <span>Ekle</span>

                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Page Header -->

            <div class="card">
                <div class="card-v">
                    <div class="row">
                        <div class="col-sm-12">
                            <div class=" border-0 rounded-4 overflow-hidden p-3">
                                <div class="table-responsive">
                                    <table class="table align-middle mb-0">
                                        <thead class="thead-light">
                                            <tr class="bg-light border-0">
                                                <th class="custom-th">ID</th>
                                                <th class="custom-th">Menü Adı</th>
                                                <th class="custom-th">İşlemler</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @forelse ($menus as $menu)
                                                <tr>
                                                    <td style="font-size: 13px;">{{ $menu->id }}</td>
                                                    @if ($menu->url != '')
                                                        <td><a href='{{ '/' . config('domain.ADMIN_URL_HASH') . $menu->url }}'
                                                                target='_blank'>{{ $menu->name }}</a></td>
                                                    @else
                                                        <td>{{ $menu->name }}</td>
                                                    @endif
                                                    <td style="font-size: 13px;"
                                                        class="d-flex align-items-start justify-content-start gap-2 ">
                                                        <a href="javascript:void(0)" class="  editMenu"
                                                            data-id="{{ $menu->id }}" data-modal="addMenuModal"> <i
                                                                class="fa-solid fa-pen-to-square  bg-primary-custom  rounded-circle"></i></a>
                                                        <a class=""
                                                            onclick="return confirm('Silmek istediğinizden emin misiniz?')"
                                                            href="{{ route('admin.dashboard.settings.menu.delete', ['id' => $menu->id]) }}">
                                                            <i class="btn-danger-custom rounded-circle fa-solid fa-trash"></i>
                                                    </td>
                                                </tr>
                                                @if ($menu->children->isNotEmpty())
                                                    @forelse ($menu->children as $child)
                                                        <tr>
                                                            <td style="font-size: 13px;">{{ $child->id }}</td>
                                                            @if ($child->url != '')
                                                                <td><a href='{{ '/' . config('domain.ADMIN_URL_HASH') . $child->url }}'
                                                                        target='_blank'>--- {{ $menu->name }} >
                                                                        {{ $child->name }}</a></td>
                                                            @else
                                                                <td style="font-size: 13px;">--- {{ $menu->name }} >
                                                                    {{ $child->name }}</td>
                                                            @endif
                                                            <td style="font-size: 13px;"
                                                                class="d-flex align-items-start justify-content-start gap-2 ">
                                                                <a href="javascript:void(0)" class=" editMenu"
                                                                    data-id="{{ $child->id }}"
                                                                    data-modal="addMenuModal"> <i
                                                                        class="fa-solid fa-pen-to-square  bg-primary-custom  rounded-circle"></i></a>
                                                                <a class=""
                                                                    onclick="return confirm('Silmek istediğinizden emin misiniz?')"
                                                                    href="{{ route('admin.dashboard.settings.menu.delete', ['id' => $child->id]) }}">
                                                                    <i class="btn-danger-custom rounded-circle fa-solid fa-trash"></i>
                                                                </a>
                                                            </td>
                                                        </tr>
                                                        @if ($child->children->isNotEmpty())
                                                            @forelse ($child->children as $subChild)
                                                                <tr>
                                                                    <td style="font-size: 13px;">{{ $subChild->id }}</td>
                                                                    @if ($subChild->url != '')
                                                                        <td><a href='{{ '/' . config('domain.ADMIN_URL_HASH') . $subChild->url }}'
                                                                                target='_blank'>------ {{ $menu->name }}
                                                                                >
                                                                                {{ $child->name }} >
                                                                                {{ $subChild->name }}</a>
                                                                        </td>
                                                                    @else
                                                                        <td>------ {{ $menu->name }} >
                                                                            {{ $child->name }} >
                                                                            {{ $subChild->name }}</td>
                                                                    @endif
                                                                    <td style="font-size: 13px;"
                                                                        class="d-flex align-items-start justify-content-start gap-2 ">
                                                                        <a href="javascript:void(0)" class="  editMenu"
                                                                            data-id="{{ $subChild->id }}"
                                                                            data-modal="addMenuModal"> <i
                                                                                class="fa-solid fa-pen-to-square  bg-primary-custom  rounded-circle"></i></a>
                                                                        <a class=""
                                                                            onclick="return confirm('Silmek istediğinizden emin misiniz?')"
                                                                            href="{{ route('admin.dashboard.settings.menu.delete', ['id' => $subChild->id]) }}">
                                                                            <i
                                                                                class="fa-solid fa-trash bg-danger-custom rounded-circle"></i></a>
                                                                    </td>
                                                                </tr>

                                                            @empty
                                                            @endforelse
                                                        @endif
                                                    @empty
                                                    @endforelse
                                                @endif
                                            @empty
                                            @endforelse
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>



        </div>
    </div>

    @include('admin.components.modals.add-menu', ['permissions' => $permissions])

    <div class="modalbg"
        style="display:none;z-index:1000;top:0;left:0;position:fixed;width:100%;height:100%;background:rgba(0, 0, 0, 0.356)">
    </div>

@endsection

@push('script-libraries')
    <!-- Feather Icon JS -->
    <script src="{{ asset('dashboard/js/feather.min.js') }}"></script>
    <!-- Slimscroll JS -->
    <script src="{{ asset('dashboard/plugins/slimscroll/jquery.slimscroll.min.js') }}"></script>
    <!-- Datatable JS -->
    <script src="{{ asset('dashboard/plugins/datatables/datatables.min.js') }}"></script>
    <!-- Seelct2 JS-->
    <script src="{{ asset('dashboard/plugins/select2/js/select2.min.js') }}"></script>
    <!-- Daterangepicker JS ve Moment JS -->
    <script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
    <script src="{{ asset('dashboard/js/modal.js?v=2') }}"></script>
@endpush

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

            $(".select2").select2();

            $(".editMenu").click(function() {
                var el = $(this);
                var csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
                $.ajax({
                    'url': "../settings/menu/" + el.data('id'),
                    'data': {},
                    'method': 'GET',
                    'success': function(data) {
                        $("#" + el.data('modal') + " #id").val(el.data('id'));
                        $.each(data, function(index, item) {
                            $("#" + el.data('modal') + " #" + index).val(item);
                        });
                        console.log(data);
                        $("#parent_id").val(data.parent_id).trigger('change');
                        $("#permission_id").val(data.permission_id).trigger('change');
                        openModal(el.data('modal'));
                    }
                });
            });
        });
    </script>
@endpush