@extends('layouts.user_type.auth')

@section('content')

<div>
    <div class="row">
        <div class="col-12">
            @include('components.alert')

            <div class="card mb-4 mx-4">
                <div class="card-header pb-0">
                    <div class="d-flex flex-row justify-content-between">
                        <h5 class="mb-0">Users</h5>
                        <a href="#" class="btn bg-gradient-primary btn-sm mb-0" data-bs-toggle="modal"data-bs-target="#userModal" onclick="clearForm()">+ New User</a>
                     </div>
                </div>

                <!-- User Table -->
                <div class="card-body px-0 pt-0 pb-2">
                    <div class="table-responsive p-0">
                        <table class="table align-items-center mb-0">
                            <thead>
                                <tr>
                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">ID</th>
                                    <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Name</th>
                                    <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Email</th>
                                    <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Status</th>
                                    <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">User Type</th>
                                    <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($users as $index => $user)
                                    <tr>
                                        <td class="ps-4">
                                            <p class="text-xs font-weight-bold mb-0">{{ $users->firstItem() + $index }}</p>
                                        </td>
                                        <td class="text-center">
                                            <p class="text-xs font-weight-bold mb-0">{{ $user->name }}</p>
                                        </td>
                                        <td class="text-center">
                                            <p class="text-xs font-weight-bold mb-0">{{ $user->email }}</p>
                                        </td>
                                        <td class="text-center">
                                            <p class="font-weight-bold mb-0 
                                            @if($user->status == 'inactive')
                                                badge badge-sm bg-gradient-secondary
                                            @elseif($user->status == 'active')
                                                badge badge-sm bg-gradient-success
                                            @elseif($user->status == 'deleted')
                                                badge badge-sm bg-gradient-danger
                                            @endif">
                                                {{ ucfirst($user->status) }}
                                            </p>
                                        </td>
                                        <td class="text-center">
                                            <p class="text-xs font-weight-bold mb-0">{{ ucfirst($user->user_type) }}</p>
                                        </td>
                                        <td class="text-center">
                                            <a href="#" class="mx-3" data-bs-toggle="modal" data-bs-target="#userModal"
                                                onclick="openEditModal({{ $user }})">
                                                <i class="fas fa-user-edit text-secondary"></i>
                                            </a>
                                            <span>
                                                @if($user->status !== 'deleted' && $user->user_type !== 'super_admin')
                                                    <form method="POST" action="{{ route('user.delete', $user->id) }}" style="display:inline;">
                                                        @csrf
                                                        <input type="hidden" name="delete_user_id" value="{{ $user->id }}">
                                                        <button type="submit" title="Delete user" style="background: none; border: none; padding: 0; cursor: pointer;" onclick="return confirm('Are you sure you want to delete this user?');">
                                                            <i class="fas fa-trash text-secondary" data-bs-toggle="tooltip"></i>
                                                        </button>
                                                    </form>
                                                @endif
                                            </span>
                                        </td>
                                    </tr>
                                    @empty
                                        <tr>
                                            <td colspan="6" class="text-center py-5">
                                                <img src="{{ asset('assets/img/no_data_found.png') }}" alt="No Data Found"
                                                    style="width: 200px; opacity: 0.6;">
                                                <p class="mt-2 text-muted">No User data Found</p>
                                            </td>
                                        </tr>
                                    @endforelse
                            </tbody>
                        </table>
                        @include('components.pagination', ['paginator' => $users])
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

 <!-- Create/Edit User Modal -->
 <div class="modal fade" id="userModal" tabindex="-1" aria-labelledby="userModalLabel"aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="userModalLabel">Create New User</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"
                    aria-label="Close"></button>
            </div>
            <form method="POST" action="{{ route('user.storeOrUpdate') }}" id="userModalForm">
                @csrf
                <div class="modal-body">
                    <div class="container">
                        <div class="row">
                            <!-- ID Field (Hidden for Update) -->
                            <input type="hidden" name="id" id="userId">

                            <!-- Name Field -->
                            <div class="col-md-6 mb-3">
                                <label for="name" class="form-label">Name<span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="name" name="name"
                                    placeholder="Enter user name" required>
                            </div>

                            <!-- Email Field -->
                            <div class="col-md-6 mb-3">
                                <label for="email" class="form-label">Email<span class="text-danger">*</span></label>
                                <input type="email" class="form-control" id="email" name="email"
                                    placeholder="Enter user email" required>
                            </div>
                        </div>

                        <div class="row">
                            <!-- Status Dropdown -->
                            <div class="col-md-6 mb-3">
                                <label for="status" class="form-label">Status<span class="text-danger">*</span></label>
                                <select class="form-select" id="status" name="status" required>
                                    
                                </select>
                            </div>
                            <!-- Password Field -->
                            <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" placeholder="Enter password">
                            </div>
                        </div>

                        <div class="row">
                            <!-- User Type Dropdown -->
                            <div class="col-md-6 mb-3">
                                <label for="user_type" class="form-label">User Type<span class="text-danger">*</span></label>
                                <select name="user_type" class="form-select" id="user_type">
                                    @foreach($masters as $master)
                                        <option value="{{ $master->value }}">{{ $master->code }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <!-- Config Key Field -->
                            <div class="col-md-6 mb-3">
                                <label for="config_key" class="form-label">Config Key<span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="config_key" name="config_key"
                                    placeholder="Enter Config Key" required>
                            </div>
                        </div>
                        <div class="row">
                                <!-- Subscription Key Field -->
                                <div class="col-md-6 mb-3" id="subscription-key-container" style="display: none;">
                                <label for="subscription_key" class="form-label">Subscription Key<span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="subscription_key" name="subscription_key"
                                    placeholder="Enter user subscription_key" required>
                                <input type="hidden" class="form-control" id="subscription_key_value" name="subscription_key_value">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="submit" id="submitButton" class="btn btn-primary">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>


<script>
    function openEditModal(user) {
        document.getElementById('userModalLabel').innerText = 'Update User';
        document.getElementById('submitButton').innerText = 'Update';
        document.getElementById('userId').value = user.id;
        document.getElementById('name').value = user.name;
        document.getElementById('email').value = user.email;
        document.getElementById('status').value = user.status;
        document.getElementById('user_type').value = user.user_type;
        document.getElementById('config_key').value = user.config_key;
        document.getElementById('password').placeholder = 'Enter new password (optional)';
        document.getElementById('subscription_key_value').value = user.subscription_key;

        const subscriptionKeyContainer = document.getElementById('subscription-key-container');
        const subscriptionKeyField = document.getElementById('subscription_key');

        if (user.user_type === 'admin' || user.user_type === 'super_admin') {
            subscriptionKeyContainer.style.display = 'block';
            subscriptionKeyField.value = document.getElementById('subscription_key_value').value;
            subscriptionKeyField.setAttribute('required', 'required');
        } else {
            subscriptionKeyContainer.style.display = 'none';
            subscriptionKeyField.value = '';
            subscriptionKeyField.removeAttribute('required');
        }

        const userTypeSelect = document.getElementById('user_type');
        const user_type_options = userTypeSelect.querySelectorAll('option');
        const statusSelect = document.getElementById('status');

        user_type_options.forEach(user_type_option => {
            user_type_option.hidden = true;
        });

        if (user.user_type === 'super_admin') {
            user_type_options.forEach(user_type_option => {
                if (user_type_option.value === 'super_admin') {
                    user_type_option.hidden = false;
                    user_type_option.selected = true;
                }
            });
            statusSelect.innerHTML = `<option value='active' selected>Active</option>`;
        } else {
            user_type_options.forEach(user_type_option => {
                if (user_type_option.value !== 'super_admin') {
                    user_type_option.hidden = false;
                    if (user_type_option.value === user.user_type) {
                        user_type_option.selected = true;
                    }
                }
            });
            statusSelect.innerHTML = `
                 <option value="active" ${user.status === 'active' ? 'selected' : ''}>Active</option>
                 <option value="inactive" ${user.status === 'inactive' ? 'selected' : ''}>In Active</option>
         `;
        }

        if(user.status === 'deleted'){
            document.getElementById('status').innerHTML += '<option value="deleted" selected>Deleted</option>';
        }
    }

    function clearForm() {
        document.getElementById('userModalForm').reset();

        document.getElementById('subscription-key-container').style.display = 'none';
        document.getElementById('subscription_key').value = '';
        document.getElementById('subscription_key_value').value = '';   
        document.getElementById('subscription_key').removeAttribute('required');

        document.getElementById('userModalLabel').innerText = 'Create New User';
        document.getElementById('submitButton').innerText = 'Save';

        const userTypeSelect = document.getElementById('user_type');
        const user_type_options = userTypeSelect.querySelectorAll('option');

        user_type_options.forEach(user_type_option => {
            const value = user_type_option.value;

            if (value !== 'super_admin') {
                user_type_option.hidden = false;
            } else {
                user_type_option.hidden = true;
            }
        });

        const visibleOptions = Array.from(user_type_options).filter(option => !option.hidden);
        const lastVisible = visibleOptions[visibleOptions.length - 1];
        if (lastVisible) {
            lastVisible.selected = true;
        }

        const statusSelect = document.getElementById('status');
        statusSelect.innerHTML = `
            <option value="active" selected>Active</option>
            <option value="inactive">In Active</option>
        `;
        
    }


    document.getElementById('user_type').addEventListener('change', function () {
        const subscriptionKeyContainer = document.getElementById('subscription-key-container');
        const subscriptionKeyField = document.getElementById('subscription_key');
        
        if (this.value === 'admin' || this.value === 'super_admin') {
            subscriptionKeyContainer.style.display = 'block';
            subscriptionKeyField.setAttribute('required', 'required');
            subscriptionKeyField.value = document.getElementById('subscription_key_value').value;
        } else {
            subscriptionKeyContainer.style.display = 'none';
            subscriptionKeyField.removeAttribute('required');
            subscriptionKeyField.value = ''; 
        }
    });

</script>

@endsection