@extends('layouts.app')

@section('title', 'Resellers')

@section('content')
<style>
    /* Reduce line heights globally for this page */
    .container-fluid {
        line-height: 1.1 !important;
        font-size: 0.85rem !important;
    }
    
    .container-fluid * {
        line-height: 1.1 !important;
    }
    
    /* Reduce card padding and margins */
    .card-body {
        padding: 0.5rem !important;
    }
    
    .card-header {
        padding: 0.4rem 0.5rem !important;
    }
    
    .py-2, .py-3 {
        padding-top: 0.4rem !important;
        padding-bottom: 0.4rem !important;
    }
    
    /* Reduce margins */
    .mb-1 {
        margin-bottom: 0.1rem !important;
    }
    
    .mb-2, .mb-3 {
        margin-bottom: 0.4rem !important;
    }
    
    .mb-4 {
        margin-bottom: 0.6rem !important;
    }
    
    /* Reduce table cell padding */
    .table {
        font-size: 0.8rem !important;
    }
    
    .table td, .table th {
        padding: 0.3rem 0.4rem !important;
        line-height: 1 !important;
    }
    
    .table thead th {
        white-space: nowrap;
        vertical-align: middle !important;
        text-align: center;
        font-size: 0.75rem !important;
    }
    
    .table td.actions-cell {
        white-space: nowrap;
        text-align: center;
        vertical-align: middle !important;
    }
    
    .actions-cell .btn { 
        margin: 0 1px !important; 
    }
    
    .actions-cell .btn i {
        font-size: 0.9rem !important;
    }
    
    /* Reduce form element spacing */
    .form-group {
        margin-bottom: 0.4rem !important;
    }
    
    .form-label, label {
        margin-bottom: 0.15rem !important;
        line-height: 1 !important;
        font-size: 0.8rem !important;
    }
    
    .form-control {
        padding: 0.25rem 0.4rem !important;
        line-height: 1 !important;
        font-size: 0.8rem !important;
    }
    
    /* Reduce button padding */
    .btn {
        padding: 0.25rem 0.5rem !important;
        line-height: 1 !important;
        font-size: 0.8rem !important;
    }
    
    .btn-sm {
        padding: 0.15rem 0.3rem !important;
        font-size: 0.7rem !important;
        line-height: 1 !important;
    }
    
    .btn i {
        font-size: 0.75rem !important;
    }
    
    /* Reduce badge spacing */
    .badge {
        padding: 0.15rem 0.3rem !important;
        line-height: 1 !important;
        font-size: 0.7rem !important;
    }
    
    /* Reduce heading margins and sizes */
    h1, .h1 {
        font-size: 1.3rem !important;
        margin-bottom: 0.2rem !important;
        line-height: 1.1 !important;
    }
    
    h2, .h2 {
        font-size: 1.1rem !important;
        margin-bottom: 0.2rem !important;
        line-height: 1.1 !important;
    }
    
    h3, .h3 {
        font-size: 1rem !important;
        margin-bottom: 0.2rem !important;
        line-height: 1.1 !important;
    }
    
    h4, .h4 {
        font-size: 0.9rem !important;
        margin-bottom: 0.2rem !important;
        line-height: 1.1 !important;
    }
    
    h5, .h5 {
        font-size: 0.85rem !important;
        line-height: 1 !important;
        margin-bottom: 0 !important;
    }
    
    h6, .h6 {
        font-size: 0.8rem !important;
        line-height: 1 !important;
        margin-bottom: 0 !important;
    }
    
    /* Reduce statistics card text spacing */
    .text-xs {
        line-height: 1 !important;
        margin-bottom: 0.15rem !important;
        font-size: 0.65rem !important;
    }
    
    /* Reduce row spacing */
    .row {
        margin-bottom: 0 !important;
    }
    
    /* Reduce div text spacing */
    div.small, .text-muted.small, .text-muted {
        line-height: 1 !important;
        margin-top: 0.05rem !important;
        font-size: 0.7rem !important;
    }
    
    .small {
        font-size: 0.7rem !important;
    }
    
    /* Reduce font-weight-bold elements spacing */
    .font-weight-bold {
        line-height: 1 !important;
        font-size: 0.85rem !important;
    }
    
    /* Reduce modal spacing */
    .modal-body {
        padding: 0.6rem !important;
        font-size: 0.85rem !important;
    }
    
    .modal-header, .modal-footer {
        padding: 0.4rem !important;
    }
    
    .modal-title {
        font-size: 0.9rem !important;
    }
    
    /* Reduce alert spacing */
    .alert {
        padding: 0.4rem 0.6rem !important;
        margin-bottom: 0.4rem !important;
        font-size: 0.8rem !important;
    }
    
    /* Reduce icon circle size */
    .icon-circle {
        height: 1.2rem !important;
        width: 1.2rem !important;
        border-radius: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .icon-circle i {
        font-size: 0.6rem !important;
    }
    
    /* Reduce icon sizes */
    .fa-2x {
        font-size: 1.2rem !important;
    }
    
    .fa-3x {
        font-size: 1.5rem !important;
    }
    
    /* Reduce d-flex spacing */
    .d-flex.align-items-center {
        gap: 0.25rem !important;
    }
    
    .mr-2 {
        margin-right: 0.3rem !important;
    }
    
    .mr-3 {
        margin-right: 0.4rem !important;
    }
    
    .ml-1 {
        margin-left: 0.2rem !important;
    }
    
    /* Reduce paragraph spacing */
    p {
        margin-bottom: 0.2rem !important;
        line-height: 1.1 !important;
        font-size: 0.8rem !important;
    }
    
    /* Reduce statistics cards */
    .card {
        font-size: 0.85rem !important;
    }
    
    /* Reduce ul/li spacing */
    ul {
        margin-bottom: 0.3rem !important;
        padding-left: 1.2rem !important;
    }
    
    ul li {
        margin-bottom: 0.1rem !important;
        font-size: 0.75rem !important;
    }
</style>
<div class="container-fluid">
    <!-- Success/Error Messages -->
    @if(session('success'))
        <div class="row mb-3">
            <div class="col-12">
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    <i class="fas fa-check-circle mr-2"></i>{{ session('success') }}
                    <button type="button" class="close" data-dismiss="alert">
                        <span>&times;</span>
                    </button>
                </div>
            </div>
        </div>
    @endif

    @if(session('error'))
        <div class="row mb-3">
            <div class="col-12">
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    <i class="fas fa-exclamation-circle mr-2"></i>{{ session('error') }}
                    <button type="button" class="close" data-dismiss="alert">
                        <span>&times;</span>
                    </button>
                </div>
            </div>
        </div>
    @endif

    @if(session('warning'))
        <div class="row mb-3">
            <div class="col-12">
                <div class="alert alert-warning alert-dismissible fade show" role="alert">
                    <i class="fas fa-exclamation-triangle mr-2"></i>{{ session('warning') }}
                    <button type="button" class="close" data-dismiss="alert">
                        <span>&times;</span>
                    </button>
                </div>
            </div>
        </div>
    @endif

    @if($errors->any())
        <div class="row mb-3">
            <div class="col-12">
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    <i class="fas fa-exclamation-circle mr-2"></i>
                    <strong>Validation Errors:</strong>
                    <ul class="mb-0 mt-2">
                        @foreach($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                    <button type="button" class="close" data-dismiss="alert">
                        <span>&times;</span>
                    </button>
                </div>
            </div>
        </div>
    @endif

    <!-- Page Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h1 class="h3 mb-0 text-gray-800">
                        <i class="fas fa-users mr-2"></i>Resellers
                    </h1>
                    <p class="text-muted">Manage reseller accounts and their access</p>
                </div>
                <div>
                    <a href="{{ route('reseller.sales-invoices.index') }}" class="btn btn-primary mr-2">
                        <i class="fas fa-file-invoice mr-2"></i>All Invoice
                    </a>
                    <a href="{{ route('reseller.payments.index') }}" class="btn btn-success mr-2">
                        <i class="fas fa-money-bill-wave mr-2"></i>Payment Receive
                    </a>
                    <a href="{{ route('reseller.users.connection-types') }}" class="btn btn-info mr-2">
                        <i class="fas fa-network-wired mr-2"></i>Connection Type
                    </a>
                    <button class="btn btn-secondary mr-2" data-toggle="modal" data-target="#bulkUploadModal">
                        <i class="fas fa-upload mr-2"></i>Bulk Upload
                    </button>
                    <button class="btn btn-warning" data-toggle="modal" data-target="#addUserModal">
                        <i class="fas fa-plus mr-2"></i>Add Reseller
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Summary Statistics Cards -->
    <div class="row mb-4">
        <!-- Total Resellers -->
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-primary shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                                Total Resellers
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $stats['total_resellers'] }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-users fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Active Resellers -->
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-success shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                                Active Resellers
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $stats['active_resellers'] }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-check-circle fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Inactive Resellers -->
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-warning shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">
                                Inactive Resellers
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $stats['inactive_resellers'] }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-pause-circle fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- New Resellers (Monthly) -->
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-info shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-info text-uppercase mb-1">
                                New Resellers (Monthly)
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $stats['new_resellers_monthly'] }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-user-plus fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Filters -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card shadow">
                <div class="card-body">
                    <form method="GET" action="{{ route('reseller.users.index') }}">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="search" class="form-label">Search</label>
                                <input type="text" class="form-control" id="search" name="search" 
                                       value="{{ request('search') }}" placeholder="Search resellers...">
                            </div>
                            <div class="col-md-3 mb-3">
                                <label class="form-label">&nbsp;</label>
                                <div>
                                    <button type="submit" class="btn btn-warning">
                                        <i class="fas fa-search mr-2"></i>Search
                                    </button>
                                    <a href="{{ route('reseller.users.index') }}" class="btn btn-secondary">
                                        <i class="fas fa-times mr-2"></i>Clear
                                    </a>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Users Table -->
    <div class="row">
        <div class="col-12">
            <div class="card shadow">
                <div class="card-header py-3 d-flex justify-content-between align-items-center">
                    <h6 class="m-0 font-weight-bold" style="color: #000;">Resellers List</h6>
                    <div class="d-flex align-items-center">
                        <label class="mb-0 mr-2" style="font-size: 0.85rem; color: #6c757d;">Show</label>
                        <select id="perPageSelect" class="form-control form-control-sm" style="width: auto; min-width: 70px;">
                            <option value="10" {{ request('per_page', 50) == 10 ? 'selected' : '' }}>10</option>
                            <option value="25" {{ request('per_page', 50) == 25 ? 'selected' : '' }}>25</option>
                            <option value="50" {{ request('per_page', 50) == 50 ? 'selected' : '' }}>50</option>
                            <option value="100" {{ request('per_page', 50) == 100 ? 'selected' : '' }}>100</option>
                            <option value="200" {{ request('per_page', 50) == 200 ? 'selected' : '' }}>200</option>
                            <option value="500" {{ request('per_page', 50) == 500 ? 'selected' : '' }}>500</option>
                        </select>
                        <label class="mb-0 ml-2" style="font-size: 0.85rem; color: #6c757d;">Entries</label>
                    </div>
                </div>
                <div class="card-body">
                    @if($users->count() > 0)
                        <div class="table-responsive">
                            <table class="table table-bordered">
                                <thead>
                                    <tr>
                                        <th>SN</th>
                                        <th>User</th>
                                        <th>Company</th>
                                        <th>Parent Reseller</th>
                                        <th>Connection Type</th>
                                        <th>Email</th>
                                        <th>Password</th>
                                        <th>Phone</th>
                                        <th>Assign Employee</th>
                                        <th>Role</th>
                                        <th>Status</th>
                                        <th>Last Login</th>
                                        <th>Created</th>
                                        <th style="min-width:120px">Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($users as $index => $user)
                                    <tr>
                                        <td>{{ $index + 1 }}</td>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <div class="mr-3">
                                                    <div class="icon-circle bg-warning">
                                                        <i class="fas fa-user text-white"></i>
                                                    </div>
                                                </div>
                                                <div>
                                                    <div class="font-weight-bold">{{ $user->name }}</div>
                                                    <div class="text-muted small">ID: {{ $user->id }}</div>
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="font-weight-bold">{{ $user->company_name ?? '-' }}</div>
                                        </td>
                                        <td>
                                            @if($user->parentUser)
                                                <div class="font-weight-bold text-primary">{{ $user->parentUser->name }}</div>
                                                <div class="text-muted small">{{ $user->parentUser->company_name ?? 'No Company' }}</div>
                                            @else
                                                <div class="font-weight-bold text-success">Top Level</div>
                                            @endif
                                        </td>
                                        <td>
                                            @if($user->connectionTypeRelation)
                                                <div class="font-weight-bold">{{ $user->connectionTypeRelation->name }}</div>
                                                @if($user->connectionTypeRelation->isp)
                                                    <div class="text-muted small">{{ $user->connectionTypeRelation->isp->name }}</div>
                                                @endif
                                            @else
                                                <span class="text-muted">-</span>
                                            @endif
                                        </td>
                                        <td>
                                            <a href="mailto:{{ $user->email }}">{{ $user->email }}</a>
                                        </td>
                                        <td>
                                            @if($user->plain_password)
                                                <span class="password-display" data-password="{{ $user->plain_password }}" style="cursor: pointer;">
                                                    <i class="fas fa-eye text-primary"></i> Click to view
                                                </span>
                                            @elseif($user->password)
                                                <span class="password-display" data-password="{{ $user->password }}" style="cursor: pointer;" title="Hashed password from database">
                                                    <i class="fas fa-eye text-primary"></i> Click to view
                                                </span>
                                            @else
                                                <span class="text-muted">-</span>
                                            @endif
                                        </td>
                                        <td>
                                            @if($user->phone)
                                                <span class="text-muted">{{ $user->phone }}</span>
                                            @else
                                                <span class="text-muted">-</span>
                                            @endif
                                        </td>
                                        <td>
                                            @if($user->assignedEmployees && $user->assignedEmployees->count() > 0)
                                                <div class="d-flex align-items-center justify-content-center">
                                                    @foreach($user->assignedEmployees as $assignedEmployee)
                                                        <span class="badge badge-success mr-1" 
                                                              data-toggle="tooltip" 
                                                              data-placement="top" 
                                                              title="{{ $assignedEmployee->name }}{{ $assignedEmployee->position ? ' - ' . $assignedEmployee->position : '' }}">
                                                            <i class="fas fa-user-check"></i>
                                                        </span>
                                                    @endforeach
                                                    <button class="btn btn-primary btn-sm ml-1" 
                                                            onclick="showAssignEmployeeModal({{ $user->id }}, '{{ addslashes($user->name) }}', [{{ $user->assignedEmployees->pluck('id')->implode(',') }}])"
                                                            title="Manage Employees">
                                                        <i class="fas fa-edit"></i>
                                                    </button>
                                                </div>
                                            @else
                                                <div class="text-center">
                                                    <button class="btn btn-primary btn-sm" 
                                                            onclick="showAssignEmployeeModal({{ $user->id }}, '{{ addslashes($user->name) }}', [])"
                                                            title="Assign Employee for {{ $user->name }}">
                                                        <i class="fas fa-user-plus"></i> Assign
                                                    </button>
                                                </div>
                                            @endif
                                        </td>
                                        <td>
                                            @if($user->role)
                                                <span class="badge badge-info">{{ ucfirst($user->role) }}</span>
                                            @else
                                                <span class="text-muted">-</span>
                                            @endif
                                        </td>
                                        <td>
                                            <span class="badge badge-{{ $user->is_active ? 'success' : 'secondary' }}">
                                                {{ $user->is_active ? 'Active' : 'Inactive' }}
                                            </span>
                                        </td>
                                        <td>
                                            @if($user->last_login_at)
                                                <span class="text-muted small">{{ $user->last_login_at->format('M d, Y H:i') }}</span>
                                            @else
                                                <span class="text-muted">Never</span>
                                            @endif
                                        </td>
                                        <td>{{ $user->created_at->format('M d, Y') }}</td>
                                        <td class="actions-cell">
                                            <div class="btn-group" role="group">
                                                <a href="{{ route('reseller.users.show', $user) }}" class="btn btn-sm btn-outline-info" title="View">
                                                    <i class="fas fa-eye"></i>
                                                </a>
                                                <a href="{{ route('reseller.users.edit', $user) }}" class="btn btn-sm btn-outline-warning" title="Edit">
                                                    <i class="fas fa-edit"></i>
                                                </a>
                                                <button type="button" class="btn btn-sm btn-outline-danger" 
                                                        onclick="deleteUser({{ $user->id }}, '{{ $user->name }}')" title="Delete">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>

                    @else
                        <div class="text-center py-5">
                            <i class="fas fa-users fa-3x text-muted mb-3"></i>
                            <h5 class="text-muted">No resellers found</h5>
                            <p class="text-muted">Start by adding your first reseller.</p>
                            <button class="btn btn-warning" data-toggle="modal" data-target="#addUserModal">
                                <i class="fas fa-plus mr-2"></i>Add Reseller
                            </button>
                        </div>
                    @endif
                    
                    @if($users->hasPages())
                        <div class="d-flex justify-content-center mt-3">
                            {{ $users->withQueryString()->links() }}
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Add User Modal -->
<div class="modal fade" id="addUserModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Add Reseller</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <form action="{{ route('reseller.users.store') }}" method="POST">
                @csrf
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="company_name" class="form-label">Company Name *</label>
                            <input type="text" class="form-control" id="company_name" name="company_name" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="name" class="form-label">Full Name *</label>
                            <input type="text" class="form-control" id="name" name="name" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="email" class="form-label">Email Address *</label>
                            <input type="email" class="form-control" id="email" name="email" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="phone" class="form-label">Phone *</label>
                            <input type="text" class="form-control" id="phone" name="phone" required>
                        </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" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="password_confirmation" class="form-label">Confirm Password *</label>
                            <input type="password" class="form-control" id="password_confirmation" name="password_confirmation" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="address" class="form-label">Address *</label>
                            <textarea class="form-control" id="address" name="address" rows="3" required></textarea>

                            <div class="row">
                                
                                
                            </div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="connection_type" class="form-label">
                                Connection Type <span class="text-danger">*</span>
                                <button type="button" class="btn btn-sm btn-link p-0 ml-1" data-toggle="modal" data-target="#addConnectionTypeModal" title="Add New Connection Type">
                                    <i class="fas fa-plus text-success"></i>
                                </button>
                            </label>
                            <select class="form-control" id="connection_type" name="connection_type" required>
                                <option value="">Select Connection Type</option>
                                @if(isset($connectionTypes))
                                    @foreach($connectionTypes as $connectionType)
                                        <option value="{{ $connectionType->id }}" {{ old('connection_type') == $connectionType->id ? 'selected' : '' }}>
                                            {{ $connectionType->name }}@if($connectionType->isp && $connectionType->isp->name) - {{ $connectionType->isp->name }}@endif
                                        </option>
                                    @endforeach
                                @endif
                            </select>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="role" class="form-label">Role</label>
                            <select class="form-control" id="role" name="role">
                                <option value="reseller" selected>Reseller</option>
                            </select>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="is_active" class="form-label">Status</label>
                            <select class="form-control" id="is_active" name="is_active">
                                <option value="1">Active</option>
                                <option value="0">Inactive</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-warning">Add Reseller</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Add Connection Type Modal -->
