@extends('admin.layouts.adminapp')

@section('content')
 <!--start page wrapper -->
<div class="page-wrapper">
    <div class="page-content">
        <!--breadcrumb-->
        <div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3">
            <div class="breadcrumb-title pe-3">All User </div>
            <div class="ps-3">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0 p-0">
                        <li class="breadcrumb-item"><a href="javascript:;"><i class="bx bx-home-alt"></i></a>
                        </li>
                        <li class="breadcrumb-item active" aria-current="page"> User  {{ permission('Users','create') }}</li>
                    </ol>
                </nav>
            </div>
            <div class="ms-auto">
                <div class="btn-group">
                </div>
            </div>
        </div>
        <!--end breadcrumb-->
        <div class="row">
            @if(permission('Users','create'))
            <div class="col-lg-4 mx-auto">
                <div class="card">
                    <div class="card-header radius-15 bg-primary">
                        <div class="d-flex align-items-center">
                            <h6 class="mb-0 text-white"> Add User</h6>
                        </div>
                    </div>
                    <div class="card-body">
                        <form action="{{ isset($edt)? route('users.update',$edt->id) : route('users.store') }}" class="row" method="POST" enctype="multipart/form-data">
                            @csrf
                            @if(isset($edt))
                                @method('PUT') <!-- This will make the form use the PUT method for updating -->
                            @endif
                            
                            <div class="col-md-12 mb-3">
                                <label for="name" class="form-label">Name *</label>
                                <input type="text" class="form-control" id="name" name="name" value="{{ $edt->name ?? '' }}" required>
                                @error('name')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div> 
                            <div class="col-md-6 mb-3">
                                <label for="designation" class="form-label">Designation *</label>
                                <select name="designation" class="form-control" required>
                                    <option value="">Select Designation</option>
                                    <option value="Chairman" {{ (isset($edt) && $edt->designation == 'Chairman') ? 'selected' : '' }} >Chairman</option>
                                    <option value="Executive Officer" {{ (isset($edt) && $edt->designation == 'Executive Officer') ? 'selected' : '' }} >Executive Officer</option>
                                    <!-- You can add more designations here -->
                                </select>
                                @error('designation')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-6 mb-3">
                                <label for="role_id" class="form-label">Role *</label>
                                <select name="role_id" class="form-control" required>
                                    <option value="">Select Role</option>
                                    @foreach ($roles as $role)
                                        <option value="{{ $role->id }}" 
                                        {{ (isset($edt) && $edt->role_id ==  $role->id ) ? 'selected' : '' }} >
                                            {{ $role->name }}
                                        </option>
                                    @endforeach
                                </select>
 
                                @error('name')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div> 
                            <div class="col-md-6 mb-3">
                                <label for="mobile" class="form-label">Mobile *</label>
                                <input type="text" class="form-control" id="mobile" name="mobile" value="{{ $edt->mobile ?? '' }}" required>
                                @error('mobile')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div> 
                            <div class="col-md-6 mb-3">
                                <label for="email" class="form-label">Email *</label>
                                <input type="email" class="form-control" id="email" name="email" value="{{ $edt->email ?? '' }}" required>
                                @error('email')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div> 
                            <div class="col-md-6 mb-3">
                                <label for="password" class="form-label">Password *</label>
                                <input type="password" class="form-control" id="password" name="password"  >
                                @error('password')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div> 
                            <div class="col-md-6 mb-3">
                                <label for="password" class="form-label">Password *</label>
                                <input type="password" class="form-control" id="password_confirmation" name="password_confirmation"  >
                                @error('password_confirmation')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div> 
 
                            <div class="col-md-12 mb-3">
                                <label for="address" class="form-label">Address *</label>
                                <input type="text" class="form-control" id="address" name="address" value="{{ $edt->address ?? '' }}" required>
                                @error('address')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div> 
                            <div class="col-md-8 mb-3">
                                <label for="profile_picture" class="form-label">Profile Photo </label>
                                <input type="file" class="form-control" id="profile_picture" name="profile_picture" >
                                @error('profile_picture')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                            @if(permission('Users','status')) 
                            <div class="col-md-4 mb-3">
                                <label for="status" class="form-label">Status</label>
                                <select class="form-control" id="status" name="status">
                                    <option value="1" {{ (isset($edt) && $edt->status == 1) ? 'selected' : '' }}>Active</option>
                                    <option value="0" {{ (isset($edt) && $edt->status == 0) ? 'selected' : '' }}>Inactive</option>
                                </select>
                            </div>
                            @endif
                            <div class="col-md-12 m-1 row">
                                <div class="col-md-2 m-1">
                                    <button type="submit" class="btn btn-primary">Save </button>
                                </div>
                                <div class="col-md-2 m-1">
                                    <a href="{{ route('users.index') }}" class="btn btn-secondary">Cancel</a>
                                </div>
                            </div>  
                        </form>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                        <!-- Displaying Success Message -->
                        @if(session('success'))
                            <div class="alert alert-success">
                                {{ session('success') }}
                            </div>
                        @endif

                        <!-- Displaying Error Messages -->
                        @if($errors->any())
                            <div class="alert alert-danger">
                                <ul>
                                    @foreach($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif
                    </div>
                </div>

            </div>
            @endif
            @if(permission('Users','show'))
            <div class="col-lg-8 mx-auto">
                <div class="card">
                    <div class="card-header radius-15 bg-primary">
                        <div class="d-flex align-items-center">
                            <h6 class="mb-0 text-white">User List</h6>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table" id="example">
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th> Profile</th>
                                        <th>Status</th> 
                                        <th>Role</th>
                                        <th>Name</th> 
                                        <th>Email</th>
                                        <th>Designation</th>
                                        <th>Address</th> 
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                @foreach($users as $key=>$user)
                                    <tr>
                                        <td>{{ $key + 1 }}</td>
                                        <td> <img src="{{ asset($user->profile_picture)}}" class="user-img" alt="user avatar"></td>
                                        <td>{{ $user->status == 1 ? 'Active' : 'Inactive' }}</td>
                                        <td>{{ $user->role->name  }}</td>
                                        <td>{{ $user->name }}</td>
                                        <td>{{ $user->email }}</td>
                                        <td>{{ $user->designation }}</td>
                                        <td>{{ $user->address }}</td>
                                        <td>
                                            @if(permission('Users','edit'))
                                            <a href="{{ route('users.edit', $user->id) }}" class="btn btn-warning btn-sm">Edit</a>
                                            @endif
                                            @if(permission('Users','destroy'))
                                            <form action="{{ route('users.destroy',$user->id) }}" method="POST" style="display:inline;">
                                               @csrf
                                               @method('DELETE')
                                                <button type="submit" class="btn btn-danger btn-sm" onclick="return confirm('Are you sure you want to delete this slider?');">Delete</button>
                                            </form>
                                            @endif
                                        </td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            @endif
        </div>
    </div>
</div>

@endsection

@section('script')
<script>
    // JavaScript to handle the 'Check All' functionality
    function toggleAllCheckboxes(key) {
        const checkAllCheckbox = document.getElementById('check_all_' + key);
        const checkboxes = document.querySelectorAll(`input[name="permission[${key}][]"]`);

        checkboxes.forEach(checkbox => {
            checkbox.checked = checkAllCheckbox.checked;
        });
    }
</script>


@endsection