@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
@include('layouts.navbars.auth.topnav', ['title' => ''])

<div class="container mt-4">
    <div class="row mt-4">
        <div class="col-12">
            <div class="card mb-4">
                <!-- Header yang diperbarui -->
                <div class="card-header pb-0 p-3 bg-gray-200">
                    <div class="d-flex justify-content-between align-items-center">
                        @php
                            $role = DB::table('users')
                                ->where('username', session('username'))
                                ->value('firstname');
                        @endphp

                        <h4 class="mb-0 text-black">Petunjuk Penggunaan Website {!! $role !!}</h4>
                        <span class="badge bg-white text-primary px-3 py-2 shadow-sm">{!! $role !!}</span>
                    </div>

                </div>
                
                <div class="card-body p-0">
                    <div id="pdf-container" class="bg-gray-200 rounded p-2">
                        <iframe src="{{ asset('storage/manuals/' . $manualFile ) }}" type="application/pdf"></iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
#pdf-container {
    position: relative;
    width: 100%;
    height: 800px;
    background-color: #e5e7eb;
}

#pdf-container iframe {
    width: 100%;
    height: 100%;
    border: none;
    background-color: white;
    border-radius: 0.25rem;
}

.card-header.bg-gradient-primary {
    border-radius: 0.5rem 0.5rem 0 0 !important;
}

.card {
    border: none;
    box-shadow: 0 0 2rem 0 rgba(136, 152, 170, 0.15);
}
</style>
@endsection


<!-- @push('js')
<script src="./assets/js/plugins/chartjs.min.js"></>
<script>
var ctx1 = document.getElementById("chart-line").getContext("2d");

var gradientStroke1 = ctx1.createLinearGradient(0, 230, 0, 50);

gradientStroke1.addColorStop(1, 'rgba(251, 99, 64, 0.2)');
gradientStroke1.addColorStop(0.2, 'rgba(251, 99, 64, 0.0)');
gradientStroke1.addColorStop(0, 'rgba(251, 99, 64, 0)');
new Chart(ctx1, {
    type: "line",
    data: {
        labels: ["Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
        datasets: [{
            label: "Mobile apps",
            tension: 0.4,
            borderWidth: 0,
            pointRadius: 0,
            borderColor: "#fb6340",
            backgroundColor: gradientStroke1,
            borderWidth: 3,
            fill: true,
            data: [50, 40, 300, 220, 500, 250, 400, 230, 500],
            maxBarThickness: 6

        }],
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: {
                display: false,
            }
        },
        interaction: {
            intersect: false,
            mode: 'index',
        },
        scales: {
            y: {
                grid: {
                    drawBorder: false,
                    display: true,
                    drawOnChartArea: true,
                    drawTicks: false,
                    borderDash: [5, 5]
                },
                ticks: {
                    display: true,
                    padding: 10,
                    color: '#fbfbfb',
                    font: {
                        size: 11,
                        family: "Open Sans",
                        style: 'normal',
                        lineHeight: 2
                    },
                }
            },
            x: {
                grid: {
                    drawBorder: false,
                    display: false,
                    drawOnChartArea: false,
                    drawTicks: false,
                    borderDash: [5, 5]
                },
                ticks: {
                    display: true,
                    color: '#ccc',
                    padding: 20,
                    font: {
                        size: 11,
                        family: "Open Sans",
                        style: 'normal',
                        lineHeight: 2
                    },
                }
            },
        },
    },
}); 
</script>
@endpush-->