@extends('layouts/pos_layout')
@section('title', '| ' . $data['pageTitle'])
@section('content')
    <style>
        .page-item.active .page-link {
            background-color: lightgrey !important;
            border: 1px solid black;
        }

        .page-link {
            color: black !important;
        }

    </style>
    <div class="row page-wrap">
        <div class="col-md-12">
            <div class="" style="">
                <div class=" ">
                    <div class="panel panel-default" style="background-color:#708090;">
                            <div class="panel-heading" style="padding-bottom:0px">
                                <div class="panel-title">
                                    <h2>{!! $data['pageTitle'] !!}</h2>
                                </div>
                                <div class="panel-options">
                                    <a href="{{url('pos/addCustomer/')}}" class="btn btn-info pull-right addViewBtn">
                                        <i class="glyphicon glyphicon-plus-sign addIcon"></i>{{ $data['addBtnLabel'] }}
                                    </a>
                                    @if($data['isCustomerExcelStatus'] == 'true')
                                    <a class="btn btn-info pull-right addViewBtn" href="{{asset('images/customer_sample/customer_sample.xlsx')}}"><i class="glyphicon glyphicon-download addIcon"></i>Download Customer Excel Sample</a>
                                    <a href="javascript:void(0);" onclick="showCustomerExcelModal('Upload Customer Excel Sheet','Save')" class="btn btn-info pull-right addViewBtn"><i class="glyphicon glyphicon-plus-sign addIcon"></i>Upload Customer Excel Sheet</a>
                                    @endif
                                </div>
                            </div>

                            <div class="panel-body panelBodyView">
                                @php
                                    if($data['branchName']->name =='Head Office')
                                    {
                                    $searchElements = [
                                            ['element' => 'branchId'],
                                            ['element' => 'custom', 'id' => 'fillCustomerId', 'name' => 'fillCustomerId', 'type' => 'text', 'label' => 'Customer Id'],
                                            ['element' => 'custom', 'id' => 'fillCustomerName', 'name' => 'fillCustomerName', 'type' => 'text', 'label' => 'Customer Name'],
                                            ['element' => 'custom', 'id' => 'fillCustomerPhone', 'name' => 'fillCustomerPhone', 'type' => 'text', 'label' => 'Customer Phone']

                                        ];
                                    }
                                    else{
                                        $searchElements = [

                                            ['element' => 'custom', 'id' => 'fillCustomerId', 'name' => 'fillCustomerId', 'type' => 'text', 'label' => 'Customer Id'],
                                            ['element' => 'custom', 'id' => 'fillCustomerName', 'name' => 'fillCustomerName', 'type' => 'text', 'label' => 'Customer Name'],
                                            ['element' => 'custom', 'id' => 'fillCustomerPhone', 'name' => 'fillCustomerPhone', 'type' => 'text', 'label' => 'Customer Phone']
                                        ];
                                    }


                                @endphp
                                @include('partials.searchPanel.main', ['searchElements' => $searchElements])

                                <table class="table table-striped table-bordered table-condensed first-col-dark" id="datatable" style="width:100%">
                                    <thead>

                                            <tr>
                                                <th  width="5%" class="text-center  sorting_1"  @if ($data['isImportFromExcelStatus'] == 'true') rowspan="2" @endif>SL#</th>
                                                @if ($data['is_incentive_type'] == 1)
                                                <th width="10" class="text-center  sorting_1"  @if ($data['isImportFromExcelStatus'] == 'true') rowspan="2" @endif>Reference Customer</th>
                                                @endif
                                                <th width="10" class="text-center  sorting_1"  @if ($data['isImportFromExcelStatus'] == 'true') colspan="2" @endif>Customer Id</th>
                                                <th width="10" class="text-center"  @if ($data['isImportFromExcelStatus'] == 'true') rowspan="2" @endif>Name</th>
                                                <th width="10" class="text-center"  @if ($data['isImportFromExcelStatus'] == 'true') rowspan="2" @endif>Date Of Birth</th>
                                                <th width="10" class="text-center"  @if ($data['isImportFromExcelStatus'] == 'true') rowspan="2" @endif>Phone</th>
                                                <th width="10" class="text-center"  @if ($data['isImportFromExcelStatus'] == 'true') rowspan="2" @endif>Father Name</th>
                                                <th width="10" class="text-center"  @if ($data['isImportFromExcelStatus'] == 'true') rowspan="2" @endif>Spouse Name</th>
                                                <th width="10" class="text-center"  @if ($data['isImportFromExcelStatus'] == 'true') rowspan="2" @endif>Email</th>
                                                <th width="10" class="text-center"  @if ($data['isImportFromExcelStatus'] == 'true') rowspan="2" @endif>National Id</th>
                                                <th width="7%" class="text-center" @if ($data['isImportFromExcelStatus'] == 'true') rowspan="2" @endif>Action</th>
                                            </tr>
                                            @if ($data['isImportFromExcelStatus'] == 'true')
                                            <tr>
                                                <th width="10" class="text-center">Old Id</th>
                                                <th width="10" class="text-center">New Id</th>
                                            </tr>  
                                            @endif    
                                    </thead>
                                    <tbody id="tableBodySection">

                                    </tbody>

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


    <div id="myModal" class="modal fade" style="margin-top:3%">
        <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
            <h4 class="modal-title" style="clear:both"></h4>
            </div>
            <div class="modal-body">
            <div class="deleteContent" style="padding-bottom:20px;">
                <h4>You are about to delete this item this procedure is irreversible !</h4>
                <h4>Do you want to proceed ?</h4>
                <span class="hidden id"></span>
            </div>
            <div class="modal-footer">
                <p id="MSG" class="pull-left" style="color:red"></p>
                <p id="MSGS" class="pull-left" style="color:green"></p>
                {!! Form::button('<span id=""></span>', ['class' => 'btn actionBtn', 'id' => 'footer_action_button'] ) !!}
                {!! Form::button('<span id=""></span>', ['class' => 'btn actionBtn',  'data-dismiss' => 'modal', 'id' => 'footer_action_button2'] ) !!}

                {!! Form::button('<span id=""> Close</span>',['class' => 'btn btn-warning', 'data-dismiss' => 'modal' , 'id' => 'footer_action_button_dismis'] ) !!}

            </div>
            </div>
        </div>
        </div>
    </div>
    <div id="myExcelUploadModel" class="modal fade" style="margin-top:13%">
        <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
            <h4 class="modal-title" style="clear:both"></h4>
            </div>
            <div class="modal-body">
            </div>
            </div>
        </div>
        </div>
    </div>
    @include('pos/tools/customer/customerDetails')
    @include('pos/tools/customer/excelCustomerModal')
