@extends('layouts.app')

@section('content')
    @php
        $bg = base64_encode(file_get_contents(public_path('images/print/rapport-2.png')));
    @endphp



<style>
        
    .page {
        margin: 0;
        padding: 0;
        background-image: url('data:image/jpeg;base64,{{ $bg }}');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        width: 100%;
        /* position: relative; */
        height: 600px;
        display: block;
        position: relative;
        box-sizing: border-box;
    }

    .app-content {
        overflow: auto;
        }

    .img-company{
        height: 92px;
        position: absolute;
        top: 20px;
        left: 40px;
    }

    .img-course {
        width: 47%;
    }
    .title-course{
        display: inline-block;
        margin-top: 240px;
    }

    
    .title-course-2 {
        margin-top: 200px;
        vertical-align: top;
    }
    
    .primary1{
        color: #1fbab3;
    }

    .title-course h1,.title-course h4{
        color: #1fbab3;
        font-weight: bold;
        font-size: 36px;
    }
    .title-course h4{
        font-size: 24px;
        text-align: center;
    }

    .header h2{
        padding-top: 92px;
        text-align: center;
        color: #1fbab3;
    }

    .description{
        display: inline-block;
        padding-top: 100px;
        /* padding-right: 50%; */
        width: 45%;

    }
    .header-2{
        padding-top: 50px;
        padding-right: 100px
    }
    .description-2{
        border-top: 6px solid #939090;
        border-bottom: 6px solid #939090;
        min-height: 200px;
        text-align: center;
        width: 50%;
        display: inline-block;
        background: white;
        padding: 15px;
        margin-right: 100px;
    }

    .question{
        background: #7AA1BB;
        border: 1px solid #597689;
        border-radius: 20px;
        color: white;
        padding: 20px;
        text-align: center;
    }
    .response{
        border: 1px solid #597689;
        border-radius: 20px;
        padding: 20px;
        text-align: center;
    }
    
    .chart{
        /* width:300px; */
    }
</style>

@php
    $imgCourse = base64_encode(file_get_contents(public_path($course->image)));
    $imgPath = public_path($course->image);
    $imgCompany = '';
    if (file_exists($imgPath) && is_file($imgPath)) {
        $imgCompany = base64_encode(file_get_contents($imgPath));
    }else{

    }
