@include('admin.include.header')
@include('admin.include.sidebar')

<style>
    .status-card {
        border-radius: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        transition: transform 0.2s, box-shadow 0.2s;
        background-color: white;
    }

    .status-card:hover {
        transform: scale(1.05);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    }

    .status-card h4 {
        font-size: 1.2em;
        padding: 10px 0;
    }

    .icon {
        font-size: 1.5em;
        margin-bottom: 10px;
    }
</style>
<style>
    .icon-btn {
        background: transparent;
        border: none;
        padding: 0;
        margin-right: 6px;
        cursor: pointer;
    }

    .icon-btn i {
        color: #000000;
        font-size: 15px;
    }

    .icon-btn i.fa-trash {
        color: #dc3545;
    }

    .icon-btn:hover {
        background: transparent;
        opacity: 0.8;
    }
</style>

<div class="d-flex flex-row flex-column-fluid px-10">
    <div class="main d-flex flex-column flex-row-fluid">
        <div class="content flex-column-fluid" id="kt_content">

            <div class="card card-custom gutter-b">
                <div class="row mt-5">
                    <div class="col-12">

                        {{-- Alerts --}}
                        @if (session('success'))
                        <div class="alert alert-success alert-dismissible fade show shadow-sm" role="alert">
                            {{ session('success') }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>
                        @endif

                        @if (session('error') || $errors->any())
                        <div class="alert alert-danger alert-dismissible fade show shadow-sm" role="alert">
                            {{ session('error') }}
                            @foreach ($errors->all() as $error)
                            <div>{{ $error }}</div>
                            @endforeach
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>
                        @endif
                        <div class="card shadow-lg border-0">
                            <div class="card-header text-white py-3" style="background: linear-gradient(90deg,#343a40,#495057);">
                                <h4 class="mb-0 fw-bold">
                                    <i class="bi bi-clipboard-check me-2"></i> Inspection Setup
                                </h4>
                            </div>
                            <form method="POST" action="{{ route('inspection.store') }}">
                                @csrf
                                @isset($editingType)
                                <input type="hidden" name="editing" value="1">
                                <input type="hidden" name="type" value="{{ $editingType }}">
                                @endisset

                                <div class="card-body bg-light">
                                    <hr>
                                    <div class="row mb-4">
                                        <div class="col-md-12">
                                            <label class="form-label fw-semibold d-block">Inspection Type (Asset)</label>
                                            @php
                                            $selectedType = $editingType ?? old('type');
                                            @endphp
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input" type="radio" name="type" id="type_trailer"
                                                    value="trailer"
                                                    @if(($selectedType ?? '' )==='trailer' ) checked @endif
                                                    @isset($editingType) disabled @else required @endisset>
                                                <label class="form-check-label" for="type_trailer">Trailer</label>
                                            </div>
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input" type="radio" name="type" id="type_truck"
                                                    value="truck"
                                                    @if(($selectedType ?? '' )==='truck' ) checked @endif
                                                    @isset($editingType) disabled @endisset>
                                                <label class="form-check-label" for="type_truck">Truck</label>
                                            </div>
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input" type="radio" name="type" id="type_both"
                                                    value="both"
                                                    @if(($selectedType ?? '' )==='both' ) checked @endif
                                                    @isset($editingType) disabled @endisset>
                                                <label class="form-check-label" for="type_both">Both</label>
                                            </div>
                                        </div>
                                    </div>

                                    <div id="sectionsContainer">

                                        @if(isset($sections) && count($sections))
                                        @foreach($sections as $sIndex => $section)
                                        <div class="section-block p-4 mb-4 rounded shadow-sm bg-white border-start border-4 border-dark" data-section="{{ $sIndex }}">

                                            <!-- Category -->
                                            <div class="row mb-4">
                                                <div class="col-md-8">
                                                    <label class="form-label fw-semibold">Category</label>
                                                    <input type="text"
                                                        name="sections[{{ $sIndex }}][category]"
                                                        class="form-control"
                                                        value="{{ $section['category'] }}"
                                                        placeholder="Enter Category Name"
                                                        required>
                                                </div>
                                            </div>

                                            <div class="mb-3 remove-section-container">
                                                <button type="button"
                                                    class="btn btn-sm btn-danger remove-section"
                                                    style="{{ $sIndex === 0 ? 'display: none;' : 'display: inline-block;' }}">
                                                    Remove Section
                                                </button>
                                            </div>

                                            <div class="questions-container">
                                                @foreach($section['questions'] as $qIndex => $q)
                                                <div class="row align-items-start mb-3 question-row" data-question="{{ $qIndex }}">

                                                    <div class="col-md-2">
                                                        <label class="form-label fw-semibold">Sub-Category</label>
                                                        <input type="text"
                                                            name="sections[{{ $sIndex }}][questions][{{ $qIndex }}][sub_category]"
                                                            value="{{ $q['sub_category'] }}"
                                                            class="form-control form-control-sm">
                                                    </div>

                                                    <div class="col-md-3">
                                                        <label class="form-label fw-semibold">Question</label>
                                                        <textarea
                                                            name="sections[{{ $sIndex }}][questions][{{ $qIndex }}][question_text]"
                                                            rows="2"
                                                            class="form-control form-control-sm"
                                                            required>{{ $q['question_text'] }}</textarea>
                                                    </div>

                                                    <div class="col-md-5">
                                                        <div class="row g-2">

                                                            <div class="col-md-6">
                                                                <label class="form-label fw-semibold">Photo Required</label><br>
                                                                <div class="form-check form-check-inline">
                                                                    <input class="form-check-input"
                                                                        type="radio"
                                                                        name="sections[{{ $sIndex }}][questions][{{ $qIndex }}][define_photo]"
                                                                        value="Yes"
                                                                        @if($q['define_photo']==='Yes' ) checked @endif>
                                                                    <label class="form-check-label">Yes</label>
                                                                </div>
                                                                <div class="form-check form-check-inline">
                                                                    <input class="form-check-input"
                                                                        type="radio"
                                                                        name="sections[{{ $sIndex }}][questions][{{ $qIndex }}][define_photo]"
                                                                        value="No"
                                                                        @if($q['define_photo']==='No' ) checked @endif>
                                                                    <label class="form-check-label">No</label>
                                                                </div>
                                                            </div>

                                                            <div class="col-md-6">
                                                                <label class="form-label fw-semibold">Allow Notes</label>
                                                                <div class="form-check">
                                                                    <input class="form-check-input"
                                                                        type="checkbox"
                                                                        name="sections[{{ $sIndex }}][questions][{{ $qIndex }}][allow_notes]"
                                                                        value="1"
                                                                        @if($q['allow_notes']) checked @endif>
                                                                    <label class="form-check-label">Allow</label>
                                                                </div>
                                                            </div>

                                                        </div>
                                                    </div>

                                                    <div class="col-md-2 d-flex align-items-start mt-4">
                                                        <button type="button"
                                                            class="btn btn-sm btn-danger remove-question"
                                                            style="{{ $qIndex === 0 ? 'display:none;' : 'display:inline-block;' }}">
                                                            Delete
                                                        </button>
                                                    </div>

                                                </div>
                                                @endforeach
                                            </div>

                                            <button type="button"
                                                class="btn btn-sm btn-outline-primary add-question">
                                                + Add Question
                                            </button>

                                        </div>
                                        @endforeach
                                        @else
                                        <div class="section-block p-4 mb-4 rounded shadow-sm bg-white border-start border-4 border-dark" data-section="0">

                                            <div class="row mb-4">
                                                <div class="col-md-8">
                                                    <label class="form-label fw-semibold">Category</label>
                                                    <input type="text"
                                                        name="sections[0][category]"
                                                        class="form-control"
                                                        placeholder="Enter Category Name"
                                                        required>
                                                </div>
                                            </div>

                                            <div class="mb-3 remove-section-container">
                                                <button type="button"
                                                    class="btn btn-sm btn-danger remove-section"
                                                    style="display: none;">
                                                    Remove Section
                                                </button>
                                            </div>

                                            <div class="questions-container">

                                                <div class="row align-items-start mb-3 question-row" data-question="0">

                                                    <div class="col-md-2">
                                                        <label class="form-label fw-semibold">Sub-Category</label>
                                                        <input type="text"
                                                            name="sections[0][questions][0][sub_category]"
                                                            class="form-control form-control-sm">
                                                    </div>

                                                    <div class="col-md-3">
                                                        <label class="form-label fw-semibold">Question</label>
                                                        <textarea name="sections[0][questions][0][question_text]"
                                                            rows="2"
                                                            class="form-control form-control-sm"
                                                            required></textarea>
                                                    </div>

                                                    <div class="col-md-5">
                                                        <div class="row g-2">
                                                            <div class="col-md-6">
                                                                <label class="form-label fw-semibold">Photo Required</label><br>
                                                                <div class="form-check form-check-inline">
                                                                    <input class="form-check-input"
                                                                        type="radio"
                                                                        name="sections[0][questions][0][define_photo]"
                                                                        value="Yes"
                                                                        checked>
                                                                    <label class="form-check-label">Yes</label>
                                                                </div>
                                                                <div class="form-check form-check-inline">
                                                                    <input class="form-check-input"
                                                                        type="radio"
                                                                        name="sections[0][questions][0][define_photo]"
                                                                        value="No">
                                                                    <label class="form-check-label">No</label>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-6">
                                                                <label class="form-label fw-semibold">Allow Notes</label>
                                                                <div class="form-check">
                                                                    <input class="form-check-input"
                                                                        type="checkbox"
                                                                        name="sections[0][questions][0][allow_notes]"
                                                                        value="1">
                                                                    <label class="form-check-label">Disable</label>
                                                                </div>
                                                            </div>

                                                        </div>
                                                    </div>
                                                    <div class="col-md-2 d-flex align-items-start mt-4">
                                                        <button type="button"
                                                            class="btn btn-sm btn-danger remove-question"
                                                            style="display:none;">
                                                            Delete
                                                        </button>
                                                    </div>

                                                </div>

                                            </div>
                                            <button type="button"
                                                class="btn btn-sm btn-outline-primary add-question">
                                                + Add Question
                                            </button>

                                        </div>
                                        @endif

                                    </div>

                                    <div class="card-footer bg-white d-flex justify-content-between">
                                        <button type="button" id="addSectionButton" class="btn btn-primary">
                                            + Add Section
                                        </button>
                                        <button type="submit" class="btn btn-primary px-4">
                                            Submit Inspection
                                        </button>
                                    </div>

                            </form>
                        </div>

                    </div>
                </div>

            </div>
        </div>
    </div>
</div>


<script>
    document.addEventListener('DOMContentLoaded', function() {

        let sectionIndex = document.querySelectorAll('.section-block').length;

        const sectionsContainer = document.getElementById('sectionsContainer');
        const addSectionBtn = document.getElementById('addSectionButton');
        function updateIndexes() {

            document.querySelectorAll('.section-block').forEach((section, sIndex) => {

                section.setAttribute('data-section', sIndex);

                const categoryInput = section.querySelector('input[name*="[category]"]');
                if (categoryInput) {
                    categoryInput.name = `sections[${sIndex}][category]`;
                }

                const questionRows = section.querySelectorAll('.question-row');

                questionRows.forEach((row, qIndex) => {

                    row.setAttribute('data-question', qIndex);

                    const questionTextarea = row.querySelector('textarea');
                    if (questionTextarea) {
                        questionTextarea.name =
                            `sections[${sIndex}][questions][${qIndex}][question_text]`;
                    }

                    const subCategoryInput = row.querySelector('input[name*="[sub_category]"]');
                    if (subCategoryInput) {
                        subCategoryInput.name =
                            `sections[${sIndex}][questions][${qIndex}][sub_category]`;
                    }

                    const mandatoryInput = row.querySelector('input[name*="[mandatory]"]');
                    if (mandatoryInput) {
                        mandatoryInput.name =
                            `sections[${sIndex}][questions][${qIndex}][mandatory]`;
                    }

                    const radios = row.querySelectorAll('input[type="radio"]');
                    radios.forEach(radio => {
                        radio.name =
                            `sections[${sIndex}][questions][${qIndex}][define_photo]`;
                    });

                    const allowNotesInput = row.querySelector('input[name*="[allow_notes]"]');
                    if (allowNotesInput) {
                        allowNotesInput.name =
                            `sections[${sIndex}][questions][${qIndex}][allow_notes]`;
                    }

                });

            });

        }
        function attachAddQuestion(section) {

            const addBtn = section.querySelector('.add-question');

            addBtn.onclick = function() {

                const container = section.querySelector('.questions-container');
                const templateRow = container.querySelector('.question-row');
                const newRow = templateRow.cloneNode(true);

                // Clear inputs
                newRow.querySelectorAll('input, textarea').forEach(input => {
                    if (input.type === 'checkbox' || input.type === 'radio') {
                        input.checked = false;
                    } else {
                        input.value = '';
                    }
                });

                const deleteBtn = newRow.querySelector('.remove-question');
                deleteBtn.style.display = 'inline-block';

                container.appendChild(newRow);

                attachRemoveQuestion(newRow);
                updateIndexes();
            };
        }

        function attachRemoveQuestion(row) {
            const btn = row.querySelector('.remove-question');

            btn.onclick = function() {
                row.remove();
                updateIndexes();
            };
        }

        addSectionBtn.addEventListener('click', function() {

            const templateSection = document.querySelector('.section-block');
            const newSection = templateSection.cloneNode(true);

            newSection.querySelector('input[name*="[category]"]').value = '';

            const rows = newSection.querySelectorAll('.question-row');
            rows.forEach((row, index) => {
                if (index > 0) row.remove();
            });

            const firstRow = newSection.querySelector('.question-row');
            firstRow.querySelectorAll('input, textarea').forEach(input => {
                if (input.type === 'checkbox' || input.type === 'radio') {
                    input.checked = input.value === 'Yes';
                } else {
                    input.value = '';
                }
            });

            const removeSectionBtn = newSection.querySelector('.remove-section');
            removeSectionBtn.style.display = 'inline-block';

            removeSectionBtn.onclick = function() {
                newSection.remove();
                updateIndexes();
            };

            sectionsContainer.appendChild(newSection);

            attachAddQuestion(newSection);
            attachRemoveQuestion(firstRow);

            updateIndexes();
        });

        document.querySelectorAll('.section-block').forEach(section => {

            attachAddQuestion(section);

            section.querySelectorAll('.question-row').forEach((row, index) => {

                if (index === 0) {
                    row.querySelector('.remove-question').style.display = 'none';
                } else {
                    row.querySelector('.remove-question').style.display = 'inline-block';
                }

                attachRemoveQuestion(row);
            });

            const removeSectionBtn = section.querySelector('.remove-section');
            removeSectionBtn.onclick = function() {
                section.remove();
                updateIndexes();
            };

        });

        updateIndexes();

    });
</script>