<script>
    var isImportFromExcelStatusJQ = {{ $data['isImportFromExcelStatus'] }};
    $(document).ready(function() {

        var dataTable = $('#datatable').DataTable({
            "sDom": "ltipr", // For removeing default Search bar //
            "processing": true,
            "serverSide": true,
            "ordering": false,

            "ajax": {
                "url": "{{ Request::url() }}",
                "type": "POST",
                "data": function(d) {
                    var inputs = {};
                    $.each($('form').serializeArray(), function() {
                        inputs[this.name] = this.value;
                    });
                    d.filter = inputs;
                }
            },

            "columns": [{
                    "data": "sl"
                },
                @if($data['isImportFromExcelStatus'] == 'true')
                {
                    "data": "old_customer_id_no",
                    className: "text-align-center"
                },
                @endif
                {
                    "data": "customer_id_no",
                    className: "text-align-center"
                },
                @if ($data['is_incentive_type'] == 1)
                {
                    "data": "reference_customer_name",
                    className: "text-align-center"
                },
                @endif
                {
                    "data": "customer_name",
                    className: "text-align-center"
                },
                {
                    "data": "customer_dob",
                    className: "text-align-center"
                },
                {
                    "data": "customer_phone",
                    className: "text-align-center"
                },
                {
                    "data": "father_name",
                    className: "text-align-center"
                },
                {
                    "data": "spouse_name",
                    className: "text-align-center"
                },
                {
                    "data": "email",
                    className: "text-align-center"
                },
                {
                    "data": "national_id",
                    className: "text-align-center"
                },
                {
                    "data": "id",
                    className: "text-center"
                }
            ],

            "columnDefs": [{
                "targets": -1,
                "data": "id",
                "render": function(data, type, row, meta) {

                    var activedate = "{{ $data['branch_active_date'] }}";

                    return '<a href="javascript:;"  data-id=' + data +
                        ' class="btn btn-xs form5"><i class="fa fa-eye" aria-hidden="true"></i></a>' +
                        '<a href="{{url("pos/editCustomer/")}}/' + data +
                        '"class="btn btn-xs btn-info"><i class="fa fa-edit" aria-hidden="true"></i></a> ' +
                        '<a href="javascript:;"  data-id=' + data +
                        ' class="btn btn-xs btn-danger delete-action"><i class="fa fa-trash" aria-hidden="true"></i></a>';


                }
            }]


        });

        $("#searchForm").submit(function(e) {
            e.preventDefault();
            dataTable.draw();
        });



            //delete function
        $(document).on('click', '.delete-action', function() {

            Swal.fire({
                title: 'Are you sure?',
                text: "Once delete you won't be able to revert this!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#7e7979',
                confirmButtonText: 'Yes, delete it!'
            }).then((result) => {
                if (result.isConfirmed) {

                $.ajax({
                    type: 'post',
                    url: './deleteCustomerItem',
                    // url: '{{ url("/pos/deleteCustomerItem") }}',
                    data: {
                        '_token': $('input[name=_token]').val(),
                        'id': $(this).data('id')
                    },
                    success: function(_response) {
                        if(_response.responseTitle == 'success') {
                        Swal.fire({
                            icon: 'success',
                            title: 'Deleted!',
                            text: 'This data has been deleted.',
                            showConfirmButton: false,
                            timer: 1500
                        })

                        setTimeout(function(){
                            dataTable.ajax.reload();
                        }, 1000);


                        }
                        else {
                        Swal.fire({
                            icon: 'error',
                            title: 'Failed to delete!',
                            text: 'This data has not been deleted.',
                            showConfirmButton: true,
                        })
                        }


                        // setTimeout(function(){
                        //   window.location.reload(1);
                        // }, 1000);
                    }
                });



                }
            })


        });



      //Customer details model
      $(document).on('click', '.form5', function() {
            if(hasAccess('pos/customerDetails')){
                $('#imageShow3').empty();
                var id = ($(this).data('id'));
                var crsf = ($(this).data('token'));
                //alert(id);alert(crsf);
                $.ajax({
                    type: 'post',
                    url: './customerDetails',
                    data: {
                        '_token': $('input[name=_token]').val(),
                        'id': id
                    },
                    dataType: 'json',
                    success: function( _response ){

                      $.each(_response.data, function( index, value )
                      {
                          $('#reference_parent_customer_id').text(_response.data.reference_parent_customer_id);
                          $('#customer_id_no').text(_response.data.customer_id_no);
                          $('#type').text(_response.data.type);
                          $('#customer_name').text(_response.data.customer_name);
                          $('#father_name').text(_response.data.father_name);
                          $('#Spouse_name').text(_response.data.Spouse_name);
                          $('#email').text(_response.data.email);
                          $('#phone').text(_response.data.phone);
                          $('#branch').text(_response.data.branch);
                          $('#national_id').text(_response.data.national_id);
                          $('#date_of_birth').text(_response.data.date_of_birth);
                          $('#marital_status').text(_response.data.marital_status);
                          $('#yearly_income').text(_response.data.yearly_income);
                          $('#description').text(_response.data.description);

                          $('#present_devision').text(_response.data.present_devision);
                          $('#present_district').text(_response.data.present_district);
                          $('#present_upazila').text(_response.data.present_upazila);
                          $('#present_union').text(_response.data.present_union);
                          $('#present_village').text(_response.data.present_village);
                          $('#present_remark').text(_response.data.present_remark);

                          $('#permanent_devision').text(_response.data.permanent_devision);
                          $('#permanent_district').text(_response.data.permanent_district);
                          $('#permanent_upazila').text(_response.data.permanent_upazila);
                          $('#permanent_union').text(_response.data.permanent_union);
                          $('#permanent_village').text(_response.data.permanent_village);
                          $('#permanent_remark').text(_response.data.permanent_remark);

                      });

                        var imageName = _response.data.image_path;

                        if(imageName) $('#imageShow3').append('<img src="{{ asset("images/pos/customer/") }}'+ '/' + imageName +'" width="300" height="300" class="amni"/>');
                        $('.modal-title').text('Customer Details');
                        $('.modal-header').css({"background-color":"black", "color":"white", "padding":"10px"});
                        $('.modal-dialog').css('width','90%');
                        $('.deleteContent').hide();
                        $('.modal-footer').hide();
                        $('.form-horizontal').show();
                        $('#myModal2').modal('show');

                    },
                    error: function( data ){
                        alert();
                    }
                });
            }

        });

        $(document).on('click','#excel-customer-upload-btn',function(){
            let form = document.getElementById('upload_customer_excel_form');
            let formData = new FormData(form);

            $.ajax({
                url: './excellFileUploadCustomer',
                type: "POST",
                data: formData,
                dataType: "JSON",
                contentType: false,
                processData: false,
                cache: false,
                beforeSend: function() {
                    $('#loadingModal').show();
                },
                success: function (_response) {
                $('#loadingModal').hide();
                if (_response.responseTitle == 'error') {
                        $('#import_customer_ide').empty();
                        $.each(_response.responseText, function (key, value){
                            $('#import_customer_ide').append('<span style="color:red;">' + value.errors +' In row = '+value.row+ '</span><br>');
                        });
                }else {
                    toastr.success(_response.responseText);
                    Swal.fire({
                        icon: 'success',
                        title: _response.responseTitle,
                        text: _response.responseText,
                        showConfirmButton: false,
                        timer: 1000
                    });
                    setTimeout(function() {
                        window.location.reload(1);
                    }, 1500);

                }
                },
                error: function (xhr, ajaxOption, thrownError) {
                  $('#loadingModal').hide();
                    console.log(thrownError + '\r\n' + xhr.statusText + '\r\n' + xhr.responseText);
                }
            });
        });

      });

    function showCustomerExcelModal(modal_title, btn_text) {
        $('#upload_customer_excel_form')[0].reset();
        $('#upload_customer_excel_form').find('.is-invalid').removeClass('is-invalid');
        $('#upload_customer_excel_form').find('.error').remove();
        $('#upload_customer_excel_form table tbody').find("tr:gt(0)").remove();

        $('#upload_customer_excel_modal').modal({
            keyboard: false,
            backdrop: 'static',
        });
        $('#upload_customer_excel_modal .modal-title').html(modal_title);
        $('#upload_customer_excel_modal #excel-upload-btn').text(btn_text);
    }


</script>
@endsection