@endphp


    <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>
        <li class="nav-item" role="presentation">
        <button class="nav-link" id="rapport-tab-1" data-bs-toggle="pill" data-bs-target="#pills-rapport-tab-1" type="button" role="tab" aria-controls="rapport-tab-1" aria-selected="false">تحليل الحضور الإجمالي
        </button>
        </li>
        {{-- 
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="rapport-tab-2" data-bs-toggle="pill" data-bs-target="#pills-rapport-tab-2" type="button" role="tab" aria-controls="rapport-tab-2" aria-selected="false">قياس التفاعل التفصيلي
        </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="rapport-tab-3" data-bs-toggle="pill" data-bs-target="#pills-rapport-tab-3" type="button" role="tab" aria-controls="rapport-tab-3" aria-selected="false">الحضور والغياب
        </button>
        </li>

        <li class="nav-item" role="presentation">
            <button class="nav-link" id="rapport-tab-4" data-bs-toggle="pill" data-bs-target="#pills-rapport-tab-4" type="button" role="tab" aria-controls="rapport-tab-4" aria-selected="false">المستوى التفاعلي العام
        </button>
        </li>

        <li class="nav-item" role="presentation">
            <button class="nav-link" id="rapport-tab-5" data-bs-toggle="pill" data-bs-target="#pills-rapport-tab-5" type="button" role="tab" aria-controls="rapport-tab-5" aria-selected="false">تحسين مستوى المشاركين
        </button>
        </li>

        <li class="nav-item" role="presentation">
            <button class="nav-link" id="rapport-tab-8" data-bs-toggle="pill" data-bs-target="#pills-rapport-tab-8" type="button" role="tab" aria-controls="rapport-tab-8" 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 ">
                <img class="img-company" src="data:image/jpeg;base64,{{ $imgCompany }}" alt="">
                <div class="header f-flex justify-content-between">
                    <div class="title-course w-50">
                        <h1 class="p-2 text-center">{{ $course->name }}</h1>
                    </div>
                    <img class="img-course" src="data:image/jpeg;base64,{{ $imgCourse }}" alt="">
                </div>
            </div>
        </div>
        <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
            <div class="page ">
                <img class="img-company" src="data:image/jpeg;base64,{{ $imgCompany }}" alt="">
                <div class="header">
                    <h2>نبذة عن البرنامج التدريبي</h2>

                    <style>
                        .table-about{

                        }
                        .table-about td,.table-about th{
                            padding:20px
                        }
                        .table-about th{
                            text-align: center;
                            color: #fff;
                            background-color: #008080;
                        }
                        .table-about th h5{
                            color: #fff;
                        }
                        .table-about th{
                            width: auto !important;
                        }
                        .table-about tr{
                            margin: 10px;
                        }
                    </style>
                    
                    <div class="" >
                        <table class="table-about table table-bordered">
                            <tr>
                                <th>
                                    <img src="{{ asset('images/print/about1.png') }}" width="50" alt="">
                                    <h5>نبذة عن البرنامج</h5>
                                </th>
                                <td>
                                    {{ $course->description }}
                                </td>
                            </tr>
                            <tr>
                                <th>
                                    <img src="{{ asset('images/print/about2.png') }}" width="50" alt="">
                                   <h5> الهدف العام</h5>
                                </th>
                                <td>
                                    <ul>
                                        @foreach ($course->cource_objective as $item)
                                            <li>{{ $item }}</li>
                                        @endforeach
                                    </ul>
                                </td>
                            </tr>
                            <tr>
                                <th>
                                    <img src="{{ asset('images/print/about3.png') }}" width="50" alt="">
                                   <h5> موضوعات البرنامج</h5>
                                </th>
                                <td>
                                    <ul>
                                        @foreach ($course->course_topics as $item)
                                            <li>{{ $item }}</li>
                                        @endforeach
                                    </ul>
                                </td>
                            </tr>
                            <tr>
                                <th>
                                    <img src="{{ asset('images/print/about4.png') }}" width="50" alt="">
                                    <h5>الفئة المستهدفة</h5>
                                </th>
                                <td>
                                    <ul>
                                        @foreach ($course->target_audience as $item)
                                            <li>{{ $item }}</li>
                                        @endforeach
                                    </ul>
                                </td>
                                <th>
                                    <img src="{{ asset('images/print/about4.png') }}" width="50" alt="">
                                  <h5>  آلية تقديم البرنامج</h5>
                                </th>
                                <td>تقييم ودراسة حالة</td>
                            </tr>
                        </table>

                        
                        
                    </div>
                </div>
            </div>
        </div>
        <div class="tab-pane fade" id="pills-rapport-tab-1" role="tabpanel" aria-labelledby="rapport-tab-1">
            <div class="page ">
                <img class="img-company" src="data:image/jpeg;base64,{{ $imgCompany }}" alt="">
                <div class="header">
                    <h2>تحليل الحضور الإجمالي</h2>

                    <style>
                        .present-anlyse{

                        }
                        .present-anlyse span{
                            padding: 10px;
                            border-radius: 10px;
                        }
                        .present-anlyse .text-title{
                            background-color: #008080;
                            color: #fff;
                            padding-left: 30px;
                        }
                        .present-anlyse .text-value{
                            background-color: #eee;
                            position: relative;
                            left: 30px;
                        }
                    </style>

                    <div class="row present-anlyse">
                        <div class="col col-12 col-md-4">
                            <img src="{{ asset('images/print/present1.png') }}" width="40" alt="">
                            <span class="text-title">
                                اجمالي عدد المرشحين
                            </span>
                            <span class="text-value">100</span>
                        </div>
                        <div class="col col-12 col-md-4">
                            <img src="{{ asset('images/print/present2.png') }}" width="40" alt="">
                            <span class="text-title">
                                اجمالي عدد الغياب
                            </span>
                            <span class="text-value">100</span>
                        </div>
                        <div class="col col-12 col-md-4">
                            <img src="{{ asset('images/print/present1.png') }}" width="40" alt="">
                            <span class="text-title">
                                اجمالي عدد المجتازين
                            </span>
                            <span class="text-value">100</span>
                        </div>
                    </div>
                    
                </div>
            </div>
        </div>
        {{-- <div class="tab-pane fade" id="pills-rapport-tab-2" role="tabpanel" aria-labelledby="rapport-tab-2">
        </div>
        <div class="tab-pane fade" id="pills-rapport-tab-3" role="tabpanel" aria-labelledby="rapport-tab-3">
        </div>
        <div class="tab-pane fade" id="pills-rapport-tab-4" role="tabpanel" aria-labelledby="rapport-tab-4">
        </div>
        <div class="tab-pane fade" id="pills-rapport-tab-5" role="tabpanel" aria-labelledby="rapport-tab-5">
        </div>
        <div class="tab-pane fade" id="pills-rapport-tab-6" role="tabpanel" aria-labelledby="rapport-tab-6">
        </div>
        <div class="tab-pane fade" id="pills-rapport-tab-7" role="tabpanel" aria-labelledby="rapport-tab-7">
        </div>
        <div class="tab-pane fade" id="pills-rapport-tab-8" role="tabpanel" aria-labelledby="rapport-tab-8">
        </div> --}}
    </div>

@endsection