@extends('layouts.app')
@section('title', __('contact.view_contact'))

@section('content')
    @include('layouts.partials.breadcrumb',['page_title'=> __( 'contact.view_'.$type) , 'bread_crumbs'=>array( array('title'=>__('contact.manage_your_'.$type),'url'=>route('contacts.index').'?type='.$type),array('title'=> __('contact.view_'.$type),'url'=>''))])
    <!-- Main content -->
    <section class="content">
        @component('components.widget', ['class' => 'box', 'title' => __( 'contact.view_'.$type.'_detail', ['contacts' => __('app.'.$type.'s') ])])
                <div class="row invoice-info">
            <!-- /.col
            <div class="col-md-6 invoice-col">
                <strong>From</strong>
                <address>
                    <strong class="text-blue fs-24">Doclinic</strong><br>
                    <strong class="d-inline">124 Lorem Ipsum, Suite 478,  Dummuy, USA 123456</strong><br>
                    <strong>Phone: (00) 123-456-7890 &nbsp;&nbsp;&nbsp;&nbsp; Email: info@example.com</strong>
                </address>
            </div>-->
            <div class="info_col col-md-6 invoice-col">
                @include('contact.contact_basic_info')
            </div>
            <div class="info_col col-md-6 invoice-col">
                @include('contact.contact_more_info')
            </div>
            @if( $contact->type != 'customer')
                <div class="info_col col-md-6 invoice-col">
                    @include('contact.contact_tax_info')
                </div>
            @endif
            <div class="info_col col-md-6 invoice-col">
                @include('contact.contact_payment_info')
            </div>
                            <!-- /.col -->

        </div>
        @endcomponent
    </section>
        <section class="content no-print">
                <div class="hide print_table_part">
            <style type="text/css">
                .info_col {
                    width: 25%;
                    float: left;
                    padding-left: 10px;
                    padding-right: 10px;
                }
            </style>
            <div style="width: 100%;">
                <div class="info_col">
                    @include('contact.contact_basic_info')
                </div>
                <div class="info_col">
                    @include('contact.contact_more_info')
                </div>
                @if( $contact->type != 'customer')
                    <div class="info_col">
                        @include('contact.contact_tax_info')
                    </div>
                @endif
                <div class="info_col">
                    @include('contact.contact_payment_info')
                </div>
            </div>
        </div>
        <input type="hidden" id="sell_list_filter_customer_id" value="{{$contact->id}}">
        <input type="hidden" id="purchase_list_filter_supplier_id" value="{{$contact->id}}">
                <div class="row">
            <div class="col-md-12">
                <div class="nav-tabs-custom">
                                        <ul class="nav nav-tabs nav-justified">
                        <li class="nav-item">
                            <a class="{{ isActive('ledger', $view_type) }}"
                               data-bs-toggle="tab"
                               role="tab"
                               aria-selected="{{ isSelected('ledger', $view_type) }}"
                               href="#ledger_tab"
                               data-toggle="tab"
                               aria-expanded="{{ isSelected('ledger', $view_type) }}">
                                <i class="fa fa-scroll" aria-hidden="true"></i> @lang('app.ledger')
                            </a>
                        </li>
                                            </ul>
                                        <div class="tab-content">
                        <div class="tab-pane {{ isActive('ledger', $view_type) }}" id="ledger_tab">
                            @include('contact.partials.ledger_tab')
                        </div>

                        @if(in_array($contact->type, ['both', 'supplier']))
                            <div class="tab-pane {{ isActive('purchase', $view_type) }}" id="purchases_tab">
                                <div class="row">
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            {!! Form::label('purchase_list_filter_date_range', __('report.date_range') . ':') !!}
                                            {!! Form::text('purchase_list_filter_date_range', null, ['placeholder' => __('app.select_a_date_range'), 'class' => 'form-control', 'readonly']); !!}
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        @include('purchase.partials.purchase_table')
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane {{ isActive('stock_report', $view_type) }}" id="stock_report_tab">
                                @include('contact.partials.stock_report_tab')
                            </div>
                        @endif

                        @if(in_array($contact->type, ['both', 'customer']))
                            <div class="tab-pane {{ isActive('sales', $view_type) }}" id="sales_tab">
                                <div class="row">
                                    <div class="col-md-12">
                                        @component('components.widget')
                                            @include('sell.partials.sell_list_filters', ['only' => ['sell_list_filter_payment_status', 'sell_list_filter_date_range', 'only_subscriptions']])
                                        @endcomponent
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-12">
                                        @include('sale_pos.partials.sales_table')
                                    </div>
                                </div>
                            </div>
                            @if(in_array('subscription', $enabled_modules))
                                @include('contact.partials.subscriptions')
                            @endif
                        @endif

                        <div class="tab-pane {{ isActive('documents_and_notes', $view_type) }}" id="documents_and_notes_tab">
                            @include('contact.partials.documents_and_notes_tab')
                        </div>

                        <div class="tab-pane {{ isActive('payments', $view_type) }}" id="payments_tab">
                            <div id="contact_payments_div" style="height: 500px;overflow-y: scroll;"></div>
                        </div>

                        @if( in_array($contact->type, ['customer', 'both']) && session('business.enable_rp'))
                            <div class="tab-pane {{ isActive('reward_point', $view_type) }}" id="reward_point_tab">
                                <br>
                                <div class="row">
                                    @if($reward_enabled)
                                        <div class="col-md-3">
                                            <div class="info-box bg-yellow">
                                                <span class="info-box-icon"><i class="fa fa-gift"></i></span>

                                                <div class="info-box-content">
                                                    <span class="info-box-text">{{ session('business.rp_name') }}</span>
                                                    <span class="info-box-number">{{ $contact->total_rp ?? 0 }}</span>
                                                </div>
                                                <!-- /.info-box-content -->
                                            </div>
                                        </div>
                                    @endif
                                    <div class="col-md-12">
                                        <div class="table-responsive">
                                            <table class="table table-bordered table-striped" id="rp_log_table" width="100%">
                                                <thead>
                                                <tr>
                                                    <th>@lang('messages.date')</th>
                                                    <th>@lang('sale.invoice_no')</th>
                                                    <th>@lang('app.earned')</th>
                                                    <th>@lang('app.redeemed')</th>
                                                </tr>
                                                </thead>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endif

                        <div class="tab-pane {{ isActive('activities', $view_type) }}" id="activities_tab">
                            @include('activity_log.activities')
                        </div>

                        @if(!empty($contact_view_tabs))
                            @foreach($contact_view_tabs as $key => $tabs)
                                @foreach ($tabs as $index => $value)
                                    @if($view_type == $value['tab_type'])
                                        @if(!empty($value['tab_content_path']))
                                            <div class="tab-pane active" id="{{ $value['tab_id'] }}">
                                                @include($value['tab_content_path'], $value['tab_data'])
                                            </div>
                                        @endif
                                    @endif
                                @endforeach
                            @endforeach
                        @endif
                    </div>



                </div>
            </div>
        </div>
    </section>
    <!-- /.content -->
    <div class="modal fade payment_modal" tabindex="-1" role="dialog"
         aria-labelledby="gridSystemModalLabel">
    </div>
    <div class="modal fade edit_payment_modal" tabindex="-1" role="dialog"
         aria-labelledby="gridSystemModalLabel">
    </div>
    <div class="modal fade pay_contact_due_modal" tabindex="-1" role="dialog"
         aria-labelledby="gridSystemModalLabel"></div>
    <div class="modal fade" id="edit_ledger_discount_modal" tabindex="-1" role="dialog"
         aria-labelledby="gridSystemModalLabel">
    </div>


