@extends('layouts.app')

@section('title', 'Teams Management')

@push('styles')
<style>
    .badge { font-size: 0.85em; }
    .table th { border-top: none; }
</style>
@endpush

@section('content')
<div class="loadPages01">

    <div class="actionsHeader filterHeader">
        <ul class="ml-auto">
            @can('team.create')
            <li>
                <button data-toggle="modal" data-target="#addTeamModal" class="btn btn-block btn-add">
                    <i class="las la-plus"></i> Add New 
                </button>
            </li>
            @endcan
        </ul>
    </div>
   
   <div class="card card-body card-dashboard-twentyfive border-left-0 border-right-0 px-0 pd-t-6 pd-b-6 viewContainer">
        <div class="table-responsive">
            <table id="teamsTable" class="table table-bordered table-striped">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Name</th>
                        <th>Team Lead</th>
                        <th>Members</th>
                        <th>Queues</th>
                        <th>Status</th>
                        <th>Created At</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- DataTable will load data here -->
                </tbody>
            </table>
        </div>
    </div>
</div>

@push('modals')
<!-- Add Team Modal -->
<div class="modal fade" id="addTeamModal" tabindex="-1">
   <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title">Add New Team</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <form id="addTeamForm" method="POST">
            @csrf
            <div class="modal-body">
                <div class="form-group">
                    <label>Name <span class="asterisk">*</span></label>
                    <input type="text" class="form-control" name="name" required 
                           placeholder="Enter team name" minlength="3">
                </div>

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

                <div class="form-group">
                    <label>Team Lead</label>
                    <select id="team_lead_id" class="form-control select2" name="team_lead_id">
                        <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="queue_ids" multiple required>
                        @foreach($queues as $queue)
                            <option value="{{ $queue->id }}">{{ $queue->name }}</option>
                        @endforeach
                    </select>
                </div>
                
                <div class="form-group">
                    <label>Status <span class="asterisk">*</span></label>
                    <select class="form-control" name="active" required>
                        <option value="1">Active</option>
                        <option value="0">Inactive</option>
                    </select>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                <button type="submit" class="btn btn-primary" id="btn_save"><i class="las la-save"></i> Save</button>
            </div>
        </form>
    </div>
    </div>
</div>

<!-- Edit Team Modal -->
<div class="modal fade" id="editTeamModal" tabindex="-1">
   <div class="modal-dialog modal-lg modal-dialog-centered" 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="editTeamForm" method="POST">
            @csrf
            @method('PUT')
            <input type="hidden" name="id" id="edit_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="edit_name" required minlength="3">
                </div>

                <div class="form-group">
                    <label>Team Lead</label>
                    <select class="form-control select2" name="team_lead" id="edit_team_lead">
                        <option value="">Select Team Lead</option>
                        @foreach($staffs as $id => $name)
                            <option value="{{ $id }}">{{ $name }}</option>
                        @endforeach
                    </select>
                </div>

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

                <div class="form-group">
                    <label>Queues <span class="asterisk">*</span></label>
                    <select class="form-control select2" name="queue_ids[]" id="edit_queue_ids" multiple required>
                        @foreach($queues as $queue)
                            <option value="{{ $queue->id }}">{{ $queue->name }}</option>
                        @endforeach
                    </select>
                </div>
                
                <div class="form-group">
                    <label>Status <span class="asterisk">*</span></label>
                    <select class="form-control" name="active" id="edit_active" required>
                        <option value="1">Active</option>
                        <option value="0">Inactive</option>
                    </select>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                <button type="submit" class="btn btn-primary" id="btn_update"><i class="las la-save"></i> Update</button>
            </div>
        </form>
    </div>
</div>
@endpush

