invoice_created.blade.php 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta name="viewport" content="width=device-width" />
  5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  6. <title>Revinr</title>
  7. <style>
  8. /* -------------------------------------
  9. GLOBAL RESETS
  10. ------------------------------------- */
  11. img {
  12. border: none;
  13. -ms-interpolation-mode: bicubic;
  14. max-width: 100%; }
  15. body {
  16. background-color: #f6f6f6;
  17. font-family: sans-serif;
  18. -webkit-font-smoothing: antialiased;
  19. font-size: 14px;
  20. line-height: 1.4;
  21. margin: 0;
  22. padding: 0;
  23. -ms-text-size-adjust: 100%;
  24. -webkit-text-size-adjust: 100%; }
  25. table {
  26. border-collapse: separate;
  27. mso-table-lspace: 0pt;
  28. mso-table-rspace: 0pt;
  29. width: 100%; }
  30. table td {
  31. font-family: sans-serif;
  32. font-size: 14px;
  33. vertical-align: top; }
  34. /* -------------------------------------
  35. BODY & CONTAINER
  36. ------------------------------------- */
  37. .body {
  38. background-color: #f6f6f6;
  39. width: 100%; }
  40. /* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something */
  41. .container {
  42. display: block;
  43. Margin: 0 auto !important;
  44. /* makes it centered */
  45. max-width: 580px;
  46. padding: 10px;
  47. width: 580px; }
  48. /* This should also be a block element, so that it will fill 100% of the .container */
  49. .content {
  50. box-sizing: border-box;
  51. display: block;
  52. Margin: 0 auto;
  53. max-width: 580px;
  54. padding: 10px; }
  55. /* -------------------------------------
  56. HEADER, FOOTER, MAIN
  57. ------------------------------------- */
  58. .main {
  59. background: #fff;
  60. border-radius: 3px;
  61. width: 100%; }
  62. .wrapper {
  63. box-sizing: border-box;
  64. padding: 20px; }
  65. .footer {
  66. clear: both;
  67. padding-top: 10px;
  68. text-align: center;
  69. width: 100%; }
  70. .footer td,
  71. .footer p,
  72. .footer span,
  73. .footer a {
  74. color: #999999;
  75. font-size: 12px;
  76. text-align: center; }
  77. /* -------------------------------------
  78. TYPOGRAPHY
  79. ------------------------------------- */
  80. h1,
  81. h2,
  82. h3,
  83. h4 {
  84. color: #000000;
  85. font-family: sans-serif;
  86. font-weight: 400;
  87. line-height: 1.4;
  88. margin: 0;
  89. Margin-bottom: 30px; }
  90. h1 {
  91. font-size: 35px;
  92. font-weight: 300;
  93. text-align: center;
  94. text-transform: capitalize; }
  95. p,
  96. ul,
  97. ol {
  98. font-family: sans-serif;
  99. font-size: 14px;
  100. font-weight: normal;
  101. margin: 0;
  102. Margin-bottom: 15px; }
  103. p li,
  104. ul li,
  105. ol li {
  106. list-style-position: inside;
  107. margin-left: 5px; }
  108. a {
  109. color: #3498db;
  110. text-decoration: underline; }
  111. /* -------------------------------------
  112. BUTTONS
  113. ------------------------------------- */
  114. .btn {
  115. box-sizing: border-box;
  116. width: 100%; }
  117. .btn > tbody > tr > td {
  118. padding-bottom: 15px; }
  119. .btn table {
  120. width: auto; }
  121. .btn table td {
  122. background-color: #ffffff;
  123. border-radius: 5px;
  124. text-align: center; }
  125. .btn a {
  126. background-color: #ffffff;
  127. border: solid 1px #3498db;
  128. border-radius: 5px;
  129. box-sizing: border-box;
  130. color: #3498db;
  131. cursor: pointer;
  132. display: inline-block;
  133. font-size: 14px;
  134. font-weight: bold;
  135. margin: 0;
  136. padding: 12px 25px;
  137. text-decoration: none;
  138. text-transform: capitalize; }
  139. .btn-primary table td {
  140. background-color: #3498db; }
  141. .btn-primary a {
  142. background-color: #3498db;
  143. border-color: #3498db;
  144. color: #ffffff; }
  145. /* -------------------------------------
  146. OTHER STYLES THAT MIGHT BE USEFUL
  147. ------------------------------------- */
  148. .last {
  149. margin-bottom: 0; }
  150. .first {
  151. margin-top: 0; }
  152. .align-center {
  153. text-align: center; }
  154. .align-right {
  155. text-align: right; }
  156. .align-left {
  157. text-align: left; }
  158. .clear {
  159. clear: both; }
  160. .mt0 {
  161. margin-top: 0; }
  162. .mb0 {
  163. margin-bottom: 0; }
  164. .preheader {
  165. color: transparent;
  166. display: none;
  167. height: 0;
  168. max-height: 0;
  169. max-width: 0;
  170. opacity: 0;
  171. overflow: hidden;
  172. mso-hide: all;
  173. visibility: hidden;
  174. width: 0; }
  175. .powered-by a {
  176. text-decoration: none; }
  177. hr {
  178. border: 0;
  179. border-bottom: 1px solid #f6f6f6;
  180. Margin: 20px 0; }
  181. /* -------------------------------------
  182. RESPONSIVE AND MOBILE FRIENDLY STYLES
  183. ------------------------------------- */
  184. @media only screen and (max-width: 620px) {
  185. table[class=body] h1 {
  186. font-size: 28px !important;
  187. margin-bottom: 10px !important; }
  188. table[class=body] p,
  189. table[class=body] ul,
  190. table[class=body] ol,
  191. table[class=body] td,
  192. table[class=body] span,
  193. table[class=body] a {
  194. font-size: 16px !important; }
  195. table[class=body] .wrapper,
  196. table[class=body] .article {
  197. padding: 10px !important; }
  198. table[class=body] .content {
  199. padding: 0 !important; }
  200. table[class=body] .container {
  201. padding: 0 !important;
  202. width: 100% !important; }
  203. table[class=body] .main {
  204. border-left-width: 0 !important;
  205. border-radius: 0 !important;
  206. border-right-width: 0 !important; }
  207. table[class=body] .btn table {
  208. width: 100% !important; }
  209. table[class=body] .btn a {
  210. width: 100% !important; }
  211. table[class=body] .img-responsive {
  212. height: auto !important;
  213. max-width: 100% !important;
  214. width: auto !important; }}
  215. /* -------------------------------------
  216. PRESERVE THESE STYLES IN THE HEAD
  217. ------------------------------------- */
  218. @media all {
  219. .ExternalClass {
  220. width: 100%; }
  221. .ExternalClass,
  222. .ExternalClass p,
  223. .ExternalClass span,
  224. .ExternalClass font,
  225. .ExternalClass td,
  226. .ExternalClass div {
  227. line-height: 100%; }
  228. .apple-link a {
  229. color: inherit !important;
  230. font-family: inherit !important;
  231. font-size: inherit !important;
  232. font-weight: inherit !important;
  233. line-height: inherit !important;
  234. text-decoration: none !important; }
  235. .btn-primary table td:hover {
  236. background-color: #34495e !important; }
  237. .btn-primary a:hover {
  238. background-color: #34495e !important;
  239. border-color: #34495e !important; } }
  240. .invoice-box{
  241. max-width:60%;
  242. margin:auto;
  243. padding:30px;
  244. border:1px solid #eee;
  245. font-size:16px;
  246. line-height:24px;
  247. font-family:'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
  248. color:#555;
  249. background: #fff;
  250. }
  251. #tbl-content{
  252. border:1px solid #f6f6f6;
  253. }
  254. .invoice-box table{
  255. width:100%;
  256. line-height:inherit;
  257. text-align:left;
  258. }
  259. .invoice-box table td{
  260. padding:5px;
  261. vertical-align:top;
  262. }
  263. .invoice-box table tr td:nth-child(2){
  264. text-align:left;
  265. }
  266. .invoice-box table tr.top table td{
  267. padding-bottom:20px;
  268. }
  269. .invoice-box table tr.top table td.title{
  270. font-size:18px;
  271. line-height:18px;
  272. color:#333;
  273. }
  274. .invoice-box table tr.information table td{
  275. padding-bottom:40px;
  276. }
  277. .invoice-box table tr.heading td{
  278. background:#eee;
  279. border-bottom:1px solid #ddd;
  280. font-weight:bold;
  281. }
  282. .invoice-box table tr.details td{
  283. padding-bottom:20px;
  284. }
  285. .invoice-box table tr.item td{
  286. border-bottom:1px solid #eee;
  287. }
  288. .invoice-box table tr.item.last td{
  289. border-bottom:none;
  290. }
  291. .invoice-box table tr.total td:nth-child(2){
  292. border-top:2px solid #eee;
  293. font-weight:bold;
  294. }
  295. @media only screen and (max-width: 600px) {
  296. .invoice-box table tr.top table td{
  297. width:100%;
  298. display:block;
  299. text-align:center;
  300. }
  301. .invoice-box table tr.information table td{
  302. width:100%;
  303. display:block;
  304. text-align:center;
  305. }
  306. }
  307. </style>
  308. </head>
  309. <body class="">
  310. <div class="invoice-box">
  311. <p>
  312. Dear Sir, <br>
  313. You have an outstanding bill from revinr. To see and download the invoice please <a href="{{ url('/') }}">click here</a> <br/>
  314. N.B. Please ignore if already paid.
  315. </p>
  316. <br>
  317. <table id='tbl-content' cellpadding="0" cellspacing="0">
  318. <tr class="top">
  319. <td colspan="4">
  320. <table width="100%">
  321. <tr>
  322. <td class="">
  323. Invoice No#: {{ $invoice->invoice_code }}<br>
  324. Created: {{ date('d F, Y',strtotime($invoice->invoice_date)) }}<br>
  325. Due: {{ date('d F, Y',strtotime($invoice->due_date)) }} <br>
  326. PO No : {{ $invoice->po_no }}
  327. </td>
  328. <td>
  329. </td>
  330. </tr>
  331. </table>
  332. </td>
  333. </tr>
  334. <tr class="information">
  335. <td colspan="4">
  336. <table width="100%">
  337. <tr>
  338. <td width="50">
  339. <h4>From</h4>
  340. <!-- <img src="http://revinr.com/logo.png" style=""> -->
  341. Electronics Business Solution Ltd.<br>
  342. House#125, Road#05<br>
  343. New DOHS, Mohakhali,1212
  344. </td>
  345. <td width="50">
  346. <h4>To</h4>
  347. {{ $invoice->client?$invoice->client->name:'' }}<br>
  348. {{ $invoice->client?$invoice->client->address:'' }}
  349. </td>
  350. </tr>
  351. </table>
  352. </td>
  353. </tr>
  354. <tr class="heading">
  355. <td style='width:20px;'>Sl.</td>
  356. <td class='text-left'>
  357. Service
  358. </td>
  359. <td>Particulars</td>
  360. <td style="text-align: right">
  361. Price ({{ $invoice->currency }})
  362. </td>
  363. </tr>
  364. @if($invoice->items)
  365. <?php $indx=1; ?>
  366. @foreach($invoice->items as $row)
  367. <tr class="item">
  368. <td style='width: 20px;'>{{ $indx }}</td>
  369. <td class='text-left'>
  370. {{ $row->service?$row->service->name:'' }}
  371. </td>
  372. <td>{{ $row->particular }}</td>
  373. <td style="text-align: right">
  374. {{ $row->payable_amount }}
  375. </td>
  376. </tr>
  377. <?php $indx++; ?>
  378. @endforeach
  379. @endif
  380. <tr class="total">
  381. <?php
  382. $total=$invoice->items?$invoice->items->sum('payable_amount'):0;;
  383. $total1=$invoice->items?$invoice->items->sum('payable_amount'):0;
  384. $total2=$invoice->items?$invoice->items->sum('payable_amount'):0;
  385. $total_vat=($total1*$invoice->vat)/100;
  386. $total_tax=($total2*$invoice->tax)/100;
  387. ?>
  388. <td colspan="2">Vat ({{ $invoice->vat }}%)</td>
  389. <td colspan="2" style='text-align: right;'>
  390. {{ $total_vat }}
  391. </td>
  392. </tr>
  393. <tr class="total">
  394. <td colspan="2">Tax ({{ $invoice->tax }}%)</td>
  395. <td colspan="2" style='text-align: right;'>
  396. {{ $total_tax }}
  397. </td>
  398. </tr>
  399. <tr class="total">
  400. <td colspan="2"></td>
  401. <td colspan="2" style='text-align: right;'>
  402. <?php
  403. $total=$total+$total_vat+$total_tax;
  404. ?>
  405. Total: {{ $total }}
  406. </td>
  407. </tr>
  408. @if(!empty($invoice->notes))
  409. <tr>
  410. <td colspan="4">
  411. <br><br>
  412. Notes: {{ $invoice->notes }}
  413. </td>
  414. </tr>
  415. @endif
  416. </table>
  417. </div>
  418. <div class="footer">
  419. <table border="0" cellpadding="0" cellspacing="0">
  420. <tr>
  421. <td class="content-block">
  422. <span class="apple-link">Revinr, House#125, Lane#5, Mohakhali DOHS, Dhaka</span>
  423. </td>
  424. </tr>
  425. <tr>
  426. <td class="content-block powered-by">
  427. Powered by <a href="http://revinr.com">revinr</a>.
  428. </td>
  429. </tr>
  430. </table>
  431. </div>
  432. </body>
  433. </html>