@extends('layouts.master')

@section('title', 'Invoice')

@section('content')

<style>
    @media print {
        .col-lg-8 {
            width: 66.66666667%;
        }



        .col-lg-1,
        .col-lg-10,
        .col-lg-11,
        .col-lg-12,
        .col-lg-2,
        .col-lg-3,
        .col-lg-4,
        .col-lg-5,
        .col-lg-6,
        .col-lg-7,
        .col-lg-8,
        .col-lg-9 {
            float: left;
        }

        .col-md-1,
        .col-md-10,
        .col-md-11,
        .col-md-12,
        .col-md-2,
        .col-md-3,
        .col-md-4,
        .col-md-5,
        .col-md-6,
        .col-md-7,
        .col-md-8,
        .col-md-9 {
            float: left;
        }

        .col-sm-8 {
            width: 66.66666667%;
        }

        .col-sm-1,
        .col-sm-10,
        .col-sm-11,
        .col-sm-12,
        .col-sm-2,
        .col-sm-3,
        .col-sm-4,
        .col-sm-5,
        .col-sm-6,
        .col-sm-7,
        .col-sm-8,
        .col-sm-9 {
            float: left;
        }

        .col-lg-1,
        .col-lg-10,
        .col-lg-11,
        .col-lg-12,
        .col-lg-2,
        .col-lg-3,
        .col-lg-4,
        .col-lg-5,
        .col-lg-6,
        .col-lg-7,
        .col-lg-8,
        .col-lg-9,
        .col-md-1,
        .col-md-10,
        .col-md-11,
        .col-md-12,
        .col-md-2,
        .col-md-3,
        .col-md-4,
        .col-md-5,
        .col-md-6,
        .col-md-7,
        .col-md-8,
        .col-md-9,
        .col-sm-1,
        .col-sm-10,
        .col-sm-11,
        .col-sm-12,
        .col-sm-2,
        .col-sm-3,
        .col-sm-4,
        .col-sm-5,
        .col-sm-6,
        .col-sm-7,
        .col-sm-8,
        .col-sm-9,
        .col-xs-1,
        .col-xs-10,
        .col-xs-11,
        .col-xs-12,
        .col-xs-2,
        .col-xs-3,
        .col-xs-4,
        .col-xs-5,
        .col-xs-6,
        .col-xs-7,
        .col-xs-8,
        .col-xs-9 {
            position: relative;
            min-height: 1px;
            padding-right: 15px;
            padding-left: 15px;
        }

        * {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }

        div {
            display: block;
        }

        #print-area {
            /* box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.5); */
            border: 2px solid #3a5795;
            padding: 0px 30px 30px 30px;
            /* font-family: 'Libre Baskerville', serif; */
            font-family: 'Dosis', sans-serif;
            background: #fff;
            max-width: 800px !important;
            margin: auto !important;
        }

        body {
            font-family: 'Open Sans', sans-serif;
            /* background: #fff; */
            background: #e8e8e8;
        }

        body {
            font-family: Lora, 'Times New Roman', serif;
            font-size: 20px;
            color: #404040;
        }

        body {
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            font-size: 14px;
            line-height: 1.42857143;
            color: #333;
            background-color: #fff;
        }

        html {
            font-size: 10px;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        }

        html {
            font-family: sans-serif;
            -webkit-text-size-adjust: 100%;
            -ms-text-size-adjust: 100%;
        }


        .col-lg-4 {
            width: 33.33333333%;
        }

        .col-lg-1,
        .col-lg-10,
        .col-lg-11,
        .col-lg-12,
        .col-lg-2,
        .col-lg-3,
        .col-lg-4,
        .col-lg-5,
        .col-lg-6,
        .col-lg-7,
        .col-lg-8,
        .col-lg-9 {
            float: left;
        }


        .col-md-4 {
            width: 33.33333333%;
        }

        .col-md-1,
        .col-md-10,
        .col-md-11,
        .col-md-12,
        .col-md-2,
        .col-md-3,
        .col-md-4,
        .col-md-5,
        .col-md-6,
        .col-md-7,
        .col-md-8,
        .col-md-9 {
            float: left;
        }

        .col-sm-4 {
            width: 33.33333333%;
        }

        .col-sm-1,
        .col-sm-10,
        .col-sm-11,
        .col-sm-12,
        .col-sm-2,
        .col-sm-3,
        .col-sm-4,
        .col-sm-5,
        .col-sm-6,
        .col-sm-7,
        .col-sm-8,
        .col-sm-9 {
            float: left;
        }

        .col-lg-1,
        .col-lg-10,
        .col-lg-11,
        .col-lg-12,
        .col-lg-2,
        .col-lg-3,
        .col-lg-4,
        .col-lg-5,
        .col-lg-6,
        .col-lg-7,
        .col-lg-8,
        .col-lg-9,
        .col-md-1,
        .col-md-10,
        .col-md-11,
        .col-md-12,
        .col-md-2,
        .col-md-3,
        .col-md-4,
        .col-md-5,
        .col-md-6,
        .col-md-7,
        .col-md-8,
        .col-md-9,
        .col-sm-1,
        .col-sm-10,
        .col-sm-11,
        .col-sm-12,
        .col-sm-2,
        .col-sm-3,
        .col-sm-4,
        .col-sm-5,
        .col-sm-6,
        .col-sm-7,
        .col-sm-8,
        .col-sm-9,
        .col-xs-1,
        .col-xs-10,
        .col-xs-11,
        .col-xs-12,
        .col-xs-2,
        .col-xs-3,
        .col-xs-4,
        .col-xs-5,
        .col-xs-6,
        .col-xs-7,
        .col-xs-8,
        .col-xs-9 {
            position: relative;
            min-height: 1px;
            padding-right: 15px;
            padding-left: 15px;
        }



        //*******


        p,
        label {
            font-size: 15;
        }

        p strong,
        label strong {
            font-size: 15px;
        }

        .sub-heading {
            /*border-top:1px solid #3a5795;
    border-bottom:1px solid #3a5795;*/
        }

        .amountbox {
            border: 2px solid #3a5795;
        }

        .tbl-invoice {
            width: 100%;
            max-width: 100%;
            margin-bottom: 20px;
        }

        .panel-default {
            border: 2px solid #3a5795;
            width: 50%;


        }

        .panel-default .panel-heading {
            background: #3a5795;
            color: white;
        }

        #DataTables_Table_0_filter {
            display: none;
        }

        thead {
            background: #3a5795;
            color: white;
        }

        td {
            padding-left: 10px;
        }

        .final-total {
            background: green;
            color: white;
        }

        .terms {

            border: 2px solid #3a5795;
            padding: 10px;


        }


        #print-area {
            /*box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.5);*/
            border: 2px solid #3a5795;
            padding: 0px 30px 30px 30px;
            /*font-family: 'Libre Baskerville', serif;*/
            font-family: 'Roboto Condensed', sans-serif;
            background: #fff;
            max-width: 800px !important;
            margin: auto !important;

        }

        .tophr {
            padding-bottom: 0px;
            top: 0;
        }

        .tophr p {
            padding-bottom: 0px !important;
        }

        .change-btn {
            border: 2px solid #3a5795;
            color: #3a5795;

            border-radius: 50px;
            padding: 10px;
        }

        .change-btn:focus,
        .change-btn:hover {
            text-decoration: none !important;
            background: #3a5795;
            cursor: pointer;
            color: white;
        }

        p span {
            font-size: 50px;
            font-weight: bold;

        }

        .change-btn,
        .btn,
        .note {
            opacity: 0;
        }


        .lbl {
            text-align: right;
        }

        .amountbox {
            text-align: right;
        }
    }
