@extends('layouts.app')

@section('title') Team List @endsection

@section('content')

<section class="content-header">
   
</section>

<section class="content top-head">
  <div class="row">
    <div class="col-xs-12">
     @include('layouts.flesh-message')
     <div class="box box-primary border-no">
      <div class="box-header with-border blue-back">
        <h3 class="box-title">All Teams List</h3>
      </div>
      <!-- /.box-header -->
      <div class="box-body">
        <table id="teams-table" class="table table-bordered table-hover">
          <thead>
            <tr>
              <th>ID</th>
              <th>Team Name</th>
              <th>Team Manager</th>
              <th>Logo</th>
              <th>Number of Agents</th>
              <th>Status</th>
              <th>Action</th>
            </tr>
          </thead>
          <tbody>
            @if($teams->count() > 0)
              @foreach($teams as $team)
              <tr>
                <td>{{ $team->id }}</td>
                <td>{{ $team->name ?? 'N/A' }}</td>
                <td>
                  @if($team->users)
                    {{ $team->users->name }} {{ $team->users->last_name }}
                  @else
                    N/A
                  @endif
                </td>
                <td>
                  @if(!empty($team->logo))
                    <img src="{{ bucket_show(newTeamLogoPath().$team->logo) }}" alt="Team Logo" style="max-width: 50px; max-height: 50px;" />
                  @else
                    <span class="text-muted">No Logo</span>
                  @endif
                </td>
                <td>
                  <span class="badge bg-blue">{{ $team->agent_count ?? 0 }}</span>
                </td>
                <td>
                  @if(($team->status ?? 0) == 1)
                    <span class="label label-success">Active</span>
                  @else
                    <span class="label label-danger">Inactive</span>
                  @endif
                </td>
                <td style="width: 17%;">
                  @if($team->user_id)
                    <a href="{{ route('team-agents', $team->id) }}" title="View Team Agents" target="_blank">
                      <button type="button" class="act-btn btn btn-sm btn-primary"><i class="fa fa-eye"></i></button>
                    </a>
                    <button type="button" class="act-btn btn btn-sm btn-default edit-team-status" 
                            data-team-id="{{ $team->id }}" 
                            data-current-status="{{ $team->status ?? 0 }}"
                            title="Edit Team Status">
                      <i class="fa fa-edit"></i>
                    </button>
                  @else
                    <span class="text-muted">N/A</span>
                  @endif
                </td>
              </tr>
              @endforeach
            @else
              <tr>
                <td colspan="7"><center><p style="font-size: 15px;color: red;"> No teams found. </p></center></td>
              </tr>
            @endif
          </tbody>
        </table>
      </div>
      <!-- /.box-body -->
    </div>
    <!-- /.box -->
  </div>
  </div>
</section>

<script>
$(document).ready(function() {
    var teamsTable = $('#teams-table').DataTable({
        "pageLength": 25,
        "order": [[0, "asc"]], // Order by ID
        "columnDefs": [
            { "orderable": false, "targets": [3, 6] }, // Logo and Action columns not sortable
            { "searchable": false, "targets": [3, 6] } // Logo and Action columns not searchable
        ],
        "responsive": true,
        "dom": '<"row"<"col-sm-6"l><"col-sm-6"f>>rtip',
        "language": {
            "search": "Search Teams:",
            "lengthMenu": "Show _MENU_ Teams Per Page",
            "info": "Showing _START_ to _END_ of _TOTAL_ Teams",
            "infoEmpty": "No Teams",
            "infoFiltered": "(Filtered from _MAX_ Total Teams)",
            "emptyTable": "No Teams Found",
            "zeroRecords": "No Matching Teams Found"
        }
    });

    // Handle edit team status button click - using event delegation on table body
    $('#teams-table tbody').on('click', '.edit-team-status', function(e) {
        e.preventDefault();
        e.stopPropagation();
        
        var $button = $(this);
        var teamId = $button.data('team-id');
        var currentStatus = $button.data('current-status');
        
        // Debug logging
        console.log('Edit button clicked - Team ID:', teamId, 'Current Status:', currentStatus);
        
        if (!teamId) {
            swal('Error!', 'Team ID is missing.', 'error');
            return false;
        }
        
        var newStatus = currentStatus == 1 ? 0 : 1;
        var statusText = newStatus == 1 ? 'Active' : 'Inactive';
        var currentStatusText = currentStatus == 1 ? 'Active' : 'Inactive';

        swal({
            title: "Are you sure?",
            text: "Do you want to change the team status from " + currentStatusText + " to " + statusText + "?",
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, change it!',
            cancelButtonText: 'No, cancel!',
            closeOnConfirm: false,
            closeOnCancel: false
        }, function(isConfirm) {
            if (isConfirm) {
                // Make AJAX call to update status
                $.ajax({
                    url: '{{ route("update-team-status") }}',
                    type: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                        team_id: teamId,
                        status: newStatus
                    },
                    success: function(response) {
                        if (response.success) {
                            swal({
                                title: "Updated!",
                                text: response.message,
                                type: "success",
                                confirmButtonClass: "btn-success",
                                confirmButtonText: "Ok",
                                closeOnConfirm: false
                            }, function(isConfirm) {
                                if (isConfirm) {
                                    location.reload();
                                }
                            });
                        } else {
                            swal('Error!', response.message, 'error');
                        }
                    },
                    error: function(xhr) {
                        var errorMessage = 'There was an error updating the team status.';
                        if (xhr.responseJSON && xhr.responseJSON.message) {
                            errorMessage = xhr.responseJSON.message;
                        }
                        swal('Error!', errorMessage, 'error');
                    }
                });
            } else {
                swal("Cancelled", "Team status has not been changed.", "info");
            }
        });
    });
});
</script>

@endsection