@extends('admin.layouts.master')
@section('content')
    <style >
        .main-header{
            position: relative;
        }
    </style>
        <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('admin.customer.update_item_admin')}}" 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="user_id" name="user_id" value="{{$item->user_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>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" class="general-field" placeholder="Type Something " value="{{$item->item_name}}"/>
                            </div>
                        </div>
                    </div>
                    <div class="form-row" id="upload_div">
                        <div class="form-full-row">
                            <label>Photos</label>

                            <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 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;" multiple/>--}}
{{--                                    <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}}"  id="photo-{{$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>Brand/Manufacture *</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>
                                <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
@include('modal.confirm_modal')
@include('modal.spinner')
@include('include.toaster.error')
@include('include.toaster.success')
@section('scripts')
    <script nonce="{{config('app.nonce')}}">
        let count_img = {{count($item->photos)}};
        $('#update-item-form').on('submit',(function(e) {
            e.preventDefault();
            if(count_img > 1){
                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}admin/customer/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}admin/customer/delete/item/photo/${id}`,
                success: function(data) {
                    showSuccessToaster(`<p>${data.successMessage}</p>`);
                    count_img--;
                    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();
            let user_id = $('#user_id').val();
            fd.append( 'images', file);
            fd.append( 'item_id', item_id);
            fd.append( 'room_id', room_id);
            fd.append( 'user_id', user_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}admin/customer/upload_item_photo`,
                data: fd,
                processData: false,
                contentType: false,
                success: function(data) {
                    showSuccessToaster(`<p>${data.successMessage}</p>`);
                    count_img++;
                    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();

                }
            });
        }

    </script>

@endsection