<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
    <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
    <style>

        body
        {
            background:#f2f2f2;
        }

        .payment
        {
            border:1px solid #f2f2f2;
            height: max-content;
            padding: 10px;
            border-radius:20px;
            background:#fff;
        }
        .payment_header
        {
            background:#803d3d;
            padding:20px;
            border-radius:20px 20px 0px 0px;

        }

        .check
        {
            margin:0px auto;
            width:50px;
            height:50px;
            border-radius:100%;
            background:#fff;
            text-align:center;
        }

        .check i
        {
            vertical-align:middle;
            line-height:50px;
            font-size:30px;
        }

        .content
        {
            text-align:center;
        }

        .content  h1
        {
            font-size:25px;
            padding-top:25px;
        }

        .content a
        {
            width:200px;
            height:35px;
            color:#fff;
            border-radius:30px;
            padding:5px 10px;
            background:#803d3d;
            transition:all ease-in-out 0.3s;
        }

        .content a:hover
        {
            text-decoration:none;
            background:#000;
        }

    </style>
    <title>Jamjoom</title>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-6 mx-auto mt-5">
            <div class="payment">
                @if($payment['status'] == 'paid')
                    <div class="payment_header">
                        <div class="check"><i style="color:green" class="fa fa-check" aria-hidden="true"></i></div>
                    </div>
                    <div class="content">
                    <h1>Payment Success !</h1>
                    <div class="d-flex justify-content-between pr-4 pl-4">
                        <p style="text-align: right;font-weight: bold">Status :</p>
                        <p style="text-align: left;">{{$payment['status']}}</p>
                    </div>
                    <div class="d-flex justify-content-between pr-4 pl-4">
                        <p style="text-align: right;font-weight: bold">Transaction ID :</p>
                        <p style="display:block !important">{{$payment['id']}}</p>
                    </div>
                    <div class="d-flex justify-content-between pr-4 pl-4">
                        <p style="text-align: right;font-weight: bold">Amount :</p>
                        <p style="text-align: left;">{{$payment['amount'] / 100}}</p>
                    </div>

                    <div class="d-flex justify-content-between pr-4 pl-4">
                        <p style="text-align: right;font-weight: bold">Payment Type :</p>
                        <p style="text-align: left;">{{$payment['source']['type']}}</p>
                    </div>
                </div>
                @else
                    <div class="payment_header">
                        <div class="check"><i style="color:red" class="fa fa-times" aria-hidden="true"></i></div>
                    </div>
                    <div class="content">
                    <h1>Payment Failed !</h1>
                    <div class="d-flex justify-content-between pr-4 pl-4">
                        <p style="text-align: right;font-weight: bold">Status :</p>
                        <p style="text-align: left;">{{$payment['status']}}</p>
                    </div>
                    <div class="d-flex justify-content-between pr-4 pl-4">
                        <p style="text-align: right;font-weight: bold">Transaction ID :</p>
                        <p style="text-align: left;">{{$payment['id']}}</p>
                    </div>
                    <div class="d-flex justify-content-between pr-4 pl-4">
                        <p style="text-align: right;font-weight: bold">Amount :</p>
                        <p style="text-align: left;">{{$payment['amount']}}</p>
                    </div>
                </div>
                @endif
            </div>
        </div>
    </div>
</div>
</body>
</html>
