@extends('layouts.layout')

@section('body_class', 'nav-md')
@section('css')

    <style>
        #myTable thead th:nth-child(1) {
            text-align: center;
        }

        #myTable thead th:nth-child(2) {
            text-align: center;
        }

        #myTable thead th:nth-child(3) {
            text-align: center;
        }
        #myTable thead th:nth-child(4) {
            text-align: center;
        }
        #myTable thead th:nth-child(5) {
            text-align: center;
        }

        #myTable thead th:nth-child(6) {
            text-align: center;
        }
        #myTable thead th:nth-child(7) {
            text-align: center;
        }

        #myTable thead th:nth-child(8) {
            text-align: center;
        }
        #myTable thead th:nth-child(9) {
            text-align: center;
        }
        #myTable thead th:nth-child(10) {
            text-align: center;
        }


    </style>
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.7/css/jquery.dataTables.css" />
    
@endsection

@section('body_content')
<div class="container body">
    <div class="main_container">
        @include('includes.sidebar')
        <div class="right_col" role="main">
            <div class="page-title">
                <div class="title_left">
                    <h3><i class="fa fa-edit"></i>Customer Webcommerce</h3>
                </div>
                <div class="clearfix"></div>
            </div>


            <div class="row">
                <div class="col-xs-12">
                    <ol class="breadcrumb">
                        <li><a href="{{ route('dashboard') }}">Home</a></li>
                        <li><a href="{{ route('report_customer') }}">Customer Webcomerce</a></li>
                    </ol>
                </div>
            </div>

            {{-- <div class="row">
                <div id="containerBarChard" class="col-xs-12 col-sm-12 text-center" style="margin-bottom: 10px;">
                    <div style="margin-bottom: 3px;">Loading data ...</div>
                    <i class="fa fa-pulse fa-spinner fa-3x"></i>
                </div>

                <div class="col-xs-12 col-sm-6">
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="x_panel" style="zoom: 0.9; overflow: auto;">
                                <div id="containerPaymentSummary" class="x_title">
                                    <div style="margin-bottom: 3px;">Loading data ...</div>
                                    <i class="fa fa-pulse fa-spinner fa-3x"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="col-xs-12 col-sm-6">
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="x_panel" style="zoom: 0.9; overflow: auto;">
                                <div id="containerVoucherSummary" class="x_title">
                                    <div style="margin-bottom: 3px;">Loading data ...</div>
                                    <i class="fa fa-pulse fa-spinner fa-3x"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
            </div> --}}

            {{-- <div class="row">
                <div class="col-xs-12 col-sm-6">
                    <div class="x_panel">
                        <ul class="nav navbar-right panel_toolbox">
                                <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a></li>
                            </ul>
                        <div class="x_title">
                            Filter
                        </div>
                        <div class="x_content">
                            <form id="form-search" class="form-horizontal">
                                <div class="col-xs-12 col-sm-12">
                                    <div class="form-group">
                                        <label class="col-xs-12 col-sm-4 control-label">Start Date :</label>
                                        <div class="col-xs-6 col-sm-4">
                                            <input id="start_date" name="start_date" type="date" class="form-control" value="{{ $request['start_date'] }}" placeholder="Date Start">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-xs-12 col-sm-4 control-label">End Date :</label>
                                        <div class="col-xs-6 col-sm-4">
                                            <input id="end_date" name="end_date" type="date" class="form-control" value="{{ $request['end_date'] }}"  placeholder="Date End">
                                        </div>
                                    </div>
                                    
                                    <div class="form-group">
                                        <label class="col-xs-12 col-sm-4 control-label">Store Channel :</label>
                                        <div class="col-xs-6 col-sm-4">
                                            <select name="store_channel" id="store_channel" class="form-control" value="{{ $request['store_channel'] }}">
                                                <option value="lakushop" {{ $request['store_channel'] == 'lakushop' ? 'selected' : '' }}>Lakushop</option>
                                                <option value="sukha" {{ $request['store_channel'] == 'sukha' ? 'selected' : '' }}>Livin Sukha</option>
                                            </select>
                                        </div>
                                    </div> 
                                    
                                    <div class="form-group">
                                        <label class="col-xs-12 col-sm-4 control-label">Payment Status :</label>
                                        <div class="col-xs-6 col-sm-4">
                                            <select name="status" id="status" class="form-control" value="{{ $request['status'] }}">
                                                <option value="1" {{ $request['status'] == '1' ? 'selected' : '' }}>-- Paid --</option>
                                                <option value="3" {{ $request['status'] == '3' ? 'selected' : '' }} >-- All Transaction --</option>
                                                <option value="2" {{ $request['status'] == '2' ? 'selected' : '' }}>-- Rejected --</option>
                                            </select>
                                        </div>
                                    </div> 

                                <div class="form-group">
                                    <label class="col-xs-12 col-sm-4 control-label">Search : </label>
                                    <div class="col-xs-6 col-sm-4">
                                        <input id="search" name="search" class="form-control">
                                    </div>
                                </div>
                                
                                <div class="form-group" style="margin-top:20px">
                                        <label class="col-xs-12 col-sm-5 control-label"></label>
                                        <div class="col-xs-12 col-sm-7">
                                            <button type="submit" class="btn btn-primary btn-search"><i class="fa fa-search"></i> Search</button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div> --}}

            <div class="row">
                <div class="col-xs-12">
                    <div class="table-responsive">
                        <div class="x_panel">
                            {{-- <a href="{{route('report_transaction_excel', [
                                'start_date' => $request ['start_date'],
                                'end_date' => $request ['end_date'],
                                'search' => $request ['search'],
                                'status' =>  $request ['status'],
                                'store_channel' =>  $request ['store_channel']
                            ])
                            }}">
                                <button type="button" class="btn btn-success"><i class="fa fa-file-excel"></i> Download Excel</button>
                            </a> --}}
                             <div class="x_content" style="zoom: 0.9; overflow: auto;">
                                <table class="table table-bordered table-striped" id="myTable">
                                    <thead>
                                        <tr>
                                            <th class="text-center">No</th>
                                            <th class="text-center">Name</th>
                                            <th class="text-center">Email</th>
                                            <th class="text-center">Date Of Birth</th>
                                            <th class="text-center">Phone</th>
                                            <th class="text-center">Address</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @php
                                            $no = 1;
                                        @endphp
                                        @foreach($transaction as $data)
                                        <tr>
                                            <td class="text-center"> {{ $no++ }}</td>
                                             <td class="text-left">
                                                {{ $data->first_name }} {{ $data->last_name }}
                                            </td>
                                            <td class="text-left">{{ $data->email }}</td>
                                            <td class="text-center">{{ date('d-m-Y', strtotime($data->dob)) }}</td>
                                            <td class="text-left">{{ $data->phone }}</td>
                                            <td class="text-left">{{ $data->address }}</td>

                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
    <script>
        $(document).ready(function() {
            var table = $('#myTable').DataTable({
                searching: true,
                // ordering: false,
                pageLength: 15
                
            });

            $('#myTable').on('page.dt', function() {
                table = $('#myTable').DataTable();
            });
            
            
            showChard();
            showSummaryPayment();
            showSummaryVoucher();
        });
    </script>
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script>
        function resendEmail(id) {
            if (confirm("Apakah Anda yakin ingin mengirimkan kembali email berisi informasi voucher ini kepada customer ?") == true) {
                $('#cover-spin').fadeIn();
                location.href = "{{ url('webstore/resend_email') }}/" + id;
            }
        }

        function showChard() {
            $.ajax({
                url: '{{ url("webstore/report_transaction/barchard") }}',
                type: "GET",
                dataType: "json",
                success: function(data) {
                    $('#containerBarChard').html('<div id="barChard" class="x_panel"></div>');
                    
                    Highcharts.chart('barChard', {
                        title: {
                            text: 'Transaksi Lakushop 30 hari terakhir',
                            align: 'left'
                        },
                        subtitle: {
                            text:
                                'Source: <a target="_blank" ' +
                                'href="https://www.lakushop.id">Lakushop.id</a>',
                            align: 'left'
                        },
                        xAxis: {
                            categories: data.response.category,
                            crosshair: true,
                            accessibility: {
                                description: 'Countries'
                            }
                        },
                        yAxis: {
                            min: 0,
                            title: {
                                text: 'Amount (Rp.)'
                            }
                        },
                        series: [
                            {
                                name: 'Lakushop Transaction History',
                                data: data.response.amount
                            }
                        ]
                    });
                }
            });
        }

        function showSummaryPayment() {
            $.ajax({
                url: '{{ url("webstore/report_transaction/summary_payment") }}',
                method: "POST",
                headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                data: {
                    'start_date': $('#start_date').val(),
                    'end_date': $('#end_date').val(),
                    'status': $('#status').val(),
                    'search': $('#search').val(),
                },
                success: function(response) {
                    $('#containerPaymentSummary').html(response);
                }
            });
        }

        function showSummaryVoucher() {
            $.ajax({
                url: '{{ url("webstore/report_transaction/summary_voucher") }}',
                method: "POST",
                headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                data: {
                    'start_date': $('#start_date').val(),
                    'end_date': $('#end_date').val(),
                    'status': $('#status').val(),
                    'search': $('#search').val(),
                },
                success: function(response) {
                    $('#containerVoucherSummary').html(response);
                }
            });
        }
    </script>
@endsection