@extends('layouts.app')

@section('styles')
    <style>
      .blah a, .blah a:hover{
        display:block;
        border:3px solid #ccc;
        color: black;
        text-decoration: none;
        margin-bottom:10px;
        text-align: left;
        padding:0;
      }
      a img{
        float:left;
        margin: 0;

        margin-right: 20px;
      }

     .articleimage{
        display: block;
        max-width: 800;
        max-height: 600;
        margin:auto;
     }
    </style>
@endsection
@section('content')
<div class="container blah" style="margin-top:0px;">
    <div class="row ">
        <div class="col-md-12">
            <h3>{{$king_david->heading}}</h3>
            @if($king_david->type==="article")
                {!!$king_david->detail->details!!}
            @endif

            @if($king_david->type==="video")
                {!!$king_david->url!!}
            @endif

            @if($king_david->type === "scanned")
                <img src="/{!!$king_david->url!!}" style="max-width: 90%; display: block; margin: auto;">
            @endif
        </div>
    </div>
</div>

@endsection
@section('javascript')
    <script>
        // Get the modal
    var modal = document.getElementById('myModal');

    // Get the image and insert it inside the modal - use its "alt" text as a caption
    var img = document.getElementById('myImg');
    var modalImg = document.getElementById("img01");
    $('[data-fancybox]').on('click', function(e){
        e.preventDefault();
        $("img.modal-content").show();
        $("video.modal-content").show();
        if($(this).attr('data-type') == 'image'){
            $("#img01").attr('src', $(this).attr('href'));
            $("video.modal-content").hide();
        }else{
            $("img.modal-content").hide();
            $("video").children('source').attr('src', $(this).attr('href'));
            $("video")[0].load();
        }
        $("#heading").html($(this).attr('data-heading')+'&nbsp;-&nbsp;<small id="date" >'+$(this).attr('data-date')+'</small>');
        //$("#date").text($(this).attr('data-date'));
        $("#description").html($(this).attr('data-description'));
        modal.style.display = "block";
    });

    $("#content").on('click',function(){
        if($("#description").is(":visible")){
            $("#description").hide();
        }else{
            $("#description").show();
        }
    });

    // Get the <span> element that closes the modal
    var span = document.getElementsByClassName("close")[0];

    // When the user clicks on <span> (x), close the modal
    span.onclick = function() { 
      modal.style.display = "none";
    }
    </script>
@endsection