@extends('backend.layouts.app')

@section('content')
    <div class="row page-titles">
        <div class="col-md-5 align-self-center">
            <h4 class="text-themecolor">Checklist Manager</h4>
        </div>
        <div class="col-md-7 align-self-center text-right">
            <div class="d-flex justify-content-end align-items-center">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
                    <li class="breadcrumb-item active">Checklist Manager</li>
                </ol>

            </div>
        </div>
    </div>
    <div class="container-fluid">

        <div class="content-wrapper">
            <section class="content">
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-body">
                                <br>
                                <div class="table-responsive">
                                    @php
                                        // Simulated database data (Replace this with actual DB query)

                                        // Mapping PHP variable names to match HTML input names
                                        $inputNames = [
                                            'VEHICLE_DATA' => 'vehicle_data',
                                            'VALUATION_DATA' => 'valuation_data',
                                            'ROAD_TAX_MOT_DATA' => 'road_tax_mot_data',
                                            'MOT_DATA' => 'mot_data',
                                            'TWILIO' => 'twilio',
                                            'OTP' => 'otp',
                                            'IP' => 'ip',
                                            'VIEW_MORE' => 'view_more',
                                            'VIEW_MORE_WITH_COMPULSORY_CAPTCHA' => 'view_more_with_compulsory_captcha',
                                            'SHOW_DATA' => 'show_data',
                                            'WITHOUT_VIEW_MORE' => 'without_view_more',
                                            'EMAIL_WITH_DATA' => 'email_with_data',
                                            'EMAIL_WITH_PDF' => 'email_with_pdf',
                                        ];

                                        $previousIndex = null;

                                    @endphp
                                    <form action="{{ route('checklistManagerPostMethod') }}" method="post"
                                        onsubmit="return validateForm()">
                                        @csrf
                                        <table id="user" class="table table-bordered table-hover">
                                            <tbody id="areaTable">

                                                @foreach ($data as $index => $items)
                                                    @if ($previousIndex == null || $previousIndex != $index)
                                                        <tr>
                                                            <td colspan="2">
                                                                @php
                                                                    if ($index == 'dataApi') {
                                                                        $label = 'Data Api';
                                                                    } elseif ($index == 'generalApi') {
                                                                        $label = 'General Api';
                                                                    } elseif ($index == 'showDataApi') {
                                                                        // $label =
                                                                        //     '<input id="showData" onchange="showData(this)" type="checkbox" ' .
                                                                        //     ($data['showCheck'][0]['status'] == 1
                                                                        //         ? 'checked'
                                                                        //         : '') .
                                                                        //     ' name="show_data">
    $label = 'Show Data Api';
} elseif ($index == 'emailApi') {
    echo '<tr class="validation-tr" style="display:none"><td colspan="2"><span style="color:red">Please select one of the view more options.</span></td></tr>';
    $label = 'Email Api';
} else {
    $label = '-';
                                                                    }
                                                                @endphp

                                                                <strong>{!! $label !!}</strong>
                                                            </td>
                                                        </tr>
                                                    @endif
                                                    @php
                                                        $radioOptions = [
                                                            'VIEW_MORE',
                                                            'VIEW_MORE_WITH_COMPULSORY_CAPTCHA',
                                                            'WITHOUT_VIEW_MORE',
                                                        ];
                                                    @endphp

                                                    @foreach ($items as $item)
                                                        <tr>
                                                            <td>
                                                                @php
                                                                    $inputName =
                                                                        $inputNames[$item['title']] ?? $item['title']; // fallback if missing
                                                                    // if($item['title']=="SHOW_DATA"){
                                                                    //     dd($item['title']);
                                                                    // }
                                                                    $isShow =
                                                                        $item['title'] == 'SHOW_DATA' ?? $item['title'];

                                                                    // if($isShow){
                                                                    //     dd('mahesh',$inputNames["SHOW_DATA"]);
                                                                    // }
                                                                    $isRadio = in_array($item['title'], $radioOptions);
                                                                @endphp
                                                                @if ($isRadio)
                                                                    {{-- Radio buttons share the same name --}}
                                                                    <input type="radio" name="view_more_option"
                                                                        value="{{ $inputName }}"
                                                                        {{ $item['status'] == 1 ? 'checked' : '' }}>
                                                                @else
                                                                    @if ($inputName == 'show_data')
                                                                        <input id="showData" type="checkbox"
                                                                            name="{{ $inputName }}"
                                                                            {{ $item['status'] == 1 ? 'checked' : '' }}>
                                                                    @else
                                                                        {{-- Normal checkbox --}}
                                                                        <input type="checkbox" name="{{ $inputName }}"
                                                                            {{ $item['status'] == 1 ? 'checked' : '' }}>
                                                                    @endif
                                                                @endif
                                                            </td>
                                                            <td>
                                                                {{ ucwords(str_replace('_', ' ', strtolower($item['title']))) }}
                                                            </td>
                                                        </tr>
                                                    @endforeach



                                                    @php
                                                        $previousIndex = $index;
                                                    @endphp
                                                @endforeach

                                                <!-- <tr>
                                                                                                        <td><input name="vehicle_data" type="checkbox">
                                                                                                        <th>Vehicle Data</th></td>
                                                                                                    </tr>
                                                                                                    <tr>
                                                                                                        <td><input name="valuation_data" type="checkbox">
                                                                                                        <th>Valuation Data</th></td>
                                                                                                    </tr>
                                                                                                    <tr>
                                                                                                        <td><input name="road_tax_mot_data" type="checkbox">
                                                                                                        <th>Road Tax Mot Data</th></td>
                                                                                                    </tr>
                                                                                                    <tr>
                                                                                                        <td><input name="mot_data" type="checkbox">
                                                                                                        <th>Mot Data</th></td>
                                                                                                    </tr>
                                                                                                    <tr>
                                                                                                        <td><input name="twilio" type="checkbox">
                                                                                                        <th>Twilio</th></td>
                                                                                                    </tr> -->
                                                <tr>
                                                    <td colspan="2"><button class="btn btn-default"
                                                            style="background-color: #757575; color: white;">Submit</button>
                                                    </td>
                                                </tr>

                                            </tbody>
                                        </table>
                                    </form>
                                </div>



                            </div>

                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>
    <!-- Load jQuery before your custom script -->

    @push('custom-script')
        <script>
            // Define showData function first (outside or above document.ready)
            function showData(element) {
                const valuesToDisable = [
                    'view_more',
                    'view_more_with_compulsory_captcha',
                    'without_view_more'
                ];

                if (element.checked) {
                    // Re-enable radio buttons if checkbox is unchecked
                    valuesToDisable.forEach(function(value) {
                        $('input[type="radio"][value="' + value + '"]').prop('disabled', false);
                    });
                } else {

                    // Disable specific radio buttons
                    valuesToDisable.forEach(function(value) {
                        $('input[type="radio"][value="' + value + '"]').prop('disabled', true);
                    });
                }
            }

            $(document).ready(function() {
                var data = $('#showData');
                // Call showData on page load with the checkbox DOM element
                showData(data[0]);
                data.change(function() {
                    showData(this);
                });
                // Also call showData on change event of the checkbox

            });


            function validateForm() {
                const showDataChecked = document.getElementById('showData').checked;

                const radios = document.getElementsByName('view_more_option');
                let radioChecked = false;

                for (const radio of radios) {
                    if (radio.checked) {
                        radioChecked = true;
                        break;
                    }
                }

                if (showDataChecked && !radioChecked) {
                    $(".validation-tr").show();

                    return false; // prevent form submission
                }

                $(".validation-tr").hide();

                return true; // allow form submission
            }
        </script>
    @endpush


@stop
