@extends('layouts.dashboard.layout')

@section('content')

<link rel="stylesheet" type="text/css"
    href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.6.5/sweetalert2.min.css">

<style>
@media print {
    @page {
        margin-left: 0.5in;
        margin-right: 0.5in;
        margin-top: 0;
        margin-bottom: 0;
    }
}
</style>

<!-- Content Header (Page header) -->
<section class="content-header">
    @if(Session::has('flash_message_error'))
    <div class="alert alert-error alert-danger alert-block">
        <button type="button" class="close" data-dismiss="alert">×</button>
        <strong>{!! session('flash_message_error') !!}</strong>
    </div>
    @endif
    @if(Session::has('flash_message_success'))
    <div class="alert alert-success alert-block">
        <button type="button" class="close" data-dismiss="alert">×</button>
        <strong>{!! session('flash_message_success') !!}</strong>
    </div>
    @endif
</section>

<div class="container-fluid ">
    <div class="row">
        <div class="col-md-12">
            <!-- Content Header (Page header) -->
            <section class="content-header">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-sm-12">
                            <h2 class="text-white"></h2>
                        </div>
                    </div>
                </div>
            </section>
            <div class="card">
                <div class="card-body">
                    <div class="text-center">
                        <img src="{{ asset('img/mmd-logo.png') }}" alt="" style="width:200px">
                        <h4><b>CLAIM ITEM COMPENSATION</b></h4>
                        <h6><b><span>Date</span> :
                                {{ date('d-M-Y', strtotime($data->created_at)) }}</b></h6>
                    </div>
                    <div style="padding: 30px 100px">
                        <table class="table table-bordered text-center" width="40%" style="border: 2px solid #000">
                            <tbody>
                                <tr>
                                    <th class="text-white" style="background-color: #A4CE3A">Name</th>
                                    <th colspan=2 style="white-space:pre-wrap">{{ $data-> name }}</th>
                                </tr>
                                <tr>
                                    <th class="text-white" style="background-color: #A4CE3A">Description</th>
                                    <th colspan=2 style="white-space:pre-wrap">{{ $data->notes }}</th>
                                </tr>
                                <tr>
                                    <th class="text-white w-25" style="background-color: #A4CE3A">Amount</th>
                                    <th style="white-space:pre-wrap">Compensation amount is</th>
                                    <th class="bg-dark text-white">${{ $data->amount }}</th>
                                </tr>
                                <!-- <tr>
                                    <th class="text-white" style="background-color: #A4CE3A">Total</th>
                                    <th style="white-space:pre-wrap"><b>${{ $data->amount }}</b></th>
                                </tr> -->
                            </tbody>
                        </table>

                        <div class="text-center">
                            <button id="printpagebutton" class="btn btn-info mt-4"
                                onclick="window.printpage()">Print</button>
                            <a id="backbutton" class="btn mt-4 ml-2"
                                href="{{ route('listothercompensation', $data->claim_id) }}"
                                style="width: 150px; background-color:#000; color: #fff">
                                Back To List
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Print Document -->
<script type="text/javascript">
function printpage() {

    var printButton = document.getElementById("printpagebutton");
    printButton.style.visibility = 'hidden';

    var backButton = document.getElementById("backbutton");
    backButton.style.visibility = 'hidden';

    //Print the page content
    window.print()
    //Set the print button to 'visible' again 
    printButton.style.visibility = 'visible';
    backButton.style.visibility = 'visible';
}
</script>

@endsection