{{-- <div class="d-flex align-items-center justify-content-between mb-4">
<h1 class="h3 mb-0 text-gray-800">{{$User->name}}</h1>

<a href="{{route('User.index')}}" class="btn btn-primary btn-icon-split btn-sm">
    <span class="icon text-white-50">
       <i class="fas fa-arrow-left fa-sm"></i>
    </span>
    <span class="text">{{__('lng.Back')}}</span>
 </a>
</div> --}}

<!-- Include page layout -->
@extends('layouts.adminapp')

<!-- Page title -->
@section('title') {{ __('lng.User') }} - {{ __('lng.AssignRoles') }} @endsection

<!-- Page Activation -->
@section('open_settings', 'open')
@section('active_settings', 'active')
@section('open_user', 'open')
@section('active_user', 'active')
@section('active_user_create', 'active')

<!-- Start page content -->
@section('content')

    <!-- User -->

    <!-- Page Header -->
    <div class="d-md-flex d-block align-items-center justify-content-between my-4 page-header-breadcrumb">
        <h1 class="page-title fw-semibold fs-18 mb-0">{{ __('lng.AssignRoles') }}</h1>
        <div class="ms-md-1 ms-0">
            <nav>
                <ol class="breadcrumb mb-0">
                    <li class="breadcrumb-item"><a href="javascript:void(0);">{{ __('lng.Create') }}</a></li>
                    <li class="breadcrumb-item active" aria-current="page">{{ __('lng.User') }}</li>
                </ol>
            </nav>
        </div>
    </div>
    <!-- Page Header Close -->

    <!-- Flash Message -->
    <x-app-flash />
    <!-- Flash Message Close -->

    <!-- Page body -->
    <div class="row">
        <div class="col-xl-4 col-lg-5">
            <div class="card custom-card">
                <div class="card-header justify-content-between">
                    <div class="card-title">
                        <span class="m-0 font-weight-bold text-primary">{{ $User->name }}</span> :
                        {{ __('lng.AssignRoles') }}
                    </div>
                </div>
                <form action="{{ route('AssignRole') }}" method="POST" enctype='multipart/form-data'>
                    <div class="card-body">
                        @csrf
                        <div class="row gy-4">
                            <div class=" form-group">
                                <input type="hidden" name="user_id" value="{{ $User->id }}">
                                <label for="txtTitle" class="form-label">{{ __('lng.User') }}</label>
                                <input class="form-control" type="text" name="" id="" readonly
                                    value="{{ $User->name }}">
                            </div>
                            <div class=" form-group">
                                <label for="txtTitle" class="form-label">{{ __('lng.Role') }}</label>
                                <select class="form-control form-select" name="role_id" id="txtTitle">
                                    @foreach ($Roles as $Role)
                                        <option value="{{ $Role->id }}">{{ $Role->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="card-footer justify-content-end d-flex">
                        <div class="d-flex  flex-wrap gap-2 ">
                            <button type="reset" class="btn btn-dark  btn-sm btn-wave waves-effect waves-light"
                                name="btnSave">
                                {{ __('lng.Clear') }}<i class="ri-delete-bin-7-line align-middle ms-1 d-inline-block"></i>
                            </button>
                            <button type="submit" class="btn btn-success btn-sm btn-wave waves-effect waves-light">
                                {{ __('lng.Save') }}<i class="ri-save-line align-middle ms-1 d-inline-block"></i>
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div class="col-xl-8 col-lg-7 mb-4">
            <div class="card custom-card">
                <div class="card-header justify-content-between">
                    <div class="card-title">
                        <span class="m-0 font-weight-bold text-primary">{{ $User->name }}</span> :
                        {{ __('lng.RolesDetails') }}
                    </div>
                    <div class="d-flex flex-wrap gap-2">
                        <a href="{{ route('User.index') }}"
                            class="btn btn-primary btn-sm btn-wave waves-effect waves-light">
                            {{ __('lng.Back') }}<i class="ri-arrow-left-line align-middle ms-1 d-inline-block"></i>
                        </a>
                    </div>
                </div>
                @php
                    $i = 0;
                @endphp
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>{{ __('lng.Role') }}</th>
                                    <th>{{ __('lng.Action') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($UserRoles as $UserRole)
                                    <tr>
                                        <td>{{ ++$i }}</td>
                                        <td>{{ $UserRole->Role->name }}</td>
                                        <td>
                                            <form method="POST" action="{{ route('DeleteRole') }}"
                                                Id="form-delete-{{ $UserRole->role_id }}{{ $UserRole->user_id }}">
                                                @csrf
                                                <input type="hidden" name="role_id" value="{{ $UserRole->role_id }}">
                                                <input type="hidden" name="user_id" value="{{ $UserRole->user_id }}">
                                                <a class="btn btn-wave btn-sm btn-danger-light"
                                                    onclick="
                                                    event.preventDefault();
                                                    if(confirm('Are you sure delete this'))
                                                    {
                                                        document.getElementById('form-delete-{{ $UserRole->role_id }}{{ $UserRole->user_id }}').submit();
                                                    }">
                                                    <i class="ri-delete-bin-line"></i>
                                                </a>
                                            </form>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <!-- Page body close -->

@endsection
<!-- End page content -->