@extends('admin.layouts.master')
@section('content')
    <div class="page-title">
        <div class="left-column">
            <h4>{{'Edit Item'}}</h4>
        </div>
    </div>
    <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}}">

                @if($item->photo_type != 'single_photo')
                    <div class="default-field">
                        <div class="form-row">
                            <div class="form-full-row">
                                <label>Item Title</label>
                                <input type="text" name="item_title" id="item_title"  onkeyup="duplicateItemTitletoName(this.value)" class="general-field" placeholder="Type Something " value="{{$item->item_title}}"/>
                            </div>
                        </div>
                    </div>
                @endif

                <div class="noo-labels">
                    <div class="form-row">
                        <div class="col-60">
                            <label>Room Name</label>
                            <input type="text" name="room_name" class="general-field" value="{{$item->room->title}}" placeholder="Type Something " readonly/>
                        </div>
                        <div class="col-60">
                            <label>Item Name</label>
                            <input type="text" name="item_name" id="item_name"  class="general-field" placeholder="Type Something " value="{{$item->item_name}}"/>
                        </div>
                    </div>
                </div>
                <div class="form-row" id="upload_div" @if(count($item->photos) > 0)   style="display: none;" @endif>
                    <div class="form-full-row">
                        <label>Photos</label>

{{--                        <div class="drag_drop_file" id="dropContainer">--}}
{{--                            <img src="{{asset('images/drag_drop.png')}}"/>--}}
{{--                            <div class="choose-file">--}}
{{--                                <input id="choose-file" name="images[]" accept="image/*" type="file"   style="display:none;"/>--}}
{{--                                <label for="choose-file">Choose Files</label>--}}
{{--                            </div>--}}
{{--                        </div>--}}

                        <div class="drag_drop_file" id="dropContainer"   style="text-align: center">
                            <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: 30%;">
                                <input id="choose-file" name="images[]" accept="image/*" type="file"    style="display:none;">
                                <label for="choose-file">Choose Files</label>
                            </div>
                        </div>

                    </div>
                </div>

                <div class="form-row">
                    <div class="photo-list">
                        <div class="photo-repeaters">
                            @foreach($item->photos as $photo)
                                <div class="photo-repeater photo-id-{{$photo->id}}">
                                    <div class="photo-column">
                                        <div class="photo-img"   style="background-image:url({{asset($photo->image_path)}})"></div>
                                        <div class="photo-content">
{{--                                            <h3   style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;max-width: 260px;">{{$photo->name}}</h3>--}}
                                            <p>{{$photo->size}} Kb</p>
                                        </div>
                                    </div>
                                    <div class="photo-column1 ">
                                        <div class="newupload{{$photo->id}}">
                                            <a href="javascript:void(0)" onclick="deletePhoto({{$photo->id}}, {{$photo->id}})"><img src="{{asset('images/delete.png')}}"></a>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
                <div class="default one-label">
                    <div class="form-row">
                        <div class="col-60">
                            <label>Enter Barcode Number *</label>
                            <input type="text" name="brand" class="general-field" placeholder="Type Something " value="{{$item->brand}}"/>
                        </div>
                        <div class="col-60">
                            <label>Model *</label>
                            <input type="text" name="model" class="general-field" placeholder="Type Something " value="{{$item->model}}"/>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="col-60">
                            <label>Serial Number *</label>
                            <input type="text" name="serial_number" class="general-field" placeholder="Type Something " value="{{$item->serial_number}}"/>
                        </div>
                        <div class="col-60">
                            <label>Purchased From*</label>
                            <input type="text" name="purchased_from" class="general-field" placeholder="Type Something " value="{{$item->purchased_from}}"/>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="col-60">
                            <label>Quantity *</label>
                            <input type="number" name="quantity_lost" class="general-field" placeholder="Type Something " value="{{$item->quantity_lost}}"/>
                        </div>
                        <div class="col-60">
                            <label>Cost to replace <b>(EACH)</b> Pre-Tax</label>
                            <input type="number" name="cost_replace" class="general-field" placeholder="Type Something " value="{{$item->cost_replace}}"/>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="col-60">
                            <label>Age (years) *</label>
                            <input type="number" name="age_year" class="general-field" placeholder="Type Something " value="{{$item->age_year}}"/>
                        </div>
                        <div class="col-60">
                            <label>Age (months) *</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>
                <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>
@endsection

@section('js_file')
    <script nonce="{{config('app.nonce')}}">
        let count_img = {{count($item->photos)}};
        $('#update-item-form').on('submit',(function(e) {
            e.preventDefault();
            if(count_img > 0){
                var formData = new FormData(this);
                formData.append('images',$('input[type=file]')[0].files);
                $('#spinner').modal('show');
                $.ajax({
                    type:'POST',
                    url: $(this).attr('action'),
                    data:formData,
                    cache:false,
                    contentType: false,
                    processData: false,
                    success: function(data) {
                        showSuccessToaster(`<p>${data.successMessage}</p>`);
                        setTimeout(function (){
                            window.location.href = (`${baseUrl}policyholder/room_detail/${data.successData.room_id}`);
                        }, 1000);

                    },
                    error: function (err) {
                        var err = err.responseJSON;
                        showErrorToaster(`<p>${err.errorMessage}</p>`);
                    }
                });
                $('#spinner').modal('hide');
            }
            else{
                showErrorToaster(`<p>Please Select Atleast two images</p>`);
            }


        }));

        function deletePhoto(id,index){
            $.ajax({
                type: "GET",
                url: `${baseUrl}policyholder/delete/item/photo/${id}`,
                success: function(data) {
                    showSuccessToaster(`<p>${data.successMessage}</p>`);
                    count_img--;
                    if(count_img == 0)
                    {
                        $('#upload_div').show();
                    }
                    setTimeout(function (){
                        $('.photo-id-'+index).remove();
                    }, 500);
                },
                error: function (err) {
                    var err = err.responseJSON;
                    showErrorToaster(`<p>${err.errorMessage}</p>`);
                }
            });


        }

        let main_count ={{$item->photos[0]->id}} + {{count($item->photos)}};
        function readURL(input) {

            if (input.files && input.files[0]) {
                var filesAmount = input.files.length;
                let count = main_count;
                for (i = 0; i < filesAmount; i++) {
                    var reader = new FileReader();
                    let name = input.files[i].name;
                    let size = Math.round(input.files[i].size/1024);
                    reader.onload = function (e) {
                        let html = `<div class="photo-repeater photo-id-${count}">
                                <div class="photo-column">
                                    <div class="photo-img"   style="background-image:url(${e.target.result})"></div>
                                    <div class="photo-content">
                                        <h3   style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;max-width: 260px;">${name}</h3>
                                        <p>${size} Kb</p>
                                    </div>
                                </div>
                                <div class="photo-column1 ">
                                    <div class="newupload${count}">
                                        <div class="progress-bar-new" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"   style="--value:0"></div>
                                    </div>
                                </div>
                            </div>`;
                        count++;
                        // $('#blah').attr('src', e.target.result);
                        $(".photo-list .photo-repeaters").append(html);

                    }
                    reader.readAsDataURL(input.files[i]);


                }
                main_count = main_count + filesAmount;
                index_count = main_count;
                for (j = 0; j < filesAmount; j++) {
                    index_count = index_count-1
                    submitItemForm(input.files[j], index_count);
                }
            }
        }




        $("#choose-file").on('change', function(){
            readURL(this);
            if($("#add-item-form input[type='radio']:checked").val() == 'single_photo'){
                $('#upload_div').hide();
            }
        });




        function submitItemForm(file, index){

            let fd = new FormData();
            let item_id = $('#item_id').val();
            let room_id = $('#room_id').val();
            fd.append( 'images', file);
            fd.append( 'item_id', item_id);
            fd.append( 'room_id', room_id);

            $.ajax({
                xhr: function() {
                    var xhr = new window.XMLHttpRequest();
                    xhr.upload.addEventListener("progress", function(evt) {
                        if (evt.lengthComputable) {
                            var percentComplete = ((evt.loaded / evt.total) * 100);
                            document.querySelectorAll('.newupload'+index+' .progress-bar-new')[0].style.setProperty("--value", percentComplete);
                        }
                    }, false);
                    return xhr;
                },
                type: "POST",
                url: `${baseUrl}policyholder/upload_item_photo`,
                data: fd,
                processData: false,
                contentType: false,
                success: function(data) {
                    showSuccessToaster(`<p>${data.successMessage}</p>`);
                    count_img++;
                    if(count_img == 1){
                        $('#upload_div').hide();
                    }
                    setTimeout(function (){
                        $('.newupload'+index+' .progress-bar-new').remove();
                        $('.newupload'+index).html(`<a href="javascript:void(0)" onclick="deletePhoto(${data.successData.id},${index})">${deleteImage}</a>`);
                    }, 1000);

                },
                error: function (err) {
                    var err = err.responseJSON;
                    showErrorToaster(`<p>${err.errorMessage}</p>`);
                    $('.newupload'+index+' .progress-bar-new').remove();
                    $('.photo-id-'+index).remove();

                }
            });
        }

        function duplicateItemTitletoName(val){
            $('#item_name').val(val);
        }

    </script>



@endsection