<div class="modal fade" id="addConnectionTypeModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Add Connection Type</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <form id="addConnectionTypeForm" onsubmit="return false;">
                @csrf
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="ct_name" class="form-label">Name <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="ct_name" name="name" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="ct_isp_id" class="form-label">ISP/Branch <span class="text-danger">*</span></label>
                            <select class="form-control" id="ct_isp_id" name="isp_id" required>
                                <option value="">Select ISP/Branch</option>
                                @if(isset($branches))
                                    @foreach($branches as $branch)
                                        <option value="{{ $branch->id }}">{{ $branch->name }}</option>
                                    @endforeach
                                @endif
                            </select>
                        </div>
                        <div class="col-md-12 mb-3">
                            <label for="ct_description" class="form-label">Description</label>
                            <textarea class="form-control" id="ct_description" name="description" rows="3"></textarea>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="ct_is_active" class="form-label">Status</label>
                            <select class="form-control" id="ct_is_active" name="is_active">
                                <option value="1" selected>Active</option>
                                <option value="0">Inactive</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="button" id="submitConnectionTypeBtn" class="btn btn-success">Add Connection Type</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Bulk Upload Modal -->
<div class="modal fade" id="bulkUploadModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header bg-success text-white">
                <h5 class="modal-title">
                    <i class="fas fa-upload mr-2"></i>Bulk Upload Resellers
                </h5>
                <button type="button" class="close text-white" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <form action="{{ route('reseller.users.bulk-upload') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="modal-body">
                    <div class="alert alert-info">
                        <i class="fas fa-info-circle mr-2"></i>
                        <strong>Instructions:</strong>
                        <ul class="mb-0 mt-2">
                            <li>Download the CSV template</li>
                            <li>Fill in the reseller details (leave Created By and Parent ID empty to use default values)</li>
                            <li>Upload the completed file (CSV recommended for Excel compatibility)</li>
                            <li><strong>Required columns:</strong> Created By (optional), Parent ID (optional), Company Name, Full Name, Email, Phone, Password, Address, Status</li>
                            <li><strong>Status values:</strong> "active" or "inactive"</li>
                        </ul>
                    </div>
                    
                    <div class="form-group">
                        <label for="excel_file" class="form-label">
                            <i class="fas fa-file-excel mr-2"></i>Select File (CSV/Excel) *
                        </label>
                        <input type="file" class="form-control-file" id="excel_file" name="excel_file" accept=".xlsx,.xls,.csv" required>
                        <small class="form-text text-muted">
                            Only .xlsx, .xls, and .csv files are allowed. Maximum file size: 5MB
                        </small>
                    </div>
                    
                    <div class="d-flex align-items-center">
                        <a href="{{ route('reseller.users.bulk-upload.template') }}" class="btn btn-outline-info btn-sm mr-3">
                            <i class="fas fa-download mr-2"></i>Download Template
                        </a>
                        <span class="text-muted small">
                            Use this template to ensure correct format
                        </span>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">
                        <i class="fas fa-times mr-2"></i>Cancel
                    </button>
                    <button type="submit" class="btn btn-success">
                        <i class="fas fa-upload mr-2"></i>Upload Resellers
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
// Password reveal functionality
document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('.password-display').forEach(function(element) {
        element.addEventListener('click', function() {
            const password = this.getAttribute('data-password');
            const currentText = this.innerHTML;
            
            // Check if password is currently hidden
            if (currentText.includes('Click to view')) {
                // Show password
                this.innerHTML = `<i class="fas fa-eye-slash text-danger"></i> <span class="font-monospace">${password}</span>`;
            } else {
                // Hide password
                this.innerHTML = '<i class="fas fa-eye text-primary"></i> Click to view';
            }
        });
    });
});

