@extends('admin.layout.master')

@section('content')

<style>
    .cardSizeCss{
        width: 14%; margin-left: 10px;
    }
</style>
    <!-- Content Header (Page header) -->
<div class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1 class="m-0">Abandoned Carts</h1>
            </div><!-- /.col -->
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="#">Home</a></li>
                    <li class="breadcrumb-item active">Abandoned Carts</li>
                </ol>
            </div><!-- /.col -->
        </div><!-- /.row -->
    </div><!-- /.container-fluid -->
</div>

<div class="content">
    <div class="row">
        <div class="cardSizeCss">
            <div class="info-box">
                <div class="info-box-content">
                    <span class="info-box-text text-bold">Total</span>
                    <span class="info-box-number h4">
                        {{ number_format($totalemailsend) }}
                    </span>
                </div>
            </div>

        </div>

        <div class="cardSizeCss">
            <div class="info-box mb-3">
                <div class="info-box-content">
                    <span class="info-box-text text-bold">1 Hours Email Send</span>
                    <span class="info-box-number h4">{{ number_format($onehourssend) }}</span>
                </div>
            </div>
        </div>



        <div class="cardSizeCss">
            <div class="info-box mb-3">
                <div class="info-box-content">
                    <span class="info-box-text text-bold">1 Hours Email Open</span>
                    <span class="info-box-number h4">{{ number_format($onehoursopen) }}</span>
                </div>
            </div>
        </div>

        <div class="cardSizeCss">
            <div class="info-box mb-3">
                <div class="info-box-content">
                    <span class="info-box-text text-bold">2 Days Email Send</span>
                    <span class="info-box-number h4">{{ number_format($twodaysend) }}</span>
                </div>
            </div>
        </div>

        <div class="cardSizeCss">
            <div class="info-box mb-3">
                <div class="info-box-content">
                    <span class="info-box-text text-bold">2 Days Email Open</span>
                    <span class="info-box-number h4">{{ number_format($twodayopen) }}</span>
                </div>
            </div>
        </div>

        <div class="cardSizeCss">
            <div class="info-box mb-3">
                <div class="info-box-content">
                    <span class="info-box-text text-bold">4 Days Email Send</span>
                    <span class="info-box-number h4">{{ number_format($fourdaysend) }}</span>
                </div>
            </div>
        </div>

        <div class="cardSizeCss">
            <div class="info-box mb-3">
                <div class="info-box-content">
                    <span class="info-box-text text-bold">4 Days Email Open</span>
                    <span class="info-box-number h4">{{ number_format($fourdayopen) }}</span>
                </div>
            </div>
        </div>
        <div class="cardSizeCss">
            <div class="info-box mb-3">
                <div class="info-box-content">
                    <span class="info-box-text text-bold">Conversion Rate</span>
                    <span class="info-box-number h4">{{ round($conversion_rate,2) }}</span>
                </div>
            </div>
        </div>
        <div class="cardSizeCss">
            <a href="@if(!empty($conversion_rate_order)) {{ route('admin.order') }}?is_order_abandoned_cart=1 @else # @endif">
                <div class="info-box mb-3">
                    <div class="info-box-content">
                        <span class="info-box-text text-bold">Order Total#</span>
                        <span class="info-box-number h4">{{ number_format($conversion_rate_order) }}</span>
                    </div>
                </div>
            </a>
        </div>
        <div class="cardSizeCss">
            <div class="info-box mb-3">
                <div class="info-box-content">
                    <span class="info-box-text text-bold">Total Abandoned Amount</span>
                    <span class="info-box-number h4">${{  number_format($total_abandoned_amount,2) }}</span>
                </div>
            </div>
        </div>
        <div class="cardSizeCss">
            <div class="info-box mb-3">
                <div class="info-box-content">
                    <span class="info-box-text text-bold">Total Recovered Amount</span>
                    <span class="info-box-number h4">${{  number_format($total_recovered_amount,2) }}</span>
                </div>
            </div>
        </div>

    </div>

    <div class="card">
        <div class="card-body">
            <form action="{{ route('admin.abandoned-cart') }}" id="frm_search" method="get">
                <div class="row mb-2">
                        <div class="col-md-2">
                            <div class="form-group m-2">
                                <label for="form-label">Name</label>
                                <input type="text" name="name" id="name" value="{{ $name }}" class="form-control" placeholder="Search Name">
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-group m-2">
                                <label for="form-label">Phone</label>
                                <input type="text" name="phone" id="phone" value="{{ $phone }}" class="form-control" placeholder="Search Phone">
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-group m-2">
                                <label for="form-label">Email</label>
                                <input type="text" name="email" id="email" value="{{ $email }}" class="form-control" placeholder="Search Email">
                            </div>

                        </div>
                        <div class="col-md-2">
                            <div class="form-group m-2">
                                <label for="form-label">Date</label>
                                <input type="date" name="date" id="date" value="{{ !empty($date) ? $date : '' }}" class="form-control" placeholder="Review Date">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="m-2">
                                <button class="btn btn-success " type="submit" style="margin-top: 30px !important;">Search</button>
                                <a class="btn btn-warning" href="{{ route('admin.abandoned-cart') }}" style="margin-top: 30px !important;">Reset</a>
                            </div>
                        </div>

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


    <div class="card">
        <div class="card-body">
            <div class="table-responsive ">
                <table class="table table-bordered abandonedcart-datatable" >
                    <thead class="thead-dark">
                        <tr>
                            @foreach ($columns_list_header as $c)
                            <th class="noSearch">{{ $c }}</th>
                            @endforeach
                            <th class="noSearch">Logs</th>
                        </tr>
                    </thead>

                </table>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="abandonedLogModel" tabindex="-1" role="dialog" aria-labelledby="abandonedLogModelLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="abandonedlLogModelLabel">Abandoned Logs</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body" id="abandonedlLogBody">

        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
