@extends('layouts.app_layout')

@section('content')
<x-page-header title="{{ $pageTitle ?? 'Training Center Inspection Form' }}" :backButton="true" />

<div class="row">
    <div class="col-12">
        <div class="card">

            <div class="card-header py-3 d-flex justify-content-between align-items-center">
                <h5 class="mb-0">Inspection Checklist</h5>
        
                <div class="text-muted">
                    <strong>Center:</strong> {{ $centreBasicDetails->centre_name ?? 'Excellence Training Institute' }} |
                    <strong>Date:</strong> {{ date('d M Y') }}
                </div>
                
            </div>

            <div class="card-body">
                <form id="inspectionForm">
                    @csrf
                    <input type="hidden" name="center_id" value="{{ $centreId ?? 1 }}">

                    <div class="inspection-checklist">
                        @foreach($inspectionItems as $index => $item)
                            {{-- Use $loop->iteration to guarantee a unique ID for the radio button group name --}}
                            @php
                                $uniqueId = $loop->iteration;
                            @endphp
                            <div class="inspection-item mb-4" data-key="{{ $uniqueId }}">
                                <div class="d-flex align-items-start gap-3">
                                    <div class="flex-grow-1">
                                        <label class="form-label"><strong>{{ $loop->iteration }}. {{ $item->title }}</strong></label>
                                        <div class="inspection-description mb-2">{!! $item->description !!}</div>

                                        <div class="d-flex gap-3" role="group">
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input inspection-radio" type="radio" 
                                                       name="checklist[{{ $uniqueId }}]" 
                                                       value="1" id="item_{{ $uniqueId }}_yes">
                                                <label class="form-check-label" for="item_{{ $uniqueId }}_yes">Yes</label>
                                            </div>
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input inspection-radio" type="radio" 
                                                       name="checklist[{{ $uniqueId }}]" 
                                                       value="0" id="item_{{ $uniqueId }}_no">
                                                <label class="form-check-label" for="item_{{ $uniqueId }}_no">No</label>
                                            </div>
                                        </div>

                                        <textarea name="remarks[{{ $uniqueId }}]" 
                                                  class="form-control remark-field mt-2" 
                                                  rows="2" 
                                                  placeholder="Remarks (optional)"></textarea>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>

                    <div class="card bg-light mt-4">
                        <div class="card-header py-3">
                            <h6 class="mb-0">Inspection Summary</h6>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="inspector_name" class="form-label">Inspector Name <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="inspector_name" name="inspector_name" required>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="inspection_date" class="form-label">Inspection Date <span class="text-danger">*</span></label>
                                    <input type="date" class="form-control" id="inspection_date" name="inspection_date" value="{{ date('Y-m-d') }}" required>
                                </div>
                            </div>

                            <div class="mb-3">
                                <label for="overall_status" class="form-label">Overall Status <span class="text-danger">*</span></label>
                                <select class="form-select" id="overall_status" name="overall_status" required>
                                    <option value="">Select Overall Status</option>
                                    <option value="approved">Approved</option>
                                    <option value="approved_with_conditions">Approved with Conditions</option>
                                    <option value="rejected">Rejected</option>
                                    <option value="requires_re_inspection">Requires Re-inspection</option>
                                </select>
                            </div>

                            <div class="mb-3">
                                <label for="final_remarks" class="form-label">Final Remarks <span class="text-danger">*</span></label>
                                <textarea class="form-control" id="final_remarks" name="final_remarks" rows="4" placeholder="Enter your final inspection remarks..." required></textarea>
                            </div>

                            <div class="mb-3">
                                <label for="recommendations" class="form-label">Recommendations (if any)</label>
                                <textarea class="form-control" id="recommendations" name="recommendations" rows="3" placeholder="Enter recommendations for improvement..."></textarea>
                            </div>

                            <div class="d-flex justify-content-end">
                                <button type="submit" class="btn btn-primary"><i class="fas fa-check"></i> Submit Inspection Report</button>
                            </div>
                        </div>
                    </div>

                </form>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="inspectionSummaryModal" tabindex="-1" aria-labelledby="inspectionSummaryModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-scrollable">
        <div class="modal-content shadow-lg border-0">
            <div class="modal-header bg-primary text-white p-3">
                <h5 class="modal-title" id="inspectionSummaryModalLabel">
                    <i class="fas fa-file-alt me-2"></i> **Inspection Summary Preview**
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-4">

                <div class="card border-0 shadow-sm mb-4">
                    <div class="card-header bg-light fw-bold py-2">
                        <i class="fas fa-user-shield me-2 text-primary"></i> Inspector & Overview
                    </div>
                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <p class="mb-1 text-muted small">Inspector Name:</p>
                                <h5 class="fw-bold mb-0" id="summaryInspector">N/A</h5>
                            </div>
                            <div class="col-md-6">
                                <p class="mb-1 text-muted small">Inspection Date:</p>
                                <h5 class="fw-bold mb-0" id="summaryDate">N/A</h5>
                            </div>
                        </div>
                        <hr class="my-3">
                        <div>
                            <p class="mb-1 text-muted small">Overall Verdict:</p>
                            <div class="p-2 rounded text-white fw-bold d-inline-block" id="summaryStatus">N/A</div>
                        </div>
                    </div>
                </div>

                <div class="card border-0 shadow-sm mb-4">
                    <div class="card-header bg-light fw-bold py-2">
                        <i class="fas fa-list-check me-2 text-primary"></i> Checklist Items
                    </div>
                    <div class="list-group list-group-flush" id="summaryChecklist">
                        <div class="p-3 text-center text-muted">No checklist items to display.</div>
                    </div>
                </div>

                <div class="card border-0 shadow-sm mb-4">
                    <div class="card-header bg-light fw-bold py-2">
                        <i class="fas fa-comment-dots me-2 text-primary"></i> Final Remarks
                    </div>
                    <div class="card-body">
                        <p class="border p-3 rounded bg-white fst-italic text-secondary mb-0" id="summaryRemarks">No final remarks provided.</p>
                    </div>
                </div>

                <div class="card border-0 shadow-sm">
                    <div class="card-header bg-light fw-bold py-2">
                        <i class="fas fa-lightbulb me-2 text-primary"></i> Recommendations
                    </div>
                    <div class="card-body">
                        <p class="border p-3 rounded bg-white fst-italic text-secondary mb-0" id="summaryRecommendations">No recommendations provided.</p>
                    </div>
                </div>

            </div>
            <div class="modal-footer d-flex justify-content-between">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary"><i class="fas fa-print me-1"></i> Print Report</button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('pages-scripts')
