@php $pageName = "project";
$subpageName = "project"; @endphp



@extends('layouts.app')



@section('content')

    <div class="content">
        <div class="page-header">
            <div class="add-item d-flex">
                <div class="page-title">
                    <h4 class="fw-bold">Project 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"><a href="#">Project Manager</a></li>

                            <li class="breadcrumb-item active" aria-current="page">Project</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
        <!-- /product list -->
        @if (session('message_success'))
            <p class="alert alert-success" align="center" style="color:green"><b>{{session('message_success')}}</b></p>
        @endif

        @if (session('message_error'))
            <p class="alert alert-danger" align="center" style="color: red">{{session('message_error')}}</p>
        @endif
        <!-- /product list -->
        <div class="card">
            <div class="card-header d-flex align-items-center justify-content-between flex-wrap row-gap-3">
                <div class="search-set">
                    <h3>Project </h3>
                </div>
                <a data-bs-toggle="modal" data-bs-target="#bs-example-modal-lg" type="button" class="btn btn-info"
                    data-bs-placement="top" data-bs-custom-class="tooltip-info" title="Add New Project"
                    style="float: right"><i class="fe fe-plus"></i> Add New Project</a>
            </div>

            <div class="card-body">

                <div class="tab-content">
                    <div class="tab-pane show active text-muted" id="home-center" role="tabpanel">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="table-responsive">
                                    <table class="table" id="myTable">
                                        <thead class="table-light">
                                            <tr>
                                                <th>#</th>
                                                <th>Title</th>
                                                <th>Description</th>
                                                <th>Thematic Area</th>
                                                <th>Classification</th>
                                                <th>Action</th>

                                            </tr>
                                        </thead>
                                        <tbody>
                                            @if($list)
                                            @foreach ($list as $project)
                                                <tr>
                                                    <td>{{ $loop->iteration }}</td>
                                                    <td>{{ $project->title }}</td>
                                                    <td>{{ $project->description }}</td>
                                                    <td>{{ $project->thematic->name }}</td>
                                                    <td>{{ $project->classification->name }}</td>
                                                    <td>
                                                           <a class="indicator-project-btn btn btn-primary" data-bs-toggle="modal"
                                                                data-bs-target="#ip-example-modal-lg2"
                                                                data-project-id="{{ $project->id }}" data-url="{{ route('project-indicators', $project->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>

                                                             <a class="strategic-objective-btn btn btn-warning" data-bs-toggle="modal"
                                                                data-bs-target="#so-example-modal-lg2"
                                                                data-project-id="{{ $project->id }}" data-url="{{ route('strategic-objectives', $project->id) }}"
                                                                data-bs-placement="top" data-bs-custom-class="tooltip-primary"
                                                                title="Strategic Objectives"><i class="ti ti-chart-line"
                                                                style="color: white">Objectives</i>
                                                            </a>

                                                    </td>
                                                </tr>
                                            @endforeach
                                            @endif

                                         
                                        </tbody>
                                    </table>

                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @include('project.project-modal');
    @include('project.objective-modal');
    @include('project.indicator-project-modal');
@endsection



@section('scripts')
  
    
    <script>


    
        // $('#bs-example-modal-lg').on('shown.bs.modal', function () {
        //     if (typeof flatpickr !== "undefined") {
        //         flatpickr("#flatpickr-date", {
        //             dateFormat: "Y-m-d",
        //             allowInput: true,
        //             minDate: "today"
        //         });
        //     }
        // });

        $('#ip-example-modal-lg').on('shown.bs.modal', function () {
            if (typeof flatpickr !== "undefined") {
                flatpickr("#flatpickr-date", {
                    dateFormat: "Y-m-d",
                    allowInput: true,
                    minDate: "today"
                });
            }
        });

    </script>
    {{-- <script>
        $(document).ready(function () {
            $('body').on('click', '.edit-institution-btn', function (e) {
                e.preventDefault();
                var userUrl = $(this).data('url');
                if (userUrl) {
                    $.get(userUrl, function (data) {
                        $('#institutionID').val(data.id);
                        $('#instname').val(data.name);
                        $('#instabbr').val(data.abbreviation);
                        $('#instcat').val(data.category_id);
                        $('#instclass').val(data.classification_id);
                        $('#instgps').val(data.gps);
                        $('#instloc').val(data.location);
                        $('#instemail').val(data.email);
                        $('#insttel').val(data.telephone);
                    });
                }
            });
        });
    </script> --}}

   <script>

    let currentRequest;

    function loadIndicators(projectId, 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>
            `;

            $('#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 projectId = $(this).data('project-id');
      
        let userUrl = $(this).data('url');

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

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

        // Load indicators
        loadIndicators(projectId, 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 projectId = $('#projectId').val();
  
                let userUrl = $('#indicatorForm').attr('data-load-url');

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

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

                loadIndicators(projectId, userUrl);
            },

            error:function(xhr){

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

                console.log(xhr.responseText);

            }

        });

    });

</script>



 <script>

    let nowRequest;

    function loadObjectives(projectId, userUrl)
    {
        $('#objectiveList').html(
            '<div class="text-muted">Loading objectives...</div>'
        );

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

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

            let objectives = data.objectives;

            if (objectives.length === 0)
            {
                $('#objectiveList').html(`
                    <div class="alert alert-info">
                        No objectives added yet.
                    </div>
                `);

                return;
            }

           let html = `
            <div class="table-responsive">
                <table class="table table-bordered table-striped">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Title</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
            `;

            objectives.forEach((objective, index) => {

                html += `
                    <tr>
                        <td>${index + 1}</td>
                        <td>${objective.title}</td>
                        <td>${objective.description}</td>
                    </tr>
                `;
            });

                html += `
                </tbody>
            </table>
        `;
            $('#objectiveList').html(html);

        }).fail(function () {

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

        });
    }

</script>

<script>

    $('body').on('click', '.strategic-objective-btn', function (e) {

        e.preventDefault();

        let projectId = $(this).data('project-id');

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

        $('#objectiveProjectId').val(projectId);

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

        // Load objectives
        loadObjectives(projectId, userUrl);



    });

</script>

<script>

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

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

          success:function(response){

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

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

                let projectId = $('#objectiveProjectId').val();

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

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

                $('#objectiveProjectId').val(projectId);

                loadObjectives(projectId, userUrl);
            },

            error:function(xhr){

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

                console.log(xhr.responseText);
            }

        });

    });

</script>
@endsection