@extends('layouts.app')
@section('content')

    <!-- BEGIN CONTENT -->
    <div class="page-content-wrapper">
        <!-- BEGIN CONTENT BODY -->
        <div class="top_bar page-content">
            <div class="top_status_bar">
                <div id="top_progress_bar" class="progress_bar">
                </div>
            </div>
            <div class="breadcrumbs">
                <ul>
                  
                        <li><a class="breadcrumb_link" href="#">HOME</a></li>
                        <li><a href="#">Members List</a></li>
                        <li><a href="#">Update Member</a></li>
                </ul>
                <button class="btn btn-large pull-right help theme_btn help_btn">?</button>
            </div>
        </div>
        <div class="page-content">
            <div class="portlet">
                <!-- BEGIN PAGE HEADER-->
                <div class="portlet-title page_heading">
                    <div class="row">
                        <div class="col-md-9">
                            <div class="caption">
                                <h2 style="font-weight: 600; margin-top: 0;">page_heading</h2>
                                <span class="subtitle">page_description</span>
                            </div>
                        </div>
                        <div class="col-md-3 text-right">
                        </div>
                    </div>
                </div>
                <!-- BEGIN PAGE BAR -->
                <div class="row">
                    <div class="col-md-12">
                        <!--THIS IS CONTENT DIV START-->
                        <div class="portlet-body flip-scroll">
                            <form method="post" id="update_member" class="itemlist">
                                <div class="row">
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="member_firstname">First Name *</label>
                                            <input class="form-control validate" id="member_firstname" name="member_firstname" type="text" value="member_firstname">
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="member_lastname">Last Name *</label>
                                            <input class="form-control validate" id="member_lastname" name="member_lastname" type="text" value="member_lastname">
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="member_mobile">Phone *</label>
                                            <input class="form-control validate" id="member_mobile" name="member_mobile" type="text" value="member_mobile">
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="gender">Gender</label>
                                            <select class="form-control select2" id="gender" name="member_gender">
                                                <option value="Male">Male</option>
                                                <option value="Female">Female</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="dob">Date Of Birth *</label>
                                            <input class="form-control datepicker validate" id="dob" name="member_dob" type="text" value="member_dob">
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="form-group">
                                            <label for="balance">Current Balance</label>
                                            <input class="form-control" id="balance" name="current_balance" type="number" min="0" value="current_balance">
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="form-group">
                                            <label for="points">Points Earned</label>
                                            <input class="form-control" id="points" name="points_earned" type="number" min="0" value="points_earned">
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="form-group">
                                            <label for="credit">Credit Limit</label>
                                            <input class="form-control" id="credit" name="creditlimit" type="number" min="0" value="pos_creditlimit">
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label>Member Tier</label>
                                            <select class="form-control select2 validate" name="member_tier">
                                                
                                                        <option value='tier_uuid'>tier_name</option>
                                                
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-12">
                                        <h4><i class="fa fa-building"></i> Delivery Information</h4>
                                        <hr>
                                    </div>
                                </div>

                                        <div class="itemlist">
                                            <div class="row wrap_row">
                                                <div class="col-md-2">
                                                    <div class="form-group">
                                                        <label for="person_name">Contact Person Name</label>
                                                        <input class="form-control contact_person" id="person_name" name="person_name[]" type="text" value="contact_person_name">
                                                    </div>
                                                </div>
                                                <div class="col-md-2">
                                                    <div class="form-group">
                                                        <label for="building_name">Building Name </label>
                                                        <input class="form-control" id="building_name" name="building_name[]" type="text" value="building_name">
                                                    </div>
                                                </div>
                                                <div class="col-md-2">
                                                    <div class="form-group">
                                                        <label for="flat_type">Flat Type </label>
                                                        <input class="form-control" id="flat_type" name="flat_type[]" type="text" value="flat_type">
                                                    </div>
                                                </div>
                                                <div class="col-md-2">
                                                    <div class="form-group">
                                                        <label for="flat_no">Flat Number </label>
                                                        <input class="form-control" id="flat_no" name="flat_no[]" type="text" value="flat_no">
                                                    </div>
                                                </div>
                                                <div class="col-md-2">
                                                    <div class="form-group">
                                                        <label for="residence_no">Residence Number </label>
                                                        <input class="form-control" id="residence_no" name="residence_no[]" type="number" value="residence_no">
                                                    </div>
                                                </div>
                                                <div class="col-md-2">
                                                    <div class="form-group">
                                                        <label for="landmark">Landmark </label>
                                                        <input class="form-control" id="landmark" name="landmark[]" type="text" value="landmark">
                                                    </div>
                                                </div>
                                                <div class="col-md-3">
                                                    <div class="form-group">
                                                        <label for="complete_address">Complete Address </label>
                                                        <input class="form-control" id="complete_address" name="complete_address[]" type="text" value="complete_address">
                                                    </div>
                                                </div>
                                                <div class="col-md-2">
                                                    <div class="form-group">
                                                        <label for="country">Country </label>
                                                        <select class="form-control select2 country_delivery clone_div" name="country[]" style="width: 100%;">
                                                            <option></option>
                                                         
                                                                <option value='countryname' data_id='countryid'>countryname</option>
                                                            
                                                        </select>