@stop
@section('javascript')
    <script type="text/javascript">
        $(document).ready(function () {
            $('#ledger_date_range').daterangepicker(
                dateRangeSettings,
                function (start, end) {
                    $('#ledger_date_range').val(start.format(moment_date_format) + ' ~ ' + end.format(moment_date_format));
                }
            );
            $('#ledger_date_range, #ledger_location').change(function () {
                get_contact_ledger();
            });
            get_contact_ledger();

            rp_log_table = $('#rp_log_table').DataTable({
                processing: true,
                serverSide: true,
                aaSorting: [[0, 'desc']],
                ajax: '/sells?customer_id={{ $contact->id }}&rewards_only=true',
                columns: [
                    {data: 'transaction_date', name: 'transactions.transaction_date'},
                    {data: 'invoice_no', name: 'transactions.invoice_no'},
                    {data: 'rp_earned', name: 'transactions.rp_earned'},
                    {data: 'rp_redeemed', name: 'transactions.rp_redeemed'},
                ]
            });

            supplier_stock_report_table = $('#supplier_stock_report_table').DataTable({
                processing: true,
                serverSide: true,

                'ajax': {
                    url: "adf",
                    data: function (d) {
                        d.location_id = $('#sr_location_id').val();
                    }
                },
                columns: [
                    {data: 'product_name', name: 'p.name'},
                    {data: 'sub_sku', name: 'v.sub_sku'},
                    {data: 'purchase_quantity', name: 'purchase_quantity', searchable: false},
                    {data: 'total_quantity_sold', name: 'total_quantity_sold', searchable: false},
                    {data: 'total_quantity_transfered', name: 'total_quantity_transfered', searchable: false},
                    {data: 'total_quantity_returned', name: 'total_quantity_returned', searchable: false},
                    {data: 'current_stock', name: 'current_stock', searchable: false},
                    {data: 'stock_price', name: 'stock_price', searchable: false}
                ],
                fnDrawCallback: function (oSettings) {
                    __currency_convert_recursively($('#supplier_stock_report_table'));
                },
            });

            $('#sr_location_id').change(function () {
                supplier_stock_report_table.ajax.reload();
            });

            $('#contact_id').change(function () {
                if ($(this).val()) {
                    window.location = "{{url('/contacts')}}/" + $(this).val();
                }
            });

            $('a[href="#sales_tab"]').on('shown.bs.tab', function (e) {
                sell_table.ajax.reload();
            });

            //Date picker
            $('#discount_date').datetimepicker({
                format: moment_date_format + ' ' + moment_time_format,
                ignoreReadonly: true,
            });

            $(document).on('submit', 'form#add_discount_form, form#edit_discount_form', function (e) {
                e.preventDefault();
                var form = $(this);
                var data = form.serialize();

                $.ajax({
                    method: 'POST',
                    url: $(this).attr('action'),
                    dataType: 'json',
                    data: data,
                    success: function (result) {
                        if (result.success === true) {
                            $('div#add_discount_modal').modal('hide');
                            $('div#edit_ledger_discount_modal').modal('hide');
                            toastr.success(result.msg);
                            form[0].reset();
                            form.find('button[type="submit"]').removeAttr('disabled');
                            get_contact_ledger();
                        } else {
                            toastr.error(result.msg);
                        }
                    },
                });
            });

            $(document).on('click', 'button.delete_ledger_discount', function () {
                swal({
                    title: LANG.sure,
                    icon: 'warning',
                    buttons: true,
                    dangerMode: true,
                }).then(willDelete => {
                    if (willDelete) {
                        var href = $(this).data('href');
                        var data = $(this).serialize();

                        $.ajax({
                            method: 'DELETE',
                            url: href,
                            dataType: 'json',
                            data: data,
                            success: function (result) {
                                if (result.success == true) {
                                    toastr.success(result.msg);
                                    get_contact_ledger();
                                } else {
                                    toastr.error(result.msg);
                                }
                            },
                        });
                    }
                });
            });
        });

        $(document).on('shown.bs.modal', '#edit_ledger_discount_modal', function (e) {
            $('#edit_ledger_discount_modal').find('#edit_discount_date').datetimepicker({
                format: moment_date_format + ' ' + moment_time_format,
                ignoreReadonly: true,
            });
        })

        $("input.transaction_types, input#show_payments").on('ifChanged', function (e) {
            get_contact_ledger();
        });

        $(document).on('change', 'input[name="ledger_format"]', function () {
            get_contact_ledger();
        })

        $(document).one('shown.bs.tab', 'a[href="#payments_tab"]', function () {
            get_contact_payments();
        })

        $(document).on('click', '#contact_payments_pagination a', function (e) {
            e.preventDefault();
            get_contact_payments($(this).attr('href'));
        })

        function get_contact_payments(url = null) {
            if (!url) {
                url = "getContactPayments";
            }
            $.ajax({
                url: url,
                dataType: 'html',
                success: function (result) {
                    $('#contact_payments_div').fadeOut(400, function () {
                        $('#contact_payments_div')
                            .html(result).fadeIn(400);
                    });
                },
            });
        }

        function get_contact_ledger() {

            var start_date = '';
            var end_date = '';
            var transaction_types = $('input.transaction_types:checked').map(function (i, e) {
                return e.value
            }).toArray();
            var show_payments = $('input#show_payments').is(':checked');
            var location_id = $('#ledger_location').val();

            if ($('#ledger_date_range').val()) {
                start_date = $('#ledger_date_range').data('daterangepicker').startDate.format('YYYY-MM-DD');
                end_date = $('#ledger_date_range').data('daterangepicker').endDate.format('YYYY-MM-DD');
            }

            var format = $('input[name="ledger_format"]:checked').val();
            var data = {
                start_date: start_date,
                transaction_types: transaction_types,
                show_payments: show_payments,
                end_date: end_date,
                format: format,
                location_id: location_id
            }
            $.ajax({
                url: '/contacts/ledger?contact_id={{$contact->id}}',
                data: data,
                dataType: 'html',
                success: function (result) {
                    $('#contact_ledger_div')
                        .html(result);
                    __currency_convert_recursively($('#contact_ledger_div'));

                    $('#ledger_table').DataTable({
                        searching: false,
                        ordering: false,
                        paging: false,
                        dom: 't'
                    });
                },
            });
        }

        $(document).on('click', '#send_ledger', function () {
            var start_date = $('#ledger_date_range').data('daterangepicker').startDate.format('YYYY-MM-DD');
            var end_date = $('#ledger_date_range').data('daterangepicker').endDate.format('YYYY-MM-DD');
            var format = $('input[name="ledger_format"]:checked').val();

            var location_id = $('#ledger_location').val();

            var url = "NotificationController/getTemplate" + '?start_date=' + start_date + '&end_date=' + end_date + '&format=' + format + '&location_id=' + location_id;

            $.ajax({
                url: url,
                dataType: 'html',
                success: function (result) {
                    $('.view_modal')
                        .html(result)
                        .modal('show');
                },
            });
        })

        $(document).on('click', '#print_ledger_pdf', function () {
            var start_date = $('#ledger_date_range').data('daterangepicker').startDate.format('YYYY-MM-DD');
            var end_date = $('#ledger_date_range').data('daterangepicker').endDate.format('YYYY-MM-DD');

            var format = $('input[name="ledger_format"]:checked').val() || 'format_1';


            var location_id = $('#ledger_location').val();

            var url = $(this).data('href') + '&start_date=' + start_date + '&end_date=' + end_date + '&format=' + format + '&location_id=' + location_id;
            window.open(url);
        });

    </script>
    @include('sale_pos.partials.sale_table_javascript')
    <script src="{{ asset('js/payment.js?v=' . $asset_v) }}"></script>
    @if(in_array($contact->type, ['both', 'supplier']))
        <script src="{{ asset('js/purchase.js?v=' . $asset_v) }}"></script>
    @endif

    <!-- document & note.js -->
    @include('documents_and_notes.document_and_note_js')
    @if(!empty($contact_view_tabs))
        @foreach($contact_view_tabs as $key => $tabs)
            @foreach ($tabs as $index => $value)
                @if(!empty($value['module_js_path']))
                    @include($value['module_js_path'])
                @endif
            @endforeach
        @endforeach
    @endif

    <script type="text/javascript">
        $(document).ready(function () {
            $('#purchase_list_filter_date_range').daterangepicker(
                dateRangeSettings,
                function (start, end) {
                    $('#purchase_list_filter_date_range').val(start.format(moment_date_format) + ' ~ ' + end.format(moment_date_format));
                    purchase_table.ajax.reload();
                }
            );
            $('#purchase_list_filter_date_range').on('cancel.daterangepicker', function (ev, picker) {
                $('#purchase_list_filter_date_range').val('');
                purchase_table.ajax.reload();
            });
        });
    </script>
    @php /*include('sale_pos.partials.subscriptions_table_javascript', ['contact_id' => $contact->id]) */ @endphp
@endsection