@php $pageName = "activities";
$subpageName = "activities"; @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 Manager</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 Manager</li>
                    </ol>
                </nav>
            </div>
            <button type="button" class="btn btn-info" data-bs-toggle="modal" data-bs-target="#addActivityModal">
                <i class="fe fe-plus"></i> New Activity
            </button>
        </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="myTable">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Title</th>
                                <th>Description</th>
                                <th>Objective</th>
                                <th>Output</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @if($activities)
                            @foreach($activities as $activity)
                                <tr data-objective-id="{{ $activity->objective_id }}">
                                    <td>{{ $loop->iteration }}</td>
                                    <td>{{ $activity->title }}</td>
                                    <td>{{ $activity->description }}</td>
                                    <td>{{ $activity->objective->title ?? 'N/A' }}</td>
                                     <td>{{ $activity->output->title ?? 'N/A' }}</td>
                                    <td>
                                        <button class="btn btn-primary btn-sm activity-indicator-btn" data-bs-toggle="modal" data-bs-target="#activityIndicatorModal" data-url="{{ route('activity-indicators', Crypt::encrypt($activity->id)) }}" data-activity-id="{{ $activity->id }}">
                                            <i class="ti ti-chart-line me-1"></i>Indicator
                                        </button>
                                          <button class="btn btn-warning btn-sm activity-resource-btn" data-bs-toggle="modal" data-bs-target="#activityResourceModal" data-url="{{ route('activity-resources', Crypt::encrypt($activity->id)) }}" data-activity-id="{{ $activity->id }}">
                                            <i class="ti ti-briefcase me-1"></i>Resource
                                        </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.add-activity-modal')
    @include('activity.activity-indicator-modal')
    @include('activity.activity-view-modal')
    @include('activity.activity-resource-modal')

