@extends('admin.template.master')


@section('stylesheets')
<style type="text/css">
    .wd { width: 400px;  }
    .wd2 { width: 300px;  }
    .wd3 { width: 450px;  }
    .lft { margin-left: 15px; }
</style>
@endsection

@section('title')
    <section class="content-header">
        <h1>Merge Customer Account</h1>
        <ol class="breadcrumb">
            <li><a href="{!! url('/dashboard/') !!}"><i class="fa fa-dashboard"></i> Home</a></li>
            <li><a href="{!! url('/admin/customers/') !!}">Merge Customer Account</a></li>
            <li class="active"></li>
        </ol>
    </section>
@endsection


@section('main-content')
    <section class="content">
        <div class="row">
            <div class="col-md-10">
                <div class="box box-primary">
                    <div class="box-header with-border">
                        <h3 class="box-title"> </h3>
                    </div>

                    <div class="box-body">

                        <div class="row">
                            <div class="form-group lft">
                                <label for="customer_base_phone_or_email" >Customer Base Phone(without first 0 just like 1xxxxxxxxx) or Email</label>
                                <input type="text" id="customer_base_phone_or_email" class="form-control wd3" placeholder="Enter customer base Phone(without first 0 just like 1xxxxxxxxx) or Email" />
                            </div>

                            <div class="col-md-4" style="mrargin-top: 22px;">
                                <button type="button" class="btn btn-primary" id="search_customer">Search</button>
                            </div>
                        </div>

                        <div class="form-group" id="search_result">
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('javascripts')
<script type="text/javascript">
    $("#search_customer").click(function() {
        let customer_base_phone_or_email = $('#customer_base_phone_or_email').val();
        console.log('customer_base_phone_or_email' + customer_base_phone_or_email)
        if (customer_base_phone_or_email === '') {
            alert('Enter Mobile / Eamil');
        }
        else {
            $.ajax({
                type:"GET",
                url: "{{ url('/admin/get-customer-data') }}",
                data: {phone: customer_base_phone_or_email},
                success: function(res) {
                    console.log('res', res)
                    $("#search_result").html("");
                    $("#search_result").html(res.html);
                }
            });
        }
    });

    $(document).on("click", "#merge_customer_data" ,function() {
        let all = [] , customerIDs = [], phones = [], emails = [], customerStatus = [];
        let customer_base_phone_or_email = $('#customer_base_phone_or_email').val();
        if (customer_base_phone_or_email === '') {
            alert("Enter mobile or email");
        }
        else {
            $(".customer_id").each(function(i, val) {
                // console.log(i,' ==== ', $(this).val());
                if ( ($(this).val()).length !== 0 ) {
                    customerIDs.push($(this).val());
                }
            });

            $(".phone").each(function(i, val) {
                // console.log(i,' ==== ', $(this).val());
                if ( ($(this).val()).length !== 0) {
                    phones.push($(this).val());
                }
            });

            $(".email").each(function(i, val) {
                // console.log(i,' ==== ', $(this).val());
                if ( ($(this).val()).length !== 0) {
                    emails.push($(this).val());
                }
            });

            $(".customer_status").each(function(i, val) {
                // console.log(i,' ==== ', $(this).val());
                if ( ($(this).val()).length !== 0) {
                    customerStatus.push($(this).val());
                }
            });

            all.push(customerIDs.length, phones.length, emails.length, customerStatus.length);

            if (all[0] === customerIDs.length && all.every(a => a === customerIDs.length))
            {
                $.ajaxSetup({ headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } });
                $.ajax({
                    type: "POST",
                    url: "{{ url('/admin/customer-merge') }}",
                    data: { cid: customerIDs, phone: phones,  email: emails,  status: customerStatus },
                    success: function(res) {
                        console.log(res)
                        alert(res.msg);
                    }
                });
            }
            else {
                alert('Please Check input fields');
            }
        }
        console.log(customerIDs , phones , emails , customerStatus, all);
    });
</script>
@endsection