

<!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">
    <script src= 
    "https://code.jquery.com/jquery-3.6.0.min.js"
    integrity= 
"sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" 
    crossorigin="anonymous"> 
    </script>

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


    <div class="container">
        <div class="row mb-3">
            <div class="col-lg-8 col-sm-6 col-md-6 mx-auto my-auto" style="">
                <div class="card abc">
                    <div class="card-header text-white">
                        <h3 style="font-size:15px;">Balance 
                            @if($ms)
                            {{$ms->total}}$
                            @else
                            0$
                            @endif </h3>
                    </div>
                    <form action="{{ route('invest.insert') }}" method="POST">
                        @csrf
                        @if(session('error'))
                        <div class="alert alert-danger" role="alert">
                            {{session('error')}}
                          </div>
                        @endif

                       
                        <div class="card-body">
                            <div class="mb-3">
                                <label for="minimumAmount" class="form-label text-white">*Minimum Amount: 100$</label>
                            </div>
                            <div class="mb-3">
                                <label for="enterAmount" class="form-label text-white">Enter Amount</label>
                                <input type="number" name="taka" id="enterAmount" style="background-color:#16202d;color:white;" class="form-control">
                                <!-- ... Other input fields ... -->
                            </div>
                            <div class="mb-3">
                                <label for="timePeriod" class="form-label text-white">Select A Month</label>
                                <select name="time_period" id="timePeriod" class="form-control" style="background-color:#16202d;color:white;">
                                    <option value=""> ---Select A Month----</option>
                                    <option value="2" class="">2</option>
                                    <option value="3" class="">3</option>
                                    <option value="6" class="">6</option>
                                    <option value="12" class="">12</option>
                                    <option value="24" class="">24</option>
                                    <option value="36" class="">36</option>
                                </select>
                            </div>
                            <div class="mb-3">
                                <button type="submit" class="btn btn-primary">Buy Package</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="row mt-5">
                    
            @forelse($invest_money_record as $key=>$invest)
            <div class="col-lg-6 col-sm-6 col-md-6">
                <div class="card">
       
       <div class="card-body">
        <form action="{{route('invest.money_to_admin')}}" method="POST">
            @csrf
       
     
        <div class="mb-3">
            {{-- <label for="" class="form-label text-white">Invested Dollar:</label> --}}
            <input type="text" style="background-color:#16202d;color:white;" name="invest_tk"  class="form-control" readonly value="{{$invest->Tk}}$" >
        </div>
        @if($invest->req_for_withdraw == 'accepted')
      
      
        @endif
       
    
        <div class="mb-3">
            <label for="" class="form-label text-white"> Date : {{$invest->created_at->format('d-m-Y')}}</label>
        </div>
        @if($invest->req_for_withdraw == 'accepted')
        <div class="mb-3">
          
            <label for="" class="form-label"> package End At : {{$invest->end_package_time}}</label>
            
        </div>
     
        @endif
        @if($invest_limit)
        @if($invest_limit->invest_limit<=$invest->Tk)
        
        <div class="mb-3">
            <label for="" class="form-label text-white">Months: {{$invest->time_period}}</label>
           
        </div>
        @else

        @endif
        @if($invest->withdraw == 1)
        <div class="alert alert-danger" role="alert">
            Your Daily Profit Time Is Over
            
          </div>
      <div class="d-flex justify-content-between">
        <a href="{{route('user.daily_porfit_pertially',$invest->id)}}" class="btn btn-primary btn-sm">Check The Daily Profit</a>

        @if($invest->req_for_withdraw == 'requested')
        <a href="{{route('user.request_for_withdrawl',$invest->id)}}" class="btn btn-danger btn-sm ml-2">You Have Requested For Withdraw Of This Package</a>

        @elseif($invest->req_for_withdraw == 'accepted')
  
        @else
        <a href="{{route('user.request_for_withdrawl',$invest->id)}}" class="btn btn-danger btn-sm ml-2">Request For Withdraw</a>
        @endif
      </div>
          
     
        @elseif($invest->time_period && $invest->status == null)
        <div class="alert alert-success" role="alert">
            Requested To The Admin Please Wait For Accept
          </div>
@elseif($invest->time_period && $invest->status == 1)

@else
<div class="mb-3">
<button class="btn btn-primary">Submit</button>
</div>
        @endif
       
        @endif
    </form>
       </div>
                </div>
            </div>
            @empty
            
            <div class="card mx-auto bg-primary" style="position: relative;">
                <div class="card-body" style="">
                    <div class="alert alert-danger my-auto" role="alert">
                        <h6 class="my-auto">Sorry, no amount has been inserted by you!</h6>
                    </div>
                </div>
            </div>
            @endforelse
           
           
        </div>
    </div>
    @if(session('error'))
    <script>
      Swal.fire({
    icon: "error",
    title: "Oops...",
    text: '{{session('error')}}',
  
  });
       </script>
    @endif 

@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>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

</body>
</html>

<style>
    body {
        margin: 0;
        padding: 0;
        box-sizing:border-box;
        background: #181a20;
    }
    .card {
       
        margin: 0 auto;
        background:#16202d;
        margin-top:20%;
    }
    /* .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:8px;
        }
        .card .card-body table td{
            font-size:8px;
        }

    }
    @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>