

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">

    <title>Hello, world!</title>
</head>
<body>

<div class="container">
    <div class="col-lg-6 col-sm-6 col-md-6 mx-auto my-auto" style="">
        <div class="card">
            <div class="card-header text-center text-white">
            
            </div>
            <div class="card-body">
                <table class="table table-striped text-center text-white">
                    <tr class="text-white">
                        <th>Date</th>
                        <th>Amount</th>
                        <th>Status</th>
                       
                    </tr>
                    @forelse($list as $ll)
                    <tr class="text-white">
                        <td>{{$ll->created_at->format('d-m-Y')}}</td>
                        <td>{{$ll->ammount}}</td>
                        <td>
                            @if($ll->status == 0)
                            Requested
                            @elseif($ll->status == 1)
                            Accepted
                            @elseif($ll->status == 2)
                            Rejected
                            @endif
                        </td>
                   
                    </tr>
                    @empty
                    @endforelse
                  
                </table>
            </div>
        </div>
    </div>
  
</div>
@include('user.script')

<!-- Bootstrap JS and Popper.js scripts -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>

</body>
</html>

<style>
    body {
        margin: 0;
        padding: 0;
        box-sizing:border-box;
        background: #181a20;
    }

    .container {
        position: relative;
        min-height: 100vh;
        display: flex;
        align-items: center;
        background: #181a20;
    }

    .col-lg-6 {
        position: absolute;
        top: 30%;
        left: 30%;
        transform: translate(-30%, -30%);
        width:100%;
        background: #181a20;
        height:51%;
    }

    .card {
        width:70%;
        margin: 0 auto;
        background:#16202d;
    }

    .div_after_header .div_af_img img {
        width:26%;
    }

    .div_header h4 {
        font-size:25px;
        font-weight:300;
    }

    p {
        font-size:18px;color:#96abb5;font-weight:400;
    }

    .before_button {
        background: #1f2e3d;
    }

    .before_button .bbb {
        display:flex;
        flex-direction:row;
        justify-content:space-between;
        background: #1f2e3d;
        height:30px;
    }

    @media (max-width: 768px) {
        .div_header h4 {
            font-size:16px;
            font-weight:300;
        }

        .div_after_header .div_of_p p {
            font-size: 14px;
        }

        .div_after_header .div_af_img img {
            width:36%;
            object-fit: cover;
        }
        .div_header h4 {
            font-size:15px;
            font-weight:300;
        }
        .card .card-header h3{
            font-size:16px;
        }
        .card .card-body table tr{
            font-size:12px;
        }
    }
    @media (max-width: 500px) {
        .div_header h4 {
            font-size:13px;
            font-weight:300;
        }
        .card .card-header h3{
            font-size:15px;
        }
        .card .card-body table tr{
            font-size:5px;
        }

    }
    @media (max-width: 600px) {
        .div_header h4 {
            font-size:15px;
            font-weight:300;
        }
        .card .card-header h3{
            font-size:16px;
        }
        .card .card-body table tr{
            font-size:12px;
        }

    }
    @media (max-width: 900px) {
        .div_header h4 {
            font-size:15px;
            font-weight:300;
        }
        .card .card-header h3{
            font-size:16px;
        }
        .card .card-body table tr{
            font-size:12px;
        }

    }
    @media (max-width: 1200px) {
        .div_header h4 {
            font-size:15px;
            font-weight:300;
        }
        .card .card-header h3{
            font-size:16px;
        }
        .card .card-body table tr{
            font-size:12px;
        }

    }

    /* Fix for modal backdrop visibility */
    .modal {
        z-index: 1050;
    }
    .custom-modal.show .modal-backdrop {
        z-index: 1050; /* Adjust the value as needed */
        background-color: rgba(0, 0, 0, 0.5); /* Adjust the background color and transparency as needed */
    }
</style>


    
<script>
    // JavaScript to handle the click event and show the modal
    document.getElementById('openModalIcon').addEventListener('click', function () {
        var myModal = new bootstrap.Modal(document.getElementById('myModals'));
        myModal.show();
    });
</script>