@extends('layouts.webmaster')

@push('page-style')
<style type="text/css">
    .text-danger {
        color: #f50500
    }
    @media only screen and (max-width: 768px) {
	.banner img{
		width: 100%;
		height: 200px;
	}
	.header_white {
		height: 60px;
	}
	.toggler_xs_right .toggle_menu {
		margin-top: 2px;
	}
   }
</style>
<link rel="stylesheet" href="{{ asset('www/css/datepicker.css') }}">
@endpush

@section('page-content')
<section class="page_breadcrumbs ds background_cover  " style="background-color:#171A2B;">
    <div class="container">
        <div class="row">
            <div class="col-sm-12 text-center">
                <ol class="breadcrumb greylinks">
                    <li><a href="{{route('website')}}">
                            Home
                        </a></li>
                    <li class="active" style="color:#E2181D;">Search Member</li>
                </ol>
            </div>
        </div>
    </div>
</section>

<section class="mt-50">
    <div class="container">
        <div class="row registration-form">
            <form class="" method="post" action="#" enctype="multipart/form-data" onsubmit="return check_no();">
                {{ csrf_field() }}
                <div id="faq-accordion" class="panel-group collapse-unstyled">
                    <div class="panel">
                        <div class="regi-head" style="background: #171A2B; !important">
                            <a data-toggle="collapse" id="faq-accordion" data-parent="#faq-accordion" href="#faq-collapse1" class="collapsed">
                                <h5>Search Members</h5>
                            </a>
                        </div>
                        <div id="faq-collapse1" class="panel-collapse collapse">
                            <div class="panel-content" >
                                <div class="regi-input">
                                    <div class="col-sm-4 col-sm-offset-3 regi_input_m">
                                        <div class="form-group" style="margin-top: 25px;">
                                            <label for="proposer" class="col-md-4" style="padding-top: 10px;font-size: 20px;">Member :</label>
                                            <div class="col-md-8">
                                            <select name="member_id" class="" id="proposer">
                                                <option value="" selected="" disabled="">Choose Member</option>
                                                @foreach($members as $members1)
                                                <option value="{{$members1->id}}">{{$members1->f_name}} {{$members1->m_name}} {{$members1->l_name}} {{ "(".$members1->member_type }}{{ $members1->member_code.")" }}</option>
                                                @endforeach
                                            </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-4">
                                        <div class="form-group topmargin_35 Search_35">
                                            <a class="theme_button margin_0 text-center " id="member_next_btn" style="background: #E2181D;">
                                                Search <i class="fa fa-angle-double-right"></i>
                                            </a>
                                        </div>
                                    </div>
                                </div>

                                <div class="clearfix"></div>

                                <!-- code by nandu -->
                                <div class="regi-head" style="background: #171A2B; !important">
                                    <h5>Member Information</h5>
                                </div>
                                <div class="">
                                    <div class="panel-content" id="panel-content">
                                        <div class="row">
                                            <div class="container" >
                                                <div class="col-md-4">
                                                    <p><strong>Member Code : </strong><span id="member_code"></span>
                                                    </p>
                                                </div>
                                                <div class="col-md-4">
                                                    <p><strong>Full Name : </strong><span id="salutation">&nbsp;</span><span id="fullname"></span></p>
                                                </div>
                                                <div class="col-md-4 hide">
                                                    <p><strong>Address : </strong><span id="address"></span></p>
                                                </div>
                                                <div class="col-md-4">
                                                    <p><strong>Pincode : </strong><span id="pincode"></span></p>
                                                </div>

                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="container">
                                                <div class="col-md-4">
                                                    <p><strong>Contact No : </strong><span id="contact"></span></p>
                                                </div>

                                                <div class="col-md-4">
                                                    <p><strong>Email : </strong><span id="email"></span></p>
                                                </div>
                                                <div class="col-md-4 hide">
                                                    <p><strong>Date Of Birth : </strong><span id="dob"></span></p>
                                                </div>
                                                <div class="col-md-4 ">
                                                    <p><strong>Status : </strong><span id="status"></span></p>
                                                </div>
                                                <div class="col-md-4">
                                                    <p><strong>Election Center : </strong><span id="e_center"></span></p>
                                                </div>
                                                <div class="col-md-4">
                                                    <p><strong>Region : </strong><span id="name"></span></p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row hide">
                                            <div class="container">
                                                <!-- <div class="col-md-4">
                                                        <p><strong>Pincode : </strong><span id="pincode"></span></p>
                                                    </div> -->
                                                <div class="col-md-4 hide">
                                                    <p><strong>Sarawani Member : </strong><span id="sarawani_member"></span></p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</section>


