@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') }}">

<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/vendors/datatables.css') }}">

@endsection
<style>
.icon-circle {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.bg-orange {
	background-color: #ff8c00;
}

/* Flexbox styling to align icon and text side by side */
.counter-card {
    display: flex;
    align-items: center;
    padding: 15px;
    border-radius: 8px;
    color: #fff;
    width: 48%;
}

/* Icon styling */
.counter-card i {
    font-size: 24px;
    margin-right: 10px;
}

/* Text styling */
.counter-info h6 {
    font-size: 1rem;
    margin: 0;
}

.counter-info .counter-value {
    font-size: 1.5rem;
    font-weight: bold;
    margin: 0;
}

/* Colorful backgrounds for each counter card */
.active-trader {
    background: linear-gradient(135deg, #42a5f5, #1e88e5); /* Blue gradient */
}

.active-ib {
    background: linear-gradient(135deg, #66bb6a, #43a047); /* Green gradient */
}

</style> @section('breadcrumb-title')
<h3>IB Dashboard</h3> @endsection @section('breadcrumb-items')
<li class="breadcrumb-item">IB Dashboard</li> 
@endsection
@section('content')
<div class="container-fluid">
	<div class="row justify-content-center">
		<div class="col-md-12">
			<form>
                <div class="card p-4">
                    <div class="body">
                        <div class="row">
                            <div class="col-md-5">
                                <label for="start-date">From</label>
                                <input type="date" id="start-date" class="form-control" required> </div>
                            <div class="col-md-5">
                                <label for="end-date">To</label>
                                <input type="date" id="end-date" class="form-control" required> </div>
                            <div class="col-md-2 text-end mt-4">
                                <label for=""></label>
                                <button type="submit" class="btn btn-primary w-100">Search</button>
                                <!-- Changed btn-block to w-100 -->
                            </div>
                        </div>
                    </div>
                </div>
			</form>
			<div class="row">
				<!-- Left Side (Cards) -->
				<div class="col-md-6 col-sm-6">
                    <div class="card">
                        <div class="card-header">
                            <h5>Statistics Count <i class="fa fa-info-circle" style="font-size: 0.75em;"></i></h5>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <!-- Withdrawn Commission Card -->
                                <div class="col-md-6 col-sm-6 ">
                                    <div class="card widget-1">
                                        <div class="card-body">
                                            <div class="widget-content">
                                                <div class="widget-round success">
                                                    <div class="bg-round"> <i class="fas fa-tag fa-2x text-success" style="font-size: 18px;"></i> </div>
                                                </div>
                                                <div>
                                                    <h4>0</h4><span class="f-light">Withdrawn <br>Commission</span> </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- Available Commission Card -->
                                <div class="col-md-6 col-sm-6 ">
                                    <div class="card widget-1">
                                        <div class="card-body">
                                            <div class="widget-content">
                                                <div class="widget-round secondary">
                                                    <div class="bg-round"> <i class="fas fa-box fa-2x" style="color:#3293EA;font-size: 18px;"></i> </div>
                                                </div>
                                                <div>
                                                    <h4>0</h4><span class="f-light">Available <br>Commission</span> </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- Total Volume Card -->
                                <div class="col-md-6 col-sm-6">
                                    <div class="card widget-1">
                                        <div class="card-body">
                                            <div class="widget-content">
                                                <div class="widget-round warning">
                                                    <div class="bg-round"> <i class="fas fa-chart-line fa-2x" style="color:#ffaa05;font-size: 18px;"></i> </div>
                                                </div>
                                                <div>
                                                    <h4>0</h4><span class="f-light">Total <br>Volume</span> </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- Total Clients Card -->
                                <div class="col-md-6 col-sm-6">
                                    <div class="card widget-1">
                                        <div class="card-body">
                                            <div class="widget-content">
                                                <div class="widget-round info">
                                                    <div class="bg-round"> <i class="fas fa-users fa-2x" style="font-size: 18px;"></i> </div>
                                                </div>
                                                <div>
                                                    <h4>0</h4><span class="f-light">Total <br>Clients</span> </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
				</div>
				<div class="col-md-6 col-sm-6">
                    <div class="card">
                        <div class="card-header">
                            <h5>Pending <i class="fa fa-info-circle" style="font-size: 0.75em;"></i></h5>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <!-- KYC Documents Card -->
                                <div class="col-md-6 col-sm-6 ">
                                    <div class="card widget-1">
                                        <div class="card-body">
                                            <div class="widget-content">
                                                <div class="widget-round success">
                                                    <div class="bg-round"> <i class="fas fa-file-alt fa-2x text-success" style="font-size: 18px;"></i> </div>
                                                </div>
                                                <div>
                                                    <h4>0</h4><span class="f-light">KYC <br>Documents</span> </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- Live Accounts Card -->
                                <div class="col-md-6 col-sm-6 ">
                                    <div class="card widget-1">
                                        <div class="card-body">
                                            <div class="widget-content">
                                                <div class="widget-round secondary">
                                                    <div class="bg-round"> <i class="fas fa-chart-line fa-2x" style="color:#3293EA;font-size: 18px;"></i> </div>
                                                </div>
                                                <div>
                                                    <h4>0</h4><span class="f-light">Live <br>Accounts</span> </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- First Trading Deposit Card -->
                                <div class="col-md-6 col-sm-6">
                                    <div class="card widget-1">
                                        <div class="card-body">
                                            <div class="widget-content">
                                                <div class="widget-round warning">
                                                    <div class="bg-round"> <i class="fas fa-dollar-sign fa-2x" style="color:#ffaa05;font-size: 18px;"></i> </div>
                                                </div>
                                                <div>
                                                    <h4>0</h4><span class="f-light">First <br>Trading Deposit</span> </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- IB Status Card -->
                                <div class="col-md-6 col-sm-6">
                                    <div class="card widget-1">
                                        <div class="card-body">
                                            <div class="widget-content">
                                                <div class="widget-round info">
                                                    <div class="bg-round"> <i class="fas fa-user fa-2x" style="font-size: 18px;"></i> </div>
                                                </div>
                                                <div>
                                                    <h4>0</h4><span class="f-light">IB <br>Status</span> </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
				</div>
				
			</div>
			<div class="row">
				<div class="col-xxl-7 col-xl-7 col-lg-7 box-col-8 ">
                <div class="card">
                    <div class="card-header">
                        <div class="header-top d-flex justify-content-between align-items-center">
                            <div class="row align-items-center w-100">
                                <!-- Use w-100 to make the row full width -->
                                <div class="col-md-8 col-sm-12 mb-2 mb-md-0">
                                    <h5 class="mb-0">IB Analytics 
                                        <i class="fa fa-info-circle" style="font-size: 0.75em;"></i> 
                                    </h5>
                                </div>
                                <div class="col-md-4 col-sm-12 text-md-end">
                                    <!-- Right alignment for select box -->
                                    <select id="data-range" onchange="updateChart()" class="form-select">
                                        <!-- Use form-select for Bootstrap -->
                                        <option value="monthly">Monthly</option>
                                        <option value="weekly">Weekly</option>
                                        <option value="yearly">Yearly</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-body sale-chart-box" style="height:370px">
                        <div id="chart-school-performance"></div>
                    </div>
                </div>

				</div>

                <div class="col-xxl-5 col-xl-5 col-lg-5 box-col-5">
                    <div class="card">
                        <div class="card-header ">
                            <div class="header-top">
                                <div class="row align-items-center w-100">
                                    <!-- Use w-100 to make the row full width -->
                                    <div class="col-md-6 ">
                                        <h5 class="mb-0">Active Counters <i class="fa fa-info-circle" style="font-size: 0.75em;"></i> </h5> </div>
                                    <div class="col-md-6 text-end p-0">
                                        <!-- Right alignment for select box -->
                                        <select id="month-range" class="form-select">
                                            <!-- Use form-select for Bootstrap -->
                                            <option value="monthly">Current Month</option>
                                            <option value="monthly">Last Month</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="d-flex justify-content-between">
                                
                                        <!-- Active Trader Counter -->
                                        <div class="counter-card active-trader">
                                            <i class="fa fa-user text-white"></i>
                                            <div class="counter-info">
                                                <h6>Active Trader</h6>
                                                <h4 class="counter-value">0</h4>
                                            </div>
                                        </div>
                                    
                                        <!-- Active IB Counter -->
                                        <div class="counter-card active-ib">
                                            <i class="fa fa-briefcase text-white"></i>
                                            <div class="counter-info">
                                                <h6>Active IB</h6>
                                                <h4 class="counter-value">0</h4>
                                            </div>
                                        </div>

                            </div>
                        </div>
                    </div>
                    <div class="card" style="border-radius: 10px; display: flex; flex-direction: column; min-height: 202px;">
                        <div class="card-body pb-4" style="border-radius: 10px; flex-grow: 1; display: flex; flex-direction: column; justify-content: space-between;">
                            <h6 style="font-size:20px" class="mb-4">Affiliate Details 
                                <i class="fa fa-info-circle" style="font-size: 0.75em;"></i>
                            </h6>
                            <div class="row text-center">
                                <div class="col-md-4 col-sm-12">
                                    <p style="font-size:15px;">Code</p>
                                    <h4>CDEX3V</h4>
                                </div>
                                <div class="col-md-4 col-sm-12" style="position: relative;">
                                    <p style="font-size:15px;">Referral Link</p>
                                    <button class="btn btn-primary" style="position: relative;" onclick="copyReferralLink()"> 
                                        Copy
                                    </button>
                                    <span id="tooltip" style="visibility: hidden; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background-color: black; color: white; padding: 5px 10px; border-radius: 5px; font-size: 12px; z-index: 1000;">Copied!</span>
                                    <input type="text" id="referralLink" value="https://example.com/referral?code=12345" style="position: absolute; left: -9999px;">
                                </div>
                                <div class="col-md-4 col-sm-12">
                                    <p style="font-size:15px;">Social Media</p>
                                    <div style="display: flex; justify-content: center; gap: 10px;">
                                        <a href="" target="_blank" style="color:#000">
                                            <i class="fa fa-facebook social-icon facebook" style="font-size:25px;"></i> 
                                        </a>
                                        <a href="" target="_blank" style="color:#000">
                                            <i class="fa fa-linkedin social-icon linkedin" style="font-size:25px"></i> 
                                        </a>
                                        <a href="" target="_blank" style="color:#000">
                                            <i class="fa fa-twitter social-icon twitter" style="font-size:25px"></i> 
                                        </a>
                                        <a href="" target="_blank" style="color:#000">
                                            <i class="fa fa-pinterest social-icon pinterest" style="font-size:25px"></i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
			</div>
			<div class="row">
                <div class="col-xxl-12 col-xl-12 col-lg-12 box-col-12">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-2">Performance Analytics <i class="fa fa-info-circle" style="font-size: 0.75em;"></i> </h5>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="display" id="basic-1" role="grid">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>Subject</th>
                                            <th>Department</th>
                                            <th>Status</th>
                                            <th>Priority</th>
                                            <th>Created On</th>
                                            <th>Last Updated On</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        </tbdoy>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
					
				</div>
				<div class="col-xxl-12 col-xl-12 col-lg-62 box-col-12">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-2">IB Performance <i class="fa fa-info-circle" style="font-size: 0.75em;"></i> </h5>
                        </div>
                        <div class="card-body">

                            <div class="table-responsive">
                                <table class="display" id="basic-21" role="grid">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>Subject</th>
                                            <th>Department</th>
                                            <th>Status</th>
                                            <th>Priority</th>
                                            <th>Created On</th>
                                            <th>Last Updated On</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        </tbdoy>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
				</div>
			</div>
			<div class="row">
				<div class="col-xxl-12 col-xl-12 col-lg-12 box-col-12">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-2">Top 5 Earning of Sub IBs <i class="fa fa-info-circle" style="font-size: 0.75em;"></i> </h5>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="display" id="basic-22" role="grid">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>Subject</th>
                                            <th>Department</th>
                                            <th>Status</th>
                                            <th>Priority</th>
                                            <th>Created On</th>
                                            <th>Last Updated On</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        </tbdoy>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
				</div>
				
			</div>
		</div>
	</div>
</div>
</div>
<script type="text/javascript">
var session_layout = '{{ session()->get('
layout ') }}';
</script> 
@endsection


@section('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/datatable/datatables/jquery.dataTables.min.js') }}"></script>

<script src="{{ asset('assets/js/datatable/datatables/datatable.custom.js') }}"></script>

@endsection
<script>
    

    function copyReferralLink() {
        const link = document.getElementById("referralLink");
        const tooltip = document.getElementById("tooltip");

        // Copy the text to the clipboard
        navigator.clipboard.writeText(link.value).then(() => {
            // Show tooltip
            tooltip.style.visibility = "visible";
            tooltip.style.opacity = "1";

            // Hide the tooltip after 2 seconds
            setTimeout(() => {
                tooltip.style.visibility = "hidden";
                tooltip.style.opacity = "0";
            }, 2000);
        }).catch(() => {
            // Optionally handle copy failure
            tooltip.textContent = "Failed to copy!";
            tooltip.style.visibility = "visible";

            setTimeout(() => {
                tooltip.style.visibility = "hidden";
                tooltip.textContent = "Copied!";
            }, 2000);
        });
    }

// Static data
var interviewsData = [5, 10, 15, 20, 12, 8, 15, 18, 10, 6, 7, 14]; // Monthly data
var backgroundCheckData = [3, 7, 11, 14, 9, 5, 12, 15, 8, 4, 6, 10]; // Monthly data
var followUpData = [2, 4, 6, 8, 5, 3, 7, 10, 6, 2, 3, 5]; // Monthly data
var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; // Static months
// Weekly and Yearly data can be defined similarly
var weeklyData = [
	[1, 2, 3, 4, 5, 2, 4], // Example data for interviews
	[1, 2, 3, 1, 2, 3, 1], // Example data for background checks
	[1, 1, 1, 2, 1, 1, 1], // Example data for follow-ups
];
var yearlyData = [
	[15, 25, 35], // Example data for interviews
	[10, 20, 30], // Example data for background checks
	[5, 10, 15], // Example data for follow-ups
];
const ChartOptions = {
	series: [{
		name: "Cat1",
		data: interviewsData,
	}, {
		name: "Cat2",
		data: backgroundCheckData,
	}, {
		name: "Cat3",
		data: followUpData,
	}],
	chart: {
		height: 270,
		toolbar: {
			show: false,
		},
	},
	dataLabels: {
		enabled: false,
	},
	colors: ["#FF5733", "#33FF57", "#3357FF"], // Static colors
	stroke: {
		curve: "smooth",
		width: 5,
	},
	grid: {
		show: true,
		borderColor: "#E5E5E5",
	},
	yaxis: {
		labels: {
			show: true,
			style: {
				fontWeight: 500,
				fontSize: '14px',
				colors: "#AAA3A0",
			},
			formatter: (value) => value,
		},
		min: 0,
		max: 20,
	},
	xaxis: {
		type: "category",
		categories: months,
		tickAmount: 12,
		labels: {
			show: true,
			rotate: -45,
			style: {
				fontWeight: 500,
				fontSize: '12px',
				colors: "#AAA3A0",
			},
		},
		axisBorder: {
			show: true,
		},
	},
	legend: {
		show: true,
		position: "top",
		horizontalAlign: "center",
	},
	responsive: [{
		breakpoint: 361,
		options: {
			chart: {
				height: 190,
			},
		},
	}],
};

document.addEventListener("DOMContentLoaded", function() {
  const ChartEl = new ApexCharts(document.querySelector("#chart-school-performance"), ChartOptions);
  ChartEl.render();
});

function updateChart() {
	const range = document.getElementById("data-range").value;
	let newData, newCategories;
	if(range === "weekly") {
		newData = [
			weeklyData[0], // Interviews
			weeklyData[1], // Background Checks
			weeklyData[2] // Follow Ups
		];
		newCategories = ["Week 1", "Week 2", "Week 3", "Week 4", "Week 5", "Week 6", "Week 7"];
	} else if(range === "yearly") {
		newData = [
			yearlyData[0], // Interviews
			yearlyData[1], // Background Checks
			yearlyData[2] // Follow Ups
		];
		newCategories = ["Year 1", "Year 2", "Year 3"];
	} else {
		newData = [
			interviewsData,
			backgroundCheckData,
			followUpData
		];
		newCategories = months;
	}
	ChartEl.updateOptions({
		series: newData.map((data, index) => ({
			name: `Cat${index + 1}`,
			data: data,
		})),
		xaxis: {
			categories: newCategories,
		},
	});
}
</script>