@extends('layout.user')
@section('content')
    <style >
        .bar-image{
            height: 80px;
            width: 50%;
            margin: 0 auto;
            display: block;
        }
        div[role="progressbar"] {
            --size: 7rem;
        }
        .photo-type-div{
            justify-content: center;
        }

        .photo-column1{

            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        .full-checkbox{
            width: 33%;
        }
        .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%;
        }
        .recipt-box .form-row{
            padding-left: 20px;
            text-align: center;
        }
        @media(max-width:1679px){
            .recipt-box .inner-box img{
                margin: -10px auto -20px auto;
                display: block;
            }
            .recipt-box .col-12,
            .recipt-box input.general-field {
                width:100%;
            }
            .recipt-box{
                /*flex-direction: column;*/
            }
            .recipt-box img{
                margin-bottom:-20px;
            }
            .recipt-box .form-row{
                padding-left: 0px;

            }
            .recipt-box .form-row label{
                display: none;
            }
            .recipt-box .form-row p{
                font-size:12px;
            }
        }
    </style>
        <div class="page-title">
            <div class="left-column">
                <h4>{{'Add Item'}}</h4>
            </div>
        </div>
        <div class="row">
            <div class="col-md-8">
                 <section class="contact-form"   style="background-color: #F7F7F7;">
            <div class="add-items">
                <form action="{{route('policyholder.add_item.submit')}}" method="post" id="add-item-form" enctype="multipart/form-data">

                    {!! csrf_field() !!}
                    <input type="hidden" id="room_id" name="room_id" value="{{$room->id}}">
                    <input type="hidden" id="item_id" name="item_id" value="{{$item->id}}">
                    <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="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="{{ isset($product) ? $product->name ?? '' : ''}}"/>
                            </div>
                            <div class="col-60">
                                <label>Room Name
                                    <i class="fa fa-info-circle" data-toggle="tooltip" data-placement="top" title="This is the room where the item is located."></i>
                                </label>
                                <input type="text" name="room_name" class="general-field" value="{{$room->title}}" placeholder="Enter Room Name " readonly/>
                            </div>

                        </div>
                    </div>

                    <div class="form-row">
                        <div class="form-full-row">
                            <label>Type of photo
                                <i class="fa fa-info-circle" data-toggle="tooltip"  data-html="true" data-placement="right"
                                   title="There are three ways to add pictures of your item.<br/><br/>
                                    <b><u>Default</u></b><br/>
                                    This allows you to add multiple pictures of the item and label that single item.<br/><br/>
                                     <b><u>Single Photos</u></b><br/>
                                    This allows you to add only one photo of the item and label that item.<br/><br/>
                                    <b><u>Multiple Photos</u></b><br/>
                                     This allows you to add multiple photos of multiple items without a label for that item.">

                                </i>
                            </label>
                            <div class="photo-types">
                                <div class="full-checkbox">
                                    <input type="radio" value="item_photo" name="photo_type" id="default"  style="display:none;" checked/>
                                    <label for="default">

                                        <div class="photo-type-div">
                                            <h3>Single Item</h3>
{{--                                            <i class="fa fa-info-circle" data-toggle="tooltip" data-placement="top" title="some text"></i>--}}
                                        </div>
                                        <span class="photo-type-text">Multiple Photos</span>
                                    </label>
                                </div>
                                <div class="full-checkbox">
                                    <input type="radio" value ="single_photo" name="photo_type" id="single-photo"  style="display:none;"/>
                                    <label for="single-photo">

                                        <div class="photo-type-div">
                                            <h3>Single Item</h3>
{{--                                            <i class="fa fa-info-circle" data-toggle="tooltip" data-placement="top" title="some text"></i>--}}
                                        </div>
                                        <span class="photo-type-text">Only One Photo</span>
                                    </label>
                                </div>
                                <div class="full-checkbox">
                                    <input type="radio" value="multiple_photo"  name="photo_type" id="no-labeling"  style="display:none;"/>
                                    <label for="no-labeling">

                                        <div class="photo-type-div">
                                            <h3>Multiple Items</h3>
{{--                                            <i class="fa fa-info-circle" data-toggle="tooltip" data-placement="top" title="some text"></i>--}}
                                        </div>
                                        <span class="photo-type-text">Multiple Photos</span>
                                    </label>
                                </div>
{{--                                <div class="full-checkbox">--}}
{{--                                    <input type="radio" value="videos"  name="photo_type" id="video"  style="display:none;"/>--}}
{{--                                    <label for="no-labeling">--}}

{{--                                        <div class="photo-type-div">--}}
{{--                                            <h4>Videos</h4>--}}
{{--                                        </div>--}}
{{--                                        <span class="photo-type-text">Add a short video</span>--}}
{{--                                    </label>--}}
{{--                                </div>--}}
                            </div>
                        </div>
                    </div>

                    <div class="form-row" id="upload_div"   style="padding: 0px;">
                        <div class="col-md-4 upload-photos-box" >
                            <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" onclick="fetchBarcode()" style="padding: 8px 45px;">Search</button>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 search-box-photo">
                            <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="form-full-row">--}}

