@extends('web.layout.master')
@section('title', 'Welcome! | House Runs For Me')
@section('about-active', 'active')
@section('content')
@include('web.pages.navbar')
<style>
    a:hover, a:active{
        color: #8d3d38  !important;
    }
    .modal-dialog.modal-sm {
        width: 40%;
    }
</style>
<style>
    .tooltip {
      position: relative;
      display: inline-block;
    }
    
    .tooltip .tooltiptext {
      visibility: hidden;
      width: 140px;
      background-color: #555;
      color: #fff;
      text-align: center;
      border-radius: 6px;
      padding: 5px;
      position: absolute;
      z-index: 1;
      bottom: 150%;
      left: 50%;
      margin-left: -75px;
      opacity: 0;
      transition: opacity 0.3s;
    }
    
    .tooltip .tooltiptext::after {
      content: "";
      position: absolute;
      top: 100%;
      left: 50%;
      margin-left: -5px;
      border-width: 5px;
      border-style: solid;
      border-color: #555 transparent transparent transparent;
    }
    
    .tooltip:hover .tooltiptext {
      visibility: visible;
      opacity: 1;
    }
    </style>
    <div class="container" style="background: white;padding-top: 50px;">
        <div class="row">
            <div class="col-md-12">
                <div class="bg-white py-5">
                    <div class="container">
                        <div class="row">
                            <div class="col-md-9">
                                <article>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <h2>{{$data->title}}</h2>
                                        </div>
                                        <div class="col-md-4" style="margin-top: 30px;">
                                            <div class="row">
                                                <div class="col-md-1">
                                                    <a href="mailto:"><i class="fa fa-envelope" aria-hidden="true"></i></a>
                                                </div>
                                                <div class="col-md-1">
                                                    <a href="#" data-toggle="modal" data-target="#exampleModal"><i class="fa fa-share-alt" aria-hidden="true"></i></a>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-2">
                                            <p class="date"> {{Date('d-M-Y',strtotime($data->created_at))}} </p>    
                                        </div>
                                    </div>
                                    @php
                                        $check = explode(".",$data->image);
                                        $ext = $check[1];
                                    @endphp
                                    @if($ext == 'mp4' || $ext == 'mov' ||$ext == 'flv' ||$ext == 'webm' )
                                    <video width="320" height="240" controls>
                                      <source src="{{asset('admin/news/'.$data->image)}}" type="video/mp4">
                                    </video>
                                    @else
                                    <img src="{{asset('admin/news/'.$data->image)}}" class="image" weight="800px;" height="800px;">
                                    @endif
                                    <p>{{$data->desc}}</p>
                                  
                                  
                                </article>                                
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm" role="document">
      <div class="modal-content">
        <div class="modal-body">
            <input type="text" class="form-control" id="link" value="{{ url('news/view/'.$data->id) }}">
        </div>
        <div class="modal-footer">
            <div class="tooltip">
                <button type="button" class="btn btn-primary" onclick="myFunction()" onmouseout="outFunc()">
                  <span class="tooltiptext" id="myTooltip">Copy to clipboard</span>
                  Copy Link
                  </button>
                </div>
          <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
@endsection

@section('scripts')
<script>
    function myFunction() {
      var copyText = document.getElementById("link");
      copyText.select();
      copyText.setSelectionRange(0, 99999);
      document.execCommand("copy");
      
      var tooltip = document.getElementById("myTooltip");
      tooltip.innerHTML = "Copied: " + copyText.value;
    }
    
    function outFunc() {
      var tooltip = document.getElementById("myTooltip");
      tooltip.innerHTML = "Copy to clipboard";
    }
    </script>
@endsection