@include('admin.header')

             <div class="page-body">
                <div class="container-fluid">
                    <div class="page-title">
                        <div class="row">
                            <div class="col-6">
                                <h4>Activity</h4>
                            </div>
                            <div class="col-6"> 
                                <ol class="breadcrumb">
                                    <button class="btn btn-success" type="button" data-bs-toggle="modal" data-bs-target="#exampleModalCenter1">Add New </button>

                                </ol>
                            </div>
                    </div>
                </div>

            <div class="modal fade" id="exampleModalCenter1" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenter1" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">	Add Activity type </h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                        <form action="{{ route('activity_types.store') }}" method="POST" enctype="multipart/form-data" id="activityTypeForm">
                        {{-- CSRF token removed - using tokenless system --}}
                            <div class="row mb-3">
                                <label for="name" class="col-sm-4 col-form-label">Name</label>
                                <div class="col-sm-8">
                                    <input class="form-control" type="text" placeholder="Activity Name" id="name" name="name">
                                </div>
                            </div>
                            <div class="row mb-3">
                                <label for="description" class="col-sm-4 col-form-label">Description</label>
                                <div class="col-sm-8">
                                    <input class="form-control" type="text" placeholder="Description" id="description" name="description">
                                </div>
                            </div>

                            <div class="row mb-3">
                                <label for="status" class="col-sm-4 col-form-label">Status</label>
                                <div class="col-sm-8">
                                    <select class="form-control" id="status" name="status">
                                        <option value="">Select Status</option>
                                        <option value="active">Active</option>
                                        <option value="inactive">Inactive</option>
                                    </select>
                                </div>
                            </div>
                            <div class="modal-footer">
                            <button type="button" class="btn btn-primary waves-effect waves-light" id="submitBtn02" onclick="submitActivityTypeForm()">Submit</button>
                            <button type="button" class="btn btn-light waves-effect" data-bs-dismiss="modal">Close</button>
                        </div>
                        </form>
                    </div><!-- /.modal-content -->
                </div><!-- /.modal-dialog -->
            </div><!-- /.modal -->
        </div>

  <!-- Container-fluid starts-->
  <div class="container-fluid"> 
    <div class="row">
        <div class="col-sm-12">
            <div class="card">
               
              <div class="card-body">
                <div class="table-responsive custom-scrollbar">
                  <table class="display" id="basic-1">
                    <thead>
                      <tr>
                        <th>ID</th>
                        <th>Activity Name</th>
                        <th>Description</th>
                        <th>Status</th>
                        <th>Actions</th>
                      </tr>
                    </thead>
                    <tbody>
                      @forelse($activity_types as $activity_type)
                      <tr>
                        <td>{{ $activity_type->id }}</td>
                        <td>{{ $activity_type->name }}</td>
                        <td>{{ $activity_type->description }}</td>
                        <td>
                        @switch($activity_type->status)
                            @case('active')
                              <span class="badge rounded-pill badge-success">Active</span>
                              @break
                            @case('inactive')
                              <span class="badge rounded-pill badge-danger">Inactive</span>
                              @break
                            @default
                              <span class="badge rounded-pill badge-secondary">Active</span>
                          @endswitch
                        </td>
                        <td>
                            <div class="btn-group" role="group">
                                <button type="button" class="btn btn-sm btn-warning" onclick="editActivityType({{ $activity_type->id }})" title="Edit">
                                <i class="fa fa-pencil"></i>
                              </button>
                              <button type="button" class="btn btn-sm btn-danger" onclick="deleteActivityType({{ $activity_type->id }})" title="Delete">
                                <i class="fa fa-trash"></i>
                              </button>
                            </div>
                        </td>
                      </tr>
                      @empty
                      <tr>
                        <td colspan="9" class="text-center">No activity types found</td>
                      </tr>
                      @endforelse
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>

    </div>
  </div>
  <!-- Container-fluid Ends-->
</div>
</div>
@include('admin.footer')

<script>
// Submit Activity Type Form Function
function submitActivityTypeForm() {

    const form = document.getElementById('activityTypeForm');
    const submitBtn = document.getElementById('submitBtn02');
    
    if (!form) {
        alert('Form not found!');
        return;
    }
    
    if (!submitBtn) {
        alert('Submit button not found!');
        return;
    }
    
    const formAction = form.getAttribute('action');
    
    const formData = new FormData(form);
    

    // Disable submit button and show loading state
    submitBtn.disabled = true;
    submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Processing...';
    
    const headers = {
        'X-Requested-With': 'XMLHttpRequest'
    };

    fetch(formAction, {
        method: 'POST',
        body: formData,
        headers: headers
    })
    .then(response => {
        return response.json();
    })
    .then(data => {
        if (data.success) {

            if (typeof Swal !== 'undefined') {
                Swal.fire({
                    icon: 'success',
                    title: 'Success!',
                    text: data.message || 'Activity type added successfully. Reloading page...',
                    showConfirmButton: false,
                    timer: 2000
                }).then(() => {
                    window.location.reload();
                });
            } else {
                alert(data.message || 'Activity type added successfully! Reloading page...');
                window.location.reload();
            }
        } else { 

            if (data.errors) {
                let errorMessage = 'Validation errors:\n';
                Object.keys(data.errors).forEach(field => {
                    errorMessage += `• ${data.errors[field][0]}\n`;
                });
                alert(errorMessage);
            } else {
                alert('Error: ' + (data.message || 'Unknown error occurred'));
            }
        }
    })
    .catch(error => {
        alert('Network error: ' + error.message);
    })
    .finally(() => {

        submitBtn.disabled = false;
        submitBtn.innerHTML = 'Submit';
    });
}

// Edit Activity Type Function
function editActivityType(id) {
    alert('Edit function for activity type ID: ' + id + ' - To be implemented');
}

// Delete Activity Type Function
function deleteActivityType(id) {
    if (confirm('Are you sure you want to delete this activity type?')) {
        fetch(`/activity_types/${id}`, {
            method: 'DELETE',
            headers: {
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                if (typeof Swal !== 'undefined') {
                    Swal.fire({
                        icon: 'success',
                        title: 'Success!',
                        text: data.message,
                        showConfirmButton: false,
                        timer: 1500
                    }).then(() => {
                        window.location.reload();
                    });
                } else {
                    alert(data.message);
                    window.location.reload();
                }
            } else {
                alert('Error: ' + (data.message || 'Unknown error occurred'));
            }
        })
        .catch(error => {
            alert('Network error: ' + error.message);
        });
    }
}

</script>