@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>Create New 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">
                      Create New 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">Create New User:</h6>
                  <div class="card mb-4 ">
                    <div class="card-body">
                    <form method="POST" action="{{ route('admin.users.store') }}"  onsubmit="return validateForm()">
                    @csrf
                        <div class="input-style-3">
                          <input type="text" id="name" name="name" required="" placeholder="Full Name">
                          <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" required="" placeholder="Email">
                          <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" required="" placeholder="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">Admin</option>
                                <option value="report_manager">Report Manager</option>
                            </select>
                          </div>
                        </div>
                        <label class="mb-4" for="toDate">ID's 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($groups as $group)
                                  <div class="form-check checkbox-style mb-20 form-check-inline form-check-inline">
                                      <input class="form-check-input logins" type="checkbox" name="groups[]" id="group{{ $group->id }}" value="{{ $group->id }}" checked>
                                      <label class="form-check-label" for="group-{{ $group }}">{{ $group->name }}</label>
                                  </div>
                          @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">Create 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



        
        
        
                 
                      

                      
                    
                     <!-- </div>
                  <div class="form-check checkbox-style mb-20">
                    <div class="row">
                        <div class="col-md-6">
                            <input class="form-check-input" type="checkbox" id="isAdmin" name="isAdmin" value="1">
                                    <label class="form-check-label" for="checkbox-1">Is Admin</label>
                        </div>
                        
                    </div>
                  </div>
                
                </div>
            </form> -->