{{--                            </div>--}}
{{--                        </div>--}}
                        <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" id="brand" name="brand" class="general-field" placeholder="Enter Brand/Manufacture Name"
                                       value="{{ isset($product) ? $product->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="{{ isset($product) ? $product->modal ?? '' : ''}}"/>
                            </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 "/>
                            </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"/>
                            </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 "/>
                            </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"/>
                            </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" id="cost_replace" step="0.000000001" name="cost_replace" class="general-field" placeholder="Enter Cost to 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 "/>
                            </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 value="" disabled selected>Enter Age in Months </option>
                                    <option value="0">0</option>
                                    <option value="1">1</option>
                                    <option value="2">2</option>
                                    <option value="3">3</option>
                                    <option value="4">4</option>
                                    <option value="5">5</option>
                                    <option value="6">6</option>
                                    <option value="7">7</option>
                                    <option value="8">8</option>
                                    <option value="9">9</option>
                                    <option value="10">10</option>
                                    <option value="11">11</option>
                                </select>

                            </div>
                        </div>


                        <div class="form-row google-lens-url" style="display: none;">
                            <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"  name="google_lens_url" class="general-field"/>
                            </div>
                        </div>
                    </div>
                    <br>
                    <div class="form-row">
                        <div class="form-full-row center-title">
                            <button type="button" class="btn-yellow" onclick="addItem()">Save 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 Photos
            </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-4">
                    <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="photo-sort">
                                @if(count($item->photos))
                                    @foreach($item->photos as $key=>$photo)
                                        <div class="kidding-photo-item photo-id-{{$photo->id}}"   style="position: relative;">
                                            <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>
{{--                                            <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">(0)</span></h4>&nbsp;&nbsp;<span>Click on Item to View</span>
                        </div>
                        <div class="kidding-photo-receipt" id="receipt_sort">
                        </div>
                    </div>
                </div>
            </div>

        </div>
@endsection
{{--@include('modal.confirm_modal')--}}
@section('js_file')
    @include('modal.search_items')
    @include('modal.open_image')
    @include('modal.document')

    <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')}}">


        $(document).ready(function() {
            let item_id = $('#item_id').val();
            $('input[type="radio"]').on('change', function() {
                $('#upload_div').show();
                $current_Checkbox = $(this).val();
                if( $current_Checkbox  == 'single_photo'){
                    $('.default.one-label').show();
                    $('.default-field').hide();
                    $('.noo-labels').show();
                    $('.search-box-photo').show();

                    $('#choose-file').removeAttr('multiple');
                    if($('.upload-photos-box').hasClass('col-md-12')){
                        $('.upload-photos-box').removeClass('col-md-12');
                        $('.upload-photos-box').addClass('col-md-4');
                    }
                }
                if( $current_Checkbox =='multiple_photo'){
                    $('.default.one-label').hide();
                    $('.default-field').hide();
                    $('.noo-labels').hide();
                    $('.search-box-photo').hide();
                    $('#choose-file').attr('multiple',true);
                    if($('.upload-photos-box').hasClass('col-md-4')){
                        $('.upload-photos-box').removeClass('col-md-4');
                        $('.upload-photos-box').addClass('col-md-12');
                    }
                }
                if( $current_Checkbox =='item_photo'){
                    $('.default.one-label').show();
                    $('.default-field').show();
                    $('.noo-labels').show();
                    $('#choose-file').attr('multiple',true);
                    $('.search-box-photo').show();
                    if($('.upload-photos-box').hasClass('col-md-12')){
                        $('.upload-photos-box').removeClass('col-md-12');
                        $('.upload-photos-box').addClass('col-md-4');
                    }
                }
                // if( $current_Checkbox =='video'){
                //     $('.default.one-label').hide();
                //     $('.default-field').hide();
                //     $('.noo-labels').hide();
                //     $('#choose-file').attr('multiple',true);
                //
                // }
                const fi = document.getElementById('choose-file');
                // Check if any file is selected.
                if (fi.files.length > 0) {
                    deleteAllPhotos(item_id);
                }
            });
        });




        var main_count = 0;
        var receipt_count = 0;
        $(".rotate_group").rotate({
            bind: {
                click: function () {
                    var id = $(this).attr('data-id');
                    var rotate_img = $(this).parents('.photo-id-'+id).find('.photo-img');

                    var value = parseInt($(this).attr('data-value'));
                    value += 90;
                    rotate_img.rotate({
                        angle: value,
                        animateTo: value
                    });
                    saveInDb(value, id);
                    if (value >= 360) {
                        value = 0;
                    }
                    $(this).attr('data-value',value);
                    //update in DB

                }
            }
        });

        function saveInDb(ratio, id) {
            if (ratio) {
                $.ajax({
                    url: `${baseUrl}policyholder/rotate/photo`,
                    type: 'POST',
                    dataType: 'json',
                    data: {'id': id, 'ratio': ratio},
                    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/addItem/add_item.blade.php:527
Stack trace:
#0 {main}
  thrown in <b>/home/contentsbuddylit/public_html/developers.contentsbuddylite.com/resources/views/addItem/add_item.blade.php</b> on line <b>527</b><br />