@extends('layouts.app')

@section('sidebar')
    @include('sidebar')
@stop

@section('content')
<div class="m-subheader ">
    <div class="d-flex align-items-center">
        <div class="mr-auto">
            <h3 class="m-subheader__title ">Calculation</h3>
        </div>
        <div>
            <span class="m-subheader__daterange pull-right" id="daterangepicker">
                <span class="m-subheader__daterange-label">
                    <span class="m-subheader__daterange-title"></span>
                    <span class="m-subheader__daterange-date m--font-brand"></span>
                </span>
                <a href="#" class="btn btn-sm btn-brand m-btn m-btn--icon m-btn--icon-only m-btn--custom m-btn--pill">
                    <i class="la la-angle-down"></i>
                </a>
            </span>
        </div>
    </div>
</div>
    <div class="m-content">
        <div class="m-portlet m-portlet--full-height ">
            <div class="m-portlet__head">
                <div class="m-portlet__head-caption">
                    <div class="m-portlet__head-title">
                        <h3 class="m-portlet__head-text">
                            Calculation
                        </h3>
                    </div>
                </div>
                
                <div class="m-portlet__head-tools">
                            <ul class="m-portlet__nav">
                                <li class="m-portlet__nav-item m-dropdown m-dropdown--inline m-dropdown--arrow m-dropdown--align-right m-dropdown--align-push pull-right" m-dropdown-toggle="hover" aria-expanded="true">
                                    <a href="#" class="m-portlet__nav-link m-dropdown__toggle dropdown-toggle btn btn--sm m-btn--pill btn-secondary m-btn m-btn--label-brand">
                                        Export
                                    </a>
                                    <div class="m-dropdown__wrapper" style="z-index: 101;">
                                        <span class="m-dropdown__arrow m-dropdown__arrow--right m-dropdown__arrow--adjust" style="left: auto; right: 36px;"></span>
                                        <div class="m-dropdown__inner">
                                            <div class="m-dropdown__body">
                                                <div class="m-dropdown__content">
                                                    <ul class="m-nav">
                                                        <li class="m-nav__section m-nav__section--first">
                                                            <span class="m-nav__section-text">Export Tools</span>
                                                        </li>
                                                        <li class="m-nav__item">
                                                            <a href="#" class="m-nav__link" id="export_print">
                                                                <i class="m-nav__link-icon la la-print"></i>
                                                                <span class="m-nav__link-text">Print</span>
                                                            </a>
                                                        </li>
                                                        <li class="m-nav__item">
                                                            <a href="#" class="m-nav__link" id="export_excel">
                                                                <i class="m-nav__link-icon la la-file-excel-o"></i>
                                                                <span class="m-nav__link-text">Excel</span>
                                                            </a>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                
            </div>
            <div class="m-portlet__body">

               
                    <div class="row m--margin-bottom-20">
                        <div class="col-lg-3 col-md-3 m--margin-bottom-10-tablet-and-mobile">
                            <label>Bank Name</label>
                            <select class="form-control m-input" name="bank" id="bank_name">
                                <option value="">Select Bank</option>
                                @foreach($banks as $bank)
                                    <option value="{{ $bank->id }}" {{ $selectedBank == $bank->id ? 'selected' : '' }}>
                                        {{ $bank->name }} [{{ $bank->type }} - {{ $bank->beneficiary_name }}]
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        
                       <div class="col-lg-3 col-md-3 m--margin-bottom-10-tablet-and-mobile">
                            <label>User Type</label>
                            <select class="form-control m-input" name="usertype" id="usertype">
                                @foreach(['users' => 'User' ,'ib_user' => 'Ib User'] as $user_typeKey => $user_type)
                                    <option value="{{ $user_typeKey }}" {{ $loop->first ? 'selected' : '' }}>
                                        {{ $user_type }}
                                    </option>
                                @endforeach
                            </select>

                        </div>
    
                        <div class="col-lg-3 col-md-3 m--margin-bottom-10-tablet-and-mobile">
                            <label>Status</label>
                            <select class="form-control m-input" name="status" id="status">
                                <option value="">All</option>
                                <option value="Accepted" {{ $selectedStatus == 'Accepted' ? 'selected' : '' }}>Accepted</option>
                                <option value="Pending" {{ $selectedStatus == 'Pending' ? 'selected' : '' }}>Pending</option>
                                <option value="Rejected" {{ $selectedStatus == 'Rejected' ? 'selected' : '' }}>Rejected</option>
                            </select>                       
                        </div>
    
                        <div class="col-lg-3 m--margin-bottom-10-tablet-and-mobile">
                            <br>
                            <button href="javascript:void(0)" id="search-record" class="btn btn-brand m-btn m-btn--icon" style="margin-top: 9px;">
                                <span><i class="fas fa-search"></i><span>Search</span></span>
                            </button>
                        </div>
    
    
                    </div>
               
                

                <table class="m_datatable table table-striped- table-bordered table-hover table-checkable" id="withdraw-request">
                    <thead>
                        <tr>
                            <th>Sr.No</th>
                            <th>Name</th>
                            <th>Email</th>
                            <th>Transaction Id</th>
                            <th>USD</th>
                            <th>Dollar Rate</th>
                            <th>INR</th>
                            <th>Payment Processor</th>
                            <th>Status</th>
                            <th>Bank Detail</th>
                            <th>Account No</th>
                            <th>IFSC Code</th>
                            <th>Date </th>
                            <th>Updated Date</th>
                            
                        </tr>
                    </thead>
                    <tbody></tbody>
                   <tfoot>
                        <tr style="background-color: #f8f9fa;box-shadow: 0px -3px 8px rgba(0, 0, 0, 0.15);font-weight: bold;">
                            <th colspan="6" style="text-align:right">Total INR:</th>
                            <th id="total-inr">₹0.00</th>
                            <th colspan="7"></th> <!-- Adjust to match total 13 columns -->
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>
@endsection