@endsection

@push('page-script')
<script src="{{ asset('www/js/datepicker.js') }}"></script>

<script>
    $(document).ready(function() {
        $("#member_next_btn").click(function() {
            var member_id = $('#proposer').find("option:selected").val();
            var election_center;
            $.ajax({
                type: "GET",
                url: "{{url('get_member_details')}}/" + member_id,
                success: function(response) {
                    // alert(response);
                    var json = $.parseJSON(response); // create an object with the key of the array
                    // alert(json.l_name);
                    // var membercode = json.member_type+" "+json.member_code;
                    console.log(json);
                    if (json.is_member == 'Active') {

                        mobile_number = json.contact;
                        if (mobile_number) {
                            vis = mobile_number.slice(-2),
                                countNum = '';
                            for (var i = (mobile_number.length) - 4; i > 0; i--) {
                                countNum += '*';
                            }
                        }
                        $('#member_code').text(json.member_code);

                        $('#salutation').text(json.salutation);
                        $('#fullname').text(json.fullname);
                        $('#dob').text(json.dob);
                        $('#name').text(json.e_center);
                        $('#status').text(json.is_member);
                        console.log(json.is_member);


                        $('#e_center').text(json.election_center);
                        

                        // if (json.privacy_contact) {
                        //     $('#contact').text();

                        // } else {
                        //     if (mobile_number) {
                        //         $('#contact').text(countNum + vis);
                        //     } else {
                        //         $('#contact').text(json.contact);

                        //     }

                        // }
                        if (json.privacy_contact) {
                            var contact = json.contact;
                            if (contact) {
                                var vis = contact.slice(-2); // get last 2 digits
                                var countNum = contact.length - 2; // count remaining digits
                                var maskedContact = "*".repeat(countNum) + vis; // replace remaining digits with asterisks and append last 2 digits
                                $('#contact').text(maskedContact);
                            } else {
                                $('#contact').text("");
                            }
                        } else {
                            $('#contact').text(json.contact);
                        }


                        // if (json.privacy_email) {
                        //     $('#email').text();

                        // } else {
                        //     $('#email').text(json.email);
                        // }
                        if (json.privacy_email) {
                            var email = json.email;
                            if (email) {
                                var atIndex = email.indexOf("@");
                                if (atIndex > 0) { // Only mask email addresses that have all characters before '@'
                                    var maskedEmail = "*".repeat(atIndex) + email.slice(atIndex);
                                    $('#email').text(maskedEmail);
                                } else {
                                    $('#email').text(email);
                                }
                            } else {
                                $('#email').text("");
                            }
                        } else {
                            $('#email').text(json.email);
                        }


                        //$('#email').text(json.email);
                        $('#address').text(json.address);
                        $('#pincode').text(json.pincode);
                        // $('#profile_photo').attr("src", json.profile_photo);
                        // $('#profile_photo').attr("alt", json.fullname);
                        $('#sarawani_member').text(json.sarawani_member);
                        // $('#election_center_data').text(json.election_center_data);
                        
                    }
                    else{
                        $('#panel-content').html(' <div class="row"> <div class="container" > <div class="col-md-12" style="font-size: 30px;color: red;text-align: center;margin-top: 27px;text-transform: uppercase;">  <p><strong>NO RECORD FOUND </strong><span ></span> </p> </div> </div></div>');
                    }

                }
            });

        });

    });

    

    $('#l_name').change(function() {

        var l_name = $(this).find("option:selected").val();

        console.log(l_name);

        if (l_name) {
            $.ajax({
                type: "GET",
                url: "{{url('get-khunp-list-website')}}/" + l_name,
                success: function(response) {

                    alert(response);
                    console.log(res);
                    $('#khanp').val(res.khanp[0]['name']);

                    $("#up_khanp").empty();

                    $.each(res.upkhanp, function(key, value) {
                        //$("#up_khanp").append('<option value="'+value.id+'">'+value.name+'</option>');
                        //alert(value.name);
                        $('#up_khanp').append($('<option>', {
                            value: value.id,
                            text: value.name
                        }));


                    });

                }
            });
        }
    });

   
</script>
<script>
    $(function() {
        $('#up_khanp, #d1').show();

    })
</script>

<script type="text/javascript">
    $(document).ready(function() {

        var l_name = $('#l_name').find("option:selected").val();
        //  $('#khanp').val(l_name);

        //  var select = $("#up_khanp")[0];

        // select.add(new Option("Agiwal", 1));
        // select.add(new Option("Agal", 4));
        // alert(l_name);
    });
</script>
@endpush