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

    <style >

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

        div[role="progressbar"] {
            --size: 7rem;
        }
        .photo-column1{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        /*.tooltip{*/
        /*    width:190px;*/
        /*    z-index: 9999999 !important;*/
        /*    background: white !important;*/

        /*}*/
        /*.tooltip-inner{*/
        /*    background: black;*/
        /*    color:#f89738;*/
        /*    width: 100%;*/
        /*}*/

        .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>
        <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="default-field">
                        <div class="form-row">
                            <div class="form-full-row">
                                <label>Item Title</label>
                                <input type="text" name="item_title" class="general-field" placeholder="Type Something " value="{{$item->item_title}}"/>
                            </div>
                        </div>
                    </div>--}}

                    <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" 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">
                        <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" type="button" style="padding: 8px 45px;" 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 search pictures 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" 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 class="form-row">
                            <div class="form-full-row">
                                <button {{--type="button"--}} class="btn-add" {{--onclick="addItem()"--}}>Update Item</button>
                            </div>
                        </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" id="edit-item-photo-sort">
                            @if(count($item->photos))
                                @foreach($item->photos as $key=>$photo)

                                    <div id="photo-{{$photo->id}}"  class="kidding-photo-item photo-id-{{$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"  >
                                            <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="edit_item_receipt_sort" >
                            @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}}"
                                                           onclick="selectReceiptsFromCheckbox()" id="checkbox{{$receipt->id}}" data-index="{{$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}}"
                                                           onclick="selectReceiptsFromCheckbox()" id="checkbox{{$receipt->id}}" data-index="{{$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}}"
                                                               onclick="selectReceiptsFromCheckbox()" id="checkbox{{$receipt->id}}" data-index="{{$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;"></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}}"
                                                           onclick="selectReceiptsFromCheckbox()" id="checkbox{{$receipt->id}}" data-index="{{$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.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_multiple.blade.php:482
Stack trace:
#0 {main}
  thrown in <b>/home/contentsbuddylit/public_html/developers.contentsbuddylite.com/resources/views/item/edit_item_multiple.blade.php</b> on line <b>482</b><br />