@extends('layout.app')
@section('_style')
    <link href="{{ asset(('css/order.css')) }}" rel="stylesheet"/>
    <style>
        a.white {
            color: #fff;
        }
    </style>
@endsection
@section('content')
    <div class="crm-page invoice-page">
        <div class="crm-page-header">
            <div class="crm-page-header__main">
                <a class="btn btn-default crm-back-btn" href="{{route('order.list')}}">
                    <i class="fas fa-arrow-left"></i> Quay lại
                </a>
                <div>
                    <h1 class="crm-page-header__title">Thanh toán / Hóa đơn</h1>
                </div>
            </div>
            <div class="crm-page-header__actions">
                @if($order->the_rest <= 0)
                    <span class="crm-badge crm-badge--success crm-badge--lg"><i class="fas fa-check"></i> Đã thanh toán</span>
                @else
                    <span class="crm-badge crm-badge--warning crm-badge--lg"><i class="fas fa-clock"></i> Còn nợ {{ number_format($order->the_rest) }}</span>
                @endif
            </div>
        </div>

        <div class="row invoice-page__grid">
            <div class="col-lg-8">
                <div class="card crm-card invoice-card">
                    <div class="invoice-card__title">Hóa đơn dịch vụ</div>

                    <div class="invoice-customer">
                        <img class="invoice-customer__avatar"
                             src="{{@$order->customer->avatar ?: '/default/noavatar.png'}}" alt="">
                        <div>
                            <div class="invoice-customer__name">
                                <a href="{{url('customers/'.$order->customer->id)}}">{{ @$order->customer->full_name }}</a>
                                @if(@$order->customer->account_code)
                                    <span class="crm-badge crm-badge--pink">{{ $order->customer->account_code }}</span>
                                @endif
                            </div>
                            <div class="invoice-customer__meta">
                                <span><i class="fas fa-phone"></i>
                                    <a class="__clickToCall" data-phone="{{@$order->customer->phone}}" data-type="crm">{{ @str_limit($order->customer->phone,7,'xxx') }}</a>
                                </span>
                                @if(@$order->customer->address)
                                    <span><i class="fas fa-map-marker-alt"></i> {{ $order->customer->address }}</span>
                                @endif
                            </div>
                        </div>
                    </div>

                    <div class="invoice-facts">
                        <div class="invoice-facts__item"><span>Mã hóa đơn</span><b>{{ @$order->code }}</b></div>
                        <div class="invoice-facts__item"><span>Ngày tạo</span><b>{{ date('d-m-Y', strtotime($order->created_at)) }}</b></div>
                        <div class="invoice-facts__item"><span>Người lên đơn</span><b>{{ @$order->owner->full_name }}</b></div>
                        <div class="invoice-facts__item"><span>Chi nhánh</span><b>{{ @$order->branch->name }}</b></div>
                        <div class="invoice-facts__item"><span>Hình thức thanh toán</span><b>{{ @$order->name_payment_type }}</b></div>
                        @if($order->hsd)
                            <div class="invoice-facts__item"><span>Ngày hết hạn</span><b>{{ date('d-m-Y', strtotime($order->hsd)) }}</b></div>
                        @endif
                    </div>

                    <div class="table-responsive">
                        <table class="table crm-table invoice-table">
                            <thead>
                            <tr>
                                <th class="text-center" style="width:48px">#</th>
                                <th>Sản phẩm | Dịch vụ</th>
                                <th class="text-center">SL | Số buổi</th>
                                <th class="text-right">Đơn giá</th>
                                <th class="text-center">VAT (%)</th>
                                <th class="text-center">CK (%)</th>
                                <th class="text-right">CK (đ)</th>
                                <th class="text-right">Thành tiền</th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($order->orderDetails as $key => $orderDetail)
                                <tr>
                                    <td class="text-center">{{ $key + 1 }}</td>
                                    <td class="invoice-table__name">{{ @$orderDetail->service->name }}</td>
                                    <td class="text-center">{{@$orderDetail->quantity>0 ? $orderDetail->quantity: $orderDetail->days}}</td>
                                    <td class="text-right">{{ number_format(@$orderDetail->price) }}</td>
                                    <td class="text-center">{{ $orderDetail->vat }}</td>
                                    <td class="text-center">{{ $orderDetail->percent_discount }}</td>
                                    <td class="text-right">{{ number_format($orderDetail->number_discount) }}</td>
                                    <td class="text-right bold">{{ number_format($orderDetail->total_price) }}</td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div>

                    <div class="invoice-total">
                        <div class="invoice-total__row"><span>Khuyến mại (voucher)</span><b class="text-danger">{{ number_format($order->discount) }}</b></div>
                        <div class="invoice-total__row"><span>Chiết khấu</span><b class="text-danger">{{ number_format($order->discount_order) }}</b></div>
                        <div class="invoice-total__row invoice-total__row--grand"><span>Tổng cộng</span><b>{{ number_format($order->all_total) }}</b></div>
                    </div>
                </div>
            </div>

            <div class="col-lg-4" id="right_panel">
                <div class="card crm-card invoice-side">
                    <div class="invoice-card__title">Đơn hàng / Thanh toán</div>

                    @if($order->the_rest <= 0)
                        <div class="alert alert-success crm-payment-alert">
                            <i class="fas fa-check-circle"></i>
                            <div>
                                <b>Đã thanh toán thành công</b>
                                <p>Cảm ơn bạn đã tin tưởng và sử dụng dịch vụ của chúng tôi!</p>
                            </div>
                        </div>
                    @else
                        <div class="alert alert-warning crm-payment-alert">
                            <i class="fas fa-exclamation-circle"></i>
                            <div>
                                <b>Chờ thanh toán</b>
                                <p>Đơn hàng còn lại {{ number_format($order->the_rest) }} chưa thu.</p>
                            </div>
                        </div>
                    @endif

                    <ul class="crm-fact-list">
                        <li><span class="crm-fact-list__icon crm-fact-list__icon--primary"><i class="fas fa-wallet"></i></span>
                            <span class="crm-fact-list__label">Doanh số</span>
                            <span class="crm-fact-list__value" id="all_total">{{ number_format($order->all_total) }}</span></li>
                        <li><span class="crm-fact-list__icon crm-fact-list__icon--pink"><i class="fas fa-tag"></i></span>
                            <span class="crm-fact-list__label">Khuyến mại (voucher)</span>
                            <span class="crm-fact-list__value" id="all_total1">{{ number_format($order->discount) }}</span></li>
                        <li><span class="crm-fact-list__icon crm-fact-list__icon--warning"><i class="fas fa-percent"></i></span>
                            <span class="crm-fact-list__label">Chiết khấu</span>
                            <span class="crm-fact-list__value">{{ number_format($order->discount_order) }}</span></li>
                        <li><span class="crm-fact-list__icon crm-fact-list__icon--success"><i class="fas fa-check"></i></span>
                            <span class="crm-fact-list__label">Đã thanh toán</span>
                            <span class="crm-fact-list__value" id="gross_revenue">{{ number_format($order->gross_revenue) }}</span></li>
                        <li><span class="crm-fact-list__icon crm-fact-list__icon--danger"><i class="fas fa-coins"></i></span>
                            <span class="crm-fact-list__label">Còn lại</span>
                            <span class="crm-fact-list__value crm-fact-list__value--strong" id="the_rest">{{ number_format($order->the_rest) }}</span></li>
                    </ul>

                    <div id="attachments" class="files">
                        <div id="progress" class="progress" style="display:none">
                            <div class="progress-bar progress-bar-success" role="progressbar"></div>
                        </div>
                        <div id="files" class="files"></div>
                    </div>
                </div>

                <div class="card crm-card detail-pay-dvh position">
                    @include('order.payment-history')
                </div>
            </div>
        </div>

        <div class="fixed-bottom">
            <div class="list_task_footer col-md-12 padding menu-footer crm-action-bar">
                <div class="fl task_footer_box">
                    <button class="btn btn-primary paymentOrder" data-toggle="modal" data-target="#paymentModal">
                        <i class="fas fa-credit-card"></i> Thanh toán
                    </button>
                </div>
                <div class="btn-group dropup fl task_footer_box">
                    <a class="btn btn-success" href="/order-pdf/{{$order->id}}"><i class="fa fa-print"></i> In</a>
                </div>
                <div class="btn-group dropup fl task_footer_box">
                    <a class="btn btn-warning" href="/commission/{{$order->id}}"><i class="fas fa-dollar-sign"></i> Hoa hồng</a>
                </div>
                <div class="btn-group dropup fl task_footer_box">
                    <button class="btn btn-pink" data-toggle="modal" data-target="#addGifts">
                        <i class="fa fa-gift"></i> Quà tặng
                    </button>
                </div>
                <div class="btn-group dropup fl task_footer_box">
                    <button class="btn btn-danger edit-order" data-order-id="{{$order->id}}">
                        <i class="fa fa-balance-scale"></i> Trừ L.trình
                    </button>
                </div>
                <div class="fl task_footer_box cancel_order">
                    <a class="btn btn-default" href="{{route('order.list')}}">Trở lại</a>
                </div>
            </div>
        </div>
        @include('order.modal')
        @include('gifts._form')
        @include('customers.modal_update_history_order')
        @endsection
        @section('_script')
            <script src="{{ asset('js/format-number.js') }}"></script>
            <script>

                var orderCurrentId = '';
                $(document).on('click', '.edit-order', function () {
                    // let id = $(this).data('order-id');
                    orderCurrentId = $(this).data('order-id');
                    let html = "";
                    //
                    $.ajax({
                        type: 'get',
                        url: "{{ Url('ajax/services-with-order/') }}" + "/" + orderCurrentId,
                        success: function (res) {
                            res.forEach(element => {
                                html += `<option value="` + element.id + `">` + element.name + `</option>`;
                            });
                            $('#service_modal').html(html);
                            $('#updateHistoryOrderModal').modal('show');
                        }
                    })
                })
                $('.save-update-history-order').click(function () {
                    swal({
                        title: 'Bạn có muốn xử  liệu trình ?',
                        showCancelButton: true,
                        cancelButtonClass: 'btn-secondary waves-effect',
                        confirmButtonClass: 'btn-danger waves-effect waves-light',
                        confirmButtonText: 'OK'
                    }, function () {
                        $.ajax({
                            type: 'PUT',
                            url: "{{ Url('ajax/orders/') }}" + "/" + orderCurrentId,
                            data: $('#historyUpdateOrrder').serialize(),
                            success: function (res) {
                                if (res == 'Success')
                                    alert("Cập nhật liệu trình thành công");
                                else if (res == "Failed")
                                    alert("Số liệu trình đã hết");
                                window.location.reload();
                            }
                        })
                    })
                });

                $(document).on('keyup', '.number', function () {
                    let earn = $(this).val();
                    $(this).val(formatNumber(earn));
                })
                $(document).ready(function () {
                    $('[data-toggle="datepicker"]').datepicker({
                        format: 'dd-mm-yyyy',
                        autoHide: true,
                        zIndex: 2048,
                    });

                    $('#product_id').change(function () {
                        let id = $(this).val();
                        if (!id) return false;
                        var text = $(this).find(":selected").text();
                        var html = `<tr>
                <input type="hidden" name="product[]" value="` + id + `">
                <td><span id="">` + text + `</span></td>
                <td style="width: 30%;">
                    <input type="text" maxlength="5" class="form-control txt-dotted number"style="height: 23px !important;" name="quantity[]">
                </td>
                <td> <a class="delGift"><i class="fa fa-trash-alt"></i></a> </td>
                </tr>`;
                        $('.list-product').append(html);
                    })
                });

                $(document).on('click', '.delGift', function (e) {
                    $(this).closest('tr').remove();
                });

                $(document).on('click', '#finish', function () {
                    $('#wallet-error').hide();
                    let paymentDate = $('.payment-date').val();
                    let paymentType = $('.payment-type').val();
                    let grossRevenue = $('.gross-revenue').val();
                    let description = $('.description').val();
                    let customer_id = '{{@$order->customer->id}}';
                    let maxWallet = $('#maxWallet').val();
                    let check = replaceNumber(grossRevenue);
                    if (paymentType == 3 && (parseInt(check) > parseInt(maxWallet))) {

                        $('#wallet-error').show();
                        return false;
                    }

                    $.ajax({
                        url: "{{ Url('order/'.$order->id. '/show') }}",
                        method: "put",
                        data: {
                            payment_date: paymentDate,
                            payment_type: paymentType,
                            gross_revenue: grossRevenue,
                            description: description,
                            customer_id: customer_id,
                        }
                    }).done(function () {
                        window.location.reload();
                    });
                });

                $(document).on('focusout', '.gross-revenue', function () {
                    let grossRevenue = $('.gross-revenue').val();

                    $.ajax({
                        url: "{{ Url('ajax/info-order-payment/'.$order->id) }}",
                        method: "get",
                        data: {
                            gross_revenue: grossRevenue
                        }
                    }).done(function (data) {
                        $(".cash").text(formatNumber(data.cash));
                        $('.remain_cash').text(formatNumber(data.remain_cash));
                        $('.return_cash').text(formatNumber(data.return_cash));
                    });
                });
            </script>
@endsection