@extends('layouts.app')

@section('content')
@php
    $bg = asset('images/print/header-page.png');
    $logoIvory = asset('images/print/print-logo.png');
    $logoIvory2 = asset('images/print/logo.png');
    $logoIvory3 = $publicQuestionnaire?->company?->image ? asset($publicQuestionnaire?->company?->image) : asset('images/print/line.png');
    $logoIvory4 = asset('images/print/footerlogo.png');
    $line = asset('images/print/line.png');
@endphp

{{-- @include('group.style-rapport') --}}

<div class="d-flex justify-content-end">
    <a class="btn btn-info align-self-start" onclick="myPrint()">
        تحميل
    </a>
</div>

<br>
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
    <li class="nav-item" role="presentation">
        <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home"
            type="button" role="tab" aria-controls="pills-home" aria-selected="true">الصفحة الرئيسية</button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link " id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile"
            type="button" role="tab" aria-controls="pills-profile" aria-selected="false">التقرير</button>
    </li>
</ul>

<div class="tab-content" id="pills-tabContent">
    <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
        <div class="page ">
            <div class="two-logo">
                <img class="img-company2" src="{{ $logoIvory2 }}" alt="">
                <img class="img-company" src="{{ $logoIvory3 }}" alt="">
            </div>
            <div class="header d-flex justify-content-center">
                <div class="title-course w-50 d-flex justify-content-center align-items-center mb-5">

                    <img class="line" src="{{ $line }}" alt="">
                    <div >
                        <h1> <span class=" fw-bold">الاستبيان العام : </span> {{ $publicQuestionnaire->title }}</h1>
                        <hr>
                        <h6><span class=" fw-bold">تاريخ الاستبيان : </span> {{ $publicQuestionnaire->start_date }} / {{ $publicQuestionnaire->end_date }}</h6>
                        <hr>
                        <h3><span class=" fw-bold">الاستبيان :  </span> {{ $publicQuestionnaire->questionnaire->title }}</h3>
                        <hr>
                    </div>
                </div>
            </div>
            <br><br><br><br><br><br>
            <br><br><br><br><br><br>
            <img class="footerimg" src="{{ $logoIvory4 }}" alt="">
        </div>
    </div>

    <div class="tab-pane fade show contract" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
        <div class="page class-print">
            <div class="two-logo">
                <img class="img-company2" src="{{ $logoIvory2 }}" alt="">
                <img class="img-company" src="{{ $logoIvory3 }}" alt="">
            </div>
            <br><br><br><br><br><br>
            <div class="header d-flex justify-content-center">
                <div class="title-course w-50 d-flex justify-content-center align-items-center mb-5">
                    <img class="line" src="{{ $line }}" alt="">
                    <div >
                        <h1> <span class=" fw-bold">الاستبيان العام : </span> {{ $publicQuestionnaire->title }}</h1>
                        <hr>
                        <h6><span class=" fw-bold">تاريخ الاستبيان : </span> {{ $publicQuestionnaire->start_date }} / {{ $publicQuestionnaire->end_date }}</h6>
                        <hr>
                        <h3><span class=" fw-bold">الاستبيان :  </span> {{ $publicQuestionnaire->questionnaire->title }}</h3>
                        <hr>
                    </div>
                </div>
            </div>
            <br><br><br><br><br><br>
            <br><br><br><br><br><br>
            <img class="footerimg" src="{{ $logoIvory4 }}" alt="">
        </div>
        <div class="page ">
            <div class="two-logo">
                <img class="img-company2" src="{{ $logoIvory2 }}" alt="">
                <img class="img-company" src="{{ $logoIvory3 }}" alt="">
            </div>
            @php
                $keys = [];
            @endphp

            {{-- <h2 class="">تقرير نتائج  الاستبيان</h2> --}}

            @foreach ($data[0] as $item)
                <h1 class="alert alert-success text-center">{{ $item['name'] }}</h1>
                <h3>{{ $item['note_title'] }}</h3>

                @php
                    $users = $data[1][$item['type'].'-'.$item['note'].'-'.$item['id']];
                @endphp

                @if(count($users)>0)

                <table class="table table-bordered">
                    <thead>
                        {{-- @dump($data[2]) --}}
                        @foreach ($data[2] as $key => $field)
                            <th>{{ $key }}</th>
                        @endforeach
                    </thead>
                    <tbody>
                        @foreach ($users as $item)
                        @php
                            $element = $data[3][$item];
                        @endphp
                            <tr>
                            @foreach ($element as $key => $field)
                                @if($loop->iteration<=count($data[2]))
                                <td>{{ $field }}</td>
                                @endif
                            @endforeach
                            </tr>

                        @endforeach
                    </tbody>
                </table>
                @endif
            @endforeach
            {{-- <table dir="rtl" class="table responsive-table table-bordered">
                <thead>
                    <tr>
                        @foreach ($data[0] as $key => $entry)
                            @foreach ($entry['user'] as $key2 => $entry2)
                                <th>{{ $key2 }}</th>
                                @php
                                    $keys[] = $key2;
                                @endphp
                            @endforeach
                            @break
                        @endforeach
                        @foreach ($data[1] as $header)
                            <th>{{ $header }}</th>
                        @endforeach
                    </tr>
                </thead>
                <tbody>
                    @foreach ($data[0] as $entry)
                        <tr>
                            @foreach ($keys as $key)
                                <td>{{ $entry['user'][$key]??'' }}</td>
                            @endforeach
                            @foreach ($data[1] as $header)
                                @php
                                    $total = 0;
                                    foreach ($entry['data'] as $field) {
                                        if ($field['name'] === $header) {
                                            $total = $field['total'];
                                            break;
                                        }
                                    }
                                @endphp
                                <td>{{ $total }}</td>
                            @endforeach
                        </tr>
                    @endforeach
                </tbody>
            </table> --}}
            <br>
            <br>
            <br>
            <br>
            <br>
            <img class="footerimg" src="{{ $logoIvory4 }}" alt="">
        </div>
    </div>
</div>

<style>

    .table {
    border: 2px solid #343a40;
    }
    thead{
        background:#656466;
        color:#fff;
    }
    .chart-div {
        width: 100%;
        height: 500px;
        font-size: 10px;
    }
    .chartdiv-pie {
        width: 90%;
        margin: 20px;
        padding: 20px;
        height: 500px;
        font-size: 13px;
        font-weight: bold;
    }

    .class-print{
        display: none;
    }

    @media print {
        body * {
            visibility: hidden;
        }

        .page-break {
            page-break-before: always; /* Forces a page break before this element */
        }

        .class-print ,.print{
            display: block;
        }

        .contract,
        .contract * {
            visibility: visible;
        }

        .contract {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            padding: 20px;
        }

        /* Hide date and page number */
        @page {
            margin: 10;
        }

        @page :left {
            margin: 0;
        }

        @page :right {
            margin: 0;
        }

        .header-card,
        .title-22,
        h4 {
            color: black !important;

        }


        /* Hide headers and footers */
        header,
        footer {
            display: none;
        }

    }
</style>

<script>
    function myPrint() {
        $('#pills-home').removeClass('active');
        $('#pills-home-tab').removeClass('active');
        $('#pills-profile').addClass('active');
        $('#pills-profile-tab').addClass('active');
        setTimeout(() => {
            print();
        }, 2000);

    }
</script>

@endsection