@php $pageName = "indicators";
$subpageName = "indicators"; @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">Indicators 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">Indicators 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">Indicators List </div>
        </div>
      </div>
      <div class="card-body">
       <form method="GET" class="mb-3">
            <div class="row">

                <div class="col-md-3">
                     <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>Indicator</th>
                <th>Description</th>
                <th>Type</th>
                <th>Project</th>
                <th>Actions</th>
              </tr>
            </thead>
            <tbody>
              @if(count($indicators) > 0)
                @foreach($indicators as $index => $indicator)
                  <tr>
                    <td>{{ $index + 1 }}</td>
                    <td>{{ $indicator->indicator ?? 'N/A' }}</td>
                    <td>{{ $indicator->description ?? 'N/A' }}</td>
                    <td>{{ $indicator->type->name ?? 'N/A' }}</td>
                    <td>{{ $indicator->project->title ?? 'N/A' }}</td>
                    <td>
                         <a class="kpi-baseline-btn btn btn-primary" data-bs-toggle="modal"
                                                                data-bs-target="#ip-example-modal-lg2"
                                                                data-url="{{ route('kpi-baseline', Crypt::encrypt($indicator->id)) }}"
                                                                data-bs-placement="top" data-bs-custom-class="tooltip-primary"
                                                                title="KPI Baseline"><i class="ti ti-chart-line"
                                                                style="color: white">Baseline</i>
                                                            </a>
                        <a class="edit-indicator-btn btn btn-warning" data-bs-toggle="modal"
                            data-bs-target="#bs-example-modal-lg2"
                            data-url="{{ route('indicator-id', Crypt::encrypt($indicator->id)) }}"
                            data-bs-placement="top" data-bs-custom-class="tooltip-warning"
                            title="Edit"><i class="tf-icons ti ti-edit"
                            style="color: white">Edit</i></a>
                    </td>
                  </tr>
                @endforeach
              @else
                <tr>
                  <td colspan="7" class="text-center">No indicators found.</td>
                </tr>
              @endif
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>

   @include('indicator.kpi-baseline-modal');
   @include('indicator.edit-indicator-modal');


@endsection

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

</script>

 <script>
        $(document).ready(function () {
            $('body').on('click', '.edit-indicator-btn', function (e) {
                e.preventDefault();
                var userUrl = $(this).data('url');
                if (userUrl) {
                    $.get(userUrl, function (data) {
                      
                        $('#indicatorId').val(data.id);
                        $('#indicator').val(data.indicator);
                        $('#description').val(data.description);
                        $('#typeId').val(data.type_id);
                        $('#measureId').val(data.measure_id);
                        $('#projectId').val(data.project_id);
                    });
                }
            });
        });
    </script>

    <script>
        $(document).ready(function () {
            $('body').on('click', '.kpi-baseline-btn', function (e) {
                e.preventDefault();
                var userUrl = $(this).data('url');
                if (userUrl) {
                 
                    $.get(userUrl, function (data) {
                
                        $('#indicatorID').val(data.id);
                        $('#baseline').val(data.baseline);
                        $('#baselineDescription').val(data.baseline_description);
                    });
                }
            });
        });
    </script>









@endsection