<script>
$(document).ready(function() {


    const form = $('#inspectionForm');

    // Function to dynamically manage the 'required' state of the remarks field
    function handleRemarksRequirement() {
        $('.inspection-item').each(function() {
            const selected = $(this).find('.inspection-radio:checked').val();
            const remarkField = $(this).find('.remark-field');

            // If "No" (value="0") is selected, require remarks.
            if (selected === '0') {
                remarkField.attr('required', true).attr('placeholder', 'Remarks required for "No"');
            } else {
                remarkField.removeAttr('required').attr('placeholder', 'Remarks (optional)');
            }
        });
    }

    // Initial call to set required state on load (important!)
    handleRemarksRequirement();

    // Trigger on radio button change for each item
    $('.inspection-radio').on('change', handleRemarksRequirement);

    // Form submission validation logic
    form.on('submit', function(e) {
        e.preventDefault();

        let allSelected = true;
        let invalidRemarks = false;

        // 1. Validate all radios and remarks
        $('.inspection-item').each(function() {
            const radios = $(this).find('.inspection-radio');
            const checkedRadio = radios.filter(':checked');
            const remarkField = $(this).find('.remark-field');

            // Check if any radio is selected
            if (checkedRadio.length === 0) {
                allSelected = false;
                $(this).addClass('border border-danger p-2 rounded'); 
                return false; // Break loop
            } else {
                $(this).removeClass('border border-danger p-2 rounded');
            }

            // Check if "No" is selected but remarks are empty
            if (checkedRadio.val() === '0' && remarkField.val().trim() === '') {
                remarkField.addClass('is-invalid');
                invalidRemarks = true;
                return false; // Break loop
            } else {
                 remarkField.removeClass('is-invalid');
            }
        });

        if (!allSelected) {
            Swal.fire({
                icon: 'error',
                title: 'Validation Error',
                text: 'Please select **Yes** or **No** for every checklist item.'
            });
            return;
        }

        if (invalidRemarks) {
            Swal.fire({
                icon: 'error',
                title: 'Validation Error',
                text: 'Remarks are **required** for all items where "No" is selected.'
            });
            return;
        }
        
        // 2. Validate required summary fields
        if (!form[0].checkValidity()) {
            form[0].reportValidity();
            Swal.fire({
                icon: 'error',
                title: 'Validation Error',
                text: 'Please fill in all required fields in the Inspection Summary.'
            });
            return;
        }


        // SweetAlert confirmation
        Swal.fire({
            title: 'Confirm Submission',
            text: "Are you sure you want to submit this inspection report? Once submitted, it cannot be modified.",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Yes, Submit Report',
            cancelButtonText: 'Cancel'
        }).then((result) => {
            if (result.isConfirmed) {
                submitInspectionForm();
            }
        });
    });

   // AJAX submission function
function submitInspectionForm() {
    const formData = form.serialize();

    Swal.fire({
        title: 'Submitting...',
        text: 'Please wait while we save your inspection report.',
        allowOutsideClick: false,
        didOpen: () => Swal.showLoading()
    });

    $.ajax({
        url: "{{ route('inspection.submit') }}",
        method: "POST",
        data: formData,
        success: function(response) {
            Swal.fire({
                icon: 'success',
                title: 'Submitted!',
                text: response.message || 'Inspection report submitted successfully.',
                confirmButtonText: 'OK'
            }).then(() => {
                // Redirect after successful submission
               window.location.href = "{{ route('centre.index') }}";

            });
        },
        error: function(xhr) {
            let errors = xhr.responseJSON?.errors || {};
            let errorMessages = Object.values(errors).flat().join("\n") ||
                                 xhr.responseJSON?.error ||
                                 'Something went wrong. Please try again.';

            Swal.fire({
                icon: 'error',
                title: 'Submission Failed',
                text: errorMessages
            });
        }
    });
}

});
</script>
@endsection