

<?php $__env->startSection('content'); ?>
<div class="container-fluid px-4 py-6">
    <div class="max-w-4xl mx-auto">
        <!-- Header -->
        <div class="d-flex align-items-center mb-4">
            <a href="<?php echo e(route('trainings.index')); ?>" class="btn btn-secondary">
                <i class="fas fa-arrow-left"></i> Back to Trainings
            </a>
        </div>

        <!-- Form Card -->
        <div class="card shadow-sm">
            <div class="card-header bg-white py-3">
                <h4 class="mb-0">Create New Training</h4>
            </div>
            <div class="card-body p-4">
                <?php if($errors->any()): ?>
                    <div class="alert alert-danger">
                        <ul class="mb-0">
                            <?php $__currentLoopData = $errors->all(); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $error): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <li><?php echo e($error); ?></li>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        </ul>
                    </div>
                <?php endif; ?>

                <form action="<?php echo e(route('trainings.store')); ?>" method="POST">
                    <?php echo csrf_field(); ?>
                    <!-- Select Training Sector -->
                    <div class="mb-4">
                        <label for="training_sector" class="form-label fw-semibold">Training Sector <span class="text-danger">*</span></label>
                        <?php
                            $training_sectors = [
                                'WASH',
                                'Health',
                                'Protection',
                                'CVAs/Relief',
                                'PMER',
                                'CEA',
                                'Logistics',
                            ];
                        ?>
                        <select name="training_sector" id="training_sector" class="form-select <?php $__errorArgs = ['training_sector'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> is-invalid <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>" required>
                            <option value="">Select Training Sector</option>
                            <?php $__currentLoopData = $training_sectors; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $training_sector): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <option value="<?php echo e($training_sector); ?>" <?php echo e(old('training_sector') === $training_sector ? 'selected' : ''); ?>>
                                    <?php echo e($training_sector); ?>

                                </option>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        </select>
                        <?php $__errorArgs = ['training_sector'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?><div class="invalid-feedback"><?php echo e($message); ?></div><?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                    </div>

                    <!-- Name of Training -->
                    <div class="mb-4">
                        <label for="name" class="form-label fw-semibold">Name of Training <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="name" name="name" value="<?php echo e(old('name')); ?>" required placeholder="e.g., Emergency Response Training">
                    </div>

                    <!-- Summary -->
                    <div class="mb-4">
                        <label for="summary" class="form-label fw-semibold">Summary of Training <span class="text-danger">*</span></label>
                        <textarea class="form-control" id="summary" name="summary" rows="3" required placeholder="Brief description of the training program..."><?php echo e(old('summary')); ?></textarea>
                    </div>

                    <!-- Date of Creating Training -->
                    <div class="mb-4">
                        <label for="creation_date" class="form-label fw-semibold">Date of Creating Training <span class="text-danger">*</span></label>
                        <input type="date" class="form-control" id="creation_date" name="creation_date" value="<?php echo e(old('creation_date', date('Y-m-d'))); ?>" required>
                    </div>

                    <!-- Duration of Training -->
                    <div class="row mb-4">
                        <div class="col-md-4">
                            <label for="start_date" class="form-label fw-semibold">Start Date <span class="text-danger">*</span></label>
                            <input type="date" class="form-control" id="start_date" name="start_date" value="<?php echo e(old('start_date')); ?>" required>
                        </div>
                        <div class="col-md-4">
                            <label for="end_date" class="form-label fw-semibold">End Date <span class="text-danger">*</span></label>
                            <input type="date" class="form-control" id="end_date" name="end_date" value="<?php echo e(old('end_date')); ?>" required>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label fw-semibold">Duration</label>
                            <div class="form-control bg-light" id="duration-display">0 days</div>
                        </div>
                    </div>

                    <!-- Location -->
                    <div class="mb-4">
                        <label for="location" class="form-label fw-semibold">Location of Training <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="location" name="location" value="<?php echo e(old('location')); ?>" required placeholder="e.g., NDRT Training Center, Nairobi">
                    </div>

                    <!-- Course Outline -->
                    <div class="mb-4">
                        <label for="course_outline" class="form-label fw-semibold">Course Outline <span class="text-danger">*</span></label>
                        <textarea class="form-control" id="course_outline" name="course_outline" rows="5" required placeholder="Detailed course outline and topics to be covered..."><?php echo e(old('course_outline')); ?></textarea>
                    </div>

                    <!-- Expected Participants -->
                    <div class="mb-4">
                        <label for="expected_participants" class="form-label fw-semibold">Expected Number of Participants <span class="text-danger">*</span></label>
                        <input type="number" class="form-control" id="expected_participants" name="expected_participants" value="<?php echo e(old('expected_participants')); ?>" min="1" required placeholder="e.g., 25">
                    </div>

                    <!-- Attendance List -->
                    <div class="mb-4">
                        <label class="form-label fw-semibold">Attendance List</label>
                        <p class="text-muted small mb-2">Select participants from the list below</p>
                        <!-- Officer Search -->
                        <input type="text" class="form-control mb-2" id="officer-search" placeholder="Search officers by name, department, or position...">
                        <div class="border rounded p-3" style="max-height: 300px; overflow-y: auto;">
                            <?php $__empty_1 = true; $__currentLoopData = $officers; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $officer): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                                <div class="form-check mb-2 officer-entry" 
                                     data-name="<?php echo e(strtolower($officer->first_name . ' ' . $officer->surname)); ?>" 
                                     data-department="<?php echo e(strtolower($officer->department ?? '')); ?>"
                                     data-position="<?php echo e(strtolower($officer->position ?? '')); ?>"
                                     data-sector="<?php echo e(strtolower($officer->training_sector ?? '')); ?>">
                                    <input class="form-check-input" type="checkbox" name="participants[]" value="<?php echo e($officer->id); ?>" id="officer_<?php echo e($officer->id); ?>" 
                                        <?php echo e(in_array($officer->id, old('participants', [])) ? 'checked' : ''); ?>>
                                    <label class="form-check-label" for="officer_<?php echo e($officer->id); ?>">
                                        <strong><?php echo e($officer->first_name); ?> <?php echo e($officer->surname); ?></strong>
                                        <small class="text-muted d-block"><?php echo e($officer->id_number); ?> - <?php echo e($officer->position); ?></small>
                                    </label>
                                </div>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                                <p class="text-muted mb-0">No officers available. Please add officers first.</p>
                            <?php endif; ?>
                        </div>
                        <small class="text-muted mt-2 d-block">
                            <span id="selected-count">0</span> participant(s) selected
                        </small>
                    </div>

                    <!-- Trainer Name -->
                    <div class="mb-4">
                        <label for="trainer_name" class="form-label fw-semibold">Name of Trainer <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="trainer_name" name="trainer_name" value="<?php echo e(old('trainer_name')); ?>" required placeholder="e.g., Dr. Jane Smith">
                    </div>

                    <!-- Supervisor Name -->
                    <div class="mb-4">
                        <label for="supervisor_name" class="form-label fw-semibold">Name of Training Supervisor <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="supervisor_name" name="supervisor_name" value="<?php echo e(old('supervisor_name')); ?>" required placeholder="e.g., John Doe">
                    </div>

                    <!-- Remarks -->
                    <div class="mb-4">
                        <label for="remarks" class="form-label fw-semibold">Training Remarks</label>
                        <textarea class="form-control" id="remarks" name="remarks" rows="3" placeholder="Any additional remarks or notes..."><?php echo e(old('remarks')); ?></textarea>
                    </div>

                    <!-- Submit Buttons -->
                    <div class="d-flex gap-2 pt-3">
                        <button type="submit" class="btn btn-success px-4">
                            <i class="fas fa-save"></i> Save Training
                        </button>
                        <a href="<?php echo e(route('trainings.index')); ?>" class="btn btn-outline-secondary px-4">Cancel</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<?php $__env->startPush('scripts'); ?>
