

<?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-link text-decoration-none">
                <i class="bi bi-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(); ?>

                    <!-- 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>
                        
                        <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">
                                    <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->unit); ?> - <?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-primary px-4">
                            <i class="bi bi-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>
    // Calculate duration when dates change
    function calculateDuration() {
        const startDate = document.getElementById('start_date').value;
        const endDate = document.getElementById('end_date').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;
            
            document.getElementById('duration-display').textContent = diffDays + ' day' + (diffDays !== 1 ? 's' : '');
        }
    }

    document.getElementById('start_date').addEventListener('change', calculateDuration);
    document.getElementById('end_date').addEventListener('change', calculateDuration);

    // Count selected participants
    function updateSelectedCount() {
        const checkboxes = document.querySelectorAll('input[name="participants[]"]:checked');
        document.getElementById('selected-count').textContent = checkboxes.length;
    }

    document.querySelectorAll('input[name="participants[]"]').forEach(checkbox => {
        checkbox.addEventListener('change', updateSelectedCount);
    });

    // Initialize counts
    calculateDuration();
    updateSelectedCount();
</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 /home/vmisssredcross/nrdt.vmis-ssredcross.org/resources/views/trainings/edit.blade.php ENDPATH**/ ?>