@extends('includes/layout')
@section('main-page-content')
    @php
        $step = 'step' . request()->step;
    @endphp

    <div class="container-xxl flex-grow-1 container-p-y">
        <div class="card mb-4">
            <div class="card mb-4">
                <div class="p-3 px-5">
                    <div class="h4 pb-0 mb-0 m-header">Inspection Plan Report</div>
                </div>
            </div>
            <!-- Stepper -->
            <div class="root">
                <div class="container">

                    <div class="container-wrapper">
                        <div class="progressbar">
                            <div class="progress-step @if ($step == 'step1') progress-step-active @endif"
                                data-title="Step 1"></div>
                            <div class="progress-step @if ($step == 'step2') progress-step-active @endif"
                                data-title="Step 2"></div>
                            
                            @if ($inspection_plan_checklist)
                                @foreach ($inspection_plan_checklist as $inspection_plan_checklist)
                                    <div class="progress-step "
                                        data-title="{{ str_replace('_', ' ', $inspection_plan_checklist->name) }}"></div>
                                @endforeach
                            @endif
                           <div class="progress-step @if ($step == 'step4') progress-step-active @endif"
                            data-title="Description"></div>

                        </div>
                    </div>
                </div>
            </div>
            <!-- End Stepper -->
            @include('InspectionPlan/NewInspectionReport/' . $step)
            @if ($step == 'step1' || $step == 'step2')
                <div class="row px-5 py-2">
                    <div class="mt-4 w-100 d-flex justify-content-between">
                        <button type="button" class="report-btn btn  me-2 waves-effect waves-light"
                            onclick="_back();">Back</button>
                        <button type="button" class="btn btn-next btn-primary waves-effect waves-light"
                            onclick="_submit();">Save and Next</button>
                    </div>
                </div>
            @endif
        </div> <!-- this div is start inside of each file and end here --->
    </div>
    </div>
