@extends('admin::index')

@section('content')
    <section class="content-header">
        <h1>
            {{ $header or trans('admin.title') }}
            <small>{{ $description or trans('admin.description') }}</small>
        </h1>

        <!-- breadcrumb start -->
    @include('partials.breadcrumb')
    <!-- breadcrumb end -->

    </section>

    <section class="content">

        @include('partials.error')
        @include('admin::partials.exception')
        @include('admin::partials.toastr')

        {{-- MAIN CONTENT --}}

        <div class="row">
            <div class="col-md-12">
                <div class="nav-tabs-custom">
                    <ul class="nav nav-tabs">
                        <li><a href="{{ route('customers.edit',[$item->id]) }}">{{ __('Thông tin cơ bản') }}</a></li>
                        <li class="active"><a href="#customerTab" data-toggle="tab">{{ __('Thống kê nhanh') }}</a></li>
                        <li><a href="{{ route('customers.orders',[$item->id]) }}">{{ __('Đơn hàng đã mua') }}</a></li>
                        <li><a href="{{ route('customers.debt',[$item->id]) }}">{{ __('Công nợ') }}</a></li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane active" id="customerTab" style="min-height: 20vh">
                            <table class="table table-bordered with-bg">
                                <tr>
                                    <th class="vcenter" width="40%" rowspan="2" valign="middle"></th>
                                    <th class=" vcenter" >{{__('Số đơn đã mua')}}</th>
                                    <th class=" vcenter" >{{__('Tổng tiền đã mua')}}</th>
                                    <th class=" vcenter" >{{__('Tổng điểm đã mua')}}</th>
                                    <th class=" vcenter" >{{__('Điểm thưởng hiện tại')}}</th>
                                    <th class=" vcenter text-danger" >{{__('Tổng nợ hiện tại')}}</th>
                                </tr>
                                <tbody>
                                <tr class="h3 bold">
                                    <td class="text-center">{{ __('Tổng') }}</td>
                                    <td class="text-right nowrap">{{ $item->orders_count or 0 }}</td>
                                    <td class="text-right text-danger nowrap">{{ number_format($amountTotal) }} ₫</td>
                                    <td class="text-right nowrap">{{ number_format($pointsTotal,1) }}</td>
                                    <td class="text-right text-info nowrap">{{ number_format($item->points,1) }}</td>
                                    <td class="text-right text-danger nowrap">{{ number_format($debtTotal ?? 0, 1) }} ₫</td>
                                </tr>
                                </tbody>
                            </table>
                            <div class="flex space-between is-vcentered">
                                <a href="{{ route('customers.gift-received', [$item->id]) }}" class="pointer" style="margin: auto 0;">{{ __('Quà đã nhận') }}</a>
                                <button data-toggle="modal" data-target="#redeemPointsModal" class="btn btn-primary btn-sm"><i class="fa fa-gift m-r-5"></i>{{ __('Đổi quà') }}</button>
                            </div>
                            <hr>
                            <div class="row">
                                <div class="col-md-8">
                                    <h4 class="bold">{{__('ĐƠN HÀNG ĐÃ GHI CHÚ')}}</h4>
                                    <table class="table table-bordered with-bg">
                                        <tr>
                                            <th class="shirk vcenter" rowspan="2" valign="middle">{{__('Ngày mua')}}</th>
                                            <th class="shirk vcenter" rowspan="2">{{__('Mã đơn')}}</th>
                                            <th class="shirk vcenter" rowspan="2">{{__('Tổng tiền')}}</th>
                                            <th class="vcenter" rowspan="2">{{__('Ghi chú (double-click để edit)')}}</th>
                                        </tr>

                                        <tbody>
                                        @php
                                            $qtyCounter = 0;
                                            $total = 0;
                                            $weightCounter = [];
                                        @endphp
                                        @forelse($orders as $order)
                                            <tr data-id="{{$order->id}}">
                                                <td class="text-nowrap" >{{ $order->created_at->format('d-m-Y H:i') }}</td>
                                                <td >{{ $order->id }}</td>
                                                <td class="text-right text-danger nowrap">{{ number_format($order->total,1) }} ₫</td>
                                                <td class="addNotes" data-notes="{{ $order->notes }}">{{ $order->notes }}</td>
                                            </tr>
                                            @endforeach
                                        </tbody>

                                        {{--                                <tfoot class="h3 bold">--}}
                                        {{--                                <tr>--}}
                                        {{--                                    <td colspan="3" class="text-center">{{ __('Tổng') }}</td>--}}
                                        {{--                                    <td class="text-right nowrap">{{ $qtyCounter or 0 }}</td>--}}
                                        {{--                                    <td></td>--}}
                                        {{--                                    <td class="text-right text-danger nowrap">{{ number_format($total,1) }} ₫</td>--}}
                                        {{--                                    <td></td>--}}

                                        {{--                                </tr>--}}
                                        {{--                                </tfoot>--}}
                                    </table>
                                    @if(has_paging($orders))
                                        <div>
                                            {!!  $orders->appends(request()->query())->links() !!}
                                        </div>
                                    @endif
                                </div>
                                <div class="col-md-4">
                                    <div class="flex space-between is-vcentered">
                                        <h4 class="bold">{{__('THỐNG KÊ - SỮA')}}</h4>
                                        @if(!empty($statisticsUpdatedAt))
                                            <p class="text-muted small">{{ __('Cập nhật lần cuối') }}: {{ \Carbon\Carbon::parse($statisticsUpdatedAt)->format('d/m/Y H:i') }}</p>
                                        @else
                                            <p class="text-muted small"><em>{{ __('Chưa cập nhật') }}</em></p>
                                        @endif
                                    </div>
                                    <div>
                                        <table class="table table-bordered with-bg" style="width: 100%">
                                            <thead>
                                            <tr>
                                                <th class=" vcenter" rowspan="2" valign="middle">{{__('Loại')}}</th>
                                                <th class=" vcenter" rowspan="2">{{__('Số lượng')}}</th>
                                            </tr>
                                            </thead>
                                            @foreach($attrStatistic as $attr)
                                                <tr>
                                                    <td><span class="label label-default label-md">{{ $attr->attr_weight }}</span></td>
                                                    <td>{{ $attr->qty_total }}</td>
                                                </tr>
                                            @endforeach

                                        </table>
                                    </div>

                                    <h4 class="bold">{{__('THỐNG KÊ - TIÊU DÙNG')}}</h4>
                                    <div>
                                        <table class="table table-bordered with-bg" style="width: 100%">
                                            <thead>
                                            <tr>
                                                <th class=" vcenter" rowspan="2" valign="middle">{{__('Danh mục')}}</th>
                                                <th class=" vcenter" rowspan="2">{{__('SL')}}</th>
                                                <th class="text-right vcenter" rowspan="2">$</th>
                                            </tr>
                                            </thead>
                                            @foreach($goodsStatis as $attr)
                                                <tr>
                                                    <td><span class="label label-default label-md">{{ $attr->name }}</span></td>
                                                    <td>{{ $attr->qty_total }}</td>
                                                    <td class="text-right text-danger nowrap">{{ number_format($attr->amount_total,0) }}</td>
                                                </tr>
                                            @endforeach
                                        </table>
                                    </div>

                                    <h4 class="bold">{{__('THỐNG KÊ - THUỐC')}}</h4>
                                    <div>
                                        <table class="table table-bordered with-bg" style="width: 100%">
                                            <thead>
                                            <tr>
                                                <th class=" vcenter" rowspan="2" valign="middle">{{__('Loại')}}</th>
                                                <th class=" vcenter" rowspan="2">{{__('Số lượng')}}</th>
                                                <th class="text-right vcenter" rowspan="2">$</th>
                                            </tr>
                                            </thead>
                                            @foreach($medicineStatis as $attr)
                                                <tr>
                                                    <td><span class="label label-default label-md">{{ $attr->attr_weight }}</span></td>
                                                    <td>{{ $attr->qty_total }}</td>
                                                    <td class="text-right text-danger nowrap">{{ number_format($attr->amount_total,0) }}</td>
                                                </tr>
                                            @endforeach
                                        </table>
                                    </div>

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

    </section>
    <div class="modal fade" tabindex="-1" role="dialog" data-backdrop="static" id="addNotesModal">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                {{ Form::open(array('route' => ['orders.update_note','#id#'], 'method' => 'PUT', 'class'=>'form-horizontal' )) }}
                <div class="modal-header">
                    <h4 class="modal-title bold">{{ __('Chỉnh sửa ghi chú') }}</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">{{ __('Ghi chú') }}</label>
                        <div class="col-sm-8">
                            <textarea name="notes" class="form-control" rows="3"></textarea>
                        </div>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label class="col-sm-3 control-label">{{ __('Ghi chú') }}</label>
                            <div class="col-sm-8">
                                <textarea name="notes" class="form-control" rows="3"></textarea>
                            </div>
                        </div>

                    </div>
                    <div class="modal-footer">
                    <button type="button" class="btn btn-default " data-dismiss="modal" tabindex="-1">{{ __('Hủy bỏ') }}</button>
                    <button type="submit" class="btn btn-warning p-l-30 p-r-30"><i class="fa fa-save "></i> {{ __('Cập nhật') }}</button>
                </div>
                {{ Form::close()}}
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
    </div>
    <div class="modal fade" tabindex="-1" role="dialog" data-backdrop="static" id="redeemPointsModal">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                {{ Form::open(array('route' => ['customers.redeem-points', $item->id], 'method' => 'POST', 'class'=>'form-horizontal' )) }}
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title bold">{{ __('Đổi quà') }}</h4>
                    </div>
                    <div class="modal-body">
                        <div class="alert alert-danger alert-dismissable" style="display: none">
                            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                            <ul>
                                <li>Vui lòng chọn quà tặng khác</li>
                            </ul>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">{{ __('Số điểm hiện có') }}</label>
                            <div class="col-sm-9">
                                <style data-scope="local">
                                    .input-warning {
                                        border: 1px solid red;
                                        color: red;
                                    }
                                </style>
                                <input name="remaining-points" type="text" class="form-control" disabled value="{{ $item->points }}" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">{{ __('Ghi chú') }}</label>
                            <div class="col-sm-9">
                                <textarea name="note" class="form-control" rows="3"></textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">{{ __('Chọn quà tặng') }}</label>
                            <div class="col-sm-9">
                                <select name="gift_id" type="text"
                                        class="form-control" autocomplete="off" id="giftKey"></select>
                            </div>
                        </div>
                        <div class="form-group text-right">
                            <div class="col-sm-3"></div>
                            <div class="col-sm-9" id="giftZone" style="display: none">
                                <div class="flex gift-selected">
                                    <img class="gift-selected--img" id="giftImage" />
                                    <div class="text-left m-l-5">
                                        <strong data-model="name"></strong><br/>
                                        <small>Số điểm đổi: <span data-model="points"></span></small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                    <button type="submit" class="btn btn-warning p-l-30 p-r-30" id="redeem-btn"><i class="fa fa-gift"></i> {{ __('Đổi quà') }}</button>
                </div>
                {{ Form::close()}}
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
<style>
    .addNotes {
        cursor: pointer;
    }
    .addNotes:hover {
        text-decoration: underline;
    }
    .gift-selected {
        border-radius: 5px;
        border: 1px solid #c9c9c9;
        padding: 6px;
    }
    .gift-selected--img {
        width: 50px;
        height: 50px;
        object-fit: cover
    }
    .disable-div {
        pointer-events: none;
        opacity: 0.6;
    }