</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    // Initialize DataTable
    var errorShown = false;
    var table = $('#teamsTable').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: "{{ route('masters.team.index') }}",
            type: "GET",
            error: function(xhr, error, thrown) {
                
                if (errorShown) {
                    return;
                }
                
                errorShown = true;

                if (xhr.status === 403) {
                    toastr.error(xhr.responseJSON?.message || 'Access denied: No permission');
                    table.clear().draw();
                    setTimeout(() => { errorShown = false; }, 5000);
                }
                else if (xhr.status === 401) {
                    toastr.error('Please login to access this page.');
                    window.location.href = "{{ route('admin.login') }}";
                }
                else if (xhr.status === 500) {
                    toastr.error('Server error. Please try again later.');
                    setTimeout(() => { errorShown = false; }, 10000);
                }
                else {
                    toastr.error('Failed to load table data.');
                    setTimeout(() => { errorShown = false; }, 5000);
                }
            }
        },
       
        columns: [
            { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false },
            { data: 'name', name: 'name' },
            { data: 'team_lead', name: 'team_lead' },
            { data: 'members', name: 'members', orderable: false, searchable: false },
            { data: 'queues_list', name: 'queues_list', orderable: false, searchable: false },
            { data: 'status', name: 'active' },
            { data: 'created_at', name: 'created_at' },
            { data: 'actions', name: 'actions', orderable: false, searchable: false }
        ],
        order: [[1, 'asc']]
    });


    $('#role_id').select2();

    // initialize empty Select2 for team lead
    $('#team_lead_id').select2({
        placeholder: 'Select Team Lead',
        ajax: {
            url: "{{ route('masters.team.get.users.by.role') }}",
            dataType: 'json',
            delay: 250,
            data: function(params) {
                return {
                    q: params.term,      // search term (optional)
                    role_id: $('#role_id').val(), // currently selected role
                };
            },
            processResults: function(data) {
                return {
                    results: $.map(data.users, function(user) {
                        return {
                            id: user.id,
                            text: user.name
                        };
                    })
                };
            },
            cache: true
        }
    });

    // when role changes, clear existing team lead value
    $('#role_id').on('change', function() {
        $('#team_lead_id').val(null).trigger('change');
    });
    // Add Team Form Submission
    $('#addTeamForm').on('submit', function(e) {
        e.preventDefault();
        $('#loaderStatus').text('Starting saving...');
        $('#refreshLoader').removeClass('d-none');
        
        $.ajax({
            url: "{{ route('masters.team.store') }}",
            method: "POST",
            beforeSend: function() {
                $('#loaderStatus').text('Please wait...');
                $('#btn_save').prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Saving...');
            },
            data: $(this).serialize(),
            success: function(response) {
                if (response.status) {
                    $('#addTeamModal').modal('hide');
                    $('#addTeamForm')[0].reset();
                    $('#team_lead').val(null).trigger('change');
                    $('#team_lead_role').val(null).trigger('change');
                    $('#queue_ids').val(null).trigger('change');
                    table.ajax.reload();
                    toastr.success(response.message);
                } else {
                    toastr.error(response.message);
                }
            },
            error: function(xhr) {
                if (xhr.status === 403) {
                    const response = xhr.responseJSON;
                    toastr.error(response?.message || 'You do not have permission.');
                } else if (xhr.status === 401) {
                    toastr.error('Please login to continue.');
                    window.location.href = "{{ route('admin.login') }}";
                } else if (xhr.status === 404) {
                    toastr.error('Team not found.');
                } else 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 saving data.');
                }
            },
            complete: function() {
                $('#btn_save').prop('disabled', false).html('<i class="las la-save"></i> Save');
                setTimeout(() => {
                    $('#refreshLoader').addClass('d-none');
                }, 1000);
            }
        });
    });

    // Edit Team - Show Modal
    $(document).on('click', '.btn-edit-team', function() {
        var teamId = $(this).data('id');
        
        $.ajax({
            url: "{{ route('masters.team.edit') }}",
            method: "GET",
            data: { id: teamId },
            success: function(response) {
                if (response.status) {
                    $('#edit_team_id').val(teamId);
                    $('#edit_name').val(response.data.name);
                    $('#edit_team_lead').val(response.data.team_lead).trigger('change');
                    $('#edit_team_lead_role').val(response.data.team_lead_role).trigger('change');
                    $('#edit_queue_ids').val(response.data.queue_ids).trigger('change');
                    $('#edit_active').val(response.data.active ? 1 : 0);
                    $('#editTeamModal').modal('show');
                } else {
                    toastr.error(response.message);
                }
            },
            error: function(xhr) {
                if (xhr.status === 403) {
                    const response = xhr.responseJSON;
                    toastr.error(response?.message || 'You do not have permission.');
                } else if (xhr.status === 401) {
                    toastr.error('Please login to continue.');
                    window.location.href = "{{ route('admin.login') }}";
                } else if (xhr.status === 404) {
                    toastr.error('Team not found.');
                } else 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 loading data.');
                }
            }
        });
    });

    // Edit Team Form Submission
    $('#editTeamForm').on('submit', function(e) {
        e.preventDefault();
        $('#loaderStatus').text('Starting saving...');
        $('#refreshLoader').removeClass('d-none');
        
        $.ajax({
            url: "{{ route('masters.team.update') }}",
            method: "POST",
            data: $(this).serialize(),
            beforeSend: function() {
                $('#loaderStatus').text('Please wait...');
                $('#btn_update').prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Updating...');
            },
            success: function(response) {
                if (response.status) {
                    $('#editTeamModal').modal('hide');
                    $('#edit_team_lead').val(null).trigger('change');
                    $('#edit_team_lead_role').val(null).trigger('change');
                    $('#edit_queue_ids').val(null).trigger('change');
                    table.ajax.reload();
                    toastr.success(response.message);
                } else {
                    toastr.error(response.message);
                }
            },
            error: function(xhr) {
                if (xhr.status === 403) {
                    const response = xhr.responseJSON;
                    toastr.error(response?.message || 'You do not have permission.');
                } else if (xhr.status === 401) {
                    toastr.error('Please login to continue.');
                    window.location.href = "{{ route('admin.login') }}";
                } else if (xhr.status === 404) {
                    toastr.error('Team not found.');
                } else 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 data.');
                }
            },
            complete: function() {
                $('#btn_update').prop('disabled', false).html('<i class="las la-save"></i> Update');
                setTimeout(() => {
                    $('#refreshLoader').addClass('d-none');
                }, 1000);
            }
        });
    });

    // Delete Team
    $(document).on('click', '.btn-delete-team', function() {
        var teamId = $(this).data('id');
        
        swal({
            title: "Are you sure?",
            text: "Do you really want to delete this team?",
            icon: "warning",
            buttons: true,
            dangerMode: true,
        }).then((willDelete) => {
            if (willDelete) {
                $.ajax({
                    url: "{{ route('masters.team.destroy') }}",
                    type: "DELETE",
                    data: {
                        id: teamId,
                        _token: "{{ csrf_token() }}"
                    },
                    success: function(response) {
                        if (response.status) {
                            toastr.success(response.message);
                            table.ajax.reload();
                        } else {
                            toastr.warning(response.message);
                        }
                    },
                    error: function(xhr) {
                        if (xhr.status === 403) {
                            const response = xhr.responseJSON;
                            toastr.error(response?.message || 'You do not have permission.');
                        } else if (xhr.status === 401) {
                            toastr.error('Please login to continue.');
                            window.location.href = "{{ route('admin.login') }}";
                        } else if (xhr.status === 404) {
                            toastr.error('Team not found.');
                        } else 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 deleting data.');
                        }
                    }
                });
            }
        });
    });

    // View Team
    $(document).on('click', '.btn-view-team', function() {
        var teamId = $(this).data('id');
        //window.location.href = "";
    });
});
</script>
@endpush