@extends('layouts.admin')

@section('title', __('Team Members'))

@section('content')
<div class="container-fluid">
    <!-- Page Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-0 text-gray-800">{{ __('Team Members') }}</h1>
            <p class="text-muted">{{ __('Manage all your team members') }}</p>
        </div>
        <div>
            <a href="{{ route('admin.team.dashboard', ['locale' => app()->getLocale()]) }}" class="btn btn-outline-secondary mr-2">
                <i class="fas fa-tachometer-alt"></i> {{ __('Dashboard') }}
            </a>
            <a href="{{ route('admin.team.create', ['locale' => app()->getLocale()]) }}" class="btn btn-primary">
                <i class="fas fa-plus"></i> {{ __('Add Member') }}
            </a>
        </div>
    </div>

    <!-- Filters -->
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">{{ __('Filters & Search') }}</h6>
        </div>
        <div class="card-body">
            <form id="filterForm" class="row">
                <div class="col-md-3 mb-3">
                    <label for="status">{{ __('Status') }}</label>
                    <select name="status" id="status" class="form-control">
                        <option value="">{{ __('All Status') }}</option>
                        <option value="1">{{ __('Active') }}</option>
                        <option value="0">{{ __('Inactive') }}</option>
                    </select>
                </div>
                <div class="col-md-3 mb-3">
                    <label for="department">{{ __('Department') }}</label>
                    <select name="department" id="department" class="form-control">
                        <option value="">{{ __('All Departments') }}</option>
                        @foreach($departments as $dept)
                            <option value="{{ $dept }}">{{ $dept }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-3 mb-3">
                    <label for="is_lead">{{ __('Role') }}</label>
                    <select name="is_lead" id="is_lead" class="form-control">
                        <option value="">{{ __('All Roles') }}</option>
                        <option value="1">{{ __('Team Leads') }}</option>
                        <option value="0">{{ __('Members') }}</option>
                    </select>
                </div>
                <div class="col-md-3 mb-3">
                    <label for="date_from">{{ __('Join Date From') }}</label>
                    <input type="date" name="date_from" id="date_from" class="form-control">
                </div>
                <div class="col-md-3 mb-3">
                    <label for="date_to">{{ __('Join Date To') }}</label>
                    <input type="date" name="date_to" id="date_to" class="form-control">
                </div>
                <div class="col-md-6 mb-3">
                    <label for="search">{{ __('Searchteam') }}</label>
                    <div class="input-group">
                        <input type="text" name="search" id="search" class="form-control" placeholder="{{ __('Search by name, position, email...') }}">
                        <div class="input-group-append">
                            <button class="btn btn-outline-secondary" type="button" onclick="clearFilters()">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Bulk Actions -->
    <div class="card shadow mb-4" id="bulkActions" style="display: none;">
        <div class="card-body">
            <div class="row align-items-center">
                <div class="col">
                    <span id="selectedCount">0</span> {{ __('items selected') }}
                </div>
                <div class="col-auto">
                    <div class="btn-group">
                        <button class="btn btn-outline-danger btn-sm" onclick="bulkAction('delete')">
                            <i class="fas fa-trash"></i> {{ __('Delete') }}
                        </button>
                        <button class="btn btn-outline-success btn-sm" onclick="bulkAction('activate')">
                            <i class="fas fa-check"></i> {{ __('Activate') }}
                        </button>
                        <button class="btn btn-outline-warning btn-sm" onclick="bulkAction('deactivate')">
                            <i class="fas fa-user-times"></i> {{ __('Deactivate') }}
                        </button>
                        <button class="btn btn-outline-info btn-sm" onclick="bulkAction('make_lead')">
                            <i class="fas fa-star"></i> {{ __('Make Lead') }}
                        </button>
                        <button class="btn btn-outline-secondary btn-sm" onclick="bulkAction('remove_lead')">
                            <i class="fas fa-star-half-alt"></i> {{ __('Remove Lead') }}
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Data Table -->
    <div class="card shadow">
        <div class="card-body">
            <div class="table-responsive">
                <table id="teamTable" class="table table-bordered" width="100%" cellspacing="0">
                    <thead>
                        <tr>
                            <th>
                                <input type="checkbox" id="selectAll">
                            </th>
                            <th>{{ __('Avatar') }}</th>
                            <th>{{ __('Name') }}</th>
                            <th>{{ __('Position') }}</th>
                            <th>{{ __('Department') }}</th>
                            <th>{{ __('Status') }}</th>
                            <th>{{ __('Role') }}</th>
                            <th>{{ __('Join Date') }}</th>
                            <th>{{ __('Actions') }}</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">{{ __('Confirm Delete') }}</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                {{ __('Are you sure you want to delete this team member? This action cannot be undone.') }}
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ __('Cancel') }}</button>
                <button type="button" class="btn btn-danger" id="confirmDelete">{{ __('Delete') }}</button>
            </div>
        </div>
    </div>
</div>

<script>
let teamTable;
let selectedItems = [];

$(document).ready(function() {
    initializeDataTable();
    setupEventListeners();
});

