@php $pageName = "results";
$subpageName = "results"; @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">Output/Result 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">Output/Result Manager</li>
                    </ol>
                </nav>
            </div>
            <button type="button" class="btn btn-info" data-bs-toggle="modal" data-bs-target="#addResultModal">
                <i class="fe fe-plus"></i> Add New Result
            </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="resultTable">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Title</th>
                                <th>Description</th>
                                <th>Project</th>
                                <th>Objective</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @if($results->count() > 0)
                            @foreach($results as $index => $result)
                                <tr>
                                    <td>{{ $index + 1 }}</td>
                                    <td>{{ $result->title ?? 'N/A' }}</td>
                                    <td>{{ $result->description }}</td>
                                    <td>{{ $result->project->title ?? 'N/A' }}</td>
                                    <td>{{ $result->objective->title ?? 'N/A' }}</td>
                                    <td>
                                        <button class="btn btn-primary btn-sm result-indicator-btn" data-bs-toggle="modal" data-bs-target="#resultIndicatorModal" data-url="{{ route('result-indicators', Crypt::encrypt($result->id)) }}" data-result-id="{{ $result->id }}">
                                            KPI
                                        </button>
                                        <button class="btn btn-secondary btn-sm result-view-btn" data-bs-toggle="modal" data-bs-target="#resultViewModal" data-url="{{ route('result-id', Crypt::encrypt($result->id)) }}">
                                            View
                                        </button>
                                    </td>
                                </tr>
                          
                            @endforeach
                            @endif
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    @include('result.add-result-modal')
    @include('result.result-indicator-modal')
    @include('result.result-view-modal')

@endsection

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

      
        
    });

    let currentResultRequest;

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

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

        currentResultRequest = $.get(userUrl, function(data) {
            let indicators = data.indicators;
            if (indicators.length === 0) {
                $('#resultIndicatorList').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>';
            $('#resultIndicatorList').html(html);
        }).fail(function() {
            $('#resultIndicatorList').html('<div class="alert alert-danger">Failed to load indicators.</div>');
        });
    }

    $('body').on('click', '.result-indicator-btn', function(e) {
        e.preventDefault();
        let resultId = $(this).data('result-id');
        let userUrl = $(this).data('url');
        $('#resultId').val(resultId);
        $('#resultIndicatorForm').attr('data-load-url', userUrl);
        loadResultIndicators(resultId, userUrl);
    });

    $('#resultIndicatorForm').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() {
                $('#saveResultIndicatorBtn').prop('disabled', true).text('Saving...');
            },
            success: function(response) {
                $('#saveResultIndicatorBtn').prop('disabled', false).text('Save');
                if (typeof toastr !== 'undefined') {
                    toastr.success(response.message);
                } else {
                    alert(response.message || 'Saved successfully');
                }
                let userUrl = $('#resultIndicatorForm').attr('data-load-url');
                let currentResultId = $('#resultId').val();
                $('#resultIndicatorForm')[0].reset();
                $('#resultId').val(currentResultId);
                loadResultIndicators(currentResultId, userUrl);
            },
            error: function(xhr) {
                $('#saveResultIndicatorBtn').prop('disabled', false).text('Save');
                console.log(xhr.responseText);
            }
        });
    });

    $('body').on('click', '.result-view-btn', function(e) {
        e.preventDefault();
        let url = $(this).data('url');
        $('#resultViewBody').html('<div class="text-muted">Loading result details...</div>');
        $.get(url, function(data) {
            let result = data.result;
            let html = '<dl class="row">' +
                '<dt class="col-sm-4">Title</dt><dd class="col-sm-8">' + (result.title || 'N/A') + '</dd>' +
                '<dt class="col-sm-4">Description</dt><dd class="col-sm-8">' + (result.description || 'N/A') + '</dd>' +
                '<dt class="col-sm-4">Project</dt><dd class="col-sm-8">' + (result.project?.title || 'N/A') + '</dd>' +
                '<dt class="col-sm-4">Objective</dt><dd class="col-sm-8">' + (result.objective?.title || 'N/A') + '</dd>' +
                '</dl>';
            $('#resultViewBody').html(html);
        }).fail(function() {
            $('#resultViewBody').html('<div class="alert alert-danger">Unable to load result details.</div>');
        });
    });
</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('findIndicatorData')!!}',
                    data: { 'id': objective_id },
                    success: function (data) {
                      

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

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

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

        });
</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>

@endsection