@extends('layouts.admin')
@push('styles')
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">


       .header p{
            font-size: 16px;
            margin: 30px 0 0 0;
            padding: 0;
            font-weight: 500;
        }

        .btn_mt {
            margin-top: 31px;
        }

        .font_page{
            margin-right: 20px;
        }

        .font_page,
        .font_back_page{

            width: 207.87px;
            height: 321.26px;
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
            float: left;

        }


        .id-card {
            width: 437px;
            height: 321.26px;
            background-color: #fff;
            border-radius: 10px;
            margin: 20px auto;
        }

        .id-card .header {
            background-color: #fff;
            color: #000;
            text-align: center;
            font-size: 18px;
            font-weight: bold;
        }

        .id-card .photo {
            width: 100%;
        }

        .id-card .photo img{
            width: 30%;
            margin: 10px auto;
            display: block;
        }

        .id-card .logo {
            width: 100%;
        }

        .id-card .logo img{
            width: 65%;
           margin: 10px auto;
            display: block;

        }

        .id-card .logo-back img{
            width: 65%;
           margin: 10px auto;
            display: block;
              padding-top: 44px;

        }

        .id-card .font_back_page .details {
            text-align: left;
            padding: 0 15px;
            margin-top: 25px;
        }

        .id-card .font_back_page .details p {

            color: #BF8321;
            margin: 0 0 13px 0;
            padding: 0;
            overflow: hidden;


        }

        .id-card .font_back_page .details p span.icon_l{

            width: 30px;
              display: inline-block;
              overflow: hidden;
              float: left;

        }

        .id-card .font_back_page .details p span.icon_r{

                    width: 145px;
              display: inline-block;
              overflow: hidden;
              float: left;
              font-size: 11px;
              color: #000;

        }

        .id-card .font_page .details {
            text-align: left;
            padding: 0 10px;

        }

        .id-card .font_page .details p {
            margin: 0 0 1px 0;
            font-size: 10px;
            font-weight: 400;
            display: block;
            overflow: hidden;
            width: 100%;

        }

        .id-card .font_page .details p span.fdl{
            width: 85px;
            display: inline-block;
            float: left;
            font-weight: 500;


        }

        .id-card .font_page .details p span.fdc{
            width: 15px;
            display: inline-block;
            float: left;
            text-align: center;


        }

        .id-card .font_page .details p span.fdr{
            width: 85px;
            display: inline-block;
            float: left;


        }


        .id-card .font_page .logo img{

            width: 40%;
        }



     .id-card .font_page .footer{


    }

     .id-card .font_page .footer p{

     text-align: center;
      font-size: 10px;
      padding: 0;
      margin: 0;


    }

     .id-card .font_page .footer .sig{


    }

     .id-card .font_page .footer .sig img{

    width: 40px;
      margin: 46px 40px 0 0;
      display: block;
      text-align: right;
      float: right;

    }
     .id-card .font_page .footer .sig p{

        width: 68px;
        margin: 76px -58px 0 0;
        display: block;
        text-align: right;
        float: right;
        font-weight: bold;

    }


    </style>
@endpush

@section('content')
    <section class="content">
        <div class="container-fluid mt-4">
            <div class="row">
                <div class="col-md-12">
                    <div class="card card-info">
                        <div class="card-header">
                            <h3 class="card-title">Employee ID Card Generate</h3>
                            <a href="{{ route('employee.index') }}" style="float: right;padding: 3px 26px;"
                                class="btn btn-outline-dark btn-flat">Employee List</a>
                        </div>
                        <div class="bg-light d-flex justify-content-center align-items-center">

                            <div class="id-card" id="id-card">

                                <div class="font_page">

                                    <div class="logo">
                                        <img src="{{ asset('uploads/employees/logo.png') }}" alt="photo">
                                    </div>

                                    <div class="photo">
                                        <img src="{{ asset('uploads/employees/' . $emp->image) }}" alt="photo">
                                    </div>

                                    <div class="details">

                                        <p style="text-align:center"> <b> {{ $emp->emp_name }} </b> </p>

                                        <!-- <p style="text-align:center">{{ $emp->address_2 }} </p> -->


                                        <p> <span class="fdl">Department</span>  <span class="fdc">:</span> <span class="fdr"> {{ $emp->department_name }} </span>  </p>
                                        <p> <span class="fdl">Designation</span>  <span class="fdc">:</span> <span class="fdr">{{ $emp->designation }}</span> </p>
                                        <p> <span class="fdl">Employee ID No</span>  <span class="fdc">:</span> <span class="fdr"> {{ $emp->emp_id }} </span>  </p>
                                        <p> <span class="fdl">Blood Group</span>  <span class="fdc">:</span> <span class="fdr"> {{ $emp->blood_group }} </spna> </p>
                                        <p> <span class="fdl">Date of Birth</span>  <span class="fdc">:</span>  <span class="fdr"> {{ Helper::dateFormate($emp->dob) }} </span> </p>
                                        <p> <span class="fdl">Joining Date</span>  <span class="fdc">:</span> <span class="fdr"> {{ Helper::dateFormate($emp->joining_date) }} </span>  </p>
                                        <!--<p> <span class="fdl">Address</span>  <span class="fdc">:</span> {{ $emp->address_2 }} </p>-->

                                    </div>
                                    <div class="footer">

                                        <div class="sig">
                                             <img src="{{ asset('uploads/employees/signature.png') }}" alt="photo">
                                             <p class="sig">Authorization</p>

                                        </div>
                                        <div></div>

                                        <!-- <p>Authorized</p> -->

                                    </div>


                                </div>

                                <div class="font_back_page">

                                   <!-- <div class="header">
                                        <p>This card is a property of </p>
                                    </div> -->
                                    <div class="logo-back">
                                        <img src="{{ asset('uploads/employees/logo.png') }}" alt="photo">
                                    </div>

                                    <div class="header">
                                        <p>If Found Please Return To</p>
                                    </div>

                                    <div class="details">

                                        <p>
                                            <span style="position: relative;top: 5px;" class="icon_l">
                                                <i class="fas fa-map-marker-alt"></i>
                                            </span>
                                             <span class="icon_r"> East Isdair, Rasulbag, Fatullah, Narayanganj-1420  </span>
                                         </p>

                                        <p style="position: relative;top: -3px;">
                                            <span class="icon_l">
                                                <i class="fa fa-phone"></i>
                                            </span>

                                            <span class="icon_r">
                                            +88 01611111120
                                           </span>
                                        </p>

                                        <p style="position: relative;top: -5px;">
                                            <span class="icon_l">  <i class="fa fa-envelope"></i> </span>

                                             <span class="icon_r">
                                            info@sweetnationbd.com
                                            </span>
                                        </p>

                                    </div>

                                </div>


                            </div>



                        </div>
                        <div class="d-flex justify-content-center align-items-center mb-5">
                            <button id="download-btn" class="btn btn-sm btn-primary">Download ID Card</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@push('scripts')
    <script src="{{ asset('js/html2canvas.min.js') }}"></script>

    <script>
        if (typeof html2canvas !== 'undefined') {
            document.getElementById('download-btn').addEventListener('click', function() {
                var card = document.getElementById('id-card');
                html2canvas(card).then(function(canvas) {
                    var link = document.createElement('a');
                    link.download = 'employee_id_card.png';
                    link.href = canvas.toDataURL();
                    link.click();
                }).catch(function(error) {
                    console.error("Error capturing ID card:", error);
                });
            });
        } else {
            console.error("html2canvas is not loaded correctly.");
        }
    </script>
@endpush