@extends('newDashboard.index')

@section('css')
    <link rel="stylesheet" href="{{ asset('metronic/css/data-table.css') }}">
@endsection
@section('main-content')
    <div class="content-wrapper">
        <div class="page-header">
            <h3 class="page-title">
                <span class="page-title-icon bg-gradient-primary text-white me-2">
                    <i class="mdi mdi-cards-variant menu-icon"></i>
                </span> {{ __('messages.users Data') }}
            </h3>
        </div>
        <div class="row">
            <div id="success_message"></div>
            <input type="hidden" name="hidden_page" id="hidden_page" value="1" />
            <input type="hidden" id="usets-data" value="{{ route('users.get.data.permissions') }}" />
            <input type="hidden" id="user-index" value="{{ route('users.index') }}" />
            <input type="hidden" id="update-permissions-ajax-route" value="{{ route('user.update.permissions') }}" />
            <div class="table-responsive customscroll">
                <table class="table datatable text-center" id="table">
                    <div class="container pb-2">
                        <div class="row gap-1 custom-padding-filter-tmp">
                            <div class="col-12 col-md-4 col-xl-3">
                                <label class="col-form-label">{{ __('messages.date:') }}</label>
                                <div class="center-custom-width-filter-date">
                                    <input type="text" id="config-demo" placeholder="{{ __('messages.date from - to') }}"
                                        class="form-control" />
                                </div>
                            </div>

                            <div class="col-12 col-md-4 col-xl-3 customselectcss">
                                <div class="form-group mb-3 px-2">
                                    <label class="col-form-label">{{ __('messages.User') }}:</label>
                                    <select id="userFilter" class="js-example-disabled-results form-control">
                                        <option value="0">
                                            {{ __('validation.Select', ['attribute' => __('messages.User')]) }}</option>
                                        @foreach ($user as $user)
                                            <option value="{{ $user->id }}">{{ $user->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <thead>
                        <tr>
                            <th>{{ __('messages.ID') }}</th>
                            <th>{{ __('messages.Name') }}</th>
                            <th>{{ __('messages.Email') }}</th>
                            <th>{{ __('messages.Phone') }}</th>
                            <th>{{ __('messages.Role') }}</th>
                            <th>{{ __('messages.Starting Date') }}</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
            </div>
        </div>
    </div>


    {{-- edit Modal --}}
    <div class="modal fade" id="edit-modal" tabindex="-1" aria-labelledby="edit-modalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="edit-modalLabel">{{ __('messages.update user permissions') }}
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body row">
                    <ul id="update_msgList"></ul>
                    <input type="hidden" id="id" />
                    <input type="hidden" id="edit-ajax-route" value="{{ route('users.edit.data') }}" />
                    <input type="hidden" id="user-id-file">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-12 mx-auto">
                                <div class="row">
                                    <div class="d-flex flex-column permissions-list px-2">
                                        @foreach ($permissions as $key => $permissionsGroup)
                                            <div class="row align-items-center gap-1">
                                                <label
                                                    class="fw-bold col-4">{{ __('messages.permissions', ['attribute' => __('messages.' . $key)]) }}</label>
                                                <div class="row align-items-center col-8">
                                                    @foreach ($permissionsGroup as $permission)
                                                        <div class="form-check col-6 d-flex align-items-center gap-2">
                                                            <input class="form-check-input permission-chekbox"
                                                                type="checkbox" value="{{ $permission['id'] }}"
                                                                id="permission-checkbox-{{ $permission['id'] }}">
                                                            <label class="form-check-label"
                                                                for="permission-checkbox-{{ $permission['id'] }}">
                                                                {{ __('messages.' . $permission['display_name']) }}
                                                            </label>
                                                        </div>
                                                    @endforeach
                                                </div>
                                            </div>
                                            <hr />
                                        @endforeach
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary"
                                        data-bs-dismiss="modal">{{ __('messages.Close') }}</button>
                                    <button type="submit"
                                        class="btn btn-primary update-permissions">{{ __('messages.Update') }}</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        var translations = {
            'ID': '{{ __('messages.ID') }}',
            'Name': '{{ __('messages.Name') }}',
            'Email': '{{ __('messages.Email') }}',
            'Phone': '{{ __('messages.Phone') }}',
            'Role': '{{ __('messages.Role') }}',
            'Starting Date': '{{ __('messages.Starting Date') }}',
            'End Date': '{{ __('messages.End Date') }}',
            'Specializations': '{{ __('messages.Specializations') }}',
            'Educational Level': '{{ __('messages.Educational Level') }}',
            'users Data': '{{ __('messages.users Data') }}',

        };
    </script>
    <script src="{{ asset('metronic/js/pages/users.js') }}"></script>
@endsection
{{-- @extends('newDashboard.index')

<style>
    h1 {
        font-size: 6rem !important;
        color: #8daf21;
        background: white;
        padding: 20px;
        padding-left: 70px;
        padding-right: 70px;
        border-radius: 20px;
        box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
    }

    .content-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>
@section('main-content')
    <div class="content-wrapper">
        <h1>{{ __('messages.COMING SOON') }}</h1>
    </div>
@endsection --}}