function deleteUser(id, name) {
    if (confirm(`Are you sure you want to delete the reseller "${name}"? This action cannot be undone.`)) {
        // Create a form to submit the delete request
        const form = document.createElement('form');
        form.method = 'POST';
        form.action = `/reseller/users/${id}`;
        
        // Add CSRF token
        const csrfToken = document.createElement('input');
        csrfToken.type = 'hidden';
        csrfToken.name = '_token';
        csrfToken.value = '{{ csrf_token() }}';
        form.appendChild(csrfToken);
        
        // Add method override for DELETE
        const methodField = document.createElement('input');
        methodField.type = 'hidden';
        methodField.name = '_method';
        methodField.value = 'DELETE';
        form.appendChild(methodField);
        
        // Submit the form
        document.body.appendChild(form);
        form.submit();
    }
}

function showAssignEmployeeModal(userId, userName, assignedEmployeeIds = []) {
    console.log('Assign Employee Modal - User ID:', userId, 'Name:', userName, 'Assigned IDs:', assignedEmployeeIds);
    
    try {
        // Set modal title
        document.getElementById('assignEmployeeModalLabel').textContent = `Assign Employees for ${userName}`;
        
        // Set form data
        document.getElementById('reseller_user_id').value = userId;
        
        // Reset employee checkbox list
        const checkboxList = document.getElementById('employeeCheckboxList');
        checkboxList.innerHTML = '<div class="text-center text-muted"><i class="fas fa-spinner fa-spin"></i> Loading employees...</div>';
        
        // Show modal first
        $('#assignEmployeeModal').modal('show');
        
        // Load all active employees
        fetch('/api/all-employees', {
            method: 'GET',
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'Accept': 'application/json'
            },
            credentials: 'same-origin'
        })
            .then(response => {
                console.log('API Response status:', response.status);
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                return response.json();
            })
            .then(data => {
                console.log('Employees data:', data);
                checkboxList.innerHTML = '';
                
                if (data.success && data.employees && data.employees.length > 0) {
                    // Add "Select All" checkbox
                    const selectAllDiv = document.createElement('div');
                    selectAllDiv.className = 'form-check mb-3 pb-2 border-bottom';
                    
                    const selectAllCheckbox = document.createElement('input');
                    selectAllCheckbox.type = 'checkbox';
                    selectAllCheckbox.className = 'form-check-input';
                    selectAllCheckbox.id = 'selectAllEmployees';
                    
                    const selectAllLabel = document.createElement('label');
                    selectAllLabel.className = 'form-check-label font-weight-bold';
                    selectAllLabel.htmlFor = 'selectAllEmployees';
                    selectAllLabel.innerHTML = '<i class="fas fa-check-double"></i> Select All Employees';
                    
                    selectAllDiv.appendChild(selectAllCheckbox);
                    selectAllDiv.appendChild(selectAllLabel);
                    checkboxList.appendChild(selectAllDiv);
                    
                    // Add individual employee checkboxes
                    data.employees.forEach((employee, index) => {
                        const checkboxDiv = document.createElement('div');
                        checkboxDiv.className = 'form-check mb-2';
                        
                        const checkbox = document.createElement('input');
                        checkbox.type = 'checkbox';
                        checkbox.className = 'form-check-input employee-checkbox';
                        checkbox.id = `employee_${employee.id}`;
                        checkbox.name = 'employee_id[]';
                        checkbox.value = employee.id;
                        
                        // Check if this employee is already assigned
                        if (assignedEmployeeIds.includes(employee.id)) {
                            checkbox.checked = true;
                        }
                        
                        const label = document.createElement('label');
                        label.className = 'form-check-label';
                        label.htmlFor = `employee_${employee.id}`;
                        
                        const displayText = employee.position 
                            ? `${employee.name} - ${employee.position}`
                            : `${employee.name}`;
                        label.innerHTML = `<strong>${displayText}</strong>`;
                        
                        if (employee.email) {
                            const emailSpan = document.createElement('small');
                            emailSpan.className = 'text-muted d-block';
                            emailSpan.textContent = employee.email;
                            label.appendChild(emailSpan);
                        }
                        
                        checkboxDiv.appendChild(checkbox);
                        checkboxDiv.appendChild(label);
                        checkboxList.appendChild(checkboxDiv);
                    });
                    
                    // Check if all employees are already assigned
                    const employeeCheckboxes = document.querySelectorAll('.employee-checkbox');
                    const allChecked = Array.from(employeeCheckboxes).every(checkbox => checkbox.checked);
                    selectAllCheckbox.checked = allChecked;
                    
                    // Add event listener for "Select All"
                    selectAllCheckbox.addEventListener('change', function() {
                        employeeCheckboxes.forEach(cb => {
                            cb.checked = this.checked;
                        });
                    });
                    
                    // Add event listener to individual checkboxes to update "Select All"
                    employeeCheckboxes.forEach(cb => {
                        cb.addEventListener('change', function() {
                            const allChecked = Array.from(employeeCheckboxes).every(checkbox => checkbox.checked);
                            selectAllCheckbox.checked = allChecked;
                        });
                    });
                } else {
                    checkboxList.innerHTML = '<div class="text-center text-muted">No employees found</div>';
                }
            })
            .catch(error => {
                console.error('Error loading employees:', error);
                checkboxList.innerHTML = '<div class="text-center text-danger">Error loading employees</div>';
                alert('Error loading employees. Please refresh the page and try again.\n\nError: ' + error.message);
            });
    } catch (error) {
        console.error('Error in showAssignEmployeeModal:', error);
        alert('Error: ' + error.message);
    }
}

