@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
@section('breadcrumb-title')
<h3>Trader Transaction Report</h3>
@endsection

@section('breadcrumb-items')
<li class="breadcrumb-item">Trader Transaction Report</li>
@endsection
@section('content')
        <div class="container-fluid">
            <div class="row justify-content-center">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-body">
                            <form class="mt-4">
                                <div class="row">
                                    <!-- From Date -->
                                    <div class="col-sm-6 col-md-4 mb-2 ">
                                        <label for="from-date" class="form-label">From</label>
                                        <input type="date" class="form-control" id="from-date">
                                    </div>

                                    <!-- To Date -->
                                    <div class="col-sm-6 col-md-4 mb-2 ">
                                        <label for="to-date" class="form-label">To</label>
                                        <input type="date" class="form-control" id="to-date">
                                    </div>

                                    <!-- Name Dropdown -->
                                    <div class="col-sm-6 col-md-4 mb-2 ">
                                        <label for="name" class="form-label">Transaction Type</label>
                                        <select class="form-control" id="name">
                                            <option value="john">John</option>
                                            <option value="jane">Jane</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="row d-flex align-items-center mt-3">
                                    <!-- Trader/Sub IB -->
                                    <div class="col-sm-4 col-md-4 mb-2">
                                        <label for="trader-sub-ib" class="form-label">Trader/Sub IB</label>
                                        <input type="text" class="form-control" id="trader-sub-ib" placeholder="Enter Trader/Sub IB">
                                    </div>

                                    <!-- A/C No -->
                                    <div class="col-sm-4 col-md-4 mb-2">
                                        <label for="ac-no" class="form-label">A/C No.</label>
                                        <input type="text" class="form-control" id="ac-no" placeholder="Enter Account Number">
                                    </div>

                                

                                    <!-- Buttons -->
                                    <div class="col-sm-4 col-md-4 d-flex gap-1 mt-3">
                                        <button class="btn btn-primary flex-grow-1">Search</button>
                                        <button class="btn btn-primary flex-grow-1">Export</button>
                                    </div>
                                </div>

                            </form>
                            <div class="row mt-5 mb-5">
                                <div class="col-md-12">
                                <div class="table-responsive">
                                        <table class="display" id="basic-1" role="grid">
                                            <thead>
                                                <tr>
                                                    <th>#</th>
                                                    <th>Name</th>
                                                    <th>Email</th>
                                                    <th>Parent IB</th>
                                                    <th>Level</th>
                                                    <th>A/C No.</th>
                                                    <th>Ticket</th>
                                                    <th>TX. Date Time</th>
                                                    <th>Amount</th>
                                                    <th>Comment</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/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