@extends('layouts.app')

@section('title', ucfirst($team->name))

@push('styles')
<style>
    .home_1 { border-bottom: 0!important; }
    .dataTables_wrapper { min-height: auto; }
    .lSSlideWrapper .lSSlideOuter { padding-left: 0px; }
    .mail-view.personal-div01 { border-bottom: 0!important; }
    table.dataTable thead .sorting_asc::after { content: ''; }
    #team-members_wrapper .dataTables_scroll .dataTables_scrollBody, 
    .dataTables_wrapper.no-footer .dataTables_scrollBody {
        max-height: 42vh!important;
        height: 42vh!important;
    }
    .member-type-badge {
        font-size: 0.7em;
        padding: 2px 6px;
        margin-left: 5px;
    }
</style>
@endpush

@section('content')
<div class="loadPages01">
    <div class="card card-body card-dashboard-twentyfive border-left-0 border-right-0 p-0 viewPage">
        <div class="align-items-stretch">
            <div class="col-md-12 view-pro-details01 pl-2 py-3">
                <div class="row align-items-center">
                    <div class="col-md-4 profile-div01">
                        <div class="sender-details d-flex justify-content-between mb-0">
                            <div class="details mr-auto">
                                <p class="msg-name">{{ ucfirst($team->name) }}</p>
                                <p class="msg-date pb-1" style="font-size: 0.875rem;">
                                    Team Lead: <span style="font-weight: 600;">{{ $team->leadStaff ? $team->leadStaff->name : '--' }}</span>
                                    @if($team->leadStaff)
                                        <span class="badge badge-info member-type-badge">
                                            {{ $team->team_lead_role == 1 ? 'User' : ($team->team_lead_role == 2 ? 'Staff' : ($team->team_lead_role == 3 ? 'Admin' : 'Unknown')) }}
                                        </span>
                                    @endif
                                </p>
                                <p class="msg-date mb-0" style="font-size: 0.875rem;">
                                    Members: <span style="font-weight: 600;">{{ $team->members->count() }}</span>
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-8 profile-div02">
                        <div class="row">
                            @can('team.edit')
                            <div class="col-auto ml-auto">
                                <button class="btn btn-primary btn-sm" onclick="editTeam()">
                                    <i class="las la-edit"></i> Edit Team
                                </button>
                            </div>
                            @endcan
                        </div>
                    </div>
                </div>
            </div>

            <div class="card bd-0 navtab-card01 viewPageTabs">
                <div class="card-header card-header-tab">
                    <div class="az-nav-tabs">
                        <div class="lSSlideOuter navtab-lSSlideOuter">
                            <div class="lSSlideWrapper usingCss" style="transition-duration: 400ms; transition-timing-function: ease;">
                                <div id="navComplex" class="lightSlider lsGrab lSSlide" style="width: 1842px; height: 39px; padding-bottom: 0%; transform: translate3d(0px, 0px, 0px);">
                                    <div class="tab-item lslide active" style="margin-right: 3px;">
                                        <a href="#azTab1" class="tab-link active" id="t0">Team Members</a>
                                    </div>
                                    <div class="tab-item lslide" style="margin-right: 3px;">
                                        <a href="#azTab2" class="tab-link" id="t1">Queues</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="az-tab-content tab-content-box tab-content-box-view viewPaneTab">
                    <!-- Team Members Tab -->
                    <div id="azTab1" class="az-tab-pane active">
                        <div class="mail-view personal-div01 mx-2 bg-white">
                            <div class="message-body py-3 px-2">
                                <div class="item-details-page">
                                    <div class="row">
                                        <div class="col-lg-12 col-md-12 col-sm-12 col-12">
                                            @if($team->status)
                                            <button class="btn btn-primary btn-sm view-add-btn01" style="min-height: 30px;padding: 5px 10px;" data-toggle="modal" data-target="#addTeamMembers">
                                                <i class="las la-plus"></i> Add Members
                                            </button>
                                            @endif
                                            <div class="viewBoxTable" style="margin-top: 10px;">
                                                <div class="table-responsive">
                                                    <table class="table" id="team-members">
                                                        <thead>
                                                            <tr>
                                                                <th scope="col">#</th>
                                                                <th scope="col">Name</th>
                                                                <th scope="col">Role</th>
                                                                <th scope="col">Action</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Queues Tab -->
                    <div id="azTab2" class="az-tab-pane">
                        <div class="mail-view personal-div01 mx-2 bg-white">
                            <div class="message-body py-3 px-2">
                                <div class="item-details-page">
                                    <div class="row">
                                        <div class="col-lg-12 col-md-12 col-sm-12 col-12">
                                            @if($team->status)
                                            <button class="btn btn-primary btn-sm view-add-btn01" data-toggle="modal" data-target="#addQueue">
                                                <i class="las la-plus"></i> Add Queue
                                            </button>
                                            @endif
                                            <div class="viewBoxTable" style="margin-top:10px;">
                                                <div class="table-responsive">
                                                    <table class="table" id="team-queue">
                                                        <thead>
                                                            <tr>
                                                                <th>#</th>
                                                                <th>Name</th>
                                                                <th>Action</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                            @php $i = 1; @endphp
                                                            @if(!empty($queues))
                                                                @foreach($queues as $val)
                                                                <tr>
                                                                    <td>{{ $i++ }}</td>
                                                                    <td>{{ ucfirst($val->name) }}</td>
                                                                    <td>
                                                                        @if($team->status)
                                                                        <div class="dropdown ml-auto text-left pl-3">
                                                                            <a href="#" class="text-dark" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                                                <i class="las la-ellipsis-v" aria-hidden="true"></i>
                                                                            </a>
                                                                            <div class="dropdown-menu dropdown-menu-right" x-placement="top-end">
                                                                                <a class="dropdown-item btn-job-reschedule delete-btn" 
                                                                                   href="{{ route('masters.team.remove_queue', ['teamid' => crypt_encrypt($team->id), 'queueid' => crypt_encrypt($val->id)]) }}">
                                                                                    <i class="las la-trash"></i> Remove Queue
                                                                                </a>
                                                                            </div>
                                                                        </div>
                                                                        @else
                                                                        --
                                                                        @endif
                                                                    </td>
                                                                </tr>
                                                                @endforeach
                                                            @endif
                                                        </tbody>
                                                    </table>
                                                    <form action="" method="get" id="delete-queue-form"></form>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Add Queue Modal -->
