@extends('admin.template.master')

@section('title')
    <section class="content-header">
        <h1>
            B2B Customers Prevous Queries  
            <small>all b2b customer queries</small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="{!! url('admin/') !!}"><i class="fa fa-dashboard"></i> Home</a></li>
            <li class="active">B2B Customer Prevous Queries</li>
        </ol>
    </section>
@endsection

@section('main-content')
    <section class="content">
        
        
        
        
        
        @if(Session::has('message'))
        <div class="row">
            <div class="col-xs-12">
                <div class="alert alert-success alert-dismissible">
                    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                    {{Session('message')}}
                </div>
            </div>
        </div>
        @endif


        <div class="row">
            
            <div class="col-xs-12">
                <div class="box box-body">
                    
                    <div class="box-header ">
                        <div class="box-tools pull-right">
                            <a class="btn btn-xs btn-primary" href="{{ url('/admin/b2b-customers'  ) }}">
                                <i class="fa fa-arrow-left"></i> Go Back
                            </a>
                        </div>
                    </div>
                    
                    <div class="row">
                        <input type="hidden" id="phone" name="phone" value="{{ $phone }}" />
                        <div class="form-group col-md-2">
                            {!! Form::label('from_date', 'From Date') !!}
                            {!! Form::date('from_date', \Carbon\Carbon::now(), ['class' => 'form-control', 'id' => 'from_date']) !!}
                        </div>
    
                        <div class="form-group col-md-2">
                            {!! Form::label('to_date', 'To Date') !!}
                            {!! Form::date('to_date', \Carbon\Carbon::now(), ['class' => 'form-control', 'id' => 'to_date']) !!}
                        </div>
                        
                        <div class="form-group col-md-1">
                            {!! Form::label('&nbsp;') !!}
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox" name="is_date" checked  id="search_by_date" style="margin-left: -17px">
                                </label>
                            </div>
                        </div>
                        
                        <div class="form-group col-md-2">
                            {!! Form::label('status', 'Status') !!}
                            {!! Form::select('status', ['All'=>'All', 'Pending'=>'Query for Price', 'Processing'=>'Price Given',   'Done'=>'Order Done'], null , ['class' => 'form-control', 'style' => 'width: 180px;', 'id' => 'status']) !!}
                        </div>
                        
                        <div class="col-md-1" style="width: 250px;padding-top: 22px; /*margin-left: -40px;*/"> 
                            {!! Form::button('Search',['class' => 'btn btn-primary btn-order-search', 'id'=> 'search_btn']) !!}
                            {!! Form::button('Reset',['class' => 'btn btn-danger btn-order-search', 'id'=> 'reset_btn']) !!}
                        </div>
                    </div>
                </div>
            </div>
            
            
            
            <div class="col-md-12">
                <div class="box">
                    <div class="box-header">
                        <h3 class="box-title">List</h3>
                        <div class="box-tools">
                            
                        </div>
                    </div>
                    <div class="box-body table-responsive">
                        <table class="table table-hover" id="b2b_customer_queries_table">
                            <thead>
                            <tr>
                                <th>Order ID</th>
                                <th>Query DateTime</th>
                                <th>UD</th>
                                <th>Org Name</th>
                                <th>District</th> 
                                <th>City</th> 
                                <th style="width: 180px;">Customer</th>
                                <th align="center">No of Products</th>                                                              
                                <th align="center">Total (Query)</th>
                                <th align="center">Total Given(B2B)</th>
                                <th style="text-align:center;">Remarks</th>
                                <th>Status</th> 
                                {{--
                                <th>Action DateTime</th> 
                                <th style="width: 200px;text-align:center;">Action</th> --}}
                            </tr>
                            </thead>
                            <tbody></tbody>
                            <tfoot>
                                <tr>
                                    <th style="background: grey;"></th>
                                    <th style="background: grey;"></th>
                                    <th style="background: grey;"></th>
                                    <th style="background: grey;"></th>
                                    <th style="background: grey;"></th> 
                                    <th style="background: grey;"></th> 
                                    <th style="width: 180px;background: grey;"></th>
                                    <th  style="background: grey;color: #fff;" align="center"></th>                                                              
                                    <th  style="background: grey;color: #fff;" align="center" id="query_total"></th>
                                    <th  style="background: grey;color: #fff;" align="center" id="b2b_total"></th>
                                    <th style="text-align:center;background: grey;"></th>
                                    <th style="text-align:center;background: grey;"></th> 
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('javascripts')
    <script type="text/javascript">
        $(document).ready(function () {
         
            function init() {
                var search_by_date = $("#search_by_date").is(':checked') === true ? '1' : 0 ;
                var from_date = $('#from_date').val();
                var to_date = $('#to_date').val();
                var status = $('#status').val();
                var phone = $('#phone').val();
                $.ajax({
                    type: "GET",
                    url: "{{ url('/admin/b2b-specific-customer-query-total') }}" ,
                    data: { search_by_date: search_by_date, from_date:from_date, to_date:to_date, status:status, phone:phone },
                    success: function(resp) {
                        console.log('init-resp:: ', resp);
                        try {
                            var d = JSON.parse(resp);
                            $("#query_total").text( "৳ " + (d.query_total).toLocaleString() );
                            $("#b2b_total").text(  "৳ " + (d.b2b_total).toLocaleString() );
                        } catch(e) {
                            console.log(e)
                        }
                    }
                });
            }
            
            init();
            
            let oTable = $('#b2b_customer_queries_table').DataTable({
                                "processing": true,
                                "serverSide": true,
                                "searching": false,
                                "ajax": {
                                    url: "{{ route('getPastQueryOrders') }}",
                                    data: function (d) {
                                        d.search_by_date = $("#search_by_date").is(':checked') === true ? '1' : 0 ;
                                        d.from_date = $('#from_date').val();
                                        d.to_date = $('#to_date').val();
                                        d.status = $('#status').val();
                                        d.phone = $('#phone').val();
                                    }
                                },
                                "order": [[2, "desc"],[1, "desc"]],
                                "columnDefs": [{ 'visible': false, 'targets': [2,2] }],
                                "columns": [
                                    {data: 'order_id' ,sortable:true},
                                    {data: 'created_at' ,sortable:true, type: 'datetime' },
                                    {data: 'updated_at' ,sortable:true, formatter:"date"},
                                    {data: 'org_name' ,sortable:true},
                                    {data: 'city_id' ,sortable:true},
                                    {data: 'district_id' ,sortable:true},
                                    {data: 'email' ,sortable:true},
                                    {data: 'count' ,sortable:true,   tooltip:true },                
                                    {data: 'total' ,sortable:true},
                                    {data: 'b2b_total',sortable:true},
                                    {data: 'query'},
                                    {data: 'is_active'},
                                ]
                            });
                            
                            
            $("#search_btn").click(function() {
                let from_date = new Date($('#from_date').val());
                let to_date = new Date($('#to_date').val());
                let daysDiff = parseInt((to_date - from_date) / (1000 * 60 * 60 * 24), 10); 
                
                if (parseInt(daysDiff) < 0) {
                    alert('Please select from date must be less than to date');
                } else {
                    init()
                    // console.log('daysDiff :: ', daysDiff )
                    oTable.draw();
                }
            });
            
            
            $("#reset_btn").click(function() {
                window.location.reload();
            }); 
        });
    </script>
@endsection