<script>
document.addEventListener('DOMContentLoaded', function () {
    const startInput = document.getElementById('start_date');
    const endInput = document.getElementById('end_date');
    const durationDisplay = document.getElementById('duration-display');
    const participantCheckboxes = document.querySelectorAll('input[name="participants[]"]');
    const selectedCountEl = document.getElementById('selected-count');
    const searchInput = document.getElementById('officer-search');
    const sectorSelect = document.getElementById('training_sector');
    const officerEntries = document.querySelectorAll('.officer-entry');

    function calculateDuration() {
        if (!startInput || !endInput || !durationDisplay) {
            return;
        }

        const startDate = startInput.value;
        const endDate = endInput.value;

        if (startDate && endDate) {
            const start = new Date(startDate);
            const end = new Date(endDate);
            const diffTime = Math.abs(end - start);
            const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)) + 1;

            durationDisplay.textContent = diffDays + ' day' + (diffDays !== 1 ? 's' : '');
        }
    }

    if (startInput) {
        startInput.addEventListener('change', calculateDuration);
    }
    if (endInput) {
        endInput.addEventListener('change', calculateDuration);
    }

    function updateSelectedCount() {
        if (!selectedCountEl) {
            return;
        }

        const checked = document.querySelectorAll('input[name="participants[]"]:checked');
        selectedCountEl.textContent = checked.length;
    }

    participantCheckboxes.forEach(checkbox => {
        checkbox.addEventListener('change', updateSelectedCount);
    });

    function filterOfficers() {
        const term = (searchInput?.value || '').toLowerCase();
        const sector = (sectorSelect?.value || '').toLowerCase();

        officerEntries.forEach(entry => {
            const name = entry.dataset.name || '';
            const department = entry.dataset.department || '';
            const position = entry.dataset.position || '';
            const entrySector = entry.dataset.sector || '';

            const matchesSearch = !term || name.includes(term) || department.includes(term) || position.includes(term);
            const matchesSector = !sector || entrySector === sector;

            entry.style.display = matchesSearch && matchesSector ? '' : 'none';
        });
    }

    if (searchInput) {
        searchInput.addEventListener('input', filterOfficers);
    }
    if (sectorSelect) {
        sectorSelect.addEventListener('change', filterOfficers);
    }

    // Initialize UI state
    calculateDuration();
    updateSelectedCount();
    filterOfficers();
});
</script>
<?php $__env->stopPush(); ?>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH C:\wamp64\www\ndrt-system\resources\views/trainings/create.blade.php ENDPATH**/ ?>