@extends('user_dashboard.layouts.app')
@section('content')
    <style>
        @media print {

html, body {
  height:100%;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
}

}
@page {
        size: A4 landscape;
        content: counter(1);
        margin: 0;
        page-break-after: always !important;
    }
        @media print {

            .bg_height {
                height: 740px;
                width: 100%;
                margin-left: auto;
                margin-right: auto;
                background-size: cover;
                position: relative !important;
                margin: 0 !important;
            }

            .name-position {
                display: inline !important;
                position: absolute !important;
                top: 400px;
                padding-left: 580px;
                margin-bottom: 30px !important;
                color: #fff !important;
                font-size: 36px !important
            }
        }
    </style>
    <div class="rbt-dashboard-area mt--30 mb--50">
        <div class="container-fluid">
            <div class="row g-5">
                <div class="col-lg-3 d-print-none">
                    @include('user_dashboard.layouts.sidebar')
                </div>

                <div class="col-lg-9">
                    <div class="rbt-dashboard-content bg-color-white rbt-shadow-box mb--10">
                        <div class="section-title d-print-none">
                            <h3 class="rbt-title-style-style">Print Certificate</h3>
                        </div>
                        <div class="row">
                            <div class="bg_height"
                                style="background-image: url({{ asset('/user_dashboard/images/certificate.jpg') }});">
                            <h2 class="name-position text-white"> {{Auth::guard('web')->user()->name}}</h2>
                            </div>
                        </div>

                        <div class="mt-4 mb-1">
                            <div class="text-end d-print-none">
                                <a href="javascript:window.print()" class="rbt-btn rbt-switch-btn btn-gradient radius-round btn-sm"><i class="mdi mdi-printer me-1"></i> Print</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection