@extends('layouts.app')

@section('head')
<link rel="stylesheet" href="{{ URL::asset('css/style.css') }}">
<script type="text/javascript" src="{{ URL::asset('jquery/jquery.js') }}"></script>
<script type="text/javascript" src="{{ URL::asset('jquery/magnifyMe.js') }}"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
  #magnifyback {
    position: absolute; 
    width: 100%;
    height: 100%;
    float: left;
    z-index: 1;
    background-color: black;
    position: fixed;
    top: 0%;
    z-index: 600;
  }
  #zoomimg {
    position: absolute;
    top: 6%;
    bottom: 2%;
    right: 6.5%;
    width: 92%;
    border: solid  #d89d31 10px;
    height: 89%;
    float: left;
    z-index: 1;
    background-color: white;
    position: fixed;
  }
  .magnifyMe {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
  }

  .iamMagnified {
    width: 30%;
    position: absolute;
    background-size: initial;
    background-repeat: no-repeat;
    border-radius: 100px;
    box-shadow: 0 0 10px #000;
    border: 4px solid #CCC;
    opacity:0;
  }

  div.magnifyMe:hover .iamMagnified {
    opacity: 1;
  };
</style>
<script type="text/javascript">
  
// Added By Aber Lu at 2018/04/19 let img max width = 100% start
$(document).ready(function() {
    $("#zoomimg").hide();
    $("#magnifyback").hide();
    $(".box").find("img").wrap("<div class=\"imgwrap\"></div>");
    $(".box").find("img").css("width", "");
    $(".box").find("img").css("height", "");
    $(".box").find("img").css("max-width", "100%");
    $(".box").find("img").on('click',function(){
        var thisimg = $(this).clone();
        var srcimg = $(thisimg).attr('src');
        var imgwidth = 0;
        var rightgap = 0;
        var iammaheight = 0;
        $("#zoomimg").html($(thisimg).css('max-height','99%'));
        //$("#zoomimg").html(thisimg);
        $("#zoomimg").show();
        $("#magnifyback").show();
        imgwidth = $("#zoomimg img").width()+10+"px";
        if($("#zoomimg img").width()+10<($("#magnifyback").width()/2)){
          imgwidth = 2*$("#magnifyback").width()/3+"px";
        }
        $("#zoomimg").css('width',imgwidth);
        $("#zoomimg").append("<div class=\"magnifyMe\"><div class=\"iamMagnified\"></div></div>");
        $("#zoomimg img").remove();

        rightgap = ($(window).width() - $("#zoomimg").width())/2 
        $("#zoomimg").css('right',rightgap);
        $('.iamMagnified').css('background', 'url(\"'+srcimg+'\") ');
        $('.iamMagnified').css('height',$('.iamMagnified').css('width'));
        $('.magnifyMe').css('background', 'url(\"'+srcimg+'\")');
        $('.magnifyMe').css('background-repeat','no-repeat');
        $('.magnifyMe').css('background-size','100% 100%');
        $('.magnifyMe').css('background-origin','content-box');  
        $('.magnifyMe').magnifyMe('iamMagnified');
        $('body').css('overscroll-behavior-y','contain');   
    })
   
    $('#magnifyback').on('click',function(){
      $('body').css('overscroll-behavior-y','');
      $('#magnifyback').hide();
      $("#zoomimg").hide();
    })
});
// Added By Aber Lu at 2018/04/19 let img max width = 100% start
function show(box){
  if ( $("#" + box).is(":visible") ) {
    $("#" + box).hide();
  } else {
    $("#" + box).show();
  }

}
</script>

@endsection

@section('header')
<div class="header_margin" id="back"><a onclick="window.location='{{ url('auth/index') }}'">〈返回</a></div>
<div class="header_margin" id="title">會議紀錄</div>
@endsection
@section('content')

@forelse ($datas as $data)
    
	<div class="message" style='position:relative;margin:45px 0 30px 0;'>
		<div class="arrow" onclick="show('box{{ $data->agendarecord_id }}')" style='position:relative;top:-10px;'><img src="{{ URL::asset('images/arrow.png') }}"></div>
		<div class="date">{!! $data->remark1 !!}</div>
		<div class="text">{{ $data->title }}</div>
		<div id="box{{ $data->agendarecord_id }}" class="box" style="display:none;font-size:18px;color:#666;">
      		<h2>{!! $data->remark2 !!}</h2>
          {!! $data->content !!}
      		
    	</div>
	</div>
@empty
    <div>目前無任何資料</div>
@endforelse
  <div id="magnifyback">
    <div id="zoomimg"></div>
  </div>
  

@endsection