
<div class="col-12 mb-3">
    <div class="form-group">
        <?php echo e(Form::label('goal_template', __('Load From Existing Goal'), ['class' => 'form-label'])); ?>

        <select class="form-control select2" id="goal-template-selector">
            <option value=""><?php echo e(__('-- Select a goal to load --')); ?></option>
            <?php $__currentLoopData = $goals; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $goal): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
            <option value="<?php echo e($goal->id); ?>"
                data-title="<?php echo e($goal->title); ?>"
                data-description="<?php echo e($goal->description); ?>"
                data-status="<?php echo e($goal->status); ?>"
                data-weight="<?php echo e($goal->weight); ?>">
                <?php echo e($goal->title); ?>

            </option>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        </select>
    </div>
</div>

<div class="col-12">
    <div class="form-group">
        <?php echo e(Form::label('title', __('Goal'), ['class' => 'form-label'])); ?>


        <?php if(isset($SimpleGoal) && !auth()->user()->can('manage goals') && empty($isManager)): ?>
        
        <?php echo e(Form::text('title', $SimpleGoal->title, [
                'class'    => 'form-control',
                'readonly' => true,
            ])); ?>

        <small class="text-danger">
            <?php echo e(__('You cannot edit a goal title set by a manager.')); ?>

        </small>
        <?php else: ?>
        
        <?php echo e(Form::text('title', null, [
                'class'       => 'form-control',
                'required'    => true,
                'placeholder' => __('Goal Title'),
            ])); ?>

        <?php endif; ?>
    </div>
</div>


<div class="col-12">
    <div class="form-group">
        <?php echo e(Form::label('description', __('Description'), ['class' => 'form-label'])); ?>

        <?php echo e(Form::textarea('description', null, [
            'class' => 'form-control',
            'rows'  => 3,
        ])); ?>

    </div>
</div>

<?php if(auth()->user()->can('manage goals') || !empty($isManager)): ?>
<div class="col-12">
    <div id="employee-picker"
        class="form-group"
        data-assigned='<?php echo json_encode($assignedEmployeeIds ?? [], 15, 512) ?>'>

        <label for="employee-search" class="form-label"><?php echo e(__('Assign Employees')); ?></label>

        <input type="text"
            id="employee-search"
            class="form-control"
            data-url="<?php echo e(route('employee.search')); ?>"
            placeholder="Type to search…">

        
        <div id="employee-assigned"
            class="mt-2 border rounded p-2">
            <?php $__currentLoopData = $assignedEmployees ?? []; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $emp): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
            <div class="form-check mb-2" data-emp="<?php echo e($emp->id); ?>">
                <input class="form-check-input"
                    type="checkbox"
                    id="emp-<?php echo e($emp->id); ?>"
                    name="employees[]"
                    value="<?php echo e($emp->id); ?>"
                    checked>
                <label class="form-check-label"
                    for="emp-<?php echo e($emp->id); ?>"><?php echo e($emp->name); ?></label>
            </div>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        </div>

        
        <div id="employee-search-results"
            class="mt-2 border rounded p-2"
            style="max-height: 200px; overflow-y: auto;"></div>
    </div>
</div>
<?php endif; ?>


<div class="col-6">
    <div class="form-group">
        <?php echo e(Form::label('start_date', __('Start Date'), ['class' => 'form-label'])); ?>

        <?php echo e(Form::date('start_date', optional($SimpleGoal ?? null)->start_date, [
            'class' => 'form-control',
            'required' => true,
        ])); ?>

    </div>
</div>
<div class="col-6">
    <div class="form-group">
        <?php echo e(Form::label('due_date', __('Due Date'), ['class' => 'form-label'])); ?>

        <?php echo e(Form::date('due_date', optional($SimpleGoal ?? null)->due_date, [
            'class' => 'form-control',
            'required' => true,
        ])); ?>

    </div>
</div>


<div class="col-6">
    <div class="form-group">
        <?php echo e(Form::label('status', __('Status'), ['class' => 'form-label'])); ?>

        <?php echo e(Form::select('status', [
    'not_started' => __('Not Started'),
    'in_progress' => __('In-Progress'),
    'on_hold'     => __('On-Hold'),
    'completed'   => __('Completed'),
    'archived'    => __('Archived'),
    'cancelled'   => __('Cancelled'),
], old('status', $SimpleGoal->status ?? 'not_started'), ['class' => 'form-control', 'required'])); ?>

    </div>
</div>

<div class="col-6">
    <div class="form-group">
        <?php echo e(Form::label('weight', __('Weight (%)'), ['class' => 'form-label'])); ?>

        <?php echo e(Form::number('weight', null, ['class' => 'form-control', 'min' => 0, 'max' => 100])); ?>

    </div>
</div>


