@extends('layouts.admin')

@section('style')
    <style>
        .dataTables_filter{
            text-align: center;
        }
        .dataTables_paginate{
            text-align: center;
        }
        .dataTables_filter {
            width: 50%;
            float: right;
            text-align: right;
            margin-right: 10px;
        }
        .pagination {
            float: right;
            text-align: right;
            margin-right: 10px;
        }

        section.popup{
            padding: 60px 20px;
            position: fixed;
            top: 0px;
            z-index: 1000;
            height: 100vh;
            width: 100%;
            background-color: RGBA(0,0,0,0.8);
        }
        div.popup-content{
            margin-left: auto;
            margin-right: auto;
            width: 100%;
            height: auto;
            background-color: #FFFFFF;
        }
        div#validate_receipt_container{
            overflow-y: scroll;
        }
        img#validate_receipt_image{
            height: calc(80vh - 120px);
        }
        p#validate_dropdown_container select{
            width: 100%;
            font-size: 1.2em;
        }
        table.table-user-info{
            margin-bottom: 10px !important;
        }
        table.table-user-info tr td:nth-child(1), table.table-user-info tr td:nth-child(3){
            width: 40px;
        }
        td.block-span span{
            display: block;
        }
        td.block-span div{
            margin-bottom: 10px;
        }
        /*table.table-preview-current, table.table-preview-current-info{*/
        /*    margin-bottom: 20px !important;*/
        /*}*/
        table.table-preview-current tr td:nth-child(1){
            width: 300px;
        }
        table.table-preview-current tr td:nth-child(1) img{
            width: auto;
            max-width: 360px;
            cursor: pointer;
        }
        table.table-preview-current tr td:nth-child(2){
            width: 240px;
        }
        table.table-preview-current tr td:nth-child(3){
            width: 160px;
        }
        table.table-preview-current tr td:nth-child(4){
            min-width: 202px;
        }
    </style>
@endsection

@section('script')
{{--    <script src="{{ asset('assets/bower/datatables.net/js/jquery.dataTables.min.js') }}"></script>--}}
{{--    <script src="{{ asset('assets/bower/datatables.net-bs/js/dataTables.bootstrap.min.js') }}"></script>--}}
{{--    <script src="https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js"></script>--}}
{{--    <script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.html5.min.js"></script>--}}
    <script type="text/javascript">

        $(document).ready(function() {
            $('img#img_receipt').on("click", function() {
                window.open($(this).prop('src'));
            });

            const csrf = $('meta[name="csrf-token"]').attr('content');
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': csrf
                }
            });

            function fetch_data(){
                var table = $('.yajra-datatable').DataTable({
                    serverSide: true,
                    dom:
                        "<'row p-2'<'#create_voucher.col-sm-6 mb-2 text-left'><'#import_export.col-sm-6 mb-2 text-left text-sm-right'B>>" +
                        "<'row px-2'<'col-sm-6'l><'col-sm-6'f>>" +
                        "<'row'<'col-sm-12 overflow-auto'tr>>" +
                        "<'row p-2'<'col-sm-5'i><'col-sm-7'p>>",
                    oLanguage: {
                        sLengthMenu: "_MENU_",
                    },
                    buttons: [],
                    autoWidth: true,
                    processing: true,
                    serverSide: true,
                    info: false,
                    bInfo: false,
                    ajax: {
                        url:'{{ route('admin.receipts-list-admin') }}',
                        data: {
                            user_uid: '{{ $entry['user_uid'] }}',
                            exclude_receipt_sn: '{{ $entry['sn'] }}',
                        }
                    },
                    columns: [
                        {data: 'sn', name: 'sn', orderable: false, searchable: false},
                        {data: 'uid', name: 'uid'},
                        {data: 'txn_amount', name: 'amount'},
                        {data: 'merchant_name', name: 'merchant_name'},
                        {data: 'mall_name', name: 'mall_name'},
                        {data: 'merchant_state', name: 'merchant_state'},
                        {data: 'receipt_path', name: 'receipt_path'},
                        {data: 'timestamp', name: 'timestamp', orderable: false, searchable: false},
                        {data: 'card_id', name: 'card_id'},
                        {data: 'grid_id', name: 'grid_id'},
                        {data: 'receipt_detail', name: 'receipt_detail', orderable: false, searchable: false, className: 'text-center'},
                    ],
                    fnRowCallback: function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
                        const color = aData.color_code;
                        if(color !== 'yellow' || color !== 'red'){
                            return;
                        }
                        $('td', nRow).css('background-color', color);
                    }
                });
            }

            fetch_data();
        });

    </script>
@endSection