function removeEmployeeAssignment(userId, employeeId, employeeName, userName) {
    if (confirm(`Are you sure you want to remove "${employeeName}" from taking care of "${userName}"?`)) {
        // Create form to submit delete request
        const form = document.createElement('form');
        form.method = 'POST';
        form.action = '/reseller/remove-employee-assignment';
        
        // Add CSRF token
        const csrfToken = document.createElement('input');
        csrfToken.type = 'hidden';
        csrfToken.name = '_token';
        csrfToken.value = '{{ csrf_token() }}';
        form.appendChild(csrfToken);
        
        // Add user ID
        const userIdInput = document.createElement('input');
        userIdInput.type = 'hidden';
        userIdInput.name = 'user_id';
        userIdInput.value = userId;
        form.appendChild(userIdInput);
        
        // Add employee ID
        const employeeIdInput = document.createElement('input');
        employeeIdInput.type = 'hidden';
        employeeIdInput.name = 'employee_id';
        employeeIdInput.value = employeeId;
        form.appendChild(employeeIdInput);
        
        // Submit form
        document.body.appendChild(form);
        form.submit();
    }
}

// Initialize tooltips
$(document).ready(function() {
    $('[data-toggle="tooltip"]').tooltip();
});

// Assign Tags modal
function showAssignTagsModal(userId, userName) {
    const modalHtml = `
    <div class="modal fade" id="assignTagsModal" tabindex="-1" role="dialog">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header bg-primary text-white">
            <h5 class="modal-title">Assign Tags for ${userName}</h5>
            <button type="button" class="close text-white" data-dismiss="modal"><span>&times;</span></button>
          </div>
          <div class="modal-body">
            <div class="alert alert-success">
              <i class="fas fa-tags"></i>
              <strong>Assign Tags:</strong> Select a tag and a sub tag for this reseller.
            </div>
            <div class="form-group">
              <label>Tag</label>
              <select id="modalTagSelect" class="form-control">
                <option value="">Select Tag</option>
                @foreach(\App\Models\Tag::orderBy('name')->get() as $t)
                  <option value="{{ $t->id }}">{{ $t->name }}</option>
                @endforeach
              </select>
            </div>
            <div class="form-group">
              <label>Sub Tag</label>
              <select id="modalSubTagSelect" class="form-control">
                <option value="">Select Sub Tag</option>
              </select>
            </div>
            <div class="form-group">
              <label>Notes (Optional)</label>
              <textarea id="assignTagsNotes" class="form-control" rows="2" placeholder="Add any notes about this assignment..."></textarea>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
            <button type="button" class="btn btn-primary" onclick="saveAssignTags(${userId})"><i class="fas fa-save"></i> Assign Tags</button>
          </div>
        </div>
      </div>
    </div>`;

    const existing = document.getElementById('assignTagsModal');
    if (existing) existing.remove();
    document.body.insertAdjacentHTML('beforeend', modalHtml);
    $('#assignTagsModal').modal('show');

    document.getElementById('modalTagSelect').addEventListener('change', function(){
        const tagId = this.value;
        const subSelect = document.getElementById('modalSubTagSelect');
        if (!tagId) { subSelect.innerHTML = '<option value="">Select Sub Tag</option>'; return; }
        fetch('{{ url('/reseller/api/sub-tags-by-tag') }}', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
            body: JSON.stringify({ tag_id: tagId })
        }).then(r => r.json()).then(d => {
            const items = d.results || [];
            subSelect.innerHTML = '<option value="">Select Sub Tag</option>' + items.map(i => `<option value="${i.id}">${i.name}</option>`).join('');
        }).catch(() => { subSelect.innerHTML = '<option value="">Select Sub Tag</option>'; });
    });
}

