@extends('layout.user')
@section('content')

    <style >
        .img-column-kidding{
            float: left;
            /*width: 25%;*/
        }

        .kidding-gallery {
            min-height: 300px;
        }
        .receipt-document{

            height: 160px;
            width: 106px;
            background-size: cover;
            background-position: center center;
            background-repeat: no-repeat;
        }
        .edit-btns{
            left:0px;
            padding: 0px 5px;
            display: flex;
            justify-content: space-between;
            width: 100%;
            top: 0;
        }
        .img-column-kidding {
            position: relative;
        }

        .kidding-photo-bg-img {
            height: 160px;
        }

        .kidding-photo-item{
            width: 29%;
        }

        </style>
        <div class="page-title">
            <div class="left-column">
                <h4>{{$item->item_name}}</h4>
{{--                <h6>Serial No: CBLRI-{{$item->id}}</h6>--}}
            </div>
            <div class="right-column">
                <div class="edit-option">
                    <ul>
                        @if(($item->photo_type == 'item_photo' && $item->is_group == 0) || $item->photo_type == 'single_photo'  )
                        <li>
                            <button class="btn-add"  data-toggle="modal" data-target="#multi_label">
                                Label multiple items
                                <i class="fa fa-info-circle"  style="color: white" data-toggle="tooltip" data-placement="bottom" title="If you have one photo and multiple items in that photo, click here to create a description of that item.  A new line item will be created using this photo."></i>
                            </button>
                        </li>
                        @endif
                        <li>
                            <a href="{{route('policyholder.edit_item',[$item->id])}}"><img src="{{asset('images/edit-icon.png')}}" data-toggle="tooltip" data-placement="bottom" title="Click here to change item information and/or photo."/></a>
                        </li>
                        <li>
                            <a href="javascript:void(0)" onclick="deleteItem({{$item->id}},{{$item}},{{$item->room_id}})"><img src="{{asset('images/delete-icon.png')}}"/></a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <section class="contact-form">
            <div class="row kidding-row">
                <div class="col-md-7">
                    <div class="kidding-column" >
                    <div class="kidding-inner-row">
                        <div class="kidding-title">
                            <h4>Item Details</h4>
                        </div>
                        <ul>
{{--                            <li>--}}
{{--                                <span>Item Title</span>--}}
{{--                                {{$item->item_title ?? \App\AppConstants::EMPTY_LABEL}}--}}
{{--                            </li>--}}
                            <li>
                                <span>Item Name</span>
                                <span  style="color: black">{{$item->item_name ?? \App\AppConstants::EMPTY_LABEL}}</span>
                            </li>
                            <li>
                                <span>Room</span>
                                <span  style="color: black">{{$item->room_name ?? \App\AppConstants::EMPTY_LABEL}}</span>
                            </li>
                            <li>
                                <span>Enter Barcode Number</span>
                                <span  style="color: black">{{$item->brand ?? \App\AppConstants::EMPTY_LABEL}}</span>
                            </li>
                            <li>
                                <span>Model*</span>
                                <span  style="color: black">{{$item->model ?? \App\AppConstants::EMPTY_LABEL}}</span>
                            </li>
                            <li>
                                <span>Serial Number*</span>
                                <span  style="color: black">{{$item->serial_number ?? \App\AppConstants::EMPTY_LABEL}}</span>
                            </li>
                            <li>
                                <span>Purchased From*</span>
                                <span  style="color: black">{{$item->purchased_from  ?? \App\AppConstants::EMPTY_LABEL}}</span>
                            </li>
                            <li>
                                <span>Purchased Date*</span>
                                <span  style="color: black">{{$item->purchased_date  ?? \App\AppConstants::EMPTY_LABEL}}</span>
                            </li>
                            <li>
                                <span>Quantity *</span>
                                <span  style="color: black">{{$item->quantity_lost ?? \App\AppConstants::EMPTY_LABEL}}</span>
                            </li>
                            <li>
                                <span>Cost to replace <b>(EACH)</b><br> Pre-Tax</span>
                                <span  style="color: black">{{$item->cost_replace ?? \App\AppConstants::EMPTY_LABEL}}</span>
                            </li>
                            <li>
                                <span>Age</span>
                                @if(isset($item->age_year) && isset($item->age_month))
                                    <span   style="color: black">{{$item->age_year > 0 ?  $item->age_year.' year(s) , ' : ''}} {{$item->age_month}} month(s)</span>
                                @else
                                    <span  style="color: black">{{\App\AppConstants::EMPTY_LABEL}}</span>
                                @endif
                            </li>
                            @if(!empty($item->google_lens_url))
                                <li>
                                    <span>LKQ URL</span>
                                    <span  style="color: black">{{$item->google_lens_url ?? \App\AppConstants::EMPTY_LABEL}}</span>
                                </li>
                            @endif
                        </ul>
                    </div>

                    <div class="kidding-not">
                        <label>Notes</label>
                        <textarea class="white-msg" id="notes"> {{$item->note}}</textarea>
                    </div>
                    <div class="form-row">
                        <div class="form-full-row text-right">
                            <button class="btn-add" onclick="saveNote({{$item->id}})">Save Notes</button>
                        </div>
                    </div>
                </div>
                </div>
                <div class="col-md-5">
                    <div class="kidding-column1">
                        <div class="kidding-gallery">
                            <div class="kidding-title">
                                <h4>Photos ({{count($item->photos)}})</h4>
                            </div>
                            <div class="kidding-photo">
                                @foreach($item->photos as $photo)
                                {{--<div class="img-column-kidding">
                                    <a href="{{asset($photo->image_path)}}"  data-fancybox="images"     style="display:block;">
                                        <div class="kidding-img"  style="transform: rotate({{$photo->degree}}deg);background-image:url('{{asset($photo->image_path)}}');object-fit: cover;" data-toggle="tooltip" data-placement="top" title="Click to enlarge."></div>
                                    </a>
                                </div>--}}
                                    <div class="kidding-photo-item photo-id-{{$photo->id}}"  style="position: relative;">

                                        @if (file_exists(public_path($photo->compressed_image_path)))
                                            <a href="{{asset($photo->compressed_image_path)}}" class="fancybox" data-fancybox="images"   style="display: block; overflow: hidden;">
                                                <div class="photo-img kidding-photo-bg-img"  style="transform: rotate({{$photo->degree}}deg); background-image:url('{{asset('/').$photo->compressed_image_path}}')" data-toggle="tooltip" data-placement="top" title="Click to enlarge."></div>
                                            </a>
                                        @else
                                            <a href="{{($photo->compressed_image_path)}}" class="fancybox" data-fancybox="images"   style="display: block; overflow: hidden;">
                                                <div class="photo-img kidding-photo-bg-img"  style="transform: rotate({{$photo->degree}}deg); background-image:url('{{$photo->compressed_image_path}}')" data-toggle="tooltip" data-placement="top" title="Click to enlarge."></div>
                                            </a>
                                        @endif

                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                    <div class="clearfix"> </div>
                    <hr>
                    <div class="kidding-column1">
                        <div class="kidding-gallery">
                            <div class="kidding-title">
                                <h4>Receipts ({{count($item->receipts)}})</h4>
                            </div>
                            <div class="kidding-photo">
                                @foreach($item->receipts as $receipt)

                                        @if($receipt->extension == 'pdf')
                                        <div class="kidding-photo-item"  style="position: relative;">
                                            <div class="receipt-document"  style="overflow: hidden; width: 100%; position: relative;">
                                                <a  style="position: absolute;top: 0px;left: 0px;width: 100%;height: 100%;" onclick="openDocument('{{($receipt->image_path) }}')"  href="javascript:void(0)"></a>
                                                <embed width="150" height="200" name="plugin" src="{{($receipt->image_path) }}" type="application/pdf">
                                            </div>
                                        </div>
                                        @elseif ($receipt->extension == 'doc' || $receipt->extension == 'docx' )
                                        <div class="kidding-photo-item"  style="position: relative;">
                                            <div
                                                onclick="openDocFile('{{($receipt->image_path) }}')"
                                                class="receipt-document"  style="background-image: url('{{asset('images/'.$receipt->extension.'_icon.png')}}')">
                                            </div>
                                        </div>
                                        @elseif ($receipt->extension == 'xlsx' || $receipt->extension == 'xls' )
                                        <div class="kidding-photo-item"  style="position: relative;">
                                            <div   class="receipt-document" ><a target="_blank" href="{{($receipt->image_path) }}"><img src="{{asset('images/'.$receipt->extension.'_icon.png')}}"/></a>
                                            </div>
                                        </div>
                                    @elseif($receipt->extension == 'png' || $receipt->extension == 'jpg' || $receipt->extension == 'jpeg' || $receipt->extension == 'bmp'|| $receipt->extension == 'webp')
                                        <div class="kidding-photo-item"  style="position: relative;">
                                            <a href="{{($receipt->image_path)}}"  data-fancybox="images"     style="display:block;">
                                                <div class="photo-img kidding-photo-bg-img"  style="background-image:url('{{($receipt->image_path)}}');object-fit: cover;"></div>
                                            </a>
                                        </div>
                                    @endif
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </section>

