@extends('admin.layouts.app')
@section('page_tab_title' ,"Association") 
@section('content')

<section class="content update-setting-wrapper">
  <div class="row">
    <!-- right column -->
    <div class="col-md-12">
      <!-- Horizontal Form -->
      <div class="shadow-box">
        @include('admin.layouts.master-table')
        <div class="box-header adminuser-box">
          <div class="row">
            <div class="col-lg-4 col-md-4">
              <div class="top-ttl">
                <h1>
                  Association
                </h1>
              </div>
            </div>
            <div class="col-lg-8 col-md-8">
              <div class="pull-right">
                <button type="button" name="bulk_delete" id="bulk_delete" class="btn custom-btn"><i class="glyphicon glyphicon-remove"></i>Delete</button>
                <button type="button" name="bulk_active" id="bulk_active" class="btn custom-btn"><i class="glyphicon glyphicon-active"></i>Active</button>
                <button type="button" name="bulk_deactive" id="bulk_deactive" class="btn custom-btn"><i class="glyphicon glyphicon-active"></i>Inactive</button>
                <a class="btn custom-btn add-new-btn" ><i class="fa fa-plus"></i> Add New</a>
              </div>        
            </div>
          </div>
          <hr class="bdr-partition">
        </div>
        
        @if ($message = Session::get('success'))
          <div class="alert alert-success">
            <p>{{ $message }}</p>
          </div>
        @endif

        @if ($message = Session::get('error'))
          <div class="alert alert-error">
            <p>{{ $message }}</p>
          </div>
        @endif
        <section class="content">
          <div class="row form-hidden association-form-row" style="display:none">
            <div class="col-xs-12">
              <div class="shadow-box" style="margin-bottom: 10px;">
                <div class="box-header">
                  <div class="row">
                    <div class="col-xs-6">
                      <div class="top-ttl">
                        <h1 id="title">Add new association</h1>
                      </div>
                    </div>
                  </div>
                  <hr class="bdr-partition">
                </div>
                <form method="POST" id="createassociation" class="form-horizontal forum-category" enctype="multipart/form-data" action="#" >
                  @csrf
                  <div class="box-body">
                    <div class="row">
                      <div class="col-md-6">
                        <div class="form-group">
                          <div class="col-sm-12">
                            <input type="hidden" name="categoryId" id="categoryId" />
                            <input type="hidden" name="isLogoSet" id="isLogoSet" />
                            <label class=" control-label">Name <span class="required_span">*</span></label>
                            <input type="text" data-parsley-parsehtml="" maxlength="50" name="name" id="categoryName" required class="form-control" value="">
                            <span class="error-unique text-danger" role="alert"></span>
                            @if ($errors->has('name'))
                            <span class="invalid-feedback text-danger" role="alert">
                              <p>{{ $errors->first('name') }}</p>
                            </span>
                            @endif
                          </div>
                        </div>
                      </div>

                      <div class="col-md-6">
                        <div class="form-group">
                          <div class="col-sm-12">
                            <label class=" control-label">Full Name <span class="required_span">*</span></label>
                            <input type="text" data-parsley-parsehtml="" name="fullname" id="fullName" required class="form-control" value="">
                            <span class="error-unique text-danger" role="alert"></span>
                            @if ($errors->has('fullname'))
                            <span class="invalid-feedback text-danger" role="alert">
                              <p>{{ $errors->first('fullname') }}</p>
                            </span>
                            @endif
                          </div>
                        </div>
                      </div>

                      <div class="col-md-6">
                        <div class="form-group">
                          <div class="col-sm-12">
                            <label class=" control-label">Logo <span class="required_span">*</span></label>
                            <input type="file" data-parsley-parsehtml="" name="logo" id="uploadLogo" required class="form-control" onchange="readURL(this);">
                            <span class="error-unique text-danger" role="alert"></span>
                            @if ($errors->has('logo'))
                            <span class="invalid-feedback text-danger" role="alert">
                              <p>{{ $errors->first('logo') }}</p>
                            </span>
                            @endif
                          </div>
                        </div>
                      </div>

                      {{--<div class="col-md-4">
                        <div class="form-group">
                          <div class="col-sm-12">
                            <label class=" control-label">Logo <span class="required_span">*</span></label>
                            <div class="file-upload">
                              <div class="file-select">
                                <div class="file-select-button" id="fileName">Choose File</div>
                                <div class="file-select-name" id="noFile">No file chosen...</div>
                                <input data-parsley-parsehtml="" required type="file" name="logo" id="uploadLogo" accept="image/*" onchange="readURL(this);">
                              </div>
                            </div>
                            <span class="error-unique text-danger" role="alert"></span>
                            @if ($errors->has('logo'))
                            <span class="invalid-feedback text-danger" role="alert">
                              <p>{{ $errors->first('logo') }}</p>
                            </span>
                            @endif
                          </div>
                        </div>
                      </div>--}}

                      <div class="col-md-4">
                        <div class="form-group">
                          <img class="logo-img" id="blah" height="100px" width="auto"  >
                        </div>
                      </div>

                    </div>
                    <div class="button-area">
                      <button type="submit" class="btn btn-info ">Submit</button>
                      <a href="javascript:void(0)" class="btn btn-default cancel-btn">Cancel</a>
                    </div>
                  </div>
                </form>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-xs-12">
              <div class="box-body table-responsive">
                <table id="association_datatable" class="table table-bordered table-striped ">
                  <thead>
                    <tr>
                      <th><input type="checkbox" name="all_chk" id="all_chk"></th>
                      <th>Name</th>
                      <th>Status</th>
                      <th>Action</th>
                    </tr>
                  </thead>
                </table>
              </div>
              
            </div>
          </div>
        </section>


        <div class="box-header adminuser-box">
          <div class="row">
            <div class="col-lg-4 col-md-4">
              <div class="top-ttl">
                <h1>
                  Added By User
                </h1>
              </div>
            </div>
            <div class="col-lg-8 col-md-8">
              <div class="pull-right">
                <button type="button" name="bulk_delete_extra" id="bulk_delete_extra" class="btn custom-btn"><i class="glyphicon glyphicon-remove"></i>Delete</button>
              </div>
            </div>
          </div>
          <hr class="bdr-partition"> 
        </div>
        <section class="content">
          <div class="row form-hidden interest-extra-form-row" style="display:none">
            <div class="col-xs-12">
              <div class="shadow-box" style="margin-bottom: 10px;">
                <div class="box-header">
                  <div class="row">
                    <div class="col-xs-6">
                      <div class="top-ttl">
                        <h1 id="title"></h1>
                      </div>
                    </div>
                  </div>
                  <hr class="bdr-partition">
                </div>
                <form method="POST" id="editextrainterest" class="form-horizontal forum-category" enctype="multipart/form-data" action="#" >
                  @csrf
                  <div class="box-body">
                    <div class="row">
                      <div class="col-md-4">
                        <div class="form-group">
                          <div class="col-sm-12">
                            <input type="hidden" name="intId" id="intId" />
                            <label class=" control-label">Name <span class="required_span">*</span></label>
                            <input type="text" data-parsley-parsehtml="" maxlength="50" name="intname" id="intName" required class="form-control alpha-only" value="">
                            <span class="error-unique text-danger" role="alert"></span>
                            @if ($errors->has('intname'))
                            <span class="invalid-feedback text-danger" role="alert">
                              <p>{{ $errors->first('intname') }}</p>
                            </span>
                            @endif
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="button-area">
                      <button type="submit" class="btn btn-info ">Submit</button>
                      <a href="javascript:void(0)" class="btn btn-default cancel-extra-btn">Cancel</a>
                    </div>
                  </div>
                </form>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-xs-12">
              <div class="box-body table-responsive">
                <table id="extra_interest_datatable" class="table table-bordered table-striped ">
                  <thead>
                    <tr>
                      <th><input type="checkbox" name="all_chk_extra" id="all_chk_extra"></th>
                      <th>Name</th>
                      <th>Added By</th>
                      <th>Action</th>
                    </tr>
                  </thead>
                </table>
              </div>
            </div>
          </div>
        </section>
        <script>
          function editassociation( categoryId, name, logo, fullname )
          {
            $("#title").html("Edit association");
            $(".association-form-row").show();
            $("#createassociation").attr("action","{{route('associations.update')}}");
            $("#categoryName").val(name);
            $("#fullName").val(fullname);
            $("#categoryId").val(categoryId);

            if( logo == '' ) {
              $("#isLogoSet").val(0);
              $('#uploadLogo').attr('required', true);
              $("#blah").attr( 'src', '' );
            } else {
              $("#isLogoSet").val(0);
              $('#uploadLogo').attr('required', false);

              var path = "{{url(config('settings.association_folder'))}}/"+logo;
              $("#blah").attr( 'src', path );
            }

            $("#categoryId").val(categoryId);
            $("input[name='name']").parsley().reset();
          }

          function editextraassociation(id, name){
            $("#title").html("Edit association");
            $(".interest-extra-form-row").show();
            $("#editextrainterest").attr("action","{{route('associations.extra.update')}}");
            $("#intName").val(name);
            $("#intId").val(id);
            $("input[name='intname']").parsley().reset();
          }

          function readURL(input)
          {
            if( input.files && input.files[0] ) {
              var reader = new FileReader();
              var file = input.files[0];
              var fileType = file.type.split('/')[1];

              if( fileType == 'png' ) {
                reader.onload = function (e) {

                  //Initiate the JavaScript Image object.
                  var image = new Image();

                  //Set the Base64 string return from FileReader as source.
                  image.src = e.target.result;

                  //Validate the File Height and Width.
                  image.onload = function () {
                    var height = this.height;
                    var width = this.width;

                    if( height > 100 || width > 100 ) {
                      alert("Height and Width must not exceed 100px.");
                      $("#uploadLogo").val('');
                      return false;
                    } else {
                      $('#blah')
                      .attr('src', e.target.result)
                      .height(100);
                    }
                    return true;
                  };
                }
                reader.readAsDataURL(input.files[0]);
              } else {
                $("#uploadLogo").val('');
                alert("Only image/png type supported!");
              }
            } else {
              alert("Sorry - you're browser doesn't support the FileReader API");
            }
          }

          $(document).ready(function() {

            $('.alpha-only').bind('keyup blur', function() {
              $(this).val($(this).val().replace(/[^a-zA-Z\s]/g, ''));
            });

            $(".add-new-btn").click(function(){
              $("input[name='name']").parsley().reset();
              $(".association-form-row").show();
              $("#title").html("Add new association");
              $("input[name='name']").val("");
              $("#createassociation").attr("action","{{route('associations.store')}}");
            });

            $(".cancel-btn").click(function(){
              $(".association-form-row").hide();
            });

            var url = "{{route('associations.list')}}";
            $('#association_datatable').DataTable({
              order:[0,'asc'],
              processing: true,
              serverSide: true,
              ajax: url,
              columns: [
                {
                  "data":"checkbox", orderable:false, searchable:false
                },{
                  data: 'name',
                  name: 'name'
                },
                {
                  data: 'status',
                  name: 'status',
                  searchable: false
                },
                {
                  data: 'action',
                  name: 'action',
                  orderable: false,
                  searchable: false
                }
              ]
            });

            var url = "{{route('associations.extra.list')}}";
            $('#extra_interest_datatable').DataTable({
              order:[0,'asc'],
              processing: true,
              serverSide: true,
              ajax: url,
              columns: [ 
                {
                  "data":"checkbox",
                  orderable:false,
                  searchable:false
                },
                {
                  data: 'name',
                  name: 'name'
                },
                {
                  data: 'added_by',
                  name: 'added_by',
                  searchable: true
                },
                {
                  data: 'action',
                  name: 'action',
                  orderable: false,
                  searchable: false
                }
              ]
            });
          });

          $(document).on('change', '.association_checkbox', function(){
            if($(this).prop("checked") == false){
              $('#all_chk').prop('checked', false);
            }
          });

          $(document).ready(function() {
            $("#all_chk").click(function () {
              if ($(this).is(':checked')) {
                var $view = $('.association_checkbox').prop("checked", true);
              } else {
                var $view = $('.association_checkbox').prop("checked", false);
              }
            });

            $(document).on('click', '.association_checkbox', function() {
              var numberOfChecked = $('.association_checkbox').filter(':checked').length;
              var totalCheckboxes = $('.association_checkbox').length;
              if (numberOfChecked == totalCheckboxes) {
                var $view = $('#all_chk').prop("checked", true);
              }
              if (!$(this).is(':checked')) {
                var $view = $('#all_chk').prop("checked", false);
              } 
            });
          });

          $(document).on('click', '#bulk_delete', function(){
            var id = [];
            $('.association_checkbox:checked').each(function(){
                  id.push($(this).val());
            });     
            if(id.length > 0){
              if(confirm("Are you sure you want to Delete this data?")){
                $.ajax({
                    url:"{{ route('associations.massremove')}}",
                    data:{id:id},
                    success:function(data){
                      $('#association_datatable').DataTable().ajax.reload();
                      $("#all_chk").prop('checked',false);
                    }
                });
              }
            }else{
                alert("Please select atleast one checkbox");
            }
          });

          $(document).on('click', '#bulk_active', function(){
            var id = [];
            $('.association_checkbox:checked').each(function(){
                id.push($(this).val());
            });
            if(id.length > 0){
              if(confirm("Are you sure you want to Active this data?")){
                $.ajax({
                  url:"{{ route('associations.massactive')}}",
                  data:{id:id},
                  success:function(data){
                    $('#association_datatable').DataTable().ajax.reload();
                    $("#all_chk").prop('checked',false);
                  }
                });
              }
            }else{
                alert("Please select atleast one checkbox");
            }
          });

          $(document).on('click', '#bulk_deactive', function(){
            var id = [];
              $('.association_checkbox:checked').each(function(){
                  id.push($(this).val());
              });
              if(id.length > 0){
                if(confirm("Are you sure you want to Deactive this data?")){

                $.ajax({
                    url:"{{ route('associations.massdeactive')}}",
                    data:{id:id},
                    success:function(data){
                      $('#association_datatable').DataTable().ajax.reload();
                      $("#all_chk").prop('checked',false);
                    }
                });
              }
            }
              else{
                alert("Please select atleast one checkbox");
              }
          });
          $(document).on('input', '#categoryName', function(){
            
            $.ajax({
               url: "{{ route('associations.finduniquename')}}",
               data:{name:$("#categoryName").val(),"_token":"{{ csrf_token() }}"},
               type:'POST',                 
            }).done(function(response){
              
              if(response.status == 'success'){
                $("#categoryName").next(".error-unique").text("The name has already been taken.");
                $('button[type=submit], input[type=submit]').prop('disabled',true);
              }else{
                $("#categoryName").next(".error-unique").text("");
                $('button[type=submit], input[type=submit]').prop('disabled',false);
              }
              
            });
          });

          $(document).on('click', '#bulk_delete_extra', function() {
            var id = [];
            $('.association_checkbox_extra:checked').each(function() {
              id.push($(this).val());
            });

            if(id.length > 0) {
              if(confirm("Are you sure you want to Delete this data?")) {
                $.ajax({
                  url:"{{ route('associations.extra.massremove')}}",
                  data:{id:id},
                  success:function(data){
                    $('#extra_interest_datatable').DataTable().ajax.reload();
                    $('#all_chk_extra').prop('checked', false);
                  }
                });
              }
            } else {
              alert("Please select atleast one checkbox");
            }
          });

          $('#createassociation').parsley();
        </script>
      </div>
    </div>
  </div>
</section>


@endsection