@section('content')
<section class='content'>
    <div class='row'>
        <div class='col-md-12'>
            <div class ='card'>
                <div class="card-header">

                    <h3 class="card-title">Receipt User</h3>

                </div>
                <div class='card-body table-responsive p-0'>

                    <!-- user info -->
                    <table class="table no-border p-0 table-user-info">
                        <tr>
                            <td><label>Name:</label></td>
                            <td>{{ $entry['plain_name'] }}</td>
                            <td><label>Email:</label></td>
                            <td>{{ $entry['plain_email'] }}</td>
                        </tr>
                        <tr>
                            <td><label>Mobile:</label></td>
                            <td>{{ $entry['plain_mobile'] }}</td>
                            <td><label>Address:</label></td>
                            <td class="block-span">
                                @if($entry['address_line_1'] !== '' && !is_null($entry['address_line_1']))
                                    <span>{{ $entry['address_line_1'] }}</span>
                                @endif
                                @if($entry['address_line_2'] !== '' && !is_null($entry['address_line_2']))
                                    <span>{{ $entry['address_line_2'] }}</span>
                                @endif
                                @if($entry['postcode'] !== '' && !is_null($entry['postcode']))
                                    <span>{{ $entry['postcode'] }}</span>
                                @endif
                                @if($entry['state'] !== '' && !is_null($entry['state']))
                                    <span>{{ $entry['state'] }}</span>
                                @endif
                                @if($entry['country'] !== '' && !is_null($entry['country']))
                                    <span>{{ $entry['country'] }}</span>
                                @endif
                            </td>
                        </tr>
                    </table>
                    <!-- end user info -->
                </div>
            </div>

            <div class ='card'>
            <div class="card-header">

                <h3 class="card-title">Receipt Detail</h3>

            </div>
            <div class='card-body table-responsive p-0'>
                    <!-- current record -->
                    <table class="table table-bordered table-hover table-sm table-preview-current">
                        <thead>
                            <tr>
                                <th>Image</th>
                                <th>Extracted Text</td>
                                <th>Detected Results</th>
                                <th>Outlets Detected</th>
                            </tr>
                        </thead>

                        <tbody>
                            <tr>
                                <td><img src="{{ $entry['receipt_path'] }}" alt="Receipt Image" id="img_receipt" /></td>
                                <td>{!! nl2br($entry['ocr_result']['text']) !!}</td>
                                <td class="block-span">
                                    <div>
                                        <span>Location Matched: </span>
                                        <span>{{ boolToYesNo($entry['ocr_result']['location_matched']) }}</span>
                                    </div>
                                    <div>
                                    <div>
                                        <span>Receipt Matched: </span>
                                        <span>{{ $entry['ocr_result']['receipt_matched'] }}</span>
                                    </div>
                                    <div>
                                        <span>Duplicate Receipt: </span>
                                        <span>{{ boolToYesNo($entry['ocr_result']['duplicated_receipt']) }}</span>
                                    </div>
                                    <div>
                                        <span>Same Day Same Store: </span>
                                        <span>{{ boolToYesNo($entry['ocr_result']['potential_same_day_same_brand_receipt']) }}</span>
                                    </div>
                                    <br>
                                    <br>
                                    <hr>
                                    <div>
                                        <span><b>User Confirmed Merchant:</b></span>
                                        <span>
                                            {{ $entry['sid'] }} :
                                            {{ $entry['merchant_name'] }}
                                        </span>
                                        <span>Mall: {{ $entry['mall_name'] }}</span>
                                        <span>State: {{ $entry['merchant_state'] }}</span>
                                        <span>Location: </span>
                                        <span>{{ $entry['merchant_address'] }}</span>
                                        <span>&nbsp;</span>
                                        <span>Transaction Amount: </span>
                                        <span>{{ $entry['txn_amount'] }}</span>
                                    </div>
                                </td>
                                <td class="block-span">
                                    @php $counter = 0 @endphp
                                    @foreach($entry['ocr_result']['merchant_result']['final_result'] as $sid => $res)
                                        <div>
                                            @isset($merchants[ $sid ])
                                                <span>
                                                    <b>
                                                        {{ ++$counter }}.
                                                        {{ $merchants[ $sid ]['sid'] }} :
                                                        {{ $merchants[ $sid ]['merchant_name'] }}
                                                    </b>
                                                </span>
                                                <span>Mall: {{ $merchants[ $sid ]['mall_name'] }}</span>
                                                <span>State: {{ $merchants[ $sid ]['merchant_state'] }}</span>
                                                <span>Location: </span>
                                                <span>{{ $merchants[ $sid ]['merchant_address'] }}</span>
                                            @else
                                                <span>{{ ++$counter }}. </span>
                                            @endisset

                                            <br>
                                            <div class="row">
                                                @php $res = isset($res['search_keyword']) ? [$res] : $res @endphp
                                                @foreach($res as $keyword)
                                                    <div class="col-md-4">
                                                        <span>
                                                            <b>Search:</b>&nbsp;
                                                            {{ $keyword['search_keyword'] }}
                                                        </span>
                                                        <span>
                                                            <b>Target:</b>&nbsp;
                                                            {{ $keyword['target_keyword'] }}
                                                        </span>
                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>
                                    @endforeach
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <!-- end current record -->
                </div>
            </div>

            <div class ='card'>
                <div class="card-header">

                    <h3 class="card-title">Previous Receipts By User</h3>

                </div>
                <div class='card-body table-responsive p-0'>

                    <table class="table table-bordered table-hover yajra-datatable">
                        <thead>
                            <tr>
                                <th>No</th>
                                <th>Receipt UID</th>
                                <th>Amount</th>
                                <th>Store</th>
                                <th>Mall</th>
                                <th>State</th>
                                <th>Receipt</th>
                                <th>Date</th>
                                <th>Card ID</th>
                                <th>Grid ID</th>
                                <th>Details</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</section>

@endsection