@foreach($data_v1 as $key => $list)


    <div id='{{ $list_counter === 1  ? "issues_area" : ""  }}' class="container"  {!!   count($list) > 3   ? "display: inline-block;" : "" !!} >

        {{--                16 limit--}}
        <div class="cs-table cs-style2" style="  ">

            <b class="cs-primary_color" >{{ucwords(str_replace("_", " ", $key))}}</b>

            <ul id="ol_data_v1">


                @foreach($list as  $item)



                    <li id="li_data_{{$list_counter}}" class="col mak-issues" >

                        <div class="check-values">
                            <b></b>  <span>{{$item}}</span>
                        </div>

                    </li>
                    

                @endforeach




            </ul>

        </div>

    </div>

@endforeach



@php
    $data = json_decode($report['inspection_data']??[]);
    $size_of_data = 1;
    foreach($data as $key => $list)
    {
          if($key === 'car' || $key === "customer" || $list === null)
          {
              continue;
          }
        $size_of_data++;
    }
@endphp



@foreach($data as $key => $list)

    @if($key === 'car' || $key === "customer" || $list === null)
        @continue
    @endif

    
@endforeach

@if(empty($data_length) )
    @php($data_length =  0)
@endif

<div   class="container" style=" width: 100%; {!!   $data_length > 3   ? "display: inline-block;" : "display: flow-root;" !!} {!! $size_of_data > 16 ? "" : "" !!} ">

    {{--                16 limit--}}
    <div class="cs-table cs-style2" >

        <b class="cs-primary_color" >Issues Found</b>

        <ul id="ol_data">


            @php($under_counter = 1)
            @php($page = 1)
            @foreach($data as $key => $list)

                @if($key === 'car' || $key === "customer" || $list === null)
                    @continue
                @endif

                

                <li id="li_data_{{$list_counter}}" class="col mak-issues" >
                    <div class="check-values">
                        <b>{!!   $key_name[1]??"N/A" !!}:</b>  <span>{{$list}}</span>
                    </div>

                </li>


                @php($list_counter++)


            @endforeach



        </ul>

    </div>



</div>


<ul class="cs-grid_row cs-col_3 cs-mb10" style="display: flex;
    justify-content: space-between; border-bottom: 3px solid #0b36e0">



    <li class="cs-mb20 first-v-line">
        <b class="cs-primary_color">Customer Information:</b>
        <ul style=" list-style-type: circle;">
            <li>Package: {{$report['Package']['package_name'] ?? "N/A"}}</li>
            <li>Name: {{$report['Customer']['customer_name'] ?? "N/A" }}</li>
            <li>Contact: +{{ (int)$report['Customer']['customer_country_code']??"0" }}-{{ (int)$report['Customer']['customer_contact']??"0" }}</li>

            {{--                        <li>Start: {{  date('d-M-Y h:i:s A',strtotime($report['start_at']  ?? "N/A" ))  }}</li>--}}
            {{--                        <li>END:  {{  date('d-M-Y h:i:s A',strtotime($report['end_at'] ?? "N/A" ))   }}</li>--}}
        </ul>

        <b class="cs-primary_color">Car Information:</b>
        <ul style=" list-style-type: circle;">
            <li>Plate# {{ $report['Car']['car_plate_number']  ?? "N/A" }}</li>
            <li>Make:  {{$report['Car']['car_make'] ?? "N/A" }} </li>
            <li>Model: {{$report['Car']['car_model'] ?? "N/A" }}</li>
            <li>Year: {{$report['Car']['car_year'] ?? "N/A" }}</li>
            <li>Vin: {{$report['Car']['car_vin_number'] ?? "N/A" }}</li>

        </ul>




    </li>


    <li style="padding-right: 2%;">


        <img class='body_type_image'  src="{{asset('storage/qc_data_images/'.$report->qc_id.'/body_inspector_canvas.png')}}"
             onerror="this.onerror=null;this.src='{{asset('storage/cars-body-type/'.$report['Car']['car_body_type'].'/image/image.png')}}';"
{{--            onerror="this.onerror=null;this.src='https://via.placeholder.com/400';"--}}
        >

        <div style=" display: flex;
        justify-content: space-between;
margin-top: -25%;">
            <span class="label info">Part Replaced القطعة &nbsp; مبدلة</span>
            <span class="label success">Paint صبغ &nbsp;</span>
            <span class="label danger">Filler &nbsp;  معجون </span>
            {{--                            <span class="label danger">Heavy Filler</span>--}}
        </div>

    </li>

</ul>



<div id="page_header" class="" style="
display: flex;
    height: auto;
    border-bottom-style: solid;
    border-color: blue;