<?php if(auth()->user()->can('manage goals') || !empty($isManager)): ?>
<div class="col-12 mb-2">
    <?php echo e(Form::hidden('is_visible_to_employee', 0)); ?>

    <label class="form-check custom-checkbox" for="is_visible_to_employee">
        <?php echo e(Form::checkbox('is_visible_to_employee', 1, (isset($SimpleGoal) ? $SimpleGoal->is_visible_to_employee : true), [
            'class' => 'form-check-input custom-checkbox-input', 'id' => 'is_visible_to_employee',
        ])); ?>

        <span class="checkmark"></span>
        <span class="label-text"><?php echo e(__('Visible to employees?')); ?></span>
    </label>
</div>
<?php endif; ?>
<script>
    window.assignedEmployees = <?php echo json_encode($assignedEmployeeIds ?? [], 15, 512) ?>;
    window.assignedEmployeesFull = <?php echo json_encode($assignedEmployees ?? [], 15, 512) ?>;
    console.log(window.assignedEmployeesFull, 'hereee') // just ids

    $(document).ready(function() {
        $('#goal-template-selector').select2({
            width: '100%',
            placeholder: '-- Select a goal to load --',
            allowClear: true
        });
    });

    document.getElementById('goal-template-selector').addEventListener('change', function() {
        const selectedOption = this.options[this.selectedIndex];

        if (!this.value) return;

        const title = selectedOption.getAttribute('data-title');
        const description = selectedOption.getAttribute('data-description');
        const status = selectedOption.getAttribute('data-status');
        const weight = selectedOption.getAttribute('data-weight');

        // Fill the fields
        document.querySelector('input[name="title"]').value = title;
        document.querySelector('textarea[name="description"]').value = description;
        document.querySelector('select[name="status"]').value = status;
        document.querySelector('input[name="weight"]').value = weight;
    });
</script>



<style>
    * Custom Toggle Styles */ .custom-toggle {
        position: relative;
        padding-left: 0;
    }

    .custom-toggle-input {
        width: 3rem;
        height: 1.5rem;
        border-radius: 1rem;
        background-color: #dee2e6;
        border: none;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .custom-toggle-input:checked {
        background-color: #198754;
        border-color: #198754;
    }

    .custom-toggle-input:focus {
        box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);
    }

    .custom-toggle-label {
        margin-left: 0.75rem;
        font-weight: 500;
        cursor: pointer;
    }

    /* Material Design Toggle */
    .material-switch {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: 0.75rem;
    }

    .material-switch-input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
    }

    .material-switch-label {
        position: relative;
        display: flex;
        align-items: center;
        gap: 0.75rem;
        cursor: pointer;
        margin: 0;
    }

    .material-switch-slider {
        position: relative;
        width: 52px;
        height: 24px;
        background-color: #ccc;
        border-radius: 12px;
        transition: background-color 0.3s;
    }

    .material-switch-slider:before {
        position: absolute;
        content: "";
        height: 20px;
        width: 20px;
        left: 2px;
        bottom: 2px;
        background-color: white;
        border-radius: 50%;
        transition: transform 0.3s;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

    .material-switch-input:checked+.material-switch-label .material-switch-slider {
        background-color: #2196F3;
    }

    .material-switch-input:checked+.material-switch-label .material-switch-slider:before {
        transform: translateX(28px);
    }

    .material-switch-text {
        font-weight: 500;
        color: #495057;
    }

    /* Custom Checkbox */
    .custom-checkbox {
        position: relative;
        display: flex;
        align-items: center;
        padding-left: 2rem;
        cursor: pointer;
    }

    .custom-checkbox-input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
    }

    .checkmark {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        height: 20px;
        width: 20px;
        background-color: #eee;
        border: 2px solid #ddd;
        border-radius: 4px;
        transition: all 0.3s ease;
    }

    .custom-checkbox:hover .checkmark {
        background-color: #f8f9fa;
        border-color: #0d6efd;
    }

    .custom-checkbox-input:checked~.checkmark {
        background-color: #0d6efd;
        border-color: #0d6efd;
    }

    .checkmark:after {
        content: "";
        position: absolute;
        display: none;
        left: 6px;
        top: 2px;
        width: 6px;
        height: 12px;
        border: solid white;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
    }

    .custom-checkbox-input:checked~.checkmark:after {
        display: block;
    }

    .label-text {
        font-weight: 500;
        color: #495057;
        margin-left: 0.5rem;
    }

    /* Responsive adjustments */
    @media (max-width: 576px) {
        .material-switch-label {
            flex-direction: column;
            align-items: flex-start;
            gap: 0.5rem;
        }

        .custom-toggle-label {
            margin-left: 0;
            margin-top: 0.5rem;
            display: block;
        }
    }
</style><?php /**PATH /var/www/payraty/hris/resources/views/simple-goals/form-fields.blade.php ENDPATH**/ ?>