@extends('layouts.master')

@section('title', 'User Management - Industrial Pump Logic')

@section('content')
<style>
    .management-wrapper {
        display: flex;
        height: calc(100vh - 56px);
        overflow: hidden;
        background: var(--bg-main);
    }
    .list-panel {
        flex: 1;
        padding: 32px;
        overflow-y: auto;
        transition: all 0.3s ease;
    }
    .user-table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0 12px;
    }
    .user-table th {
        padding: 12px 24px;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        color: var(--text-muted);
        letter-spacing: 1px;
        text-align: left;
    }
    .user-row {
        background: white;
        transition: all 0.2s;
    }
    .user-row:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    }
    .user-row td {
        padding: 16px 24px;
        border-top: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
    }
    .user-row td:first-child { border-left: 1px solid var(--border); border-radius: 12px 0 0 12px; }
    .user-row td:last-child { border-right: 1px solid var(--border); border-radius: 0 12px 12px 0; }

    .status-badge {
        font-size: 10px;
        font-weight: 700;
        padding: 4px 10px;
        border-radius: 20px;
        text-transform: uppercase;
    }
    .status-active { background: #dcfce7; color: #16a34a; }
    .status-blocked { background: #fee2e2; color: #ef4444; }

    .filter-bar {
        background: white;
        padding: 20px 24px;
        border-radius: 12px;
        border: 1px solid var(--border);
        display: flex;
        gap: 16px;
        align-items: flex-end;
        margin-bottom: 32px;
        flex-wrap: wrap;
    }
</style>

<main>
    <div class="list-panel">
        <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:32px;">
            <div>
                <h1 style="font-size:24px; font-weight:800; color:var(--text-main)">User Management</h1>
                <p style="color:var(--text-muted); font-size:13px;">Overview of all registered system operators.</p>
            </div>
            <button class="btn btn-primary" onclick="showSidePanel()" style="height:44px; padding:0 24px; border-radius:10px;">
                <i data-lucide="user-plus" size="18"></i> Add New User
            </button>
        </div>

        @if(session('success'))
            <div style="background:#dcfce7; color:#16a34a; padding:12px; border-radius:8px; margin-bottom:24px; font-size:13px; font-weight:600;">
                {{ session('success') }}
            </div>
        @endif

        <form action="{{ route('admin.users') }}" method="GET" class="filter-bar">
            <div class="field" style="flex:1; min-width:150px;">
                <label>Filter by Role</label>
                <select name="role" class="input" style="height:38px; padding:0 12px;">
                    <option value="">All Roles</option>
                    @foreach($roles as $role)
                        <option value="{{ $role->id }}" {{ request('role') == $role->id ? 'selected' : '' }}>{{ $role->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="field" style="flex:1; min-width:120px;">
                <label>Status</label>
                <select name="status" class="input" style="height:38px; padding:0 12px;">
                    <option value="">All Status</option>
                    <option value="1" {{ request('status') == '1' ? 'selected' : '' }}>Active</option>
                    <option value="0" {{ request('status') == '0' ? 'selected' : '' }}>Blocked</option>
                </select>
            </div>
            <div class="field" style="flex:1; min-width:150px;">
                <label>Date From</label>
                <input type="date" name="start_date" value="{{ request('start_date') }}" class="input" style="height:38px;">
            </div>
            <div class="field" style="flex:1; min-width:150px;">
                <label>Date To</label>
                <input type="date" name="end_date" value="{{ request('end_date') }}" class="input" style="height:38px;">
            </div>
            <div style="display:flex; gap:8px;">
                <button type="submit" class="btn btn-primary" style="height:38px;"><i data-lucide="search" size="16"></i></button>
                <a href="{{ route('admin.users') }}" class="btn" style="height:38px;"><i data-lucide="rotate-ccw" size="16"></i></a>
            </div>
        </form>

        <table class="user-table">
            <thead>
                <tr>
                    <th>Operator Identity</th>
                    <th>Email & Contact</th>
                    <th>Status</th>
                    <th>Permissions</th>
                    <th style="text-align:right">Actions</th>
                </tr>
            </thead>
            <tbody>
                @foreach($users as $user)
                <tr class="user-row">
                    <td>
                        <div style="display:flex; align-items:center; gap:12px;">
                            <div style="width:36px; height:36px; background:var(--primary-light); color:var(--primary); border-radius:8px; display:flex; align-items:center; justify-content:center; font-weight:800;">
                                {{ strtoupper(substr($user->name, 0, 1)) }}
                            </div>
                            <div>
                                <div style="font-weight:700; font-size:14px; color:var(--text-main)">{{ $user->name }}</div>
                                <div style="font-size:11px; color:var(--text-muted)">ID: #{{ $user->id }} • {{ $user->created_at->format('M d, Y') }}</div>
                            </div>
                        </div>
                    </td>
                    <td>
                        <div style="font-weight:600; color:var(--text-main)">{{ $user->email }}</div>
                        <div style="font-size:11px; color:var(--text-muted)">{{ $user->mobile_no ?? 'No phone' }}</div>
                    </td>
                    <td>
                        <span class="status-badge {{ $user->status ? 'status-active' : 'status-blocked' }}">
                            {{ $user->status ? 'Active' : 'Blocked' }}
                        </span>
                    </td>
                    <td>
                        <div style="display:flex; gap:4px; flex-wrap:wrap;">
                            @foreach($user->roles as $role)
                                <span style="font-size:10px; font-weight:700; background:var(--bg-main); color:var(--text-muted); padding:2px 8px; border-radius:4px; border:1px solid var(--border)">
                                    {{ $role->name }}
                                </span>
                            @endforeach
                        </div>
                    </td>
                    <td style="text-align:right">
                        <div style="display:flex; gap:8px; justify-content:flex-end;">
                            <a href="{{ route('admin.users.show', $user->id) }}" class="btn" title="View Profile Activity"><i data-lucide="eye" size="14"></i></a>
                            <button class="btn" onclick='editUser(@json($user), @json($user->roles->pluck("id")))'><i data-lucide="edit-3" size="14"></i></button>
                            @if($user->id !== auth()->id())
                            <form action="{{ route('admin.users.delete', $user->id) }}" method="POST" style="display:inline;" onsubmit="return confirm('Delete user data?')">
                                @csrf @method('DELETE')
                                <button type="submit" class="btn" style="color:#ef4444;"><i data-lucide="trash-2" size="14"></i></button>
                            </form>
                            @endif
                        </div>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>

        <div style="margin-top:24px;">
            {{ $users->appends(request()->query())->links() }}
        </div>
    </div>

    <!-- Side Panel -->
    <div id="right-panel" class="panel properties-panel collapsed" style="width: var(--properties-width); border-left: 1px solid var(--border);">
        <div class="panel-header" style="background:var(--bg-main)">
            <h2 id="panelTitle">New Operator Details</h2>
            <button class="btn" onclick="hideSidePanel()" style="border:none; background:transparent;"><i data-lucide="x" size="18"></i></button>
        </div>
        
        <div style="flex:1; overflow-y:auto; padding:24px;">
            <form id="userForm" action="{{ route('admin.users.store') }}" method="POST">
                @csrf
                <input type="hidden" name="_method" id="formMethod" value="POST">
                
                <div style="display:flex; flex-direction:column; gap:20px;">
                    <div class="field">
                        <label>Display Name</label>
                        <input type="text" name="name" id="userName" class="input" required>
                    </div>
                    
                    <div class="field">
                        <label>Business Email</label>
                        <input type="email" name="email" id="userEmail" class="input" required>
                    </div>

                    <div class="field">
                        <label>Security Password</label>
                        <input type="password" name="password" id="userPassword" class="input">
                        <p id="passHelp" style="font-size:11px; color:var(--text-muted); display:none;">Leave blank to maintain current password.</p>
                    </div>

                    <div class="field">
                        <label>Account Status</label>
                        <select name="status" id="userStatus" class="input">
                            <option value="1">Active</option>
                            <option value="0">Blocked</option>
                        </select>
                    </div>

                    <div class="field">
                        <label>Assigned Roles</label>
                        <div style="display:grid; gap:8px; background:var(--bg-main); padding:12px; border-radius:8px; border:1px solid var(--border)">
                            @foreach($roles as $role)
                            <label style="display:flex; align-items:center; gap:8px; cursor:pointer;">
                                <input type="checkbox" name="roles[]" value="{{ $role->id }}" class="role-checkbox" style="accent-color:var(--primary)">
                                <span style="font-size:13px; font-weight:500;">{{ $role->name }}</span>
                            </label>
                            @endforeach
                        </div>
                    </div>
                </div>

                <div style="margin-top:32px; display:flex; gap:12px;">
                    <button type="submit" class="btn btn-primary" style="flex:1; justify-content:center; height:40px; font-weight:700;">
                        <span id="submitText">Initialize Account</span>
                    </button>
                </div>
            </form>
        </div>
    </div>
</main>

<script>
    function showSidePanel() {
        document.getElementById('panelTitle').innerText = 'New Operator Details';
        document.getElementById('userForm').action = "{{ route('admin.users.store') }}";
        document.getElementById('formMethod').value = 'POST';
        document.getElementById('userName').value = '';
        document.getElementById('userEmail').value = '';
        document.getElementById('userPassword').value = '';
        document.getElementById('userPassword').required = true;
        document.getElementById('userStatus').value = '1';
        document.getElementById('passHelp').style.display = 'none';
        document.getElementById('submitText').innerText = 'Initialize Account';
        document.querySelectorAll('.role-checkbox').forEach(cb => cb.checked = false);

        document.getElementById('right-panel').classList.remove('collapsed');
        lucide.createIcons();
    }

    function hideSidePanel() {
        document.getElementById('right-panel').classList.add('collapsed');
    }

    function editUser(user, roleIds) {
        document.getElementById('panelTitle').innerText = 'Modify ' + user.name;
        document.getElementById('userForm').action =baseUrl + `/admin/users/${user.id}/update`;
        document.getElementById('formMethod').value = 'POST';
        document.getElementById('userName').value = user.name;
        document.getElementById('userEmail').value = user.email;
        document.getElementById('userPassword').value = '';
        document.getElementById('userPassword').required = false;
        document.getElementById('userStatus').value = user.status;
        document.getElementById('passHelp').style.display = 'block';
        document.getElementById('submitText').innerText = 'Save Modifications';
        
        document.querySelectorAll('.role-checkbox').forEach(cb => {
            cb.checked = roleIds.includes(parseInt(cb.value));
        });

        document.getElementById('right-panel').classList.remove('collapsed');
        lucide.createIcons();
    }
</script>
@endsection