</style>


<style>
    a,
    .btn,
    .note {
        opacity: 1;
    }

    p,
    label {
        font-size: 15;
    }

    p strong,
    label strong {
        font-size: 15px;
    }

    .sub-heading {
        /*border-top:1px solid #3a5795;
    border-bottom:1px solid #3a5795;*/
    }

    .amountbox {
        border: 2px solid #3a5795;
    }

    .tbl-invoice {
        width: 100%;
        max-width: 100%;
        margin-bottom: 20px;
    }

    .panel-default {
        border: 2px solid #3a5795;
        width: 50%;


    }

    .panel-default .panel-heading {
        background: #3a5795;
        color: white;
    }

    #DataTables_Table_0_filter {
        display: none;
    }

    thead {
        background: #3a5795;
        color: white;
    }

    td {
        padding-left: 10px;
    }

    .final-total {
        background: green;
        color: white;
    }

    .terms {

        border: 2px solid #3a5795;
        padding: 10px;


    }


    #print-area {
        /*box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.5);*/
        border: 2px solid #3a5795;
        padding: 0px 30px 30px 30px;
        /*font-family: 'Libre Baskerville', serif;*/
        font-family: 'Roboto Condensed', sans-serif;
        background: #fff;
        max-width: 800px !important;
        margin: auto !important;

    }

    .tophr {
        padding-bottom: 0px;
        top: 0;
    }

    .tophr p {
        padding-bottom: 0px !important;
    }

    .change-btn {
        border: 2px solid #3a5795;
        color: #3a5795;

        border-radius: 50px;
        padding: 10px;
    }

    .change-btn:focus,
    .change-btn:hover {
        text-decoration: none !important;
        background: #3a5795;
        cursor: pointer;
        color: white;
    }

    p span {
        font-size: 50px;
        font-weight: bold;

    }
</style>

<div class="container outer-section">


    <div id="print-area">
        <div class="row pad-top font-big tophr">
            <div class="col-lg-8 col-md-8 col-sm-8">


                <p> <span>KIKMA (PVT) LTD </span><br> <strong>Address :</strong> #19 New Negombo Road,
                    Colombo 15, Srilanka.<br>
                    <strong>Support : </strong>kikma.pvt.ltd@gmail.com
                    <br>
                    <strong>Call :</strong>+94 117410410<br>
                    <strong>Phone :</strong>+94 773144553<br></p>

                <div class="">
                    <div class="">
                        <h3></h3>
                    </div>
                    <div class="">


                        <p><strong> Client Details :</strong><br>
                            <strong>Name:</strong> {{$user->title }}. {{ $user->name }}
                            <br>
                            <strong> Address: </strong>
                            {{ $user->no }},
                            {{$user->street}},
                            <!-- { {$user->city->name} } <br>     -->

                            {{ $user->city->area->district->name }} <br>
                            <STRONG>Email</STRONG>
                            {{ $user->email }} <br>
                            <strong> Phone : </strong>
                            {{ $user->phone }} </p>
                        <!-- <hr> -->




                    </div>
                </div>



            </div>
            <div class="col-md-4 col-lg-4 col-sm-4">
                <div style="height: 70px;"> </div>
                <!-- <p>Invoice</p> -->
                <p><strong>Invoice No: </strong>#{{ $invoice->invoice_id }} <br>

                    <strong>Invoice Date:</strong> {{ $invoice->created_at }} <br>

                    <strong>Purchased On:</strong> {{$items->max('created_at')}} <br>
                    <!-- <label><strong>Amount : </strong>{{$invoice->total}} RS</label> -->
                    <strong>Delivery Status : </strong>{{$invoice->status}}</p>



                <div class="">
                    @if($invoice->temp_add_street != null)
                    <p><strong> Delivery Location</strong> <br>