function saveAssignTags(userId) {
    const tagId = document.getElementById('modalTagSelect').value;
    const subTagId = document.getElementById('modalSubTagSelect').value;
    if (!tagId || !subTagId) { alert('Please select both Tag and Sub Tag'); return; }
    fetch('{{ route('users.assign-tags') }}', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
        body: JSON.stringify({ user_id: userId, tag_id: tagId, sub_tag_id: subTagId, notes: document.getElementById('assignTagsNotes').value })
    }).then(r => r.json()).then(() => {
        $('#assignTagsModal').modal('hide');
        // Reload to show latest assignments
        location.reload();
    }).catch(() => { alert('Failed to assign'); });
}
// Reference search removed per request
</script>

<!-- Assign Employee Modal -->
<div class="modal fade" id="assignEmployeeModal" tabindex="-1" role="dialog" aria-labelledby="assignEmployeeModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title" id="assignEmployeeModalLabel">Assign Employee</h5>
                <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form action="{{ route('reseller.assign-employee') }}" method="POST">
                @csrf
                <input type="hidden" id="reseller_user_id" name="reseller_user_id">
                
                <div class="modal-body">
                    <div class="alert alert-success">
                        <i class="fas fa-info-circle"></i>
                        <strong>Assign Employees:</strong> Select one or more employees to take care of this reseller.
                        <br><small>Already assigned employees are pre-checked. You can add more or uncheck to remove.</small>
                    </div>
                    
                    <div class="form-group">
                        <label>
                            <i class="fas fa-users"></i> Select Employees *
                        </label>
                        <div id="employeeCheckboxList" style="max-height: 300px; overflow-y: auto; border: 1px solid #ddd; padding: 10px; border-radius: 4px;">
                            <div class="text-center text-muted">
                                <i class="fas fa-spinner fa-spin"></i> Loading employees...
                            </div>
                        </div>
                        <small class="form-text text-muted">
                            <i class="fas fa-hand-pointer"></i> Check the boxes to select multiple employees
                        </small>
                    </div>
                    
                    <div class="form-group">
                        <label for="assignment_notes">Assignment Notes (Optional)</label>
                        <textarea class="form-control" id="assignment_notes" name="notes" rows="3" 
                                  placeholder="Add any notes about this assignment..."></textarea>
                    </div>
                </div>
                
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">
                        <i class="fas fa-times"></i> Cancel
                    </button>
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-user-check"></i> Assign Employees
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

