@if($investigation)
<div class="modal fade" id="addRootCauseModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <form method="POST" action="{{ route('deviations.root-causes.store', $investigation) }}">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title">Add Root Cause</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Root Cause Type *</label>
                            <select name="root_cause_type" class="form-control" required>
                                <option value="">Select…</option>
                                @foreach(['EQUIPMENT','PROCESS','PERSONNEL','MATERIAL','ENVIRONMENT','METHOD','MEASUREMENT','MANAGEMENT'] as $t)
                                    <option value="{{ $t }}">{{ $t }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Systemic?</label>
                            <div class="custom-control custom-switch mt-2">
                                <input class="custom-control-input" type="checkbox" name="is_systemic"
                                       value="1" id="rc_systemic">
                                <label class="custom-control-label" for="rc_systemic">
                                    Affects multiple processes/products
                                </label>
                            </div>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Description * (min 30 chars)</label>
                        <textarea name="root_cause_description" rows="4" class="form-control"
                                  required minlength="30"></textarea>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Evidence References</label>
                        <textarea name="evidence_references" rows="2" class="form-control"></textarea>
                    </div>

                    @if($investigation->methodology === '5_WHYS')
                        <hr>
                        <h6><i class="fas fa-question-circle"></i> 5-Whys Analysis (recommended ≥3 levels)</h6>
                        <div id="whysContainer">
                            @for($i = 0; $i < 3; $i++)
                                <div class="card mb-2 why-item">
                                    <div class="card-body">
                                        <strong>Why #{{ $i + 1 }}</strong>
                                        <input type="text" name="whys[{{ $i }}][question]"
                                               class="form-control mb-2 mt-1"
                                               placeholder="Question">
                                        <textarea name="whys[{{ $i }}][answer]"
                                                  class="form-control mb-2"
                                                  placeholder="Answer"></textarea>
                                        <input type="text" name="whys[{{ $i }}][evidence]"
                                               class="form-control"
                                               placeholder="Evidence (optional)">
                                    </div>
                                </div>
                            @endfor
                        </div>
                        <button type="button" class="btn btn-sm btn-outline-secondary"
                                onclick="addWhy()">
                            <i class="fas fa-plus"></i> Add Why Level
                        </button>
                    @endif
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Save Root Cause</button>
                </div>
            </form>
        </div>
    </div>
</div>

@push('scripts')
<script>
    let whyIndex = 3;
    function addWhy() {
        if (whyIndex >= 5) {
            alert('Maximum 5 Why levels');
            return;
        }
        const container = document.getElementById('whysContainer');
        const html = `
            <div class="card mb-2 why-item">
                <div class="card-body">
                    <strong>Why #${whyIndex + 1}</strong>
                    <input type="text" name="whys[${whyIndex}][question]" class="form-control mb-2 mt-1" placeholder="Question">
                    <textarea name="whys[${whyIndex}][answer]" class="form-control mb-2" placeholder="Answer"></textarea>
                    <input type="text" name="whys[${whyIndex}][evidence]" class="form-control" placeholder="Evidence (optional)">
                </div>
            </div>`;
        container.insertAdjacentHTML('beforeend', html);
        whyIndex++;
    }
</script>
@endpush
@endif