@php $pageName = "activities";
$subpageName = "activity-feedback"; @endphp

@extends('layouts.app')

@section('content')

    <div class="content">
        <div class="page-header d-flex align-items-center justify-content-between">
            <div>
                <h4 class="fw-bold">Activity Feedback</h4>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb breadcrumb-divide mb-0">
                        <li class="breadcrumb-item"><a href="#">Dashboard</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Activity Feedback</li>
                    </ol>
                </nav>
            </div>
           
        </div>

        <div class="card mt-3">
            <div class="card-body">
                <form method="GET" class="mb-3">
                <div class="row g-3 mb-3">
                    <div class="col-md-4">
                        <label class="form-label">Project</label>
                        <select class="form-select project_select">
                            <option value="" selected>--Select Project--</option>
                            @foreach($projects as $project)
                                <option value="{{ $project->id }}">{{ $project->title }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Objective</label>
                        <select class="form-select objective_select" onchange="this.form.submit()" name="objective_id">
                            <option selected>--Select Objective--</option>
                          
                        </select>
                    </div>
                </div>
                </form>

                @if (session('message_success'))
                    <div class="alert alert-success" align="center"><b>{{ session('message_success') }}</b></div>
                @endif
                @if (session('message_error'))
                    <div class="alert alert-danger" align="center">{{ session('message_error') }}</div>
                @endif

                <div class="table-responsive">
                    <table class="table table-bordered table-striped" id="activityTable">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Title</th>
                                <th>Output</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @if($activities)
                            @forelse($activities as $activity)
                                <tr data-objective-id="{{ $activity->objective_id }}">
                                    <td>{{ $loop->iteration }}</td>
                                    <td>{{ $activity->title }}</td>
                                     <td>{{ $activity->output->title ?? 'N/A' }}</td>
                                    <td>
                                       <button class="btn btn-warning btn-sm activity-feedback-btn" data-bs-toggle="modal" data-bs-target="#activityFeedbackModal" data-url="{{ route('activity-feedback', Crypt::encrypt($activity->id)) }}" data-activity-id="{{ $activity->id }}">
                                            <i class="ti ti-message-circle me-1"></i>Feedback
                                        </button>
                                        <button class="btn btn-secondary btn-sm activity-view-btn" data-bs-toggle="modal" data-bs-target="#activityViewModal" data-url="{{ route('activity-id', Crypt::encrypt($activity->id)) }}">
                                            <i class="ti ti-eye me-1"></i>View
                                        </button>
                                      
                                    </td>
                                </tr>
                         
                            @endforeach
                            @endif
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    @include('activity.activity-view-modal')
    @include('activity.activity-feedback-modal')

@endsection

@section('scripts')
<script>
    $(document).ready(function() {
        $('#activityTable').DataTable({
            ordering: true,
            searching: true,
            paging: true,
            info: true,
            pageLength: 25
        });

     

      
       
    });


    $('body').on('click', '.activity-view-btn', function(e) {
        e.preventDefault();
        let url = $(this).data('url');
        $('#activityViewBody').html('<div class="text-muted">Loading activity details...</div>');
        $.get(url, function(data) {
            let activity = data.activity;
            let html = '<dl class="row">' +
                '<dt class="col-sm-4">Title</dt><dd class="col-sm-8">' + (activity.title || 'N/A') + '</dd>' +
                '<dt class="col-sm-4">Description</dt><dd class="col-sm-8">' + (activity.description || 'N/A') + '</dd>' +
                '<dt class="col-sm-4">Project</dt><dd class="col-sm-8">' + (activity.project?.title || 'N/A') + '</dd>' +
                '<dt class="col-sm-4">Objective</dt><dd class="col-sm-8">' + (activity.objective?.title || 'N/A') + '</dd>' +
                '<dt class="col-sm-4">Output</dt><dd class="col-sm-8">' + (activity.output?.title || 'N/A') + '</dd>' +
                '</dl>';
            $('#activityViewBody').html(html);
        }).fail(function() {
            $('#activityViewBody').html('<div class="alert alert-danger">Unable to load activity details.</div>');
        });
    });

   
</script>

<script>
      $(document).ready(function () {
            $(document).on('change', '.project_select', function () {

                var project_id = $(this).val();
                var div = $(this).parent();

                var op = '';
                $.ajax({
                    type: 'get',
                    url: '{!!URL::to('findObjectiveData')!!}',
                    data: { 'id': project_id },
                    success: function (data) {
                     
                        op += '<option value="0" selected disabled>--Select Objective--</option>';
                        for (var i = 0; i < data.length; i++) {
                            op += '<option value="' + data[i].id + '">' + data[i].title + '</option>';

                        }
                        $(".objective_select").html(op);

                    },
                    error: function () {
                    }
                });
            });

        });

</script>

<script>
        $(document).ready(function () {
            $('body').on('click', '.activity-feedback-btn', function (e) {
                e.preventDefault();
                var userUrl = $(this).data('url');
             
                if (userUrl) {
                    $.get(userUrl, function (data) {
                        let activity = data.activity;
                          let indicators = data.indicators;
                         $('#assignActivityId').text(activity.id);
                        $('#assignActivityId').val(activity.id);
                        $('#assignActivityTitle').text(activity.title);
                        $('#assignActivityDescription').text(activity.description);
                        $('#assignActivityObjective').text(activity.objective.title);
                        $('#assignActivityProject').text(activity.project.title);
                        $('#assignInstitutionSelect').val(activity.assign_institution);
                        // $('#assignActivityProjectIndicator').val(data.project_indicator);
                        // $('#assignActivityObjectiveIndicator').val(data.objective_indicator);
                        let html = indicators.map(indicator => indicator.indicator).join('<br>');

                        $('#assignActivityIndicator').html(html);
                    });
                }
            });
        });
    </script>

@endsection