@extends('admin.layouts.app')

@section('content')

@if (session('success'))
    <div class="alert-box info-alert mt-5" style="color: green;">
        <div class="alert">
            <p class="text-medium">{{ session('success') }}</p>
        </div>
    </div>
@endif

@if ($errors->any())
    <div class="alert-box error-alert mt-5" style="color: red;">
        <div class="alert">
            @foreach ($errors->all() as $error)
                <li class="text-medium">{{ $error }}</li>
            @endforeach
        </div>
    </div>
@endif

<div class="title-wrapper pt-30">
          <div class="row align-items-center">
            <div class="col-md-6">
              <div class="title">
                <h2>Edit User</h2>
              </div>
            </div>
            <!-- end col -->
            <div class="col-md-6">
              <div class="breadcrumb-wrapper">
                <nav aria-label="breadcrumb">
                  <ol class="breadcrumb">
                    <li class="breadcrumb-item">
                      <a href="#0">Settings</a>
                    </li>
                    <li class="breadcrumb-item"><a href="#0">Users</a></li>
                    <li class="breadcrumb-item active" aria-current="page">
                      Edit User
                    </li>
                  </ol>
                </nav>
              </div>
            </div>
            <!-- end col -->
          </div>
          <!-- end row -->
        </div>

    <div class="form-layout-wrapper">
        <div class="row">
            <div class="col-md-12">
                <div class="card-style mb-30">
                  <h6 class="mb-25">Edit User:</h6>
                  <div class="card mb-4 ">
                    <div class="card-body">
                    <form method="POST" action="{{ route('admin.users.update', ['user' => $user]) }}" onsubmit="return validateForm()">
                    @csrf
                    @method('PUT')
                        <div class="input-style-3">
                          <input type="text" id="name" name="name" placeholder="Full Name" value="{{ Auth::user()->name }}" required>
                          <span class="icon"><i class="lni lni-user"></i></span>
                        </div>
                        <!-- end input -->
                        <div class="input-style-3">
                          <input type="Email" id="email" name="email" placeholder="Email" value="{{ Auth::user()->email }}" disabled>
                          <span class="icon"> <i class="lni lni-envelope"></i> </span>
                        </div>
                        <!-- end input -->
                        <div class="input-style-3">
                          <input type="password" id="password" name="password" placeholder="Leave blank to keep current password">
                          <span class="icon"><i class="lni lni-lock-alt"></i></span>
                        </div>
                        <div class="select-style-1">
                          <label for="role">Role</label>
                          <div class="select-position">
                            <select name="role" id="role" required>
                                <option value="admin" {{ $user->role === 'admin' ? 'selected' : '' }}>Admin</option>
                                <option value="report_manager" {{ $user->role === 'report_manager' ? 'selected' : '' }}>Report Manager</option>
                            </select>
                          </div>
                        </div>
                        <label class="mb-4" for="toDate">Groups: <strong class="text-danger">Required*</strong></label>
                        <div class="row">
                              <div class="col">
                              <div class="form-check checkbox-style mb-20">
                                    <input type="checkbox" id="checkAllGroups" class="form-check-input check-all" checked>
                                    <label for="checkAllGroups" class="form-check-label">All</label>
                              </div>
                          </div>
                        </div>
                        <div id="groupError" class="text-danger" style="display:none;">Please select at least one group.</div>
                        <div class="form-group">
                            @foreach($userGroups as $userGroup)
                                <div class="form-check checkbox-style mb-20 form-check-inline">
                                    <input class="form-check-input logins" type="checkbox" name="groups[]" id="group{{ $userGroup['id'] }}" value="{{ $userGroup['id'] }}" checked>
                                    <label class="form-check-label" for="group{{ $userGroup['id'] }}">{{ $userGroup['name'] }}</label>
                                </div>
                            @endforeach 

                            @foreach($allGroups as $group)
                                @php
                                    $groupId = is_array($group) ? $group['id'] : $group->id;
                                    $groupName = is_array($group) ? $group['name'] : $group->name;
                                @endphp

                                @if (!in_array($groupId, array_column($userGroups, 'id')))
                                    <div class="form-check checkbox-style mb-20 form-check-inline">
                                        <input class="form-check-input logins" type="checkbox" name="groups[]" id="group{{ $groupId }}" value="{{ $groupId }}">
                                        <label class="form-check-label" for="group{{ $groupId }}">{{ $groupName }} </label>
                                    </div>
                                @endif
                            @endforeach 
                        </div>


                        <div class="button-group d-flex justify-content-center flex-wrap"><button class="main-btn primary-btn btn-hover w-100 text-center" type="submit">Update User</button></div>
                    </form>
                    </div>
                  </div>
              </div>
            </div>
        </div>
    </div>


    <script>
        $("#checkAllGroups").change(function() {
          $("input[name='groups[]']").prop('checked', $(this).prop("checked"));
      });

      function validateForm() {
    var checkboxes = document.querySelectorAll('input[name="groups[]"]');
    var isChecked = false;

    checkboxes.forEach(function(checkbox) {
        if (checkbox.checked) {
            isChecked = true;
        }
    });

    if (!isChecked) {
        document.getElementById('groupError').style.display = 'block';
        return false;
    }

    document.getElementById('groupError').style.display = 'none';
    return true;
}


    </script>

@endsection