@extends('layout.user')
@section('content')
    <style >
        div[role="progressbar"] {
            --size: 7rem;
        }
        .photo-column1{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .bar-image{
            height: 80px;
            width: 50%;
            margin: 0 auto;
            display: block;
        }

        .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>{{'Edit Item'}}</h4>
        </div>
        <div>
            @if($item->photo_type == 'single_photo'  )
                <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>
            @endif
        </div>
    </div>
    <div class="row">
        <div class="col-md-7">
            <section class="contact-form">
                <div class="add-items">
                    <form action="{{route('policyholder.update_item')}}" method="post" id="update-item-form" enctype="multipart/form-data">

                        {!! csrf_field() !!}
                        <input type="hidden" id="item_id" name="item_id" value="{{$item->id}}">
                        <input type="hidden" id="room_id" name="room_id" value="{{$item->room_id}}">
                        <input type="hidden" id="photo_type" name="photo_type" value="{{$item->photo_type}}">


                        <div class="noo-labels">
                            <div class="form-row">
                                <div class="col-60">
                                    <label>Item Name
                                        <i class="fa fa-info-circle" data-toggle="tooltip" data-placement="top" title="" data-original-title="This is the name of the item. Item names can only be used once. If you have a similiar item, use a different name."></i>
                                    </label>
                                    <input type="text" name="item_name" id="item_name"  class="general-field" placeholder="Enter Item Name  " value="{{$item->item_name}}"/>
                                </div>
                                <div class="col-60">
                                    <label>Room Name
                                        <i class="fa fa-info-circle" data-toggle="tooltip" data-placement="top" title="" data-original-title="This is the room where the item is located."></i>
                                    </label>
                                    <input type="text" name="room_name" class="general-field" value="{{$item->room->title}}" placeholder="Enter Room Name " readonly/>
                                </div>
                            </div>
                        </div>
                        <div class="form-row" id="upload_div" @if(count($item->photos) > 0)   style="display: none;" @endif>
                            <div class="col-md-4" >
                                <label>Photos
                                    <i class="fa fa-info-circle" data-toggle="tooltip" data-placement="top" title="" data-original-title="This is where you will add pictures of your item."></i>
                                </label>
                                {{--                            <div class="form-full-row">--}}
                                <div class="drag_drop_file" id="dropContainer"   style="text-align: center; padding: 0px 23px; height: calc(100% - 30px); border: 1px solid #E8E8E8;">
                                    <div class="drag-inner"   style="text-align: center">
                                        <img src="{{asset('images/upload_imgs.png')}}"/>
                                        <h5>Drag & Drop Images here</h5>
                                        <p>File format PNG / JPG / JPEG / HEIC</p>
                                    </div>

                                    <div class="choose-file"   style="width: 74%;">
                                        <input id="choose-file" name="images[]" accept="image/*,image/heic" type="file" multiple    style="display:none;">
                                        <label for="choose-file">Choose Files</label>
                                    </div>
                                </div>
                                {{--                            </div>--}}
                            </div>
                            <div class="col-md-4">
                                <div class="default one-label">
                                    <label>Barcode
                                        <i class="fa fa-info-circle" data-toggle="tooltip" data-placement="top" title="" data-original-title="Enter Barcode Number"></i>
                                    </label>
                                    <div class="recipt-box"   style="height: calc(100% - 30px)">
                                        <div class="inner-box">
                                            <img class="bar-image"  src="{{asset('images/barcode.png')}}"/>
                                        </div>
                                        <div class="form-row">
                                            <div class="col-12">
                                                <label   style="margin-top: 10px;">Enter Barcode Number
                                                    <i class="fa fa-info-circle" data-toggle="tooltip" data-placement="top" title="" data-original-title="If your item has a barcode, enter the complete barcode number here. If the barcode of your item is in the database, it will populate some, if not most of the information below."></i>
                                                </label>
                                                <input type="text" id="bar_code" name="bar_code" class="general-field" placeholder="Enter Barcode Number" value="">
                                                <p>If no results, barcode may not be in database.</p>
                                                <button class="orange-btn" style="padding: 8px 45px;" type="button" onclick="fetchBarcode()">Search</button>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4" >
                                <label>Photos
                                    <i class="fa fa-info-circle" data-toggle="tooltip" data-placement="top" title="" data-original-title="This is where you will search picture of your item."></i>
                                </label>
                                <div class="drag_drop_file" id="dropContainer2"   style="text-align: center; padding: 0px 23px; height: calc(100% - 30px); border: 1px solid #E8E8E8;">
                                    <div class="drag-inner"   style="text-align: center">
                                        <img src="{{asset('images/MagnifyingGlass.png')}}"/>
                                        <h5>Drag & Drop Images here</h5>
                                        <p>File format PNG / JPG / JPEG / HEIC</p>
                                    </div>

                                    <div class="choose-file" style="width: 74%;">
                                        <input id="choose-file-search" name="images[]" accept="image/*,image/heic" type="file" multiple    style="display:none;">
                                        <label for="choose-file-search">Search Files</label>
                                    </div>
                                </div>
                            </div>
                         </div>


                        <div class="default one-label">

                             <div class="form-row">
                                <div class="col-60">
                            <label>Brand/Manufacture
                                <i class="fa fa-info-circle" data-toggle="tooltip" data-placement="top" title="" data-original-title="This is the brand or manufacturer name of the item."></i>
                            </label>
                            <input type="text" name="brand" class="general-field" placeholder="Enter Brand/Manufacture Name " value="{{$item->brand}}"/>
                        </div>
                                <div class="col-60">
                            <label>Model
                                <i class="fa fa-info-circle" data-toggle="tooltip" data-placement="top" title="" data-original-title="This is the Model Number of the item. If there is no model number, leave this blank."></i>
                            </label>
                            <input type="text" name="model" class="general-field" placeholder="Enter Model Number " value="{{$item->model}}"/>
                        </div>
                            </div>
                            <div class="form-row">
                        <div class="col-60">
                            <label>Serial Number
                                <i class="fa fa-info-circle" data-toggle="tooltip" data-placement="top" title="" data-original-title="Not all items have a serial number. If the items runs on batteries or plugs into the wall, then it like has a serial number. You will want to enter that here."></i>
                            </label>
                            <input type="text" name="serial_number" class="general-field" placeholder="Enter Serial Number " value="{{$item->serial_number}}"/>
                        </div>
                        <div class="col-60">
                            <label>Purchased From
                                <i class="fa fa-info-circle" data-toggle="tooltip" data-placement="top" title="" data-original-title="Enter the store or website where you purchased the item. If this is unknown, then leave this blank."></i>
                            </label>
                            <input type="text" name="purchased_from" class="general-field" placeholder="Enter Purchase From " value="{{$item->purchased_from}}"/>
                        </div>
                    </div>
                            <div class="form-row">
                                <div class="col-60">
                                    <label>Receipt Upload
                                        <i class="fa fa-info-circle" data-toggle="tooltip" data-placement="top" title="" data-original-title="If you have a purchase receipt for the item, you can upload and save it here."></i>
                                    </label>
                                    <div class="choose-receipt" >
                                        <label for="choose-file-receipt" class="label-receipt">
                                            <input id="choose-file-receipt" name="receipts[]"  type="file" multiple    style="display:none;">
                                            <i class='fas fa-receipt'  style='font-size:22px;margin-top: 5px'></i>
                                            <span class="upload-recipt">Upload Receipt </span>
                                            <p class="recipt-side-text" >File format Pdf/ Doc/ Docx/ Xls/ Xlsx/ Image</p>
                                        </label>
                                    </div>
                                </div>
                                <div class="col-60">
                                    <label>Purchase Date
                                        <i class="fa fa-info-circle" data-toggle="tooltip" data-placement="top" title="" data-original-title="If you know the date the item was purchased,enter it here."></i>
                                    </label>
                                    <input type="text"  name="purchased_date" class="datepicker general-field"  placeholder="Enter Purchase Date  " value="{{$item->purchased_date}}"/>
                                </div>
                            </div>
                            <div class="form-row">
                        <div class="col-60">
                            <label>Quantity
                                <i class="fa fa-info-circle" data-toggle="tooltip" data-placement="top" title="" data-original-title="If you have more than one of this item, enter the number here."></i>
                            </label>
                            <input type="number" name="quantity_lost" class="general-field" placeholder="Enter Quantity " value="{{$item->quantity_lost}}"/>
                        </div>
                        <div class="col-60">
                            <label>Cost to replace <b>(EACH)</b> Pre-Tax
                                <i class="fa fa-info-circle" data-toggle="tooltip" data-placement="top" title="" data-html="true" data-original-title="If the quantity of this item is more than one, enter the cost to replace a single item.  <br/><br/> Example: <br/> If you have 2 End Tables, enter the price for one End Table and set the Quantity as 2."></i>
                            </label>
                            <input type="number" step="0.000000001" name="cost_replace" class="general-field" placeholder="Enter Cost to replace " value="{{$item->cost_replace}}"/>
                        </div>
                    </div>
                            <div class="form-row">
                        <div class="col-60">
                            <label>Age (years)
                                <i class="fa fa-info-circle" data-toggle="tooltip" data-placement="top" title="" data-original-title="This is the age of the item in years. If the item is less than the year old, enter 0 and then enter the number of months in the box to the right."></i>
                            </label>
                            <input type="number" min="0" name="age_year" class="general-field" placeholder="Enter Age in Years " value="{{$item->age_year}}"/>
                        </div>
                        <div class="col-60">
                            <label>Age (months)
                                <i class="fa fa-info-circle" data-toggle="tooltip" data-placement="top" title="" data-original-title="If the age of the item is less than a one year, enter 0 in the Age(years) box to the left and the number of months in the box."></i>
                            </label>
                            <select  name="age_month" class="general-field">
                                <option {{$item->age_month=='0'?'selected':''}} value="0">0</option>
                                <option  {{$item->age_month=='1'?'selected':''}}  value="1">1</option>
                                <option {{$item->age_month=='2'?'selected':''}}  value="2">2</option>
                                <option  {{$item->age_month=='3'?'selected':''}} value="3">3</option>
                                <option  {{$item->age_month=='4'?'selected':''}} value="4">4</option>
                                <option {{$item->age_month=='5'?'selected':''}}  value="5">5</option>
                                <option  {{$item->age_month=='6'?'selected':''}} value="6">6</option>
                                <option  {{$item->age_month=='7'?'selected':''}} value="7">7</option>
                                <option  {{$item->age_month=='8'?'selected':''}} value="8">8</option>
                                <option  {{$item->age_month=='9'?'selected':''}} value="9">9</option>
                                <option  {{$item->age_month=='10'?'selected':''}} value="10">10</option>
                                <option  {{$item->age_month=='11'?'selected':''}} value="11">11</option>
                            </select>

{{--                            <input type="number" name="age_month" class="general-field" placeholder="Type Something " value="{{$item->age_month}}"/>--}}
                        </div>
                    </div>

                        <div class="form-row google-lens-url" @if(empty($item->google_lens_url)) style="display: none;" @endif>
                            <div class="col-60">
                                <label>LKQ URL
                                    <i class="fa fa-info-circle" data-toggle="tooltip" data-placement="top" title="" data-original-title="This is the url retreived by Google Lens API."></i>
                                </label>
                                <input type="text" readonly id="google_lens_url" value="{{$item->google_lens_url}}"  name="google_lens_url" class="general-field"/>
                            </div>
                        </div>

                        </div>
                        <div class="form-row">
                            <div class="form-full-row">
                                <button {{--type="button"--}} class="btn-add" {{--onclick="addItem()"--}}>Update Item</button>
                            </div>
                        </div>
                    </form>
                </div>
            </section>
        </div>
        <button class="plan-btn red-btn del_check_photos"   style="display: none;margin-right: 10px"><img
                src="{{asset('images/delete.png')}}"/>Delete Selected
        </button>
        <button class="plan-btn red-btn del_check_receipts"   style="display: none;margin-right: 10px"><img
                src="{{asset('images/delete.png')}}"/>Delete Selected receipts
        </button>
        <div class="col-md-5">


            <div class="kidding-column1">
                <div class="kidding-gallery">
                    <div class="kidding-title">
                        <h4>Photos <span id="photo_count_new">({{count($item->photos)}})</span></h4>
                    </div>
                    <div class="kidding-photo" >
                        @if(count($item->photos))
                            @foreach($item->photos as $key=>$photo)

                                <div class="kidding-photo-item photo-id-{{$photo->id}}" id="photo-{{$photo->id}}"   style="position: relative;">

                                    @if (file_exists(public_path($photo->image_path)))
                                        <a href="{{asset($photo->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->image_path}}')"></div>
                                        </a>
                                    @else
                                        <a href="{{$photo->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->image_path}}')"></div>
                                        </a>
                                    @endif
{{--                                    <h3   style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;max-width: 260px;">{{$photo->name}}</h3>--}}
                                    <div class="edit-btns"    style="display: flex; justify-content:space-between; width:100%;    top: 5px;">
                                        <button class="rotate_group rotate-img " data-id="{{$photo->id}}" data-value="{{$photo->degree}}"><img
                                                src='{{asset('images/rotate.png')}}' class="rotate-img-size"/></button>
                                        <div class="check_and_delete_photo"   style="background-color:rgba(0, 0, 0, 0.5); border-radius: 5px; display: flex; align-items: center">
                                            <div class="custom-checkbox photo-checkbox"
                                                   style="float: left ; margin-top: 2px;margin-left: 5px">
                                                <input type="checkbox" value="{{$photo->id}}"
                                                       onclick="selectPhotosFromCheckbox()" id="checkbox{{$key}}"
                                                         style="display:none; "/>
                                                <label for="checkbox{{$key}}"></label>
                                            </div>
                                            <button   style="padding: 0;border: none;background: none;height: 25px;" href="#"
                                                    onclick="deletePhoto({{$photo->id}}, {{$photo->id}})">
                                                <i class="glyphicon glyphicon-trash red-btn"
                                                     style="margin-top: 4px; margin-left: 5px;margin-right: 5px"></i>
                                            </button>
                                        </div>

                                    </div>
                                </div>
                            @endforeach
                        @endif
                    </div>
                </div>
            </div>

            <div class="clearfix"> </div>
            <hr>
            <div class="kidding-column1">
                <div class="kidding-gallery-receipt">
                    <div class="kidding-title"   style="display: flex">
                        <h4>Receipts <span id="receipt_count_new">({{count($item->receipts)}})</span></h4>&nbsp;&nbsp;<span>Click on Item to View</span>
                    </div>
                    <div class="kidding-photo-receipt" id="sort-receipt">
                        @foreach($item->receipts as $receipt)

                            @if($receipt->extension == 'pdf')
                                <div id="receipt-{{$receipt->id}}" class="kidding-photo-item receipt-id-{{$receipt->id}}"   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 class="edit-btns">
                                        <span></span>
                                        <div class="check_and_delete_photo"   style="background-color:rgba(0, 0, 0, 0.5); border-radius: 5px; display: flex; align-items: center">
                                            <div class="custom-checkbox receipt-checkbox"
                                                   style="float: left ; margin-top: 2px;margin-left: 5px">
                                                <input type="checkbox" value="{{$receipt->id}}" data-index="{{$receipt->id}}"
                                                       onclick="selectReceiptsFromCheckbox()" id="checkbox{{$receipt->id}}"
                                                         style="display:none; "/>
                                                <label for="checkbox{{$receipt->id}}"></label>
                                            </div>
                                            <button   style="padding: 0;border: none;background: none;height: 25px;" href="#"
                                                    onclick="deleteReceipt({{$receipt->id}}, {{$receipt->id}})">
                                                <i class="glyphicon glyphicon-trash red-btn"
                                                     style="margin-top: 4px; margin-left: 5px;margin-right: 5px"></i>
                                            </button>
                                        </div>

                                    </div>
                                </div>
                            @elseif ($receipt->extension == 'doc' || $receipt->extension == 'docx' )
                                <div id="receipt-{{$receipt->id}}" class="kidding-photo-item receipt-id-{{$receipt->id}}"   style="position: relative;">
                                    <div class="receipt-document"   style="background-image: url('{{asset('images/'.$receipt->extension.'_icon.png')}}')"
                                         onclick="openDocFile('{{($receipt->image_path) }}')">


                                    </div>
                                    <div class="edit-btns"  >
                                        <span></span>
                                        <div class="check_and_delete_photo"   style="background-color:rgba(0, 0, 0, 0.5); border-radius: 5px; display: flex; align-items: center">
                                            <div class="custom-checkbox receipt-checkbox"
                                                   style="float: left ; margin-top: 2px;margin-left: 5px">
                                                <input type="checkbox" value="{{$receipt->id}}" data-index="{{$receipt->id}}"
                                                       onclick="selectReceiptsFromCheckbox()" id="checkbox{{$receipt->id}}"
                                                         style="display:none; "/>
                                                <label for="checkbox{{$receipt->id}}"></label>
                                            </div>
                                            <button   style="padding: 0;border: none;background: none;height: 25px;" href="#"
                                                    onclick="deleteReceipt({{$receipt->id}}, {{$receipt->id}})">
                                                <i class="glyphicon glyphicon-trash red-btn"
                                                     style="margin-top: 4px; margin-left: 5px;margin-right: 5px"></i>
                                            </button>
                                        </div>

                                    </div>
                                </div>
                            @elseif ($receipt->extension == 'xlsx' || $receipt->extension == 'xls' )
                                <div id="receipt-{{$receipt->id}}" class="kidding-photo-item receipt-id-{{$receipt->id}}"   style="position: relative;">
                                    <div class="receipt-document"   style="background-image: url('{{asset('images/'.$receipt->extension.'_icon.png')}}')"
                                         onclick="window.open('{{($receipt->image_path) }}','_blank')">

                                        <div class="edit-btns"  >
                                            <span></span>
                                            <div class="check_and_delete_photo"   style="background-color:rgba(0, 0, 0, 0.5); border-radius: 5px; display: flex; align-items: center">
                                                <div class="custom-checkbox receipt-checkbox"
                                                       style="float: left ; margin-top: 2px;margin-left: 5px">
                                                    <input type="checkbox" value="{{$receipt->id}}" data-index="{{$receipt->id}}"
                                                           onclick="selectReceiptsFromCheckbox()" id="checkbox{{$receipt->id}}"
                                                             style="display:none; "/>
                                                    <label for="checkbox{{$receipt->id}}"></label>
                                                </div>
                                                <button   style="padding: 0;border: none;background: none;height: 25px;" href="#"
                                                        onclick="deleteReceipt({{$receipt->id}}, {{$receipt->id}})">
                                                    <i class="glyphicon glyphicon-trash red-btn"
                                                         style="margin-top: 4px; margin-left: 5px;margin-right: 5px"></i>
                                                </button>
                                            </div>

                                        </div>
                                    </div>
                                </div>

                            @elseif($receipt->extension == 'png' || $receipt->extension == 'jpg' || $receipt->extension == 'jpeg' || $receipt->extension == 'bmp'|| $receipt->extension == 'webp')
                                <div id="receipt-{{$receipt->id}}" class="kidding-photo-item receipt-id-{{$receipt->id}}"   style="position: relative;">
                                    <a href="{{($receipt->image_path)}}"  data-fancybox="images"      style="display:block;">
                                        <div class="kidding-img"   style="background-image:url('{{($receipt->image_path)}}');object-fit: cover;width:100%"></div>
                                    </a>
                                    <div class="edit-btns" >
                                        <span></span>
                                        <div class="check_and_delete_photo"   style="background-color:rgba(0, 0, 0, 0.5); border-radius: 5px; display: flex; align-items: center">
                                            <div class="custom-checkbox receipt-checkbox"
                                                   style="float: left ; margin-top: 2px;margin-left: 5px">
                                                <input type="checkbox" value="{{$receipt->id}}" data-index="{{$receipt->id}}"
                                                       onclick="selectReceiptsFromCheckbox()" id="checkbox{{$receipt->id}}"
                                                         style="display:none; "/>
                                                <label for="checkbox{{$receipt->id}}"></label>
                                            </div>
                                            <button   style="padding: 0;border: none;background: none;height: 25px;" href="#"
                                                    onclick="deleteReceipt({{$receipt->id}}, {{$receipt->id}})">
                                                <i class="glyphicon glyphicon-trash red-btn"
                                                     style="margin-top: 4px; margin-left: 5px;margin-right: 5px"></i>
                                            </button>
                                        </div>

                                    </div>
                                </div>

                            @endif
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@include('modal.multi_label')
@include('modal.confirm_modal')
@include('modal.document')
@include('modal.search_items')
@include('modal.open_image')

@section('js_file')
    <script nonce="{{config('app.nonce')}}" src="https://developers.contentsbuddy.com/userasset/js/rotation/jquery.rotate.1-1.js"></script>
    <script nonce="{{config('app.nonce')}}" src="https://developers.contentsbuddy.com/userasset/js/rotation/jquery.rotate.js"></script>
    <script nonce="{{config('app.nonce')}}" type="text/javascript" src="https://developers.contentsbuddy.com/userasset/js/rotation/jQueryRotateCompressed.js"></script>
    <script nonce="{{config('app.nonce')}}" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>

    <script nonce="{{config('app.nonce')}}">
        let count_img = {{count($item->photos)}};
        let receipt_count = {{count($item->receipts)}};

        function fetchBarcode() {
            var barcode= $('#bar_code').val();
            var room_id= $('#room_id').val();
            var item_id= $('#item_id').val();
            if ($('#bar_code').val() != '') {
                $('#spinner').modal('show');
                $.ajax({
                    url: `${baseUrl}policyholder/barcode_fetch`,
                    type: 'POST',
                    dataType: 'json',
                    data: {'bar_code': barcode, 'room_id': room_id, 'item_id' : item_id},
                    beforeSend: function (request) {
                        return request.setRequestHeader('X-CSRF-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/edit_item_single.blade.php:471
Stack trace:
#0 {main}
  thrown in <b>/home/contentsbuddylit/public_html/developers.contentsbuddylite.com/resources/views/item/edit_item_single.blade.php</b> on line <b>471</b><br />