@endsection
@section('css-js')
    <style>
        .form-label-other {
            font-family: Poppins;
            font-size: 14px;
            font-weight: 600;
            line-height: 21px;
            text-align: left;
            color: #544f5a;
        }

        .h5 {
            font-family: Poppins;
            font-size: 14px;
            font-weight: 600;
            line-height: 21px;
            text-align: left;

        }

        .form-check-with-border {
            border-left: 2px solid #ccc;
        }

        .btn:not([class*=btn-]):active,
        .btn:not([class*=btn-]).active,
        .btn:not([class*=btn-]).show,
        .btn:not([class*=btn-]) {
            border: 1px solid #BCBCBC;
        }

        .paragraph {
            color: #019ff3;
            font-family: Poppins;
            font-size: 14px;
            font-weight: 600;
            line-height: 21px;
            text-align: left;

        }

        .report-btn {
            color: #BCBCBC;
            border: 1px solid #BCBCBC;
        }
        .report-btn:hover {
            color: #BCBCBC;
            border: 1px solid #BCBCBC;
        }

        .injury {
            background: #F4F5FA;
        }

        .h4 {
            text-transform: uppercase;
            font-family: Poppins;
            font-size: 16px;
            font-weight: 600;
            line-height: 24px;
            text-align: left;
        }

        .card {
            border-radius: 2px;
        }

        .detail-card {
            background: #019ff3;
        }

        .detail-card .h5 {
            font-family: Poppins;
            font-size: 16px;
            font-weight: 600;
            line-height: 24px;
            text-align: left;
            letter-spacing: 0.5px;
        }

        .detail-card .p {
            font-size: 14px;
            line-height: 18px;
        }

        /* Add custom styles here */
        .flex {
            display: flex;
            align-items: center;
        }

        .form-group.form-check {
            border-left: 3px solid #007bff;
            /* Adjust border properties as needed */
            padding-left: 10px;
            /* Adjust padding to separate border from content */
        }

        .form-label {
            margin-right: 10px;
            /* Adjust spacing between label and radio buttons */
        }

        .form-check {
            margin-left: 20px;
            /* Adjust spacing between radio buttons */
        }

        /* Styles for Progress Bar */
        .progressbar {
            position: relative;
            display: flex;
            justify-content: space-around;
            counter-reset: step;
            margin: 2rem 0 4rem;
        }

        .progressbar::before,
        .progress {
            content: "";
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            height: 4px;
            width: 100%;
            background-color: #dcdcdc;
        }

        .progress {
            background-color: var(--primary-color);
            width: 0%;
            transition: 0.3s;
            z-index: -1;
        }

        .progress-step {
            width: 2.1875rem;
            height: 2.1875rem;
            background-color: #dcdcdc;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1;
        }

        .progress-step::before {
            counter-increment: step;
            content: counter(step);
        }

        .container {
            width: 100%;
            z-index: 1;
            overflow-x: auto;
        }


        .progressbar {
            counter-reset: step;
            white-space: nowrap;
        }

        .progress-step::after {
            content: attr(data-title);
            position: absolute;
            top: calc(100% + 0.5rem);
            font-size: 0.85rem;
            color: #666;
        }

        .progress-step-active {
            background: #019FF3;
            color: #f3f3f3;
        }



        .input-group {
            margin: 2rem 0;
        }

        .form-step {
            display: none;
            transform-origin: top;
            animation: animate 0.5s;
        }


        .form-step-active {
            display: block;
        }

        .clickable-label {
            cursor: pointer;
        }

        @media only screen and (max-width: 768px) {
            .progressbar li {
                width: auto;
            }

            .progressbar {
                display: flex;
                gap: 20px;
            }

            .report-btn {
                white-space: nowrap;
            }

            .btn-primary {
                white-space: nowrap;
                padding: 0px 40px 0px 40px;
            }

            .container-wrapper {
                display: inline-block;
                /* Ensure container wraps its content */
            }
        }
    </style>


    <script>
      function generateForm(settings, checklistData = []) {
    var formHtml = '';

    settings.forEach(function(item, index) {
        // Get the checklist item for the current index
        var checklistItem = checklistData[index] || {}; // Default to empty object if no data

        // Get values or default to empty
        var itpcValue = checklistItem.itpc_number || '';
        var statusValue = checklistItem.status || '';
        item.title = item.title.replace(/_/g, ' ');     

        formHtml += `
        <div class="row px-5 py-2">
            <div class="col-md-6">
                <div class="form-group row">
                    <label class="col-sm-4 col-form-label">ITPC ${item.title} Number</label>
                    <div class="col-sm-8">
                        <div class="input-group my-0">
                            <span class="input-group-text" id="basic-addon3">ITPC-</span>
                            <input type="text" class="form-control itpc_${item.title}" name="itpc_${item.title}" value="${itpcValue.replace(/^ITPC-/, '')}">
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group row">
                    <label class="col-sm-4 col-form-label">${item.title}</label>
                    <div class="col-sm-8 d-flex align-items-center">
                        <div class="form-check me-3">
                            <input type="radio" id="${item.title}_yes" class="form-check-input ${item.title}_status" name="${item.title}_status" value="1" ${statusValue === '1' ? 'checked' : ''}>
                            <label for="${item.title}_yes" class="form-check-label clickable-label">Yes</label>
                        </div>
                        <div class="form-check">
                            <input type="radio" id="${item.title}_no" class="form-check-input ${item.title}_status" name="${item.title}_status" value="0" ${statusValue === '0' ? 'checked' : ''}>
                            <label for="${item.title}_no" class="form-check-label clickable-label">No</label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        `;
    });

    $('.form-section').html(formHtml);
}



        // JavaScript to handle clickable labels
        $(document).on('click', '.clickable-label', function() {
            var inputId = $(this).attr('for');
            $('#' + inputId).prop('checked', true);
        });
    @if ($step == 'step1')

            $(document).ready(function() {
                _get();
            });

            function _get() {
                $.ajax({
                    type: "POST",
                    url: "{{ url('/api/inspection-plan-edit-step1') }}",
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    data: {
                        'inspection_plan_id': '{{ request()->inspection_plan_id }}'
                    },
                    success: function(response) {
                        var inspection_plans = response.data.inspection_plans;
            
                        var authorised_by_list = response.data.authorised_by_list;
                        var _html = `<option value="" data-id="" data-title="">--Select Authorised By--</option>`;
                        for (var i = 0; i < authorised_by_list.length; i++) {
                            if (authorised_by_list[i].emp_personal_details) {
                                var {
                                    emp_id,
                                    first_name,
                                    last_name,
                                    middle_name
                                } = authorised_by_list[i].emp_personal_details;

                                var accessRole = authorised_by_list[i].access_role;
                                var accessRoleId = accessRole ? accessRole.id : '';
                                var accessRoleTitle = accessRole ? accessRole.title : '';

                                var empTierTitle = authorised_by_list[i].emp_tier ? authorised_by_list[i].emp_tier.title : '';

                                _html += `<option value="${emp_id}" data-id="${accessRoleId}" data-title="${accessRoleTitle}">
                                    ${first_name ?? ''} ${middle_name ?? ''} ${last_name ?? ''} - ${empTierTitle}
                                </option>`;
                            }
                        }
                        $('.step1 .authorised_by').html(_html);
            
                        if (inspection_plans) {
                            $('.step1 .title').val(inspection_plans.title);
                            var documentNumber = inspection_plans.document_number.replace(/^ITP-/, '');
                            $('.step1 .document_number').val(documentNumber);  
                             $('.step1 .authorised_by').val(inspection_plans.authorised_by);
                            $('.step1 .revision_number').val(inspection_plans.revision_number);
                            $('.step1 .issue_date').val(inspection_plans.issue_date);
                            $('.step1 .revision_date').val(inspection_plans.revision_date);
                        }
                    },
                    error: function(response) {
                        if (response.status == 500) {
                            toastr.error(response.message);
                        } else {
                            toastr.error(response.responseJSON.message);
                        }
                    }
                });
            }

            function _submit() {
                loader(true);

                var _FormData = new FormData();

                _FormData.append("inspection_plan_id", '{{ request()->inspection_plan_id }}');
                _FormData.append("title", $('.step1 .title').val())
                _FormData.append("document_number", $('.step1 .document_number').val())
                _FormData.append("authorised_by", $('.step1 .authorised_by').val())
                _FormData.append("revision_number", $('.step1 .revision_number').val())
                _FormData.append("issue_date", $('.step1 .issue_date').val())
                _FormData.append("revision_date", $('.step1 .revision_date').val())
                $.ajax({
                    type: "POST",
                    url: "{{ url('/api/inspection-plan-store-step1') }}",
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    data: _FormData,
                    processData: false,
                    contentType: false,
                    success: function(response) {
                        loader(false);
                        toastr.success(response.message);
                        setTimeout(
                            function() {
                                window.location.href =
                                    "{{ url('/inspection-plan/create/2') }}/" + response.data
                                    .inspection_plan_id;
                            },
                            1000);
                    },
                    error: function(response) {
                        loader(false);
                        if (response.status == 500) {
                            toastr.error("Something went wrong")
                        } else {
                            toastr.error(response.responseJSON.message);
                        }
                    }
                });

            }

            function _back() {
                window.location.href = "{{ url('/') }}/inspection-plan";
            }
        @endif

        @if ($step == 'step2')

            $(document).ready(function() {
                _get();
            });

            function _get() {
                // loader(true);

                $.ajax({
                    type: "POST",
                    url: "{{ url('/api/inspection-plan-edit-step2') }}",
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    data: {
                        'inspection_plan_id': '{{ request()->inspection_plan_id }}'
                    },
                    success: function(response) {
                        if (response.message != '') {
                            toastr.info(response.message);
                        }

                        var inspection_plans = response.data.inspection_plan;
                        var checklistdata = response.data.inspection_plan_checklist;
                        var settings = response.data.inspection_plan_settings;
                        var inspection_plan_project = response.data.inspection_plan_project;

                        // Set form fields with data or empty strings if the data is null
                        if (inspection_plans) {
                            $('.step2 .principal_contractor').val(inspection_plans.principal_contractor || '');
                            $('.step2 .job_number').val(inspection_plans.job_number || '');
                            $('.step2 .building').val(inspection_plans.building || '');
                            $('.step2 .level').val(inspection_plans.level || '');
                            $('.step2 .to_level').val(inspection_plans.to_level || '');
                            $('.step2 .pour').val(inspection_plans.pour || '');
                            $('.step2 .zone').val(inspection_plans.zone || '');

                            $('.step2 .activity').val(inspection_plans.activity || '');
                            $('.step2 .open_date').val(inspection_plans.open_date ? inspection_plans.open_date.substring(0, 10) : '');
                            $('.step2 .close_date').val(inspection_plans.close_date ? inspection_plans.close_date.substring(0, 10) : '');

                            if (inspection_plans.itp_reference_number) {
                                var itp_reference_number = inspection_plans.itp_reference_number.replace(/^ITP-/, '');
                                $('.step2 .itp').val(itp_reference_number);  
                            } else {
                                var document_number = inspection_plans.document_number.replace(/^ITP-/, '');
                                $('.step2 .itp').val(document_number);  
                            }

                            // Set up the project dropdown
                            var projectDropdown = $('.step2 .project_name');
                            projectDropdown.empty(); // Clear existing options
                              
                            // Add default option
                            projectDropdown.append('<option value="" disabled>Please select a project</option>');

                            if (inspection_plan_project && Array.isArray(inspection_plan_project) && inspection_plan_project.length > 0) {
                                $.each(inspection_plan_project, function(index, project) {
                                    projectDropdown.append(
                                        `<option value="${project.title}">${project.title}</option>`
                                    );
                            });
                                var projectName = inspection_plans.project_name;
                                if (projectName) {
                                 projectDropdown.val(inspection_plan_project.find(project => project.title === projectName)?.title || '');
                                }
                            } else {
                                projectDropdown.append('<option value="" disabled>No projects found</option>');
                            }
                            generateForm(settings, checklistdata);
                        }
                    },

                    error: function(response) {
                        if (response.status == 500) {
                            toastr.error("Something went wrong");
                        } else {
                            toastr.error(response.responseJSON.message);
                        }
                    }
                });
            }


            function _submit() {
                loader(true);
                var _FormData = new FormData();
                _FormData.append("inspection_plan_id", '{{ request()->inspection_plan_id }}');
                _FormData.append("principal_contractor", $('.step2 .principal_contractor').val())
                _FormData.append("project_name", $('.step2 .project_name').val())
                _FormData.append("job_number", $('.step2 .job_number').val())
                _FormData.append("building", $('.step2 .building').val())
                _FormData.append("level", $('.step2 .level').val())
                _FormData.append("to_level", $('.step2 .to_level').val())
                _FormData.append("pour", $('.step2 .pour').val())
                _FormData.append("zone", $('.step2 .zone').val())

                _FormData.append("activity", $('.step2 .activity').val())
                _FormData.append("open_date", $('.step2 .open_date').val())
                _FormData.append("close_date", $('.step2 .close_date').val())
                _FormData.append("itp", $('.step2 .itp').val())
                $('.form-section input[type="text"]').each(function() {
                    var name = $(this).attr('name');
                    _FormData.append(name, $(this).val());
                });
                $('.form-section input[type="radio"]:checked').each(function() {
                    var name = $(this).attr('name');
                    _FormData.append(name, $(this).val());
                });
                $.ajax({
                    type: "POST",
                    url: "{{ url('/api/inspection-plan-store-step2') }}",
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    data: _FormData,
                    processData: false,
                    contentType: false,
                    success: function(response) {
                        loader(false);              
                        var inspection_plan_id = response.data.inspection_plan_id
                        if (response.status === 422) {
                            toastr.info(response.message);
                            return;
                        }
                        loader(true);
                        setTimeout(function() {
                            window.location.href =
                                `/inspection-plan/create/3/${inspection_plan_id}`;
                        }, 1000);
                    },
                    error: function(response) {
                        loader(false);
                        if (response.status == 500) {
                            toastr.error("Something went wrong")
                        } else {
                            toastr.error(response.responseJSON.message)
                        }
                    }
                });
            }
            function _back() {
                window.location.href =
                    "{{ url('/') }}/inspection-plan/create/1/{{ request()->inspection_plan_id }}";
            }
        @endif
    </script>
@endsection