@push('modals')
<div class="modal fade" id="addQueue" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Add Queue</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="reset_add_queue();">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form method="POST" action="{{ route('masters.team.update_queue') }}">
                @csrf
                <input type="hidden" value="{{ crypt_encrypt($team->id) }}" name="team_id">
                <div class="modal-body">
                    <div class="row">
                        <div class="col">
                            <label>Queue</label>
                            <select multiple required name="queue_ids[]" class="form-control select2" id="add_queue_ids">
                                @if(!empty($availableQueues))
                                    @foreach($availableQueues as $val)
                                        <option value="{{ $val->id }}">{{ ucfirst($val->name) }}</option>
                                    @endforeach
                                @endif
                            </select>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="reset_add_queue();">Close</button>
                    <button type="submit" class="btn btn-primary">Add</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Add Team Members Modal -->
<!-- Add Team Members Modal -->
<!-- Add Team Members Modal -->
<!-- Add Team Members Modal -->
<!-- Add Team Members Modal -->
<div class="modal fade" id="addTeamMembers" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Add Team Members</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="reset_add_team_member();">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form method="POST" action="{{ route('masters.team.add.member') }}" id="addMemberForm">
                @csrf
                <input type="hidden" value="{{ $team->id }}" name="team_id">
                
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label>Role <span class="asterisk">*</span></label>
                                <select class="form-control select2" name="role_id" id="member_role" required>
                                    <option value="">Select Role</option>
                                    @foreach($roles as $role)
                                        <option value="{{ $role->id }}">{{ $role->name }}</option>
                                    @endforeach
                                </select>
                                <small class="form-text text-muted">Select a role to see available members</small>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group">
                                <label>Members <span class="asterisk">*</span></label>
                                <select multiple required name="staff_id[]" class="form-control select2" id="add_team_members">
                                    <option value="">Select Members</option>
                                </select>
                                <small class="form-text text-muted" id="membersHelpText">Please select a role first</small>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Selected Members Preview -->
                    <div class="row">
                        <div class="col-md-12">
                            <div class="selected-members-preview mt-3" id="selectedMembersPreview" style="display: none;">
                                <h6>Selected Members:</h6>
                                <div id="selectedMembersList" class="d-flex flex-wrap gap-2"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="reset_add_team_member();">Cancel</button>
                    <button type="submit" class="btn btn-primary" id="btn_add_member">
                        <i class="las la-plus"></i> Add Members
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Edit Team Modal -->
<div class="modal fade" id="editTeamModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Edit Team</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="editTeamFormShow" method="POST" action="{{ route('masters.team.update') }}">
                @csrf
                @method('PUT')
                <input type="hidden" name="id" value="{{ crypt_encrypt($team->id) }}">
                <div class="modal-body">
                    <div class="form-group">
                        <label>Name <span class="asterisk">*</span></label>
                        <input type="text" class="form-control" name="name" id="show_edit_name" value="{{ $team->name }}" required>
                    </div>

                    <div class="form-group">
                        <label>Team Lead Role</label>
                        <select class="form-control select2" name="team_lead_role" id="show_edit_team_lead_role">
                            <option value="">Select Role</option>
                            @foreach($roles as $role)
                                <option value="{{ $role->id }}" {{ $team->team_lead_role == $role->id ? 'selected' : '' }}>
                                    {{ $role->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="form-group">
                        <label>Team Lead</label>
                        <select class="form-control select2" name="team_lead" id="show_edit_team_lead">
                            <option value="">Select Team Lead</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label>Queues <span class="asterisk">*</span></label>
                        <select class="form-control select2" name="queue_ids[]" id="show_edit_queue_ids" multiple required>
                            @foreach($allQueues as $queue)
                                <option value="{{ $queue->id }}" {{ in_array($queue->id, $team->queues_array) ? 'selected' : '' }}>
                                    {{ $queue->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="form-group">
                        <label>Status <span class="asterisk">*</span></label>
                        <select class="form-control" name="active" id="show_edit_active" required>
                            <option value="1" {{ $team->status ? 'selected' : '' }}>Active</option>
                            <option value="0" {{ !$team->status ? 'selected' : '' }}>Inactive</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary" id="btn_update_show">
                        <i class="las la-save"></i> Update
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endpush

@endsection

@push('scripts')
<script>
let team_members = "{{ route('masters.team.team_members_list', crypt_encrypt($team->id)) }}";
const TEAMID = "{{ crypt_encrypt($team->id) }}";
let delete_route = "{{ route('masters.team.remove.member') }}";
let update_tl_route = "{{ route('masters.team.add.teamLead') }}";
let get_available_members_route = "{{ route('masters.team.get.available.members') }}";
let get_users_by_role_route = "{{ route('masters.team.get.users.by.role') }}";

$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});

function reset_add_team_member() {
    $('#member_type').val(null).trigger('change');
    $('#add_team_members').val(null).trigger('change');
    $('#add_team_members').empty().append('<option value="">Select Members</option>');
}

function reset_add_queue() {
    $('#add_queue_ids').val(null).trigger('change');
}

function editTeam() {
    // Load current team lead if exists
    if ("{{ $team->team_lead_role }}" && "{{ $team->team_lead }}") {
        loadTeamLeads("{{ $team->team_lead_role }}", "{{ $team->team_lead }}");
    }
    $('#editTeamModal').modal('show');
}

function loadTeamLeads(roleId, currentLeadId = null) {
    if (!roleId) {
        $('#show_edit_team_lead').empty().append('<option value="">Select Team Lead</option>');
        return;
    }
    
    $.ajax({
        url: get_users_by_role_route,
        method: 'GET',
        data: { role_id: roleId },
        success: function(response) {
            $('#show_edit_team_lead').empty().append('<option value="">Select Team Lead</option>');
            $.each(response.users, function(index, user) {
                $('#show_edit_team_lead').append(
                    $('<option>', {
                        value: user.id,
                        text: user.name
                    })
                );
            });
            
            // Set current team lead if exists
            if (currentLeadId) {
                $('#show_edit_team_lead').val(currentLeadId).trigger('change');
            }
        },
        error: function() {
            toastr.error('Failed to load team leads');
        }
    });
}

  $("#add_team_members").select2({
            placeholder: "Select User",
            // allowClear: true,
            multiple: true,
            // width: '100%',
            // minimumInputLength: 1,
            ajax: {
                url: get_available_members_route,
                type: "GET",
                dataType: "json",
                delay: 250,
                data: function(params) {
                    return {
                        search: params.term || '',
                        page: params.page || 1,
                        pagination: true,
                        teamId : "{{ $team->id }}",
                        role_id:$('#member_role').val()

                    };
                },
                processResults: function(response, params) {
                    params.page = params.page || 1;
                    return {
                        results: response.results,
                        pagination: {
                            more: (params.page * 10) < response.count_filtered
                        }
                    };
                },
                cache: true
            }
        });


function delete_member(id) {
    swal({
        title: "Are you sure?",
        text: 'You want to remove this member from the team?',
        icon: "warning",
        buttons: true,
        dangerMode: true,
    }).then((willDelete) => {
        if (willDelete) {
            var formData = {
                'id': id,
                'team_id': TEAMID,
            };

            $.ajax({
                url: delete_route,
                type: "POST",
                data: formData,
                beforeSend: function() {
                    // Show loading
                },
                success: function(d) {
                    if (d.status) {
                        sessionStorage.setItem('current_tab', '#azTab1');
                        toastr.success(d.message);
                        $('#team-members').DataTable().ajax.reload();
                    } else {
                        toastr.warning(d.message);
                    }
                },
                error: function() {
                    toastr.error('Failed to remove member');
                }
            });
        }
    });
}

function update_as_tl(id) {
    swal({
        title: "Are you sure?",
        text: 'You want to make this member the Team Leader?',
        icon: "info",
        buttons: true,
    }).then((willUpdate) => {
        if (willUpdate) {
            var formData = {
                'id': id,
                'team_id': TEAMID
            };

            $.ajax({
                url: update_tl_route, // define this route in your blade or script
                type: "POST",
                data: formData,
                beforeSend: function() {
                    // optional: show spinner or loader
                },
                success: function(d) {
                    if (d.status) {
                        sessionStorage.setItem('current_tab', '#azTab1');
                        toastr.success(d.message);
                        $('#team-members').DataTable().ajax.reload();
                    } else {
                        toastr.warning(d.message);
                    }
                },
                error: function() {
                    toastr.error('Failed to update member as TL');
                }
            });
        }
    });
}


function adjust_table(target) {
    if (target == '#azTab1') {
        $('#team-members').DataTable().columns.adjust();
    }
    if (target == '#azTab2') {
        $('#team-queue').DataTable().columns.adjust();
    }
}

$(function() {
    'use strict'

    $('#navComplex').lightSlider({
        autoWidth: true,
        pager: false,
        slideMargin: 3
    });

    if (sessionStorage.getItem('current_tab')) {
        var target = sessionStorage.getItem('current_tab');
        $(`a[href="${target}"]`).addClass('active');
        $(`a[href="${target}"]`).parent().siblings().find('.tab-link').removeClass('active');
        $(target).addClass('active');
        $(target).siblings().removeClass('active');
        adjust_table(target);
        sessionStorage.removeItem("current_tab");
    }

    $('.az-nav-tabs .tab-link').on('click', function(e) {
        e.preventDefault();
        $(this).addClass('active');
        $(this).parent().siblings().find('.tab-link').removeClass('active');

        var target = $(this).attr('href');
        $(target).addClass('active');
        $(target).siblings().removeClass('active');
        adjust_table(target);
        sessionStorage.setItem('current_tab', target);
    })
});

$('input[name="daterangepicker"]').daterangepicker({
    singleDatePicker: true,
    showDropdowns: true
});

$(document).on('click', '[data-toggle="lightbox"]', function(event) {
    event.preventDefault();
    $(this).ekkoLightbox();
});

$(document).ready(function(e) {
    // Initialize select2
    $('#member_type').select2();
    // $('#add_team_members').select2();
    $('#add_queue_ids').select2();
    $('#show_edit_team_lead_role').select2();
    $('#show_edit_team_lead').select2();
    $('#show_edit_queue_ids').select2();

    // Team lead role change handler
    $('#show_edit_team_lead_role').on('change', function() {
        const roleId = $(this).val();
        loadTeamLeads(roleId);
    });

    // Add member form submission
    $('#addMemberForm').on('submit', function(e) {
        e.preventDefault();
        
        $.ajax({
            url: $(this).attr('action'),
            method: "POST",
            data: $(this).serialize(),
            beforeSend: function() {
                $('#btn_add_member').prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Adding...');
            },
            success: function(response) {
                if (response.status) {
                    $('#addTeamMembers').modal('hide');
                    reset_add_team_member();
                    toastr.success(response.message);
                    $('#team-members').DataTable().ajax.reload();
                } else {
                    toastr.error(response.message);
                }
            },
            error: function(xhr) {
                if (xhr.status === 422) {
                    const errors = xhr.responseJSON.errors;
                    $.each(errors, function(key, value) {
                        toastr.error(value[0]);
                    });
                } else {
                    toastr.error('An error occurred while adding members.');
                }
            },
            complete: function() {
                $('#btn_add_member').prop('disabled', false).html('<i class="las la-plus"></i> Add Members');
            }
        });
    });

    $('.delete-btn').click(function(e) {
        let x = this;
        e.preventDefault();
        swal({
            title: "Are you sure?",
            text: 'You want to remove this queue',
            icon: "warning",
            buttons: true,
            dangerMode: true,
        }).then((willDelete) => {
            if (willDelete) {
                sessionStorage.setItem('current_tab', '#azTab2');
                $('#delete-queue-form').attr('action', $(this).attr('href'));
                $('#delete-queue-form').submit();
            } else {
                $('#delete-queue-form').attr('action', '');
            }
        });
    });

    // Initialize Team Members DataTable
   // Initialize Team Members DataTable with better error handling
$('#team-members').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: team_members,
            type: "GET",
            error: function(xhr, error, thrown) {
                console.log('DataTables Ajax Error:', xhr);
                toastr.error('Failed to load team members data');
            }
        },
        columns: [
            { 
                data: 'DT_RowIndex', 
                name: 'DT_RowIndex', 
                orderable: false, 
                searchable: false,
                width: '5%'
            },
            { 
                data: 'staff_name', 
                name: 'staff_name',
                width: '30%'
            },
            
            { 
                data: 'role', 
                name: 'role_id',
                width: '20%'
            },
            { 
                data: 'actions', 
                name: 'actions', 
                orderable: false, 
                searchable: false,
                width: '30%'
            }
        ],
        order: [[1, 'asc']],
        language: {
            processing: '<i class="fa fa-spinner fa-spin fa-fw"></i> Loading...',
            emptyTable: 'No team members found',
            zeroRecords: 'No matching team members found'
        }
    });

    // Edit Team Form Submission
    $('#editTeamFormShow').on('submit', function(e) {
        e.preventDefault();
        
        $.ajax({
            url: $(this).attr('action'),
            method: "POST",
            data: $(this).serialize(),
            beforeSend: function() {
                $('#btn_update_show').prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Updating...');
            },
            success: function(response) {
                if (response.status) {
                    $('#editTeamModal').modal('hide');
                    toastr.success(response.message);
                    setTimeout(function() {
                        location.reload(true);
                    }, 1000);
                } else {
                    toastr.error(response.message);
                }
            },
            error: function(xhr) {
                if (xhr.status === 422) {
                    const errors = xhr.responseJSON.errors;
                    $.each(errors, function(key, value) {
                        toastr.error(value[0]);
                    });
                } else {
                    toastr.error('An error occurred while updating.');
                }
            },
            complete: function() {
                $('#btn_update_show').prop('disabled', false).html('<i class="las la-save"></i> Update');
            }
        });
    });
});
</script>
@endpush