@extends('layouts.setting')

<title>Profile</title>

@section('content')

<!-- Update Profile --->

<div class="content-wrapper">
    <div class="dev-chat-tabs">
        <div class="dev-tabcontent dev-tabcontent-users">
            <div class="dev-tabcontent-outers">
                <div class="dev-title-row">
                    <h2>Update Profile</h2>
                </div>
                <form method="POST" action="{{ route('update.profile') }}" enctype="multipart/form-data">
                    @csrf
                    <div class="dev-input-group">
                        <label for="name">Name</label>
                        <input name="name" value="{{$user->name}}" type="text" placeholder="Enter your name" required>
                    </div>
                    <div class="dev-input-group">
                        <label for="email">Email</label>
                        <input name="email" type="email" readonly value="{{$user->email}}" placeholder="Enter your email" required>
                    </div>
                    <div class="dev-input-group">
                        <label for="email">Profile Image</label>
                        <input name="profile_image" type="file">
                    </div>
                    <button type="submit">Update</button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- End Update Profile -->

<div class="content-wrapper">
    <div class="dev-chat-tabs">
        <div class="dev-tabcontent dev-tabcontent-users">
            <div class="dev-tabcontent-outers">
                <div class="dev-title-row">
                    <h2>Add a new user</h2>
                </div>
                <form method="POST" action="{{ route('inbox.add.user') }}" id="accessForm" onsubmit="return validateCheckboxes()">
                    @csrf
                    <div class="dev-input-group">
                        <label for="name">Name</label>
                        <input name="name" type="text" placeholder="Enter your name" required>
                    </div>
                    <div class="dev-input-group">
                        <label for="password">Password</label>
                        <input type="password" name="password" placeholder="Enter your password" required>
                    </div>
                    <div class="dev-input-group">
                        <label for="email">Email</label>
                        <input name="email" type="email" placeholder="Enter your email" required>
                    </div>
                    <div class="dev-input-group">
                        <label for="email">Access</label>
                        <label class="dev-checkbox-wrapper">Inbox Module
                            <input name="access[]" type="checkbox" value="inbox">
                            <span class="checkmark"></span>
                        </label>
                        <label class="dev-checkbox-wrapper">Chat Module
                            <input name="access[]" type="checkbox" value="chat">
                            <span class="checkmark"></span>
                        </label>
                    </div>
                    <button type="submit">Send Activation Email</button>
                </form>
                <div class="dev-title-row">
                    <h2>Users</h2>
                </div>
                <div class="dev-users-boxs">
                    @foreach($users as $user)
                    <div class="dev-users-box">
                        <img src="{{ asset('images/Avatar.png') }}">
                        <div class="dev-box">
                            <h3>{{ $user->name }}</h3>
                            <span>{{ $user->email }}</span>
                        </div>
                        <div class="dev-icon">
                            <img src="{{ asset('images/settingss.svg') }}" alt="">
                        </div>
                        <div class="dev-icon">
                            <a href="{{ url('/inbox/delete-user/' . $user->id) }}" class="delete-user"><img src="{{ asset('images/binn.svg') }}" alt=""></a>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
        
        
        <script defer>
            document.addEventListener('DOMContentLoaded', function () {
                const deleteLinks = document.querySelectorAll('.delete-user');
        
                deleteLinks.forEach(function (link) {
                    link.addEventListener('click', function (event) {
                        event.preventDefault(); // Prevent the default link click behavior
        
                        const url = this.href;
        
                        Swal.fire({
                            title: 'Are you sure?',
                            text: "You won't be able to revert this!",
                            icon: 'warning',
                            showCancelButton: true,
                            confirmButtonColor: '#3085d6',
                            cancelButtonColor: '#d33',
                            confirmButtonText: 'Yes, delete it!'
                        }).then((result) => {
                            if (result.isConfirmed) {
                                // If the user confirms, redirect to the delete URL
                                window.location.href = url;
                            }
                        });
                    });
                });
            });
        </script>
        <script>
            function validateCheckboxes() {
                const checkboxes = document.querySelectorAll('input[name="access[]"]');
                let checked = false;
                checkboxes.forEach((checkbox) => {
                    if (checkbox.checked) {
                        checked = true;
                    }
                });
            
                if (!checked) {
                    alert('Please select at least one checkbox.');
                    return false;
                }
                return true;
            }
        </script>
    </div>
</div>

@endsection