@include('modal.multi_label')
    @include('modal.document')
@endsection
@section('js_file')

<script nonce="{{config('app.nonce')}}">

    function openDocFile(file){
        $('#document').modal('show');
        $('#load-document').html(`<iframe  style="width: 100%; height: 100%;" src="https://view.officeapps.live.com/op/embed.aspx?src=${file}"></iframe>`);
        // $('#load-document').html(`<!--<iframe src="https://docs.google.com/gview?url=${file}"></iframe>-->`);
    }

    function openDocument(file){
        $('#document').modal('show');
        $('#load-document').html(`<embed src="${file}" frameborder="0" width="100%" height="100%">`);
    }
    $(document).ready(function() {
        $('[data-fancybox="images"]').fancybox({
            margin : [44,0,22,0],
            thumbs : {
                autoStart : true,
                position : 'bottom',
                axis      : 'x'
            }
        })
    });

    function saveNote(id){
        let note_text = $('#notes').val();
        let room_id = {{$item->room_id}};
        if($.trim($("#notes").val())){
            $('#spinner').modal('show');
            $.ajax({
                type: "POST",
                url: `${baseUrl}policyholder/save_note`,
                data: {id: id, note: note_text, '_token': '<br />
<b>Fatal error</b>:  Uncaught Error: Call to undefined function csrf_token() in /home/contentsbuddylit/public_html/developers.contentsbuddylite.com/resources/views/item/detail.blade.php:256
Stack trace:
#0 {main}
  thrown in <b>/home/contentsbuddylit/public_html/developers.contentsbuddylite.com/resources/views/item/detail.blade.php</b> on line <b>256</b><br />