function initializeDataTable() {
    teamTable = $('#teamTable').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: '{{ route("admin.team.list", ["locale" => app()->getLocale()]) }}',
            data: function(d) {
                d.status = $('#status').val();
                d.department = $('#department').val();
                d.is_lead = $('#is_lead').val();
                d.date_from = $('#date_from').val();
                d.date_to = $('#date_to').val();
                d.search = $('#search').val();
            }
        },
        columns: [
            {
                data: null,
                orderable: false,
                render: function(data, type, row) {
                    return `<input type="checkbox" class="item-checkbox" value="${row.id}">`;
                }
            },
            {
                data: 'avatar_display',
                orderable: false,
                className: 'text-center'
            },
            {
                data: 'full_name',
                name: 'name_en',
                render: function(data, type, row) {
                    const nameEn = row.name_en || 'No Name';
                    const nameAr = row.name_ar ? `<br><small class="text-muted">${row.name_ar}</small>` : '';
                    return nameEn + nameAr;
                }
            },
            {
                data: 'position',
                name: 'position_en',
                render: function(data, type, row) {
                    const posEn = row.position_en || 'No Position';
                    const posAr = row.position_ar ? `<br><small class="text-muted">${row.position_ar}</small>` : '';
                    return posEn + posAr;
                }
            },
            {
                data: 'department',
                name: 'department',
                render: function(data, type, row) {
                    return row.department || '{{ __("Not Assigned") }}';
                }
            },
            {
                data: 'status_badge',
                orderable: false
            },
            {
                data: 'lead_badge',
                orderable: false
            },
            {
                data: 'join_date',
                name: 'join_date',
                render: function(data, type, row) {
                    return data || '{{ __("Not set") }}';
                }
            },
            {
                data: 'actions',
                orderable: false,
                searchable: false
            }
        ],
        order: [[8, 'desc']], // Default sort by join date
        pageLength: 25,
        language: {
            url: '//cdn.datatables.net/plug-ins/1.10.25/i18n/{{ app()->getLocale() === "ar" ? "Arabic" : "English" }}.json'
        }
    });
}

function setupEventListeners() {
    // Filter change events
    $('#filterForm select, #filterForm input[type="date"]').on('change', function() {
        teamTable.ajax.reload();
    });

    // Search input
    let searchTimeout;
    $('#search').on('keyup', function() {
        clearTimeout(searchTimeout);
        searchTimeout = setTimeout(function() {
            teamTable.ajax.reload();
        }, 500);
    });

    // Select all checkbox
    $('#selectAll').on('change', function() {
        $('.item-checkbox').prop('checked', $(this).prop('checked'));
        updateSelectedItems();
    });

    // Individual checkboxes
    $(document).on('change', '.item-checkbox', function() {
        updateSelectedItems();
    });

    // Delete confirmation
    $(document).on('click', '.delete-btn', function() {
        const id = $(this).data('id');
        $('#confirmDelete').data('id', id);
        $('#deleteModal').modal('show');
    });

    $('#confirmDelete').on('click', function() {
        const id = $(this).data('id');
        deleteTeamMember(id);
    });
}

function updateSelectedItems() {
    selectedItems = [];
    $('.item-checkbox:checked').each(function() {
        selectedItems.push($(this).val());
    });

    if (selectedItems.length > 0) {
        $('#bulkActions').show();
        $('#selectedCount').text(selectedItems.length);
    } else {
        $('#bulkActions').hide();
    }
}

function clearFilters() {
    $('#filterForm')[0].reset();
    teamTable.ajax.reload();
}

function bulkAction(action) {
    if (selectedItems.length === 0) {
        alert('{{ __("Please select items first") }}');
        return;
    }

    if (action === 'delete' && !confirm('{{ __("Are you sure you want to delete selected items?") }}')) {
        return;
    }

    $.ajax({
        url: '{{ route("admin.team.bulk-action", ["locale" => app()->getLocale()]) }}',
        method: 'POST',
        data: {
            action: action,
            ids: selectedItems,
            _token: '{{ csrf_token() }}'
        },
        success: function(response) {
            if (response.success) {
                teamTable.ajax.reload();
                selectedItems = [];
                $('#bulkActions').hide();
                alert(response.message);
            } else {
                alert(response.message || '{{ __("An error occurred") }}');
            }
        },
        error: function() {
            alert('{{ __("An error occurred") }}');
        }
    });
}

function deleteTeamMember(id) {
    $.ajax({
        url: '{{ route("admin.team.destroy", ["locale" => app()->getLocale(), "team" => ":id"]) }}'.replace(':id', id),
        method: 'DELETE',
        data: {
            _token: '{{ csrf_token() }}'
        },
        success: function(response) {
            if (response.success) {
                teamTable.ajax.reload();
                $('#deleteModal').modal('hide');
                alert(response.message);
            } else {
                alert(response.message || '{{ __("An error occurred") }}');
            }
        },
        error: function() {
            alert('{{ __("An error occurred") }}');
        }
    });
}

// Toggle active status
function toggleActive(id) {
    $.ajax({
        url: '{{ route("admin.team.toggle-active", ["locale" => app()->getLocale(), "team" => ":id"]) }}'.replace(':id', id),
        method: 'POST',
        data: { _token: '{{ csrf_token() }}' },
        success: function(response) {
            if (response.success) {
                teamTable.ajax.reload();
            }
        }
    });
}

// Toggle lead status
function toggleLead(id) {
    $.ajax({
        url: '{{ route("admin.team.toggle-lead", ["locale" => app()->getLocale(), "team" => ":id"]) }}'.replace(':id', id),
        method: 'POST',
        data: { _token: '{{ csrf_token() }}' },
        success: function(response) {
            if (response.success) {
                teamTable.ajax.reload();
            }
        }
    });
}
</script>
@endsection