@endsection

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

     

      
       
    });

    let currentActivityRequest;

    function loadActivityIndicators(activityId, userUrl) {
        $('#activityIndicatorList').html('<div class="text-muted">Loading indicators...</div>');

        if (currentActivityRequest) {
            currentActivityRequest.abort();
        }

        currentActivityRequest = $.get(userUrl, function(data) {
            let indicators = data.indicators;
            if (indicators.length === 0) {
                $('#activityIndicatorList').html('<div class="alert alert-info">No indicators added yet.</div>');
                return;
            }

            let html = '<div class="table-responsive"><table class="table table-bordered table-striped"><thead><tr><th>#</th><th>Indicator</th><th>Type</th><th>Measure</th></tr></thead><tbody>';
            indicators.forEach((indicator, index) => {
                html += '<tr>' +
                    '<td>' + (index + 1) + '</td>' +
                    '<td>' + (indicator.indicator || 'N/A') + '</td>' +
                    '<td>' + (indicator.type ? indicator.type.name : 'N/A') + '</td>' +
                    '<td>' + (indicator.measure_name || 'N/A') + '</td>' +
                    '</tr>';
            });
            html += '</tbody></table></div>';
            $('#activityIndicatorList').html(html);
        }).fail(function() {
            $('#activityIndicatorList').html('<div class="alert alert-danger">Failed to load indicators.</div>');
        });
    }

    $('body').on('click', '.activity-indicator-btn', function(e) {
        e.preventDefault();
        let activityId = $(this).data('activity-id');
        let userUrl = $(this).data('url');
        $('#activityId').val(activityId);
        $('#activityIndicatorForm').attr('data-load-url', userUrl);
        loadActivityIndicators(activityId, userUrl);
    });

    $('#activityIndicatorForm').submit(function(e) {
        e.preventDefault();
        let form = this;
        let formData = new FormData(form);
        $.ajax({
            url: $(form).attr('action'),
            type: $(form).attr('method'),
            data: formData,
            processData: false,
            contentType: false,
            beforeSend: function() {
                $('#saveActivityIndicatorBtn').prop('disabled', true).text('Saving...');
            },
            success: function(response) {
                $('#saveActivityIndicatorBtn').prop('disabled', false).text('Save');
                if (typeof toastr !== 'undefined') {
                    toastr.success(response.message);
                } else {
                    alert(response.message || 'Saved successfully');
                }
                let userUrl = $('#activityIndicatorForm').attr('data-load-url');
                let currentActivityId = $('#activityId').val();
                $('#activityIndicatorForm')[0].reset();
                $('#activityId').val(currentActivityId);
                loadActivityIndicators(currentActivityId, userUrl);
            },
            error: function(xhr) {
                $('#saveActivityIndicatorBtn').prop('disabled', false).text('Save');
                console.log(xhr.responseText);
            }
        });
    });

    $('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>' +
                '</dl>';
            $('#activityViewBody').html(html);
        }).fail(function() {
            $('#activityViewBody').html('<div class="alert alert-danger">Unable to load activity details.</div>');
        });
    });

    $('body').on('click', '.activity-resource-btn', function(e) {
        e.preventDefault();
        let activityId = $(this).data('activity-id');
        let url = $(this).data('url');
        $('#resourceActivityId').val(activityId);
        $('#resourceName').val('');
        $('#resourceDesc').val('');
        $('#resourceResponsible').val('');
        $('#resourceActivityTitle').text('Loading...');
        $('#resourceActivityDescription').text('Loading...');
        $('#resourceActivityObjective').text('Loading...');
        $('#resourceActivityProject').text('Loading...');
        $('#activityResourceExistingBody').html('<tr><td colspan="4" class="text-center text-muted">Loading resources...</td></tr>');
        loadActivityResources(activityId, url);
    });

    function loadActivityResources(activityId, userUrl) {
        $.get(userUrl, function(data) {
            let activity = data.activity;
            $('#resourceActivityTitle').text(activity.title || 'N/A');
            $('#resourceActivityDescription').text(activity.description || 'N/A');
            $('#resourceActivityObjective').text(activity.objective?.title || 'N/A');
            $('#resourceActivityProject').text(activity.project?.title || 'N/A');
            $('#resourceActivityId').val(activity.id);

            if (!data.resources || data.resources.length === 0) {
                $('#activityResourceExistingBody').html('<tr><td colspan="4" class="text-center">No resources added yet.</td></tr>');
            } else {
                let rows = '';
                data.resources.forEach(function(resource, index) {
                    rows += '<tr>' +
                        '<td>' + (index + 1) + '</td>' +
                        '<td>' + (resource.resource || 'N/A') + '</td>' +
                        '<td>' + (resource.description || 'N/A') + '</td>' +
                        '<td>' + (resource.responsible || 'N/A') + '</td>' +
                        '</tr>';
                });
                $('#activityResourceExistingBody').html(rows);
            }
        }).fail(function() {
            $('#activityResourceExistingBody').html('<tr><td colspan="4" class="text-center text-danger">Unable to load resources.</td></tr>');
        });
    }

    $('#activityResourceForm').submit(function(e) {
        e.preventDefault();
        let form = this;
        let formData = new FormData(form);
        let submitBtn = $(form).find('button[type="submit"]');

        $.ajax({
            url: $(form).attr('action'),
            type: $(form).attr('method'),
            data: formData,
            processData: false,
            contentType: false,
            beforeSend: function() {
                submitBtn.prop('disabled', true).text('Adding...');
            },
            success: function(response) {
                submitBtn.prop('disabled', false).text('Add');
                if (typeof toastr !== 'undefined') {
                    toastr.success(response.message);
                } else {
                    alert(response.message || 'Resource added successfully');
                }
                $('#resourceName').val('');
                $('#resourceDesc').val('');
                $('#resourceResponsible').val('');
                let activityId = $('#resourceActivityId').val();
                let url = $('.activity-resource-btn[data-activity-id="' + activityId + '"]').data('url');
                loadActivityResources(activityId, url);
            },
            error: function(xhr) {
                submitBtn.prop('disabled', false).text('Add');
                console.log(xhr.responseText);
                alert('Unable to save resource.');
            }
        });
    });
</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>--Choose 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 () {
            $(document).on('change', '.project_name', 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>--Choose Objective--</option>';
                        for (var i = 0; i < data.length; i++) {
                            op += '<option value="' + data[i].id + '">' + data[i].title + '</option>';

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

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

        });

         $(document).ready(function () {
            $(document).on('change', '.objective_name', function () {

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

                var op = '';
                $.ajax({
                    type: 'get',
                    url: '{!!URL::to('findOutputData')!!}',
                    data: { 'id': objective_id },
                    success: function (data) {
                      

                        op += '<option value="0" selected disabled>--Choose Output--</option>';
                        for (var i = 0; i < data.length; i++) {
                            op += '<option value="' + data[i].id + '">' + data[i].title + '</option>';

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

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

        });
</script>
@endsection