@extends('lfc_views.layouts.app')
@section('main-content')
    <div class="main-content-body pb-40 md:pb-1">
        <div class="mt-4 max-w-screen-lg">
            @foreach ($tempRows as $tempRow)
                <div class=" row_record block sm:flex sm:flex-wrap gap-x-1 xl:gap-20 mt-10 md:mt-0">
                    {{-- {{ dd($tempRow->getAssocSittingRow()) }} --}}
                    <x-modal-form-to-add-rows-to-record :key="$tempRow->id" :rowID="$tempRow->id" :getAssocSittingRowInSession="$tempRow->getAssocSittingRowInSession()"
                        :selectedEntrance="$selectedEntrance" />

                    <div
                        class=" mr-0 xl:mr-20 item bg-transparent border border-gray-200 text-sm  rounded m-2 py-0.5 px-3 row_number_group row flex gap-3">
                        <div class="checkbox-container">
                            <input class="rounded-full text-green-900 border-0 bg-red-50 " type="checkbox"
                                {{ $tempRow->getAssocSittingRowInSession() ? 'checked disabled' : '' }}
                                name="row_num_checkbox_{{ $tempRow->id }}" id="row_num_checkbox_{{ $tempRow->id }}">
                        </div>
                        <div class="row_num_container" slug="{{ $tempRow->slug }}" id="{{ $tempRow->id }}">
                            <label for="row_num_checkbox_{{ $tempRow->id }}" class="text-xs ">
                                <span class="row_num capitalize font-normal">
                                    <span>Row</span>
                                    <span name="row_num_value" id="row_num_value">
                                        {{-- applies padding to the items --}}
                                        {!! $tempRow->id >= 10 ? $tempRow->id : " $tempRow->id &nbsp;" !!}
                                    </span>
                                </span>
                            </label>
                        </div>

                    </div>


                    {{-- Male container --}}
                    {{-- {{ $tempRow->getAssocSittingRow() ?: 'data-modal-target='."crud-modal_{$tempRow->id}" .'data-modal-toggle='."crud-modal_{$tempRow->id}" }}  --}}
                    <div data-modal-target="crud-modal_{{ $tempRow->id }}"
                        data-modal-toggle="crud-modal_{{ $tempRow->id }}"
                        class="text-xs  mt-4 sm:mt-2 item counting_metric male_count bg-red-100 border border-red-300 rounded m-2 py-1 ps-2 pe-6 row_number_group row flex gap-3 sm:gap-10">
                        <div class="metric_name capitalize font-normal"><span>male</span></div>
                        <div class="male_metric_value" id="male_metric_value">
                            <span>{{ $tempRow->presentAssocSittingRowDataInSession('male_count') }}</span>
                        </div>
                    </div>

                    {{-- female container --}}
                    <div data-modal-target="crud-modal_{{ $tempRow->id }}"
                        data-modal-toggle="crud-modal_{{ $tempRow->id }}"
                        class="text-xs  item counting_metric female_count bg-red-100 border border-red-300 rounded 
                        m-2 py-1 ps-2 pe-6 row_number_group row flex gap-3 sm:gap-10">
                        <div class="metric_name capitalize font-normal"><span>female</span></div>
                        <div class="female_metric_value" id="female_metric_value">
                            <span>{{ $tempRow->presentAssocSittingRowDataInSession('female_count') }}</span>
                        </div>
                    </div>

                    {{-- children container --}}
                    <div data-modal-target="crud-modal_{{ $tempRow->id }}"
                        data-modal-toggle="crud-modal_{{ $tempRow->id }}"
                        class="text-xs  item counting_metric children_count
                        bg-red-100 border border-red-300 rounded m-2 py-1 ps-2 pe-6 row_number_group row flex gap-3 sm:gap-10">
                        <div class="metric_name capitalize font-normal"><span class="">children</span></div>
                        <div class="children_metric_value" id="children_metric_value">
                            <span>{{ $tempRow->presentAssocSittingRowDataInSession('kids_count') }}</span>
                        </div>
                    </div>


                    {{-- <div class="item cursor-pointer bg-red-200 border border-red-300 rounded-full m-1 px-1.5 gap-3"
                        title="Edit Row {{ $tempRow->id }}">
                        <span class="text-lg locked" id="padlock_switch">
                            {{ $tempRow->getAssocSittingRow() ? "🔏" : "🔓"}}
                        </span>

                    </div> --}}
                </div>
            @endforeach
            <div class=" row_record block sm:flex sm:flex-wrap gap-x-1 xl:gap-20 mt-10">

                <div class="w-5/6 md:flex  md:justify-between  mr-0 item py-1 px-1">
                    <div class="links">
                        <span>{{ $tempRows->withQueryString()->links() }}</span>
                    </div>

                    <div class="mt-10 text-center sm:mt-0 finish-btn-container mr-0 ">
                        @if (authy()->hasOpenSittingRows())
                            <x-danger-button type="button" data-modal-target="form-modal-to-create-service-record"
                                data-modal-toggle="form-modal-to-create-service-record">
                                Finish
                            </x-danger-button>
                        @else
                            <button type="button" disabled aria-readonly="true"
                                class="transition ease-out duration-500 px-5 py-1 bg-gray-500 text-gray-50 rounded-md hover:bg-gray-800">
                                Finish
                            </button>
                        @endif

                        <form action="">
                            <input type="hidden" name="entrance">
                            <input type="hidden" name="service_type">

                            {{-- modal form --}}

                        </form>
                    </div>
                </div>
                <x-modal-form-to-create-service-record />

            </div>


        </div>
    </div>
@endsection


@push('child-scripts')
    <script>
        // ======================SERVICES SELECT TAG <x -service-selection /> ==================================

        const selectTag = document.querySelector('#church_services_select_tag');

        // Areas to update in the UI

        //top header section : a blank space in the UI 
        const $areaToPopulate = document.querySelector('#selected_service');

        // <x -modal-form-to-add-rows-to-record> represents multiple rows for sittingRows,
        // hence we use an array to target them all
        let $modalServiceTypes = Array.from(document.querySelectorAll('.modal_service_type'));

        // this is the actual modal form for creating the new record (from a compilation of all sittingRows), 
        // it must show here for good UX. However, the actual data which is sent to the server is gotten from the url
        const $modalServiceTypes2 = document.querySelector('#service_type_in_modal_form_to_create_service');

        selectTag.addEventListener('change', function(e) {

            let valueSent = e.target.value;

            updateUrl(valueSent);

            $modalServiceTypes.forEach(inputElem => inputElem.value = valueSent);

            $modalServiceTypes2.textContent = valueSent;

        });

        // helpers

        function updateUrl(valueSent) {

            let valueSent_sm = valueSent.toLowerCase();

            $areaToPopulate.textContent = (valueSent == '') ? '[No Service Selected]' : `[${valueSent}]`;

            // Construct URLSearchParams object instance from current URL querystring.
            var queryParams = new URLSearchParams(window.location.search);

            // Set new or modify existing parameter value. 
            queryParams.set("service_type", valueSent_sm);

            // Replace current querystring with the new one.
            history.replaceState(null, null, "?" + queryParams.toString());
        }


        document.onreadystatechange = () => {
            // on page reload, we want to update the blank space in the top_header in the UI. the modals, 
            // add-rows-to-records, and create-records-are automatically getting the selected service 4rm the url 
            if (document.readyState == 'complete')
                $areaToPopulate.textContent = selectTag.value.toString().toUpperCase();
        }

        // // ======================./ SERVICES SELECT TAG <x -service-selection /> ==================================
    </script>
@endpush




{{-- 
    
    
    
    --}}