@extends('layouts.app')

@section('content')
<style>
.page-wrapper {
    padding: 20px;
}

.page-header h2 {
    margin-bottom: 5px;
}

.page-header p {
    color: #666;
    font-size: 14px;
}

.form-card {
    background: #fff;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    max-width: 900px;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group.full-width {
    grid-column: span 2;
}

.form-group label {
    font-weight: 600;
    margin-bottom: 6px;
}

.form-group label span {
    color: red;
}

.form-group input,
.form-group select,
.form-group textarea {
    padding: 10px;
    border-radius: 6px;
    border: 1px solid #ccc;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #4f46e5;
}

.form-actions {
    margin-top: 25px;
    display: flex;
    gap: 10px;
}

.btn-primary {
    background: #4f46e5;
    color: #fff;
    padding: 10px 18px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
}

.btn-primary:hover {
    background: #4338ca;
}

.btn-secondary {
    background: #e5e7eb;
    padding: 10px 18px;
    border-radius: 6px;
    text-decoration: none;
    color: #111;
}
</style>
<div class="page-wrapper">
    <div class="page-header">
        <h2>Add Session</h2>
        <p>Create session under department</p>
    </div>

    <div class="form-card">
        <form action="{{ route('training_sessions.store') }}" method="POST">
            @csrf
            <div class="form-grid">
                

                <div class="form-group">
                    <label for="program_id">Program</label>
                    <select name="program_id" id="program_id">
                        <option value="">Select Program</option>
                        @foreach($programs as $program)
                        <option value="{{ $program->id }}">{{ $program->name }}</option>
                        @endforeach
                    </select><br>
                </div>
                <div class="form-group">
                    <label>Trainers</label>
                    <div id="trainer-wrapper">
                        <div class="trainer-row d-flex mb-2">
                            <select name="trainers[]" class="form-control me-2">
                                <option value="">Select Trainer</option>
                                @foreach($trainers as $trainer)
                                <option value="{{ $trainer->id }}">{{ $trainer->name }}</option>
                                @endforeach
                            </select>

                            <input type="number" name="trainer_costs[]" class="form-control me-2"
                                placeholder="Enter Cost">

                            <button type="button" class="btn btn-danger remove-row">X</button>
                        </div>
                    </div>

                    <button type="button" id="add-trainer" class="btn btn-primary mt-2">+ Add Trainer</button>
                </div>
                <div class="form-group">
                    <label for="date">Date</label>
                    <input type="date" name="date" id="date"><br>
                </div>

                <div class="form-group">
                    <label for="time">Time</label>
                    <input type="time" name="time" id="time"><br>

                </div>
                <div class="form-group">
                    <label for="duration">Duration (in minutes)</label>
                    <input type="number" name="duration" id="duration" placeholder="Enter duration (e.g. 60)" min="1"><br>
                </div>

                <div class="form-group">
                    <label for="mode">Mode</label>
                    <select name="mode" id="mode">
                        <option value="online">Online</option>
                        <option value="offline">Offline</option>
                        <option value="hybrid">Hybrid</option>
                    </select><br>

                </div>
                <div class="form-group">
                    <label class="form-label fw-bold">Select Employees</label>

                    <div class="border rounded p-3" style="max-height: 200px; overflow-y: auto;">
                        @foreach($trainees as $user)
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="employees[]" value="{{ $user->id }}"
                                id="emp{{ $user->id }}">
                            {{ $user->name }}

                        </div>
                        @endforeach
                    </div>
                </div>
                <div class="form-group">
                    <label for="location">Location</label>
                    <input type="text" name="location" id="location" placeholder="Location"><br>

                </div>
                <div class="form-group">
                    <label for="notes">Notes</label>
                    <textarea name="notes" id="notes" placeholder="Notes"></textarea><br>

                </div>

            </div>

            <div class="form-actions">
                <button class="btn-primary">Save Session</button>
                <a href="{{ route('training_sessions.index') }}" class="btn-secondary">Cancel</a>
            </div>
        </form>
    </div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
function updateTrainerOptions() {
    let selectedValues = [];

    // Collect selected trainer IDs
    document.querySelectorAll('select[name="trainers[]"]').forEach(select => {
        if (select.value) {
            selectedValues.push(select.value);
        }
    });

    // Loop all dropdowns
    document.querySelectorAll('select[name="trainers[]"]').forEach(select => {
        let currentValue = select.value;

        select.querySelectorAll('option').forEach(option => {
            if (option.value === "") return;

            // Disable if selected elsewhere
            if (selectedValues.includes(option.value) && option.value !== currentValue) {
                option.disabled = true;
            } else {
                option.disabled = false;
            }
        });
    });
}

// Add trainer row
document.getElementById('add-trainer').addEventListener('click', function() {

    let wrapper = document.getElementById('trainer-wrapper');

    let row = document.createElement('div');
    row.classList.add('trainer-row', 'd-flex', 'mb-2');

    row.innerHTML = `
        <select name="trainers[]" class="form-control me-2">
            <option value="">Select Trainer</option>
            @foreach($trainers as $trainer)
                <option value="{{ $trainer->id }}">{{ $trainer->name }}</option>
            @endforeach
        </select>

        <input type="number" name="costs[]" class="form-control me-2" placeholder="Enter Cost">

        <button type="button" class="btn btn-danger remove-row">X</button>
    `;

    wrapper.appendChild(row);

    updateTrainerOptions();
});

// On change
document.addEventListener('change', function(e) {
    if (e.target.name === 'trainers[]') {
        updateTrainerOptions();
    }
});

// Remove row
document.addEventListener('click', function(e) {
    if (e.target.classList.contains('remove-row')) {
        e.target.closest('.trainer-row').remove();
        updateTrainerOptions();
    }
});

// Initial call
document.addEventListener('DOMContentLoaded', function() {
    updateTrainerOptions();
});
</script>@endsection