</style>

<script>
    Array.prototype.duplicate = function (check, key, index) {
        for (var i in this) {
            obj = this[i];
            if (check == obj[key]) {
                if(index) return i;
                return obj;
            }
        }
        return false;
    }

    var fillGiftInfo = function(cus){
        $('#giftZone').bindings('update')(cus);
        document.getElementById("giftImage").src = cus.image ? cus.image : '{{ asset('images/noimage.png') }}';
        $('#giftZone').show();
    }

    $(document).ready(function () {
        $('#giftZone').bindings('create')({
            name: null,
            points: null,
        })

        $('#giftKey').select2({
            dropdownParent: $('#redeemPointsModal'),
            placeholder: 'Nhập TÊN quà tặng',
            escapeMarkup: function (markup) { return markup; },
            minimumInputLength: 0,
            maximumSelectionLength: 10  ,
            closeOnSelect: true,
            language: 'vi',
            ajax: {
                url: '/settings/gifts/scan?active=1',
                dataType: 'json',
                delay: 250,
                processResults: function (data) {
                    return {
                        results: data.data
                    };
                }
            },
            templateResult: function (result, optElement) {
                if(Number(result.quantity_available) <= 0) $( optElement ).addClass('disable-div');
                if (result.loading) {
                    return result.text;
                }
                markup = '<div class="flex space-between"><div><strong>'+ result.name +'<\/strong><br><small class="flex"><span class="flex-grow">Số điểm đổi: '+result.points+'<\/span><\/small><\/div><img style="width: 45px" src="'+result.image+'"\/><\/div>'
                return markup;
            },

            templateSelection: function (result) {
                _text = result.text;
                if(result.name){
                    _text = result.name
                }
                return _text
            }
        })
        .on('select2:select', function (event) {
            if($(this).val()){
                _selected = $(this).select2('data')[0]
                $.ajax({
                    url     : '/customers/{{ $item->id }}/check-gift',
                    type    : "GET",
                    data    : {"gift_id": _selected.id},
                    dataType: "json",
                }).done(function (results) {
                    if(!results.status) {
                        swal({
                            title: results.message,
                            type: "error",
                            showCancelButton: false,
                            confirmButtonText: `Ok`,
                        }, function(isConfirm) {
                            if(isConfirm) {
                                document.getElementById("redeem-btn").disabled = true;
                                $('.alert-danger').show();
                            }
                        });
                    } else {
                        document.getElementById("redeem-btn").disabled = false;
                        $('.alert-danger').hide();
                    }
                });

                fillGiftInfo(_selected);
                let remainingPoints = Number({{ $item->points }}) - Number(_selected.points);
                if(remainingPoints < 0) $('input[name=remaining-points]').addClass('input-warning');
                else $('input[name=remaining-points]').removeClass('input-warning');
            }
        });
    });

    $(function () {
        $('.addNotes').on('dblclick', function (e) {
            var curId = $(this).closest('tr').data('id'),
                form = $('#addNotesModal').find('form'),
                _url = form.attr('action'),
                content = $(this).data('notes');

            var __x = '#id#';
            form.data('olddd') &&  (__x = form.data('olddd'))
            form.attr('action',_url.replace(__x,curId)).data('olddd',curId)

            form.find('textarea[name="notes"]').text(content)
            $('#addNotesModal').modal('show')
        })
    });
</script>
@endsection