<!--                                                        <input type="hidden" name="country[]" value="--><?//= $value['country']?><!--">-->
                                                    </div>
                                                </div>
                                                <div class="col-md-2">

                                                    <div class="form-group">
                                                        <label for="city">City </label>
                                                        <select class="form-control select2 city_delivery clone_div" style="width: 100%;" name="city[]">
                                                            <option></option>
                                                            <option value="city" selected>city</option>
                                                        </select>
<!--                                                        <input type="hidden" value="--><?//= $value['city']?><!--"  name="city[]">-->
                                                    </div>
                                                </div>
                                                <div class="col-md-2">
                                                    <div class="form-group">
                                                        <label for="area">Area </label>
                                                        <select class="form-control select2 area_delivery clone_div" name="area[]" style="width: 100%;">
                                                            <option></option>
                                                            <option value="area" selected>area</option>
                                                        </select>
<!--                                                        <input type="hidden" name="area[]" value="--><?//= $value['area'] ?><!--">-->
                                                    </div>
                                                </div>
                                                <div class="col-md-2" style="margin: 27px 0 0 0;">
                                                    <label class="radio_container">Make this primary
                                                        <input name="primary_address[]" value="is_primary" type="radio">
                                                        <span class="checkmark"></span>
                                                    </label>
                                                </div>
                                                <div class="col-md-1">
                                                    <p class="del_prod" style="cursor: pointer; font-size: 23px !important; color: #337ab7; margin-top: 30px;">
                                                        <i class="fa fa-times-circle-o" aria-hidden="true" title="Remove Block"></i>
                                                    </p>
                                                </div>
                                                <div class="col-md-12">
                                                    <hr>
                                                </div>
                                            </div>
                                        </div>
                               
                                <div class="row">
                                    <div class="itemlist">
                                        <div class="wrap_row wrapper">
                                            <div class="col-md-2">
                                                <div class="form-group">
                                                    <label for="person_name">Contact Person Name</label>
                                                    <input class="form-control contact_person" id="person_name" name="person_name[]" type="text">
                                                </div>
                                            </div>
                                            <div class="col-md-2">
                                                <div class="form-group">
                                                    <label for="building_name">Building Name </label>
                                                    <input class="form-control" id="building_name" name="building_name[]" type="text">
                                                </div>
                                            </div>
                                            <div class="col-md-2">
                                                <div class="form-group">
                                                    <label for="flat_type">Flat Type </label>
                                                    <input class="form-control" id="flat_type" name="flat_type[]" type="text">
                                                </div>
                                            </div>
                                            <div class="col-md-2">
                                                <div class="form-group">
                                                    <label for="flat_no">Flat Number </label>
                                                    <input class="form-control" id="flat_no" name="flat_no[]" type="text">
                                                </div>
                                            </div>
                                            <div class="col-md-2">
                                                <div class="form-group">
                                                    <label for="residence_no">Residence Number </label>
                                                    <input class="form-control" id="residence_no" name="residence_no[]" type="number">
                                                </div>
                                            </div>
                                            <div class="col-md-2">
                                                <div class="form-group">
                                                    <label for="landmark">Landmark </label>
                                                    <input class="form-control" id="landmark" name="landmark[]" type="text">
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="form-group">
                                                    <label for="complete_address">Complete Address </label>
                                                    <input class="form-control" id="complete_address" name="complete_address[]" type="text">
                                                </div>
                                            </div>
                                            <div class="col-md-2">
                                                <div class="form-group">
                                                    <label for="country">Country </label>
                                                    <select class="form-control select2 country_delivery clone_div" style="width: 100%;" name="country[]">
                                                        <option></option>
                                                         <option value='countryname' data_id='countryid'>countryname</option>";
                                                        
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-md-2">
                                                <div class="form-group">
                                                    <label for="city">City </label>
                                                    <select class="form-control select2 city_delivery clone_div" style="width: 100%;" name="city[]">
                                                        <option></option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-md-2">
                                                <div class="form-group">
                                                    <label for="area">Area </label>
                                                    <select class="form-control select2 area_delivery clone_div" style="width: 100%;" name="area[]">
                                                        <option></option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-md-2" style="margin: 27px 0 0 0;">
                                                <label class="radio_container">Make this primary
                                                    <input name="primary_address[]" value="0" type="radio">
                                                    <span class="checkmark"></span>
                                                </label>
                                            </div>
                                            <div class="col-md-1">
                                                <p class="del_prod" style="cursor: pointer; font-size: 23px !important; color: #337ab7; margin-top: 30px;">
                                                    <i class="fa fa-times-circle-o" aria-hidden="true" title="Remove Block"></i>
                                                </p>
                                            </div>
                                            <div class="col-md-12">
                                                <hr>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                              
                                <div class="row btn_add">
                                    <div class="col-md-12">
                                        <input type="button" class="btn btn-sm btn-primary" value="Add More" id="btn_moredelivery">
                                    </div>
                                </div>
                                <!--- Update Member Button -->
                                <div class="row">
                                    <div class="col-sm-12 text-right">
                                        <button type="button" class="btn cancel_btn" style="border-radius:5px;">Cancel</button>
                                        <button type="button" class="btn theme_btn_round update_member" data_uuid="member_uuid">Save</button>
                                    </button>
                                </div>
                            </form>
                        </div>
                        <!--THIS IS CONTENT DIV END-->
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('admin_css')
    <link href="{{asset('assets/global/plugins/select2/css/select2.min.css')}}" rel="stylesheet" type="text/css"/>
    <link href="{{asset('assets/global/plugins/select2/css/select2-bootstrap.min.css')}}" rel="stylesheet" type="text/css"/>
    <!-- DATE PICKER -->
    <link href="{{asset('assets/global/plugins/bootstrap-datepicker/css/bootstrap-datepicker3.min.css')}}" rel="stylesheet" type="text/css"/>
    <!-- DATE PICKER -->
