@extends('layouts.app')

@section('title', 'Manage Clients')
@section('page-title', 'Corporate Clients Management')

@section('content')
<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center flex-wrap">
        <h6 class="mb-0"><i class="fas fa-building me-2"></i>Client List</h6>
        <div class="d-flex gap-2">
            <a href="{{ route('leader.clients.create') }}" class="btn btn-sm btn-primary">
                <i class="fas fa-plus me-1"></i> Add New Client
            </a>
        </div>
    </div>
    <div class="card-body">
        <!-- Stats Row -->
        <div class="row mb-3">
            <div class="col-md-4">
                <div class="alert alert-info text-center">
                    <strong>Total Clients:</strong> {{ $stats['total'] }}
                </div>
            </div>
            <div class="col-md-4">
                <div class="alert alert-success text-center">
                    <strong>Assigned:</strong> {{ $stats['assigned'] }}
                </div>
            </div>
            <div class="col-md-4">
                <div class="alert alert-warning text-center">
                    <strong>Unassigned:</strong> {{ $stats['unassigned'] }}
                </div>
            </div>
        </div>
        
        <!-- Filter Section -->
        <div class="card mb-3">
            <div class="card-body">
                <form method="GET" action="{{ route('leader.clients.index') }}" id="filterForm">
                    <input type="hidden" name="page" value="1"> <!-- Reset to page 1 when filtering -->
                    <div class="row align-items-end">
                        <div class="col-md-4">
                            <label class="form-label fw-bold">Filter By</label>
                            <select name="filter" class="form-select" onchange="this.form.submit()">
                                <option value="all" {{ $filter == 'all' ? 'selected' : '' }}>📋 All Clients ({{ $stats['total'] }})</option>
                                <option value="unassigned" {{ $filter == 'unassigned' ? 'selected' : '' }}>📌 Unassigned Clients ({{ $stats['unassigned'] }})</option>
                                <option value="assigned_to" {{ $filter == 'assigned_to' ? 'selected' : '' }}>👤 Assigned to Specific Member</option>
                            </select>
                        </div>
                        
                        <div class="col-md-4">
                            <label class="form-label fw-bold">Select Team Member</label>
                            <select name="assigned_to" class="form-select" 
                                {{ $filter != 'assigned_to' ? 'disabled' : '' }}
                                onchange="this.form.submit()">
                                <option value="">-- Select Member --</option>
                                @foreach($teamMembers as $member)
                                    <option value="{{ $member->id }}" {{ $assignedTo == $member->id ? 'selected' : '' }}>
                                        {{ $member->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        
                        <div class="col-md-4">
                            <a href="{{ route('leader.clients.index') }}" class="btn btn-danger btn-sm w-100">
                                <i class="fas fa-times-circle"></i> Clear Filters
                            </a>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        
        @if($clients->count() > 0)
            <div class="table-responsive">
                <table class="table table-bordered table-hover">
                    <thead class="table-light">
                        <tr>
                            <th><input type="checkbox" id="selectAll"></th>
                            <th>#</th>
                            <th>Company Name</th>
                            <th>Contact Person</th>
                            <th>Phone</th>
                            <th>Premium Amount</th>
                            <th>Assigned To</th>
                            <th>Status</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($clients as $index => $client)
                        <tr>
                            <td><input type="checkbox" class="client-checkbox" value="{{ $client->id }}"></td>
                            <td>{{ $clients->firstItem() + $index }}</td>
                            <td><strong>{{ $client->company_name }}</strong></br>
                                <small class="text-muted">Policy: {{ $client->policy_number ?? 'N/A' }}</small>
                            </td>
                            <td>{{ $client->contact_person ?? 'N/A' }}<br>
                                <small>{{ $client->email ?? '' }}</small>
                            </td>
                            <td>{{ $client->phone ?? 'N/A' }}</br>
                                <small>Added: {{ $client->created_at->format('d M Y') }}</small>
                            </td>
                            <td>{{ number_format($client->premium_amount ?? 0) }} BDT</br>
                                @if($client->renewal_date)
                                    <small class="{{ $client->renewal_date < now() ? 'text-danger' : '' }}">
                                        Renewal: {{ $client->renewal_date->format('d M Y') }}
                                    </small>
                                @endif
                            </td>
                            <td>
                                @if($client->assigned_to)
                                    <span class="badge bg-success">
                                        {{ $client->assignedTo->name ?? 'N/A' }}
                                    </span>
                                @else
                                    <span class="badge bg-warning">Unassigned</span>
                                @endif
                            </br>
                                <small class="text-muted">Created by: {{ $client->createdBy->name ?? 'N/A' }}</small>
                            </td>
                            <td>
                                <span class="badge bg-{{ $client->status == 'active' ? 'success' : ($client->status == 'prospect' ? 'warning' : 'secondary') }}">
                                    {{ ucfirst($client->status) }}
                                </span>
                            </br>
                                @if($client->isExpiringSoon())
                                    <small class="text-danger">⚠ Expiring soon</small>
                                @endif
                            </td>
                            <td>
                                 <a href="{{ route('leader.clients.edit', $client->id) . '?page=' . request()->get('page', 1) . '&filter=' . request()->get('filter', 'all') . '&assigned_to=' . request()->get('assigned_to', '') }}" class="btn btn-sm btn-warning">
                                    <i class="fas fa-edit"></i>
                                </a>
                                <button type="button" class="btn btn-sm btn-danger" data-bs-toggle="modal" data-bs-target="#deleteModal{{ $client->id }}" 
                                    data-page="{{ request()->get('page', 1) }}"
                                    data-filter="{{ request()->get('filter', 'all') }}"
                                    data-assigned_to="{{ request()->get('assigned_to', '') }}">
                                    <i class="fas fa-trash"></i>
                                </button>
                                </br>
                                @if(!$client->assigned_to)
                                    <button type="button" class="btn btn-sm btn-info mt-1" onclick="assignClient({{ $client->id }})">
                                        <i class="fas fa-user-plus"></i> Assign
                                    </button>
                                @endif
                            </td>
                        </tr>
                        
                        <!-- Delete Modal -->
                        <div class="modal fade" id="deleteModal{{ $client->id }}" tabindex="-1">
                            <div class="modal-dialog">
                                 <form method="POST" action="{{ route('leader.clients.destroy', $client->id) }}" id="deleteForm{{ $client->id }}">
                                    @csrf
                                    @method('DELETE')
                                    <input type="hidden" name="page" id="deletePage{{ $client->id }}" value="">
                                    <input type="hidden" name="filter" id="deleteFilter{{ $client->id }}" value="">
                                    <input type="hidden" name="assigned_to" id="deleteAssignedTo{{ $client->id }}" value="">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title">Delete Client</h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                        </div>
                                        <div class="modal-body">
                                            Are you sure you want to delete <strong>{{ $client->company_name }}</strong>?
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                                            <button type="submit" class="btn btn-danger">Delete</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                        @endforeach
                    </tbody>
                </table>
            </div>
            
            <!-- Bulk Assign -->
            <div class="row mt-3">
                <div class="col-md-6">
                    <div class="input-group">
                        <select id="bulkAssignTo" class="form-control">
                            <option value="">-- Assign Selected To --</option>
                            @foreach($teamMembers as $member)
                                <option value="{{ $member->id }}">{{ $member->name }}</option>
                            @endforeach
                        </select>
                        <button type="button" class="btn btn-primary" onclick="bulkAssign()">
                            <i class="fas fa-users"></i> Bulk Assign
                        </button>
                    </div>
                </div>
            </div>
            
           {{ $clients->appends(request()->query())->onEachSide(1)->links('pagination::bootstrap-4') }}
        @else
            <div class="text-center py-4">
                <p class="text-muted">No clients found.</p>
                <a href="{{ route('leader.clients.create') }}" class="btn btn-primary">Add Your First Client</a>
            </div>
        @endif
    </div>
</div>

@push('scripts')
<script>
    // Enable/disable member dropdown based on filter
    document.addEventListener('DOMContentLoaded', function() {
        const filterSelect = document.querySelector('select[name="filter"]');
        const assignedToSelect = document.querySelector('select[name="assigned_to"]');
        
        if (filterSelect && assignedToSelect) {
            filterSelect.addEventListener('change', function() {
                if (this.value === 'assigned_to') {
                    assignedToSelect.disabled = false;
                } else {
                    assignedToSelect.disabled = true;
                    assignedToSelect.value = '';
                }
            });
        }
    });
    // When delete modal opens, set the hidden fields
    document.querySelectorAll('[data-bs-target^="#deleteModal"]').forEach(button => {
        button.addEventListener('click', function() {
            const modalId = this.getAttribute('data-bs-target');
            const page = this.getAttribute('data-page');
            const filter = this.getAttribute('data-filter');
            const assignedTo = this.getAttribute('data-assigned_to');
            
            const clientId = modalId.replace('#deleteModal', '');
            document.getElementById('deletePage' + clientId).value = page;
            document.getElementById('deleteFilter' + clientId).value = filter;
            document.getElementById('deleteAssignedTo' + clientId).value = assignedTo;
        });
    });
    // Make functions globally available
    window.assignClient = function(clientId) {
        console.log('Assigning client:', clientId);
        
        // Get the select element for members
        let memberSelect = document.getElementById('bulkAssignTo');
        if (!memberSelect) {
            let memberId = prompt('Enter member ID to assign this client to:\n\nAvailable members are listed in the filter dropdown above.');
            if (memberId && !isNaN(memberId)) {
                submitAssignment(clientId, memberId);
            } else if (memberId) {
                alert('Please enter a valid numeric member ID');
            }
            return;
        }
        
        // Show modal with member selection
        showAssignModal(clientId);
    };
    
    // Alias for assignClient (for backward compatibility)
    window.assignTo = function(clientId) {
        assignClient(clientId);
    };
    
    window.showAssignModal = function(clientId) {
        // Get all team members from the filter dropdown
        let memberSelect = document.getElementById('bulkAssignTo');
        if (!memberSelect) {
            alert('No team members available to assign');
            return;
        }
        
        let members = [];
        for (let i = 0; i < memberSelect.options.length; i++) {
            let opt = memberSelect.options[i];
            if (opt.value) {
                members.push({id: opt.value, name: opt.text});
            }
        }
        
        if (members.length === 0) {
            alert('No team members available to assign');
            return;
        }
        
        // Create modal
        let modalHtml = `
            <div class="modal fade" id="assignModal" tabindex="-1">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">Assign Client to Team Member</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                        </div>
                        <div class="modal-body">
                            <div class="mb-3">
                                <label class="form-label">Select Team Member:</label>
                                <select id="assignMemberId" class="form-control">
                                    <option value="">-- Select Member --</option>
                                    ${members.map(m => `<option value="${m.id}">${m.name}</option>`).join('')}
                                </select>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                            <button type="button" class="btn btn-primary" onclick="submitAssignment(${clientId}, document.getElementById('assignMemberId').value)">
                                Assign Client
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        `;
        
        // Remove existing modal if any
        let existingModal = document.getElementById('assignModal');
        if (existingModal) {
            existingModal.remove();
        }
        
        // Add modal to body
        document.body.insertAdjacentHTML('beforeend', modalHtml);
        
        // Show modal
        let modal = new bootstrap.Modal(document.getElementById('assignModal'));
        modal.show();
        
        // Clean up modal when hidden
        document.getElementById('assignModal').addEventListener('hidden.bs.modal', function() {
            this.remove();
        });
    };
    
    window.submitAssignment = function(clientId, memberId) {
        if (!memberId) {
            alert('Please select a team member');
            return false;
        }
        
        console.log('Submitting assignment:', clientId, 'to', memberId);
        
        // Submit the assignment via AJAX
        fetch('/leader/clients/' + clientId + '/assign', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Accept': 'application/json'
            },
            body: JSON.stringify({
                assigned_to: memberId
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert('Client assigned successfully!');
                location.reload();
            } else {
                alert('Error: ' + (data.message || 'Could not assign client'));
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Error assigning client. Please try again.');
        });
    };
    
    // Select All checkbox
    const selectAll = document.getElementById('selectAll');
    if (selectAll) {
        selectAll.addEventListener('change', function(e) {
            document.querySelectorAll('.client-checkbox').forEach(cb => cb.checked = e.target.checked);
        });
    }
    
    window.bulkAssign = function() {
        let selected = [];
        document.querySelectorAll('.client-checkbox:checked').forEach(cb => {
            selected.push(cb.value);
        });
        
        let assignTo = document.getElementById('bulkAssignTo')?.value;
        
        if (selected.length === 0) {
            alert('Please select at least one client');
            return;
        }
        
        if (!assignTo) {
            alert('Please select a team member to assign to');
            return;
        }
        
        if (confirm('Assign ' + selected.length + ' client(s) to the selected member?')) {
            // Submit via AJAX
            fetch('{{ route("leader.clients.bulk-assign") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json'
                },
                body: JSON.stringify({
                    client_ids: selected,
                    assigned_to: assignTo
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    alert('Clients assigned successfully!');
                    location.reload();
                } else {
                    alert('Error: ' + (data.message || 'Could not assign clients'));
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('Error assigning clients. Please try again.');
            });
        }
    };
</script>
@endpush
@endsection