@extends('layouts.simple.master')

@section('title', 'Default')

@section('css')

@endsection

@section('style')
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/vendors/animate.css') }}">
@endsection
@section('breadcrumb-title')
<h3>IB Reports</h3>
@endsection
<style>
 

.card-transaction-report,
.card-trade-report,
.card-live-account-report,
.card-commission-summary-report,
.card-analytics-report {
    position: relative;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.card-transaction-report {
    background-color: #28a745; /* Green for Transaction Report */
    color: white;
}

.card-trade-report {
    background-color: #007bff; /* Blue for Trade Report */
    color: white;
}

.card-live-account-report {
    background-color: #ffc107; /* Yellow for Live Account Report */
    color: black;
}

.card-commission-summary-report {
    background-color: #17a2b8; /* Teal for Commission Summary Report */
    color: white;
}

.card-analytics-report {
    background-color: #dc3545; /* Red for Analytics Report */
    color: white;
}

.card-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.card-content i {
    font-size: 36px;
    margin-bottom: 10px;
    padding: 15px;
    background-color: white;
    border-radius: 50%;
    border: 3px solid #fff;
    transition: transform 0.3s ease;
}

.card-content h6 {
  color:#fff;
    font-size: 16px;
    font-weight: bold;
    margin: 0;
}

.card-transaction-report:hover,
.card-trade-report:hover,
.card-live-account-report:hover,
.card-commission-summary-report:hover,
.card-analytics-report:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.card-transaction-report:hover .card-content i,
.card-trade-report:hover .card-content i,
.card-live-account-report:hover .card-content i,
.card-commission-summary-report:hover .card-content i,
.card-analytics-report:hover .card-content i {
    transform: scale(1.1);
}

.card-transaction-report:hover .card-content h6,
.card-trade-report:hover .card-content h6,
.card-live-account-report:hover .card-content h6,
.card-commission-summary-report:hover .card-content h6,
.card-analytics-report:hover .card-content h6 {
    color: #ffffff;
}
</style>
@section('breadcrumb-items')
<li class="breadcrumb-item">IB Reports</li>
@endsection
@section('content')
        <div class="container-fluid">
            <div class="row justify-content-center">
                <div class="col-md-12">
                    
                    <div class="row">
                      <div class="col-md-3 mb-3">
                        <a href="{{ route('trader_transaction_report') }}" style="text-decoration: none; color: inherit;">
                            <div class="card-transaction-report">
                                <div class="card-content">
                                    <i class="fas fa-chart-line text-success"></i>
                                    <h6>Trader Transaction Report</h6>
                                </div>
                            </div>
                        </a>
                      </div>

                        <div class="col-md-3 mb-3">
                          <a href="{{ route('trader_trade_report') }}" style="text-decoration: none; color: inherit;">
                            <div class="card-trade-report">
                                <div class="card-content">
                                    <i class="fas fa-users text-primary"></i>
                                    <h6>Trader Trade Report</h6>
                                </div>
                            </div>
                          </a>
                        </div>
                        <div class="col-md-3 mb-3">
                          <a href="{{ route('trader_live_account_report') }}" style="text-decoration: none; color: inherit;">
                            <div class="card-live-account-report">
                                <div class="card-content">
                                    <i class="fas fa-cogs text-warning"></i>
                                    <h6>Trader Live Account Report</h6>
                                </div>
                          </a>
                            </div>
                        </div>
                        <div class="col-md-3 mb-3">
                          <a href="{{ route('trader_commission_summary_report') }}" style="text-decoration: none; color: inherit;">
                            <div class="card-commission-summary-report">
                                <div class="card-content">
                                    <i class="fas fa-piggy-bank text-info"></i>
                                    <h6>Trader Commission Summary Report</h6>
                                </div>
                            </div>
                          </a>
                        </div>
                        <div class="col-md-3 mb-3">
                          <a href="{{ route('trader_analytics_report') }}" style="text-decoration: none; color: inherit;">
                            <div class="card-analytics-report">
                                <div class="card-content">
                                    <i class="fas fa-chart-pie text-danger"></i>
                                    <h6>Trader Analytics Report</h6>
                                </div>
                            </div>
                          </a>
                        </div>
                        <div class="col-md-3 mb-3">
                            <div class="card-transaction-report">
                                <div class="card-content">
                                    <i class="fas fa-chart-line text-success"></i>
                                    <h6>Sub IB Transaction Report</h6>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 mb-3">
                            <div class="card-trade-report">
                                <div class="card-content">
                                    <i class="fas fa-users text-primary"></i>
                                    <h6>Sub IB Trade Report</h6>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 mb-3">
                            <div class="card-live-account-report">
                                <div class="card-content">
                                    <i class="fas fa-cogs text-warning"></i>
                                    <h6>Sub IB Live Account Report</h6>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 mb-3">
                            <div class="card-commission-summary-report">
                                <div class="card-content">
                                    <i class="fas fa-piggy-bank text-info"></i>
                                    <h6>Sub IB Commission Summary Report</h6>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 mb-3">
                            <div class="card-analytics-report">
                                <div class="card-content">
                                    <i class="fas fa-chart-pie text-danger"></i>
                                    <h6>Sub IB Analytics Report</h6>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>

        
      </div>

     

      <!-- footer start-->
            
<script type="text/javascript">
	var session_layout = '{{ session()->get('
	layout ') }}';
</script>
@endsection

@section('script')
<script src="{{ asset('assets/js/clock.js') }}"></script>
<script src="{{ asset('assets/js/chart/apex-chart/moment.min.js') }}"></script>
<script src="{{ asset('assets/js/notify/bootstrap-notify.min.js') }}"></script>
<script src="{{ asset('assets/js/dashboard/default.js') }}"></script>
<script src="{{ asset('assets/js/notify/index.js') }}"></script>
<script src="{{ asset('assets/js/typeahead/handlebars.js') }}"></script>
<script src="{{ asset('assets/js/typeahead/typeahead.bundle.js') }}"></script>
<script src="{{ asset('assets/js/typeahead/typeahead.custom.js') }}"></script>
<script src="{{ asset('assets/js/typeahead-search/handlebars.js') }}"></script>
<script src="{{ asset('assets/js/typeahead-search/typeahead-custom.js') }}"></script>
<script src="{{ asset('assets/js/height-equal.js') }}"></script>
<script src="{{ asset('assets/js/animation/wow/wow.min.js') }}"></script>
<script src="{{ asset('assets/js/chart/apex-chart/apex-chart.js') }}"></script>
<script src="{{ asset('assets/js/chart/apex-chart/stock-prices.js') }}"></script>
<script src="{{ asset('assets/js/datatable/datatables/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('assets/js/datatable/datatables/datatable.custom.js') }}"></script>
@endsection