@stop

@section('admin_js')

<script src="{{asset('assets/global/plugins/select2/js/select2.min.js')}}" type="text/javascript"></script>
<script src="{{asset('assets/global/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js')}}" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        //SELECT 2 Simple//
        $(".select2").select2({
            placeholder: "--Select--",
            allowClear: true
        });
        $('.datepicker').datepicker({
            format: 'dd-mm-yyyy',
            autoclose: true,
            orientation: "top"
        });
    });

    //Back To Members Page
    $(document).on('click', '.cancel_btn', function () {
        //window.location.href = SITE_ROOT + 'members';
    });

    //Member Name and Contact Person name
    $("#member_firstname").on('input', function () {
        var member = $("#member_firstname").val();
        $("input.contact_person").val(member).blur();
    });

    //Add More Delivery info for members
    $('body').on('click', '#btn_moredelivery', function () {
        var clone = $(this).parent().parent().parent().find('.wrapper').clone();
        // console.log(clone);
        $('.wrapper').removeClass('wrapper');
        clone.find('[type=text]').val('');
        clone.find('[type=hidden]').val('');
        clone.find('[type=number]').val('');
        clone.find('select').val('');
        /*FOR SELECT2 CLONE*/
        clone.find('.clone_div').removeClass('select2');
        clone.find("span").remove();
        clone.find(".clone_div").select2({
            'placeholder': '--Select--'
        });
        clone.find('select').val('');
        clone.find('.radio_container').append('<span class="checkmark"></span>');
        clone.find("input[type='radio']").prop('checked', false);
        clone.find('.form-control').removeClass('validate error_custom');
        $('.itemlist .btn_add').before(clone);
    });

    //Remove Delivery info
    $(document).on('click', '.del_prod', function () {
        if ($('.del_prod').length == 1) {
            $("#delivery_section").find(':input').each(function () {
                switch (this.type) {
                    case 'password':
                    case 'text':
                    case 'textarea':
                    case 'file':
                    case 'select-one':
                    case 'select-multiple':
                    case 'date':
                    case 'number':
                    case 'tel':
                    case 'email':
                        jQuery(this).val('');
                        break;
                    case 'checkbox':
                    case 'radio':
                        this.checked = false;
                        break;
                }
            });
            $("select.select2").select2({
                placeholder: "--Select--",
                allowClear: true
            });
        } else {
            $('.itemlist .wrap_row:first-child').addClass('wrapper');
            $(this).parent().parent().remove();
        }
    });

    //Getting Cities against selected country
    $(document).on("change", ".country_delivery", function () {
        $('#busyloading, .overlay').show();
        var country = $(this).find(':selected').attr('data_id');
        var target = $(this).parent().parent().parent();
        $.post("members/getting_cities", {country: country}).done(function (res) {
            var result = $.parseJSON(res);
            var options = '';
            $.each(result, function (i, v) {
                options += '<option value="'+v.cityname+'" data_id="'+v.cityid +'">'+v.cityname+'</option>';
            });
            target.find(".city_delivery").html(options);
            $('#busyloading, .overlay').hide();
        });
    });

    //Getting Areas On City selection
    $(document).on("change", ".city_delivery", function () {
        $('#busyloading, .overlay').show();
        var city = $(this).find(':selected').attr('data_id');
        var target = $(this).parent().parent().parent();
        $.post("members/getting_cities", {city: city}).done(function (res) {
            var result = $.parseJSON(res);
            var options = '';
            $.each(result, function (i, v) {
                options += '<option value="'+v.areaname+'">'+v.areaname+'</option>';
            });
            target.find(".area_delivery").html(options);
            $('#busyloading, .overlay').hide();
        });
    });

    //Saving New Member Script
    $(document).on('click', '.update_member', function () {
        var flag = '0';
        $('#update_member *').filter(':input, textarea, select').each(function () {
            if ($(this).hasClass('validate')) {
                if ($(this).val() == '' || $(this).val() <= -1 || $(this).val() == null) {
                    $(this).addClass('error_custom');
                    $(this).parent().find('.select2-container--bootstrap .select2-selection').addClass('error_custom');
                    flag = '1';
                } else {
                    $(this).removeClass('error_custom');
                    $(this).parent().find('.select2-container--bootstrap .select2-selection').removeClass('error_custom');
                }
            }
        });
        if (flag == '1') {
            alertbox('warning', 'All mandatory fields are required!');
            return false;
        } else {
            var member_uuid = $(this).attr('data_uuid');
            var formData = new FormData(document.getElementById("update_member"));
            $("input[name='primary_address[]']").each(function(){
                if ( $(this).is(':checked') ) {
                    formData.append('is_primary[]', '1');
                }
                else {
                    formData.append('is_primary[]', '0');
                }
            });
            formData.append('member_uuid', member_uuid);
            formData.append('save_member', 'save');
            var url = 'members/update_member';
            $('#busyloading, .overlay').show();
            $.ajax({
                url: url,
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function (res) {
                    var result = $.parseJSON(res);
                    console.log(result);
                    if (result.type == 'success') {
                        //window.location.href = SITE_ROOT + 'members?success=' + result.msg;
                    }
                    else if (result.type == 'expired') {
                        alertbox('danger', result.msg);
                        window.setTimeout(function () {
                            //window.location.href = SITE_ROOT;
                        }, 1000);
                    }
                    else {
                        $('#busyloading, .overlay').fadeOut(200);
                        alertbox('danger', 'Something wrong contact with admin!');
                    }
                },
                error: function (error) {
                    $('#busyloading, .overlay').fadeOut(200);
                    alertbox('danger', error);
                }
            });
        }
    });

</script>
@stop