@extends('admin::index')

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

    <section class="content">
        @include('partials.error')
        @include('admin::partials.exception')
        @include('admin::partials.toastr')

        <div class="row">
            <div class="col-md-12">
                <div class="box">
                    <div class="box-header">
                        <div class="flex space-between is-vcentered">
                            {{ Form::open(array('url' => url()->current(), 'method' => 'get')) }}
                            <div class="input-group input-group-sm" style="width: 300px;">
                                <input type="text" name="q" class="form-control pull-right" placeholder="{{ __('Tìm theo tên hoặc SĐT') }}" value="{{ request('q') }}">
                                <div class="input-group-btn">
                                    <button type="submit" class="btn btn-default"><i class="fa fa-search"></i></button>
                                </div>
                            </div>
                            {{ Form::close() }}
                            <div>
                                <button class="btn btn-warning btn-sm" data-toggle="modal" data-target="#repaymentModal"><i class="fa fa-money"></i> {{ __('Thu nợ') }}</button>
                                <button class="btn btn-primary btn-sm m-l-5" data-toggle="modal" data-target="#manualDebtModal"><i class="fa fa-plus"></i> {{ __('Ghi nợ tay') }}</button>
                            </div>
                        </div>
                    </div>
                    <div class="box-body">
                        <table class="table table-bordered with-bg" id="debtsTable">
                            <thead>
                                <tr>
                                    <th>{{ __('Khách hàng') }}</th>
                                    <th>{{ __('SĐT') }}</th>
                                    <th class="text-right">{{ __('Tổng nợ') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                            @forelse($customers as $customer)
                                <tr class="cursor-pointer debt-row" data-href="{{ route('customers.debt', [$customer->id]) }}">
                                    <td>{{ $customer->fullname }}</td>
                                    <td>{{ $customer->phone }}</td>
                                    <td class="text-right text-danger bold nowrap">{{ number_format($customer->debt_total, 1) }} ₫</td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="9" align="center"><h5>{{__('Không có dữ liệu')}}</h5></td>
                                </tr>
                            @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- Modal: Thu nợ (chọn khách hàng) --}}
    <div class="modal fade" id="repaymentModal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <form method="POST" action="" id="repaymentForm">
                    {{ csrf_field() }}
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title bold">{{ __('Thu nợ') }}</h4>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label>{{ __('Khách hàng') }} <span class="text-danger">*</span></label>
                            <select id="repaymentCustomerKey" class="form-control" style="width: 100%"></select>
                        </div>
                        <div class="form-group">
                            <label>{{ __('Tổng nợ hiện tại') }}</label>
                            <input type="text" class="form-control" id="repaymentDebtTotal" disabled>
                        </div>
                        <div class="form-group">
                            <label>{{ __('Số tiền thu') }} <span class="text-danger">*</span></label>
                            <input type="number" name="amount" class="form-control" min="0.01" step="any" required>
                        </div>
                        <div class="form-group">
                            <label>{{ __('Ghi chú') }}</label>
                            <input type="text" name="note" class="form-control">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">{{ __('Hủy') }}</button>
                        <button type="submit" class="btn btn-warning" id="repaymentSubmitBtn" disabled><i class="fa fa-money"></i> {{ __('Thu nợ') }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- Modal: Ghi nợ tay (chọn khách hàng) --}}
    <div class="modal fade" id="manualDebtModal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <form method="POST" action="" id="manualDebtForm">
                    {{ csrf_field() }}
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title bold">{{ __('Ghi nợ tay') }}</h4>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label>{{ __('Khách hàng') }} <span class="text-danger">*</span></label>
                            <select id="manualDebtCustomerKey" class="form-control" style="width: 100%"></select>
                        </div>
                        <div class="form-group">
                            <label>{{ __('Tổng nợ hiện tại') }}</label>
                            <input type="text" class="form-control" id="manualDebtDebtTotal" disabled>
                        </div>
                        <div class="form-group">
                            <label>{{ __('Số tiền nợ') }} <span class="text-danger">*</span></label>
                            <input type="number" name="amount" class="form-control" min="0.01" step="any" required>
                        </div>
                        <div class="form-group">
                            <label>{{ __('Ghi chú') }}</label>
                            <input type="text" name="note" class="form-control">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">{{ __('Hủy') }}</button>
                        <button type="submit" class="btn btn-primary" id="manualDebtSubmitBtn" disabled><i class="fa fa-plus"></i> {{ __('Ghi nợ') }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <style>
        .cursor-pointer { cursor: pointer; }
    </style>

<script>
    $(function () {
        $('.debt-row').on('click', function () {
            window.location = $(this).data('href');
        });

        var initCustomerPicker = function (selectId, modalId, debtTotalId, submitBtnId, formId, actionSuffix) {
            $(selectId).select2({
                dropdownParent: $(modalId),
                placeholder: 'Nhập TÊN hoặc SĐT để tìm',
                allowClear: true,
                escapeMarkup: function (markup) { return markup; },
                minimumInputLength: 3,
                language: 'vi',
                ajax: {
                    url: '/customers/scan',
                    dataType: 'json',
                    delay: 250,
                    processResults: function (data) {
                        return {
                            results: $.map(data, function (obj) {
                                obj.text = obj.fullname + ' - ' + obj.phone;
                                return obj;
                            })
                        };
                    }
                },
                templateResult: function (result) {
                    if (result.loading) return result.text;
                    return '<div><strong>' + result.phone + ' - ' + result.fullname + '</strong><br><small>Địa chỉ: ' + (result.address || '') + '</small></div>';
                },
                templateSelection: function (result) {
                    return result.fullname ? (result.fullname + ' (' + result.phone + ')') : result.text;
                }
            }).on('select2:select', function (e) {
                var cus = e.params.data;
                $(debtTotalId).val(Number(cus.debt_total || 0).toLocaleString('vi-VN') + ' ₫');
                $(formId).attr('action', '/customers/' + cus.id + actionSuffix);
                $(submitBtnId).prop('disabled', false);
            }).on('select2:clear', function () {
                $(debtTotalId).val('');
                $(formId).attr('action', '');
                $(submitBtnId).prop('disabled', true);
            });
        };

        initCustomerPicker('#repaymentCustomerKey', '#repaymentModal', '#repaymentDebtTotal', '#repaymentSubmitBtn', '#repaymentForm', '/repayments');
        initCustomerPicker('#manualDebtCustomerKey', '#manualDebtModal', '#manualDebtDebtTotal', '#manualDebtSubmitBtn', '#manualDebtForm', '/debts');

        $('#repaymentModal').on('hidden.bs.modal', function () {
            $('#repaymentCustomerKey').val(null).trigger('change');
            $('#repaymentDebtTotal').val('');
            $('#repaymentForm').attr('action', '')[0].reset();
            $('#repaymentSubmitBtn').prop('disabled', true);
        });

        $('#manualDebtModal').on('hidden.bs.modal', function () {
            $('#manualDebtCustomerKey').val(null).trigger('change');
            $('#manualDebtDebtTotal').val('');
            $('#manualDebtForm').attr('action', '')[0].reset();
            $('#manualDebtSubmitBtn').prop('disabled', true);
        });
    });
</script>
@endsection