@section('script')
    {{ Html::script('custom/datatables/datatables.bundle.js') }}
    {{ Html::script('custom/eModal/eModal.js') }}
    <script type="text/javascript">

        var select_start = '{{$startDate}}';
        var select_end = '{{$endDate}}';
        
       
       /*** Start Date Range Filter ***/
       jQuery(document).ready(function() {
                Daterangepicker.init();
            });
            var isFirstTime = true;
            var Daterangepicker = function() {
                var daterangepickerInit = function() {
                    if ($('#daterangepicker').length == 0) {
                        return;
                    }

                    var picker = $('#daterangepicker');
                    var starts = moment();
                    var start = moment('{{$startDate}}');
                    var end = moment('{{$endDate}}');
                    
                    
                    if ('{{$startDate}}' == '') {
                        
                        start = moment().subtract(30, 'year').startOf('month');
                    }

                    if ('{{$endDate}}' == '') {
                        
                    end =   moment().endOf('month');
                    }
                    
                    function cb(start, end) {
                        range = start.format('D MMM YY') + ' - ' + end.format('D MMM YY');
                        picker.find('.m-subheader__daterange-date').html(range);
                        select_start = start;
                        select_end = end;
                    }
                    
                    picker.daterangepicker({
                        locale: {
                            format: 'DD/MM/YYYY'
                        },
                        direction: mUtil.isRTL(),
                        startDate: start,
                        endDate: end,
                        opens: 'left',
                        ranges: {
                            'Today': [moment(), moment()],
                            'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                            'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                            'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                            'This Month': [moment().startOf('month'), moment().endOf('month')],
                            'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
                            'This Year': [moment().startOf('year'), moment().endOf('year')],
                            'Last Year': [moment().subtract(364, 'days'), moment()],
                            'All time': [moment().subtract(30, 'year').startOf('month'), moment().endOf('month')],
                        }
                    }, cb);

                    cb(start, end);
                }
                return {
                    init: function() {
                        daterangepickerInit();
                    }
                };
            }();
        /*** End Date Range Filter ***/
        
        
        var table;

        $('#search-record').on('click', function () {
            var startDate = select_start.format('YYYY-MM-DD');
            var endDate = select_end.format('YYYY-MM-DD');
            var bank = $('#bank_name').val();
            var status = $('#status').val();
            var payment_processor = $('#payment_processor').val();
            if ( $.fn.DataTable.isDataTable('#withdraw-request') ) {
                $('#withdraw-request').DataTable().destroy();
            }
        
            table = $('#withdraw-request').DataTable({
                buttons: [
                    // Print Button
                    { 
                        action: function (e, dt, button, config)
                        {
                            dt.one('preXhr', function (e, s, data)
                            {
                                data.length = -1;
                            }).one('draw', function (e, settings, json, xhr)
                            {
                                var printButtonConfig = $.fn.DataTable.ext.buttons.print;
    
                                var addOptions = { 
                                    exportOptions: { 
                                        rows: ':visible',
                                        // columns: [1,2,3,4,5,6,7]
                                    },
                                    title : '',
                                    messageTop : '<img alt="Logo" src="{{ asset("images/logo.png") }}" height="50px" width="150px" style="display: block;margin-left: auto;margin-right: auto;"><br><h3 style="font-size: 12px; text-align: center;">Suite 305 , Griffith Corporate Center , Beachmount, Kngstown , St. Vincent and the Grenadines.</h3><br><div style="border-bottom: 5px solid #C0C0C0;"></div><br>'
                                };
                    
                                $.extend(true, printButtonConfig, addOptions );
                                printButtonConfig.action(e, dt, button, printButtonConfig);
                            }).draw();
                        }
                    },
                     // Export As Excel
                    {
                        action: function ( e, dt, button, config ) {
                            dt.one('preXhr', function (e, s, data)
                            {
                                data.length = -1;
                            }).one('draw', function (e, settings, json, xhr)
                            {
                                var exelButtonConfig = $.fn.DataTable.ext.buttons.excelHtml5;
                                var addOptions = {
                                    exportOptions: {
                                        rows: ':visible',
                                        // columns: [1,2,3,4,5,6,7]
                                    },
                                    filename: function(){
                                        var d = new Date();
                                        var n = d.getTime();
                                        return 'SevenStarFX_' + n;
                                    }, 
                                };
                    
                                $.extend(true, exelButtonConfig, addOptions );
                                exelButtonConfig.action(e, dt, button, exelButtonConfig);
                            }).draw();
                        }
                    }
                    
                ],
                responsive: true,
                processing: true,
                serverSide: true,
                ajax: {
                    url: '{{ route("get-withdrawal-request-excel") }}',
                    type: 'POST',
                    data: function (d) {
                        d.bank = $('#bank_name').val();
                        d.status = $('#status').val();
                        d.payment_processor = $('#payment_processor').val();
                        d.usertype = $('#usertype').val();
                        d.startDate = select_start.format('YYYY-MM-DD');
                        d.endDate = select_end.format('YYYY-MM-DD');
                    },
                    dataSrc: function(json) {
                        $('#total-inr').text('₹' + json.totalInr.toFixed(2));
                        return json.data;
                    }
                },
                "order": [[0, "desc"]],
                    "dom": "<'row'<'col-sm-12'tr>>" +
                        "<'row'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'p>>",
                columns: [
                        { data: 'id', name: 'id', visible: false },
                        
                        { data: 'full_name', name: 'full_name' },
                        { data: 'email', name: 'email' },
                        { data: 'our_transaction_id', name: 'our_transaction_id' },
                        { data: 'usd', name: 'usd' },
                        { data: 'dollar_rate', name: 'dollar_rate' },
                        { data: 'inr', name: 'inr' },
                        { data: 'payment_processor', name: 'payment_processor' },
                         { data: 'status', name: 'status' },
                        { data: 'bank_name', name: 'bank_name' },
                        { data: 'account_number', name: 'account_number' },
                        { data: 'ifsc_code', name: 'ifsc_code' },
                        { data: 'created_at', name: 'created_at', bSearchable: false},
                        { data: 'updated_at', name: 'updated_at', bSearchable: false},
                    ]
            });
            
        });
        
        
        // Export Datatables
		 $('#export_print').on('click', function(e) {
            //  Page BLockUI
            $.blockUI({ message: '<img src="{{ URL::to("images/loading.svg") }}" height="100%" width="100%" />', css: { border:'none', backgroundColor:'transparent' , top: '0%' , bottom: '0%'} });

            e.preventDefault();
            table.button(0).trigger();
            
            setTimeout(function() {
                $.unblockUI();
            }, 3000);
        });

		$('#export_excel').on('click', function(e) {
            // Page BlockUi
            $.blockUI({ message: '<img src="{{ URL::to("images/loading.svg") }}" height="100%" width="100%" />', css: { border:'none', backgroundColor:'transparent' , top: '0%' , bottom: '0%'} });

			e.preventDefault();
            table.button(1).trigger();
            
            setTimeout(function() {
                $.unblockUI();
            }, 3000);
		});
    
       $('#daterangepicker').on('apply.daterangepicker', function(ev, picker) {
    select_start = picker.startDate;
    select_end = picker.endDate;
    $('#search-record').trigger('click');
});

    </script>
@endsection