@extends('layouts.main')

@section('content')
<div class="container mt-5">
    <h2 class="text-center">Bonuses & Promotions</h2>
    <div class="bonus-container mt-3">
        <ul class="nav nav-tabs d-flex">
            <li class="nav-item w-50 text-center">
                <a class="nav-link active" data-bs-toggle="tab" href="#casinoBonus">🎁 Casino Bonus</a>
            </li>
            <li class="nav-item w-50 text-center">
                <a class="nav-link" data-bs-toggle="tab" href="#bonusHistory">📁 Bonus History</a>
            </li>
        </ul>

        <div class="tab-content">
            <div class="tab-pane fade show active" id="casinoBonus">
                <div class="bonus-section">
                    <h5>Active Bonuses</h5>
                </div>
                <div class="paragraph-section">
                    <p>No ACTIVE bonus found!</p>
                </div>
                <div class="bonus-section">
                    <h5>Available Bonuses</h5>
                    <p>* You can claim one bonus at a time!</p>
                </div>
                <div class="paragraph-section">
                    <p>No BONUS available!</p>
                </div>
            </div>

            <div class="tab-pane fade" id="bonusHistory">
                <div class="table-container">
                    <div class="table-responsive">
                        <table class="table table-custom table-bordered text-center align-middle">
                            <thead>
                                <tr>
                                    <th>SR No.</th>
                                    <th>Bonus Type</th>
                                    <th>Bonus Details</th>
                                    <th>Status</th>
                                    <th>Claim Date</th>
                                    <th>Details</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>1</td>
                                    <td>Losing Bonus</td>
                                    <td>Winbook_LOSING_BONUS</td>
                                    <td><span class="badge bg-danger">FORFEITED</span></td>
                                    <td>5/2/2025, 10:23:44 am</td>
                                    <td>
                                        Bonus Wallet Id: 779477<br>
                                        Bonus Amount: 310<br>
                                        Expiry date: 11/2/2025, 11:59:59 pm<br>
                                        Coefficient WR: 10000<br>
                                        Fulfilled WR: 275<br>
                                        Remaining WR: 3099725<br>
                                        Total: 3100000
                                    </td>
                                </tr>
                                <tr>
                                    <td>2</td>
                                    <td>Losing Bonus</td>
                                    <td>Winbook_LOSING_BONUS</td>
                                    <td><span class="badge bg-danger">FORFEITED</span></td>
                                    <td>3/2/2025, 1:27:26 pm</td>
                                    <td>
                                        Bonus Wallet Id: 774348<br>
                                        Bonus Amount: 2993<br>
                                        Expiry date: 10/2/2025, 11:59:59 pm<br>
                                        Coefficient WR: 10000<br>
                                        Fulfilled WR: 10050<br>
                                        Remaining WR: 29919950<br>
                                        Total: 29930000
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div> 
        </div>
    </div>
</div>
@endsection
@section('css')
<style>
    body {
        background-color: #141c2b;
        color: white;
    }
    .bonus-container {
        max-width: 1000px;
        margin: auto;
        background-color: #3c4453;
        border-radius: 10px;
        border-bottom: whitesmoke solid 2px;
        border-top: whitesmoke solid 2px;

    }
    h2 {
        font-weight: 700;
    }
    .nav-tabs {
        border-bottom: none;
        background: #0d1117;
        border-radius: 10px 10px 0 0;
    }
    .nav-tabs .nav-link {
        color: whitesmoke;
        font-weight: bold;
        border: none;
        padding: 12px;
    }
    .nav-tabs .nav-link.active {
        background-color: #f5f5f6;
        color: black;
        border-radius: 10px 10px 0 0;
    }
    .tab-content {
        border-radius: 0 0 10px 10px;
        background: #3c4453;

    }
    .bonus-section {
        background-color: #1a2335;
        padding: 15px;
        border-left: 5px solid #00a86b;
        border-radius: 5px;
        margin-bottom: 10px;
    }
    .bonus-section:nth-child(odd) {
        border-left: 5px solid #007bff;
    }
    .bonus-section h5 {
        margin-bottom: 10px;
        font-size: 16px;
    }
    .paragraph-section {
        text-align: center;
        margin: 40px;
    }
    .table-container {
        background-color: #1a2335;
        border-radius: 10px;
    }
    .table-custom {
        width: 100%;
        background-color: #141c2b !important;
        border-radius: 10px;
    }
    .table-custom th {
        background-color: #2a3345;
        color: white;
        border-color: #394867;
    }
    .table-custom td {
        border-color: #2a3345;
        color: #ddd;
    }
    .badge {
        font-size: 14px;
        padding: 5px 10px;
    }

    .table-container {
        background-color: transparent;
        padding: 20px;
        border-radius: 10px;
    }
    .table-custom {
        width: 100%;
        background-color: transparent !important;
        border-radius: 10px;
    }
    .table-custom th {
        background-color: rgba(42, 51, 69, 0.6); /* Semi-transparent */
        color: white;
        border-color: rgba(255, 255, 255, 0.2);
    }
    .table-custom td {
        border-color: rgba(255, 255, 255, 0.2);
        color: #ddd;
        background-color: rgba(20, 28, 43, 0.3); /* Light transparent */
    }
</style>
@endsection