">

    <div style="margin-top: 4%;">
        {!! QrCode::size(65)->generate(WebsiteData()['qr_code_url']) !!}
    </div>

    <div style="margin-left: 1%;     margin-top: 4%;">
        <p class="font-setup cs-invoice_number cs-primary_color  cs-m0"><b class="cs-primary_color">Job Card #</b> {{$report->qc_id}}</p>
        <p class="font-setup cs-invoice_date cs-primary_color cs-m0"><b class="cs-primary_color">Issue Date: </b> {{date('d-M-Y h:i:s A')}} </p>
        <p class="font-setup cs-invoice_number cs-primary_color  cs-mb5 cs-f16" style="white-space: nowrap"><b class="cs-primary_color">Tel:</b> {{WebsiteData()['tel']}} <b class="cs-primary_color">Mob:</b> {{WebsiteData()['mob']}}        </p>
    </div>

    <div class="cs-invoice_right cs-text_right" style="margin-left: 35%;">
        <div class="cs-logo cs-mb5">
            <img  style="width: 150px;  margin-top: 2%;  height: 85px;" src="{{asset('template_assets/images')}}/logo.png" alt="Logo">

            <p style="font-size:10px;margin-right: 20px; font-weight: bold">{{WebsiteData()['memo']}}</p>
        </div>
    </div>

</div>


<script>




    /*
    function generatePDF() {
        const element = document.getElementById('download_section');
        var opt = {
            margin:       5,
            filename:     'myfile.pdf',
            image:        { type: 'jpeg', quality: 0.98 },
            html2canvas:  { scale: 5},
           jsPDF:        {  format: 'a4', orientation: 'portrait' },
        };
        html2pdf().set(opt).from(element).save();
    }

    $( document ).ready(function() {

        var issues_area = $('#issues_area');
        console.log(issues_area.height());

        console.log($('#ol_data LI'));
        console.log($('#ol_data_v1 LI'));

        var  total_data = $('#ol_data LI').length+$('#ol_data_v1 LI').length;


        console.log(total_data);

        var temp_point = 1;
        var temp_point_stop = false;
        var temp_point_stop_1 = false;
        var total_pages = 1;
        for(var i = 1 ; i < total_data ; i++)
        {
            console.log(distanceBetweenElements($("#li_data_"+temp_point), $("#li_data_"+i))+" testing ");

            if(distanceBetweenElements($("#li_data_"+temp_point), $("#li_data_"+i)) >= 400 && temp_point === 1  )
            {

            console.log(distanceBetweenElements($("#li_data_"+temp_point), $("#li_data_"+i)) );
            console.log(i);

                // $('#li_data_'+i).after(' <div class="html2pdf__page-break"></div>');

                console.log(i);
                var temp_page_header = "page_header_"+i;

                $('#li_data_'+i).after(' <div id="head_'+temp_page_header+'" class="html2pdf__page-break"></div>');
                $('#head_'+temp_page_header).after(' <div id="'+temp_page_header+'" class="other-page-headers"></div>');

                console.log(temp_page_header);

                copyDiv(temp_page_header);

                temp_point  = i;

                total_pages++;

            }else if(distanceBetweenElements($("#li_data_"+temp_point), $("#li_data_"+i)) >= 800 && temp_point !== 1 )
            {

                console.log(distanceBetweenElements($("#li_data_"+temp_point), $("#li_data_"+i)) );
                console.log(i);
                var temp_page_header = "page_header_"+i;

                $('#li_data_'+i).after(' <div id="head_'+temp_page_header+'" class="html2pdf__page-break"></div>');
                $('#head_'+temp_page_header).after(' <div id="'+temp_page_header+'" class="other-page-headers"></div>');

                console.log(temp_page_header);

                copyDiv(temp_page_header);

                temp_point  = i;



                total_pages++;

            }



        }

        console.log(temp_point);

        var last_page_data = distanceBetweenElements($("#li_data_"+temp_point), $("#li_data_"+total_data));

        console.log('data distance '+last_page_data);

        console.log('total pages '+total_pages);

        if(total_pages === 1)
        {

            var diff_actual = 270-last_page_data;

        }else
        {
            var diff_actual = 780-last_page_data;
        }

        console.log('diff_actual '+diff_actual);

        document.getElementById('last_two_footer').style.marginTop = diff_actual+'px';


        // generatePDF();

    });

    function distanceBetweenElements(elementOne, elementTwo) {
        let distance = -1;

        const x1 = elementOne.offset().top;
        const y1 = elementOne.offset().left;
        const x2 = elementTwo.offset().top;
        const y2 = elementTwo.offset().left;
        const xDistance = x1 - x2;
        // const yDistance = y1 - y2;
        const yDistance = 0;

        distance = Math.sqrt(
            (xDistance * xDistance) + (yDistance * yDistance)
        );

        return distance;
    }

    const pointOne = $("#PointOne");
    const pointTwo = $("#PointTwo");

    var firstDivContent = document.getElementById('page_header');

    function copyDiv(id) {

        var secondDivContent = document.getElementById(id);
        console.log(firstDivContent);
        secondDivContent.innerHTML = firstDivContent.innerHTML;


    }
*/
</script>