@push('scripts')
<script>
// Handle per page change
document.addEventListener('DOMContentLoaded', function () {
    var perPageSelect = document.getElementById('perPageSelect');
    if (perPageSelect) {
        perPageSelect.addEventListener('change', function() {
            var perPage = this.value;
            var url = new URL(window.location.href);
            url.searchParams.set('per_page', perPage);
            // Reset to page 1 when changing per page
            url.searchParams.set('page', '1');
            window.location.href = url.toString();
        });
    }
});

// Wait for jQuery to be loaded
(function() {
    function initConnectionTypeForm() {
        if (typeof jQuery === 'undefined' || typeof $ === 'undefined') {
            setTimeout(initConnectionTypeForm, 100);
            return;
        }
        
        jQuery(document).ready(function($) {
            // Handle Add Connection Type button click
            $('#submitConnectionTypeBtn').on('click', function(e) {
        e.preventDefault();
        e.stopPropagation();
        
        var formData = {
            name: $('#ct_name').val(),
            isp_id: $('#ct_isp_id').val(),
            description: $('#ct_description').val(),
            is_active: $('#ct_is_active').val(),
            _token: $('meta[name="csrf-token"]').attr('content')
        };
        
        if (!formData.name || !formData.isp_id) {
            alert('Please fill in all required fields');
            return false;
        }
        
        // Disable button to prevent double submission
        $(this).prop('disabled', true).text('Adding...');
        
        $.ajax({
            url: '{{ route("connection-types.store") }}',
            method: 'POST',
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'Accept': 'application/json'
            },
            data: formData,
            dataType: 'json',
            success: function(response) {
                if (response.success && response.connectionType) {
                    // Add new option to connection type dropdown
                    var optionText = response.connectionType.name;
                    if (response.connectionType.isp && response.connectionType.isp.name) {
                        optionText += ' - ' + response.connectionType.isp.name;
                    }
                    
                    var newOption = $('<option>', {
                        value: response.connectionType.id,
                        text: optionText,
                        selected: true
                    });
                    
                    $('#connection_type').append(newOption);
                    
                    // Show success message
                    alert('Connection Type added successfully!');
                    
                    // Close modal
                    $('#addConnectionTypeModal').modal('hide');
                    
                    // Reset form
                    $('#addConnectionTypeForm')[0].reset();
                } else {
                    alert('Connection Type added but response format is invalid.');
                }
            },
            error: function(xhr) {
                console.error('Error:', xhr);
                var errors = xhr.responseJSON?.errors || {};
                var errorMessage = 'Failed to add Connection Type. ';
                
                if (xhr.responseJSON?.message) {
                    errorMessage += xhr.responseJSON.message;
                } else if (Object.keys(errors).length > 0) {
                    errorMessage += Object.values(errors).flat().join(', ');
                } else {
                    errorMessage += 'Please try again.';
                }
                
                alert(errorMessage);
            },
            complete: function() {
                // Re-enable button
                $('#submitConnectionTypeBtn').prop('disabled', false).text('Add Connection Type');
            }
        });
        
        return false;
    });
    
    // Reset form when modal is closed
    $('#addConnectionTypeModal').on('hidden.bs.modal', function() {
        $('#addConnectionTypeForm')[0].reset();
        $('#submitConnectionTypeBtn').prop('disabled', false).text('Add Connection Type');
    });
    
            // Prevent form submission on Enter key
            $('#addConnectionTypeForm').on('keypress', function(e) {
                if (e.which === 13) {
                    e.preventDefault();
                    $('#submitConnectionTypeBtn').click();
                    return false;
                }
            });
        });
    }
    
    // Start initialization
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initConnectionTypeForm);
    } else {
        initConnectionTypeForm();
    }
})();
</script>
@endpush
@endsection