<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>History</title>
    <!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"> -->
    <!-- <link href="{{ asset('css/app.css') }}" rel="stylesheet" type="text/css" /> -->

 
    <style>
@page {
margin: 20px;
}
body {
font-size: 12px;
margin: 0px;
font-family: sans-serif;
}
div .inline {
color: black;
float: left;
line-height: 1;
font-size: 13px;
}
.row {
width: 10%;
}
div .row:after {
clear: both;
width: 100%;
}
.report-title {
float: left;
font-size: 1.3em;
font-weight: 100;
font-family: sans-serif;
text-align: center;
width: 10%;
}
.right {
float: right;
}
.header {
font-size: 12px;
color: #aaa;
line-height: 1.5;
}
table {
width: 100%;
border-collapse: collapse;
}
td {
margin: 0;
border: none;
padding: 5px;
text-align: left;
font-size: 12px;
border-bottom: #ddd 1px solid;
border-right: #ddd 1px solid;
border-top: #ddd 1px solid;
border-left: #ddd 1px solid;
}
tr {
border-bottom: #ddd 10px solid;
width: 100%;
}
th {
padding: 3px;
background: #eee;
border-bottom: 1px solid #eee;
font-size: 9px;
font-weight: bold;
color: black;
}
td a {
text-decoration: none;
color: black;
}
.summary-table {
width: 30%;
margin-bottom: 20px;
color: black
}
.summary-table tr {
border-bottom: #eee 0.5pt solid;
border-top: #eee 0.5pt solid
}
.key {
padding: 10px;
font-weight: bold;
background: #eee
}
.value {
padding: 10px;
text-align: center;
}
.col-md-6 {
width: 50%;
}
.col-md-2 {
width: 20%;
}
</style>

</head>

<body>
    <div class="container mt-5">
        <h2 class="text-center mb-3" align="center">Airtime Summary
</h2><br>
<h2 class="text-center mb-3" align="left">Mobisky Innovations
</h2><h2 class="text-center mb-3" align="center">    
</h2>

        <div class="d-flex justify-content-end mb-4">
        </div>

        <table>
            <thead>
            <tr class="table-success">
                    <th>RequestID</th>
                    <th>Date</th>
                    <th>Airtime Sent</th>
                    <th>Recipient</th>
                    <th>Name</th>
                    <th>Group</th>
                    <th>Status</th>
                </tr>
            </thead>
        
            <tbody>
                @foreach($history as $myhistory)
                    <tr>
                        <td>{{ $myhistory->requestid }}</td>
                        <td>{{ $myhistory->date_sent }}</td>
                        <td>{{ $myhistory->airtime_sent }}</td>
                        <td>{{ $myhistory->recipient }}</td>
                        
                    
                        <td>
                        @php
                        $phone=$myhistory->recipient;
                        $contact = App\Models\atmodels\Airtime_contact::where('customer_id',$customer_id)->where('contact','LIKE',"%".$phone."%")->with('contactGroup')->first();
                        
                    @endphp
                    @if(!empty($contact))

                    {{ $contact->fname }}
                    @endif
                        
                        </td>
                        <td> @if(!empty($contact))
                        @if($contact->contactGroup)
                                {{ $contact->contactGroup->name }}
                            @endif
                            @endif</td>
                            <td>{{ $myhistory->status }}</td>
                    </tr>
                @endforeach
            </tbody>
        </table>
                                            

    </div>
</body>

</html>