<script>
    $(function () {
        $('.cart-datatable').DataTable({
            order: [[7, 'asc']]
        });
    });

    function abandonedlLog(cart_id){
        $('#abandonedlLogBody').html('Loading...');
        $('#abandonedLogModel').modal('show');
        var ablog = '{{ url("/admin/abandoned-cart-log/:cartid") }}';

        ablog = ablog.replace(":cartid",cart_id);
        //alert(ablog);
       $('#abandonedlLogBody').load(ablog)
    }




</script>

<script type="text/javascript">

    var table ="";
    var dataPreference = "{{ $dataPreferencejson }}";

    $( document ).ready(function() {

       table = $('.abandonedcart-datatable').DataTable({
              searching: false,
              processing: true,
              serverSide: true,
              order: [[8, 'desc']],
              "autoWidth" : false,
              ajax: {
                  url: "{{ route('admin.abandoned-cart') }}",
                  type: "get",
                  data: function (data) {
                    delete data.columns;
                    data.search_created_at = "{{ $created_at }}";
                    data.search_name = "{{ $name }}";
                    data.search_phone = "{{ $phone }}";
                    data.search_email = "{{ $email }}";
                    data.search_date = "{{ $date }}";
                }

              },
              columns: [
                {
                    data: null,
                    render: function ( data, type, row ) {
                        var itemsUrl = '{{ route("admin.abandoned-cart-items",":itemid") }}';
                        itemsUrl = itemsUrl.replace(':itemid',data.cart_id);
                        return '<a href="'+itemsUrl+'">'+ data.cart_id +'</a>';
                    },
                },
                      
                      {
                        data: null,
                        render: function ( data, type, row ) {
                            var cartid = "'" + data.cart_id + "'";
                            return '<button class="btn btn-success" onclick="abandonedlLog(' + cartid + ')">Logs</button>';
                        },
                        orderable: false
                    }
                      ],
              "columnDefs": [  { targets: '_all', width:'30px' },{ visible: false, targets: JSON.parse(dataPreference) }
                            ],

          });

  });

  </script>
<!-- /.content-header -->
@endsection