@php $pageName = "objectives";
$subpageName = "objectives"; @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">Objectives 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">Objectives Manager</li>
          </ol>
        </nav>
      </div>

 
    </div>

    <div class="card mt-3">
      <div class="card-header d-flex align-items-center justify-content-between flex-wrap row-gap-3">
        <div class="search-set">
          <div class="card-header">Objectives List </div>
        </div>
      </div>
      <div class="card-body">
       <form method="GET" class="mb-3">
            <div class="row">

                <div class="col-md-3">
                     <label class="form-label">Filter by Project</label>
                     <select name="project_id"
                    class="form-select"
                    onchange="this.form.submit()">

                <option value="">--Select Project--</option>

                @foreach($projects as $project)

                    <option value="{{ $project->id }}"
                        {{ request('project_id') == $project->id ? 'selected' : '' }}>

                        {{ $project->title }}

                    </option>

                @endforeach

            </select>
                </div>

                {{-- <div class="col-md-2">
                    <button class="btn btn-primary w-100">
                        Search
                    </button>
                </div> --}}

            </div>
        </form>
        @if (session('message_success'))
        <div class="alert alert-success" align="center" style="color:green">
            <b>{{session('message_success')}}</b>
        </div>
        @endif

        @if (session('message_error'))
        <div class="alert alert-danger" align="center" style="color: red">
            {{session('message_error')}}
        </div>
        @endif

        <div class="table-responsive">
          <table class="table table-bordered table-striped" id="objectiveTable">
            <thead>
              <tr>
                <th>#</th>
                <th>Objective</th>
                <th>Description</th>
                <th>Project</th>
                <th>Actions</th>
              </tr>
            </thead>
            <tbody>
              @if(count($objectives) > 0)
                @foreach($objectives as $index => $objective)
                  <tr>
                    <td>{{ $index + 1 }}</td>
                    <td>{{ $objective->title ?? 'N/A' }}</td>
                    <td>{{ $objective->description ?? 'N/A' }}</td>
                    <td>{{ $objective->project->title ?? 'N/A' }}</td>
                    <td>
                         <a class="indicator-project-btn btn btn-primary" data-bs-toggle="modal"
                                                                data-bs-target="#ip-example-modal-lg2"
                                                                data-objective-id="{{ $objective->id }}" data-url="{{ route('objective-indicators', Crypt::encrypt($objective->id)) }}"
                                                                data-bs-placement="top" data-bs-custom-class="tooltip-primary"
                                                                title="Indicator Project"><i class="ti ti-chart-line"
                                                                style="color: white">Indicators</i>
                                                            </a>
                    </td>
                  </tr>
                @endforeach
              @endif
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>

   @include('objective.indicator-modal');


@endsection

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

</script>

<script>

    let currentRequest;

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

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

        currentRequest = $.get(userUrl, function (data) {

            let indicators = data.indicators;

            if (indicators.length === 0)
            {
                $('#indicatorList').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}</td>
                        <td>${indicator.type ? indicator.type.name : 'N/A'}</td>
                        <td>${indicator.measure_name}</td>
                    </tr>
                `;
            });

                    html += `
                    </tbody>
                </table>
            </div>
            `;

            $('#indicatorList').html(html);

        }).fail(function () {

            $('#indicatorList').html(`
                <div class="alert alert-danger">
                    Failed to load indicators.
                </div>
            `);

        });
    }

</script>



<script>

    $('body').on('click', '.indicator-project-btn', function (e) {

        e.preventDefault();

        let objectiveId = $(this).data('objective-id');

        let userUrl = $(this).data('url');

        $('#objectiveId').val(objectiveId);

        // Save URL on form for reuse
        $('#indicatorForm').attr('data-load-url', userUrl);

        // Load indicators
        loadIndicators(objectiveId, userUrl);



    });

</script>

<script>

    $('#indicatorForm').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(){

                $('#saveIndicatorBtn')
                    .prop('disabled', true)
                    .text('Saving...');
            },

          success:function(response){

            $('#saveIndicatorBtn')
                .prop('disabled', false)
                .text('Save');

            if (typeof toastr !== 'undefined') {
                toastr.success(response.message);
            } else {
                 alert(response.message || 'Saved successfully');
            }

                let objectiveId = $('#objectiveId').val();

                let userUrl = $('#indicatorForm').attr('data-load-url');

                $('#indicatorForm')[0].reset();

                $('#objectiveId').val(objectiveId);

                loadIndicators(objectiveId, userUrl);
            },

            error:function(xhr){

                $('#saveIndicatorBtn')
                    .prop('disabled', false)
                    .text('Save');

                console.log(xhr.responseText);

            }

        });

    });

</script>


@endsection