@extends('layouts.user_type.auth')

@section('content')
<div class="container-fluid py-4 px-4">
    @include('components.alert')

    <div id="tableView" class="card">
        <div class="card-header d-flex align-items-center justify-content-between">
            <div>
                <h5 class="mb-0" style="font-weight:700;">Users</h5>
                <p class="mb-0" style="font-size:0.75rem;color:var(--grey);margin-top:2px;">Manage system users and their access roles.</p>
            </div>
            <button class="qc-btn-create btn bg-gradient-primary btn-sm mb-0" id="addButton">
                <i class="fas fa-plus me-1" style="font-size:0.72rem;"></i> New User
            </button>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive" style="border:none; max-height:calc(100vh - 280px); overflow-y:auto;">
                <table class="table mb-0">
                    <thead>
                        <tr>
                            <th style="padding-left:1.25rem;width:5%;">#</th>
                            <th class="text-center">Name</th>
                            <th class="text-center">Email</th>
                            <th class="text-center">User Type</th>
                            <th class="text-center">Status</th>
                            <th class="text-center">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($users as $index => $user)
                            <tr>
                                <td style="padding-left:1.25rem;">
                                    <span style="font-family:var(--mono);font-size:0.72rem;color:var(--grey);">{{ str_pad($users->firstItem()+$index,2,'0',STR_PAD_LEFT) }}</span>
                                </td>
                                <td class="text-center">
                                    <div class="d-flex align-items-center justify-content-center gap-2">
                                        <span style="width:26px;height:26px;border-radius:50%;background:var(--g3);border:1px solid var(--border-m);display:inline-flex;align-items:center;justify-content:center;font-size:0.7rem;font-weight:700;color:var(--indigo);flex-shrink:0;">{{ strtoupper(substr($user->name,0,1)) }}</span>
                                        <span style="font-weight:600;color:var(--heading);">{{ $user->name }}</span>
                                    </div>
                                </td>
                                <td class="text-center" style="color:var(--grey-mid);">{{ $user->email }}</td>
                                <td class="text-center">
                                    <span class="badge bg-gradient-light mono" style="font-size:0.65rem;">{{ ucfirst($user->user_type) }}</span>
                                </td>
                                <td class="text-center">
                                    <span class="badge @if($user->status=='inactive') bg-gradient-secondary @elseif($user->status=='active') bg-gradient-success @else bg-gradient-danger @endif">
                                        {{ ucfirst($user->status) }}
                                    </span>
                                </td>
                                <td class="text-center">
                                    <div class="d-flex justify-content-center gap-2">
                                        <a href="#" class="ia-edit" onclick="openEditForm({{ $user }})" title="Edit">
                                            <i class="fas fa-pencil-alt" style="font-size:0.72rem;"></i>
                                        </a>
                                        @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" class="ia-delete" onclick="return confirm('Delete this user?');" title="Delete" style="border:none;font-family:inherit;">
                                                    <i class="fas fa-trash-alt" style="font-size:0.72rem;"></i>
                                                </button>
                                            </form>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr><td colspan="6"><div class="empty-state"><i class="fas fa-users"></i><p>No users found</p></div></td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            <div class="px-4 py-3" style="border-top:1px solid var(--border);">
                @include('components.pagination', ['paginator' => $users])
            </div>
        </div>
    </div>

    <div id="formView" class="card" style="display:none;">
        <div class="card-header d-flex align-items-center justify-content-between">
            <div>
                <h6 id="formTitle" class="mb-0" style="font-weight:700;">Create New User</h6>
                <p class="mb-0" style="font-size:0.72rem;color:var(--grey);margin-top:2px;">Fill in the user details below</p>
            </div>
            <button onclick="toggleView('table')" style="width:32px;height:32px;border-radius:50%;background:var(--faint);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;">
                <i class="fas fa-times" style="font-size:0.82rem;color:var(--grey-mid);"></i>
            </button>
        </div>
        <div class="card-body">
            <form method="POST" action="{{ route('user.storeOrUpdate') }}" id="userForm" class="row g-3">
                @csrf
                <input type="hidden" name="id" id="userId">
                <div class="col-md-6">
                    <label for="name" class="form-label">Name <span class="text-danger">*</span></label>
                    <input type="text" class="form-control" id="name" name="name" required placeholder="Full name">
                </div>
                <div class="col-md-6">
                    <label for="email" class="form-label">Email <span class="text-danger">*</span></label>
                    <input type="email" class="form-control" id="email" name="email" required placeholder="Email address">
                </div>
                <div class="col-md-6">
                    <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>
                <div class="col-md-6">
                    <label for="status" class="form-label">Status <span class="text-danger">*</span></label>
                    <select class="form-select" id="status" name="status" required></select>
                </div>
                <div class="col-md-6">
                    <label for="password" class="form-label">Password</label>
                    <input type="password" class="form-control" id="password" name="password" placeholder="Enter password">
                </div>
                <div class="col-md-6">
                    <label for="config_key" class="form-label">Config Key <span class="text-danger">*</span></label>
                    <input type="text" class="form-control mono" id="config_key" name="config_key" required placeholder="4-digit key" maxlength="4" pattern="\d{4}">
                </div>
                <div class="col-md-6" id="subscription_key_container">
                    <label for="subscription_key" class="form-label">Subscription Key <span class="text-danger">*</span></label>
                    <input type="text" class="form-control mono" id="subscription_key" name="subscription_key" placeholder="4-digit key" maxlength="4" pattern="\d{4}">
                </div>
                <div class="col-12 d-flex justify-content-end gap-2 pt-3" style="border-top:1px solid var(--border);">
                    <button type="button" onclick="toggleView('table')" class="qc-btn-dismiss btn btn-light mb-0">Cancel</button>
                    <button type="submit" id="submitButton" class="qc-btn-confirm btn bg-gradient-primary mb-0">Save User</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    function toggleView(view) {
        document.getElementById('tableView').style.display = view==='form' ? 'none' : 'block';
        document.getElementById('formView').style.display  = view==='form' ? 'block' : 'none';
        if (view==='form') clearForm();
    }

    function openEditForm(user) {
        toggleView('form');
        document.getElementById('formTitle').innerText = 'Update User';
        document.getElementById('submitButton').innerText = 'Update User';
        document.getElementById('userId').value = user.id;
        document.getElementById('name').value = user.name;
        document.getElementById('email').value = user.email;
        document.getElementById('user_type').value = user.user_type;
        document.getElementById('config_key').value = user.config_key || '';
        document.getElementById('subscription_key').value = user.subscription_key || '';
        document.getElementById('password').placeholder = 'Leave blank to keep current';

        const userTypeSelect = document.getElementById('user_type');
        userTypeSelect.querySelectorAll('option').forEach(o => o.hidden = true);
        const statusSelect = document.getElementById('status');

        if (user.user_type === 'super_admin') {
            userTypeSelect.querySelectorAll('option').forEach(o => { if(o.value==='super_admin'){o.hidden=false;o.selected=true;} });
            statusSelect.innerHTML = `<option value='active' selected>Active</option>`;
        } else {
            userTypeSelect.querySelectorAll('option').forEach(o => { if(o.value!=='super_admin'){o.hidden=false;if(o.value===user.user_type)o.selected=true;} });
            statusSelect.innerHTML = `
                <option value="active" ${user.status==='active'?'selected':''}>Active</option>
                <option value="inactive" ${user.status==='inactive'?'selected':''}>Inactive</option>
            `;
        }
        if (user.status==='deleted') statusSelect.innerHTML += '<option value="deleted" selected>Deleted</option>';
    }

    function clearForm() {
        document.getElementById('userForm').reset();
        document.getElementById('formTitle').innerText = 'Create New User';
        document.getElementById('submitButton').innerText = 'Save User';
        document.getElementById('userId').value = '';
        document.getElementById('config_key').value = '';
        document.getElementById('subscription_key').value = '';
        const opts = document.getElementById('user_type').querySelectorAll('option');
        opts.forEach(o => { o.hidden = o.value==='super_admin'; });
        const visible = Array.from(opts).filter(o=>!o.hidden);
        if(visible.length) visible[visible.length-1].selected=true;
        document.getElementById('status').innerHTML = `<option value="active" selected>Active</option><option value="inactive">Inactive</option>`;
    }

    document.addEventListener('DOMContentLoaded', function() {
        document.getElementById('addButton').addEventListener('click', function() {
            clearForm(); toggleView('form');
        });

        const userTypeSelect = document.getElementById('user_type');
        const subscriptionKeyContainer = document.getElementById('subscription_key_container');
        const subscriptionKeyInput = document.getElementById('subscription_key');

        function updateSubscriptionKeyVisibility() {
            const val = userTypeSelect.value;
            if (val === 'admin' || val === 'super_admin') {
                subscriptionKeyContainer.style.display = 'block';
                subscriptionKeyInput.required = true;
            } else {
                subscriptionKeyContainer.style.display = 'none';
                subscriptionKeyInput.required = false;
                subscriptionKeyInput.value = '';
            }
        }

        userTypeSelect.addEventListener('change', updateSubscriptionKeyVisibility);
        
        // Hook into toggleView or similar to ensure visibility is correct on load/edit
        const originalToggleView = window.toggleView;
        window.toggleView = function(view) {
            originalToggleView(view);
            if(view === 'form') updateSubscriptionKeyVisibility();
        };

        const originalOpenEditForm = window.openEditForm;
        window.openEditForm = function(user) {
            originalOpenEditForm(user);
            updateSubscriptionKeyVisibility();
        };
    });
</script>
@endsection