@php $pageName = "activities";
$subpageName = "activity-assignment"; @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 Assignment</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 Assignment</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" name="project_id">
                                <option value="" selected>--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-4">
                            <label class="form-label">Objective</label>
                            <select class="form-select objective_select" name="objective_id" onchange="this.form.submit()">
                                <option value="" selected>--Select Objective--</option>
                                @foreach($objectives as $objective)
                                    <option value="{{ $objective->id }}" {{ request('objective_id') == $objective->id ? 'selected' : '' }}>{{ $objective->title }}</option>
                                @endforeach
                            </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
                @if ($errors->any())
                    <div class="alert alert-danger">
                        <ul class="mb-0">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                <div class="table-responsive">
                    <table class="table table-bordered table-striped" id="activityAssignmentTable">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Title</th>
                                <th>Description</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @if($activities)
                            @forelse($activities as $activity)
                                <tr>
                                    <td>{{ $loop->iteration }}</td>
                                    <td>{{ $activity->title }}</td>
                                    <td>{{ $activity->description }}</td>
                                    <td>
                                         <button class="btn btn-warning btn-sm activity-assignment-btn" data-bs-toggle="modal" data-bs-target="#activityAssignmentModal" data-url="{{ route('activity-assignment', Crypt::encrypt($activity->id)) }}" data-activity-id="{{ $activity->id }}">
                                            <i class="fe fe-user me-1"></i> Assign
                                        </button>
                                        <button class="btn btn-primary btn-sm activity-timeline-btn ms-1" data-bs-toggle="modal" data-bs-target="#activityTimelineModal" data-url="{{ route('activity-assignment', Crypt::encrypt($activity->id)) }}" data-activity-id="{{ $activity->id }}">
                                            <i class="fe fe-calendar me-1"></i> Timeline
                                        </button>
                                    </td>
                                </tr>
                            
                            @endforeach
                            @endif
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    @include('activity.add-activity-modal')
    @include('activity.activity-assignment-modal')

    <div class="modal fade" id="activityTimelineModal" tabindex="-1" aria-labelledby="activityTimelineModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="activityTimelineModalLabel">Activity Timeline</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form method="POST" action="{{ route('activity-timeline-process') }}">
                    @csrf
                    <input type="hidden" name="activity_id" id="timelineActivityId">
                    <div class="modal-body">
                        <div class="row g-3">
                            <div class="col-md-12">
                                <p><strong>Activity:</strong> <span id="timelineActivityTitle"></span></p>
                            </div>
                            <div class="col-md-12">
                                <p><strong>Description:</strong> <span id="timelineActivityDescription"></span></p>
                            </div>
                            <div class="col-md-6">
                                <p><strong>Objective:</strong> <span id="timelineActivityObjective"></span></p>
                            </div>
                            <div class="col-md-6">
                                <p><strong>Project:</strong> <span id="timelineActivityProject"></span></p>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Targeted Result</label>
                                <input type="text" name="target" id="timelineTarget" class="form-control" placeholder="Enter Targeted Result">

                            </div>
                            <div class="col-md-3">
                                <label class="form-label">End Month</label>
                                <select name="end_month" id="timelineEndMonth" class="form-select" required>
                                    <option value="" selected disabled>--Select Month--</option>
                                    <option value="January">January</option>
                                    <option value="February">February</option>
                                    <option value="March">March</option>
                                    <option value="April">April</option>
                                    <option value="May">May</option>
                                    <option value="June">June</option>
                                    <option value="July">July</option>
                                    <option value="August">August</option>
                                    <option value="September">September</option>
                                    <option value="October">October</option>
                                    <option value="November">November</option>
                                    <option value="December">December</option>
                                </select>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">End Year</label>
                                <input type="number" name="end_year" id="timelineEndYear" class="form-control" placeholder="Enter Year" min="1900" max="2100" required>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-cancel" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-success">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="assignActivityModal" tabindex="-1" aria-labelledby="assignActivityModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="assignActivityModalLabel">Assign Activity</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form method="POST" action="{{ route('activity-assign-process') }}">
                    @csrf
                    <input type="hidden" name="activity_id" id="assignActivityId">
                    <div class="modal-body">
                        <div class="row g-3">
                            <div class="col-md-12">
                                <p><strong>Activity:</strong> <span id="assignActivityTitle"></span></p>
                            </div>
                            <div class="col-md-12">
                                <p><strong>Description:</strong> <span id="assignActivityDescription"></span></p>
                            </div>
                            <div class="col-md-6">
                                <p><strong>Objective:</strong> <span id="assignActivityObjective"></span></p>
                            </div>
                            <div class="col-md-6">
                                <p><strong>Project:</strong> <span id="assignActivityProject"></span></p>
                            </div>
                            <div class="col-md-6">
                                <p><strong>Project Indicator:</strong> <span id="assignActivityProjectIndicator"></span></p>
                            </div>
                            <div class="col-md-6">
                                <p><strong>Objective Indicator:</strong> <span id="assignActivityObjectiveIndicator"></span></p>
                            </div>
                            <div class="col-md-12">
                                <label class="form-label">Select Unit</label>
                                <select name="assign_institution" id="assignInstitutionSelect" class="form-select" required>
                                    <option value="" selected disabled>--Select Unit--</option>
                                    @foreach($institutions as $institution)
                                        <option value="{{ $institution->id }}">{{ $institution->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-cancel" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-success">Assign</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

@endsection

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

      
    });
</script>

<script>
    $(document).ready(function () {
        $(document).on('change', '.project_select', function () {
            var project_id = $(this).val();
            var op = '';
            $.ajax({
                type: 'get',
                url: '{!! URL::to('findObjectiveData') !!}',
                data: { 'id': project_id },
                success: function (data) {
                    op += '<option value="" 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>
<script>
        $(document).ready(function () {
            $('body').on('click', '.activity-assignment-btn', function (e) {
                e.preventDefault();
                var userUrl = $(this).data('url');
             
                if (userUrl) {
                    $.get(userUrl, function (data) {
                        let activity = data.activity;
                        let indicators = data.indicators;
                        $('#assignActivityId').val(activity.id);
                        $('#assignActivityTitle').text(activity.title);
                        $('#assignActivityDescription').text(activity.description);
                        $('#assignActivityObjective').text(activity.objective.title);
                        $('#assignActivityProject').text(activity.project.title);
                        $('#assignInstitutionSelect').val(activity.assign_institution);
                        let html = indicators.map(indicator => indicator.indicator).join('<br>');

                        $('#assignActivityIndicator').html(html);
                    });
                }
            });

            $('body').on('click', '.activity-timeline-btn', function (e) {
                e.preventDefault();
                var userUrl = $(this).data('url');

                if (userUrl) {
                    $.get(userUrl, function (data) {
                        let activity = data.activity;
                        $('#timelineActivityId').val(activity.id);
                        $('#timelineActivityTitle').text(activity.title);
                        $('#timelineActivityDescription').text(activity.description);
                        $('#timelineActivityObjective').text(activity.objective ? activity.objective.title : '');
                        $('#timelineActivityProject').text(activity.project ? activity.project.title : '');
                        $('#timelineTarget').val(activity.target || '');
                        $('#timelineEndMonth').val(activity.end_month || '');
                        $('#timelineEndYear').val(activity.end_year || '');
                    });
                }
            });
        });
    </script>
@endsection