﻿<!-- @php
    $plan = App\Models\Plan::first();
@endphp -->

{{ Form::open(['url' => 'goaltracking', 'method' => 'post', 'class' => 'needs-validation', 'novalidate']) }}
<div class="modal-body">
    <div class="col-md-12">
        <div class="form-group">
            {{ Form::label('previous_goal', __('Use Previous Goal'), ['class' => 'col-form-label']) }}
            <select id="previous-goal-select" class="form-control">
                <option value="">{{ __('Select Previous Goal') }}</option>
                @foreach($previousGoals as $goal)
                <option value="{{ $goal->id }}">{{ $goal->subject }}</option>
                @endforeach
            </select>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <div class="form-group">
                {{ Form::label('branch', __('Branch'), ['class' => 'col-form-label']) }}<x-required></x-required>
                {{ Form::select('branch', $brances, null, ['class' => 'form-select', 'required' => 'required']) }}
            </div>
        </div>
        <div class="col-md-6">
            <div class="form-group">
                {{ Form::label('goal_type', __('Goal Types'), ['class' => 'col-form-label']) }}<x-required></x-required>
                {{ Form::select('goal_type', $goalTypes, null, ['class' => 'form-select', 'required' => 'required']) }}
            </div>
        </div>
        <div class="col-md-6">
            <div class="form-group">
                {{ Form::label('goal_scope', __('Goal Scope'), ['class' => 'col-form-label']) }}<x-required></x-required>
                {{ Form::select('goal_scope', ['individual' => 'Individual', 'department' => 'Department'], isset($goalTracking) ? $goalTracking->goal_scope : 'individual', ['class' => 'form-control', 'required']) }}
            </div>
        </div>
        <div class="col-md-6">
            <div class="form-group">
                {{ Form::label('start_date', __('Start Date'), ['class' => 'col-form-label']) }}<x-required></x-required>
                {{ Form::text('start_date', null, ['class' => 'form-control d_week current_date', 'autocomplete' => 'off', 'required' => 'required']) }}
            </div>
        </div>
        <div class="col-md-6">
            <div class="form-group">
                {{ Form::label('end_date', __('End Date'), ['class' => 'col-form-label']) }}<x-required></x-required>
                {{ Form::text('end_date', null, ['class' => 'form-control d_week current_date', 'autocomplete' => 'off', 'required' => 'required']) }}
            </div>
        </div>
        <div class="col-md-12">
            <div class="form-group">
                {{ Form::label('subject', __('Subject'), ['class' => 'col-form-label']) }}<x-required></x-required>
                {{ Form::text('subject', null, ['class' => 'form-control', 'placeholder' => __('Enter subject'), 'required' => 'required']) }}
            </div>
        </div>
        <div class="col-md-12">
            <div class="form-group">
                {{ Form::label('target_achievement', __('Target Achievement'), ['class' => 'col-form-label']) }}
                {{ Form::text('target_achievement', null, ['class' => 'form-control', 'placeholder' => __('Enter target achievement')]) }}
            </div>
        </div>
        <div class="form-group">
            {{ Form::label('indicator_id', __('Select Indicator'), ['class' => 'col-form-label']) }}
            {{ Form::select('indicator_id', $indicators, null, ['class' => 'form-select', 'id' => 'indicator-select']) }}
        </div>

        <div class="col-md-12">
            <div class="form-group">
                {{ Form::label('competencies', __('Select Competencies'), ['class' => 'col-form-label']) }}
                <div id="competency-checkboxes" class="border rounded p-3">
                    <div class="text-muted">Please select an indicator first</div>
                </div>
            </div>
        </div>
        <div class="col-md-12">
            <div class="form-group">
                {{ Form::label('description', __('Notes'), ['class' => 'col-form-label']) }}
                {{ Form::textarea('description', null, ['class' => 'form-control', 'rows' => '3', 'placeholder' => __('Enter Notes')]) }}
            </div>
        </div>

    </div>
</div>
<div class="modal-footer">
    <input type="button" value="Cancel" class="btn btn-light" data-bs-dismiss="modal">
    <input type="submit" value="{{ __('Create') }}" class="btn btn-primary">
</div>
{{ Form::close() }}

<script>
    function fetchCompetenciesForIndicator(indicatorId) {
        if (!indicatorId) return;

        $.ajax({
            url: `/goaltracking/competencies/${indicatorId}`,
            method: 'GET',
            success: function(data) {
                const $competencyCheckboxes = $('#competency-checkboxes');
                $competencyCheckboxes.empty();

                if (data.length === 0) {
                    $competencyCheckboxes.html('<div class="text-muted">No competencies found</div>');
                    return;
                }

                data.forEach(comp => {
                    const checkboxHtml = `
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="competencies[]" value="${comp.id}" id="competency_${comp.id}">
                            <label class="form-check-label" for="competency_${comp.id}">
                                ${comp.name}
                            </label>
                        </div>
                    `;
                    $competencyCheckboxes.append(checkboxHtml);
                });
            },
            error: function(xhr) {
                alert('Failed to fetch competencies.');
                console.error(xhr.responseText);
            }
        });
    }

    $(document).ready(function() {
        var now = new Date();
        var month = (now.getMonth() + 1);
        var day = now.getDate();
        if (month < 10) month = "0" + month;
        if (day < 10) day = "0" + day;
        var today = now.getFullYear() + '-' + month + '-' + day;
        $('.current_date').val(today);

        $('#indicator-select').on('change', function() {
            const indicatorId = $(this).val();
            fetchCompetenciesForIndicator(indicatorId);
        });

        // Trigger if already selected
        const initialIndicator = $('#indicator-select').val();
        if (initialIndicator) {
            fetchCompetenciesForIndicator(initialIndicator);
        }


        $('#previous-goal-select').on('change', function() {
            const goalId = $(this).val();
            if (!goalId) return;

            $.ajax({
                url: `/goaltracking/fetch/${goalId}`,
                type: 'GET',
                success: function(goal) {
                    $('select[name="branch"]').val(goal.branch).trigger('change');
                    $('select[name="goal_type"]').val(goal.goal_type).trigger('change');
                    $('input[name="start_date"]').val(goal.start_date);
                    $('input[name="end_date"]').val(goal.end_date);
                    $('input[name="subject"]').val(goal.subject);
                    $('input[name="target_achievement"]').val(goal.target_achievement);
                    $('textarea[name="description"]').val(goal.description);
                },
                error: function(xhr) {
                    alert('Failed to fetch goal details.');
                    console.error(xhr.responseText);
                }
            });
        });
    });
</scrip