@extends('layouts.master')
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/js/bootstrap.min.js"
integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
    .edit_section_rating {
        margin-top: 50px;
        margin-left: -10px;
    }

</style>
@section('content')
    <div class="right_col" role="main">
        <div class="">
            <div class="page-title">
                <div class="title_left">
                    <h3>Graphics Settings</h3>
                </div>
            </div>
            <div class="clearfix"></div>
            <div class="row">
                <div class="col-md-12 col-sm-12 col-xs-12">
                    <div class="x_panel">
                        <div class="x_title">
                            <div class="clearfix"></div>

                            <div class="row">
                                <label>Click on + icons to update images</label>
                                {{ Form::open(['route' => 'add-update-rating-graphic', 'files' => true]) }}
                                @php
                                    $new_rating = 0.0;
                                    $current_rating = floatval(count($data) == 0 ? 0.0 : str_replace('_', '.', $data[0]['rating_text']));
                                    $floatedLabel = number_format($current_rating, 1);
                                    $normalNumber = str_replace('.', '_', $floatedLabel);
                                    
                                    $new_normalNumber = str_replace('.', '_', $new_rating);
                                    if (count($data) == 0) {
                                        $new_rating = 0.0;
                                    } else {
                                        $new_rating = $current_rating + 0.5;
                                    }
                                    
                                @endphp
                                @if ($new_rating <= 5)
                                   <div class="col-md-2">
                                    <div class="row flex-direction-column">
                                        <div class="col-md-12">
                                            <div class="form-group">

                                                <label>Rating {{ $new_rating }}</label>
                                                <div class="uploadProfileImage"
                                                    onClick="javascript:document.getElementById('rating_image_{{ $new_normalNumber }}').click();"
                                                    align="left" title=" Browse Image">
                                                    <img style="border: 1px solid #E6E9ED; margin-left: -1px;max-height: 200px; max-width: 100px;object-fit: contain;"
                                                        src={{ url('images/logo/plus.png') }} alt=""
                                                        class="parkingclass img img-responsive " />
                                                </div>
                                                <input type="hidden" name="rating_text" value="{{$new_rating}}">
                                                <input required type="file" name="{{ $new_rating }}"
                                                    class="rating_image_{{ $new_normalNumber }}"
                                                    id="rating_image_{{ $new_normalNumber }}"
                                                    onChange="uploadRatingGraphicImage(this);"
                                                    style="height: 100px; width: 100px; margin-top: -98px; opacity: 0; cursor: pointer;">
                                            </div>
                                        </div>
                                        <div class="col-md-12" align="left">

                                            {{ Form::submit('Add New Image', ['class' => 'btn btn-primary', 'id' => 'submitButtonId', 'style' => 'width:200px; margin-top:10px;']) }}

                                        </div>
                                    </div>
                                </div>   
                                @endif
                              
                                <div class="edit_section_rating col-md-12">
                                    {{ Form::close() }}
                                    @php
                                       $sorted_data = $data;
                                       asort($sorted_data);
                                    @endphp
                                    @foreach ( $sorted_data as $graphic_item)
                                        @php
                                            $current_rating = str_replace('_', '.', $graphic_item['rating_image']);
                                            
                                            $normalNumber = str_replace('_', '.', $graphic_item['rating_text']);
                                        @endphp
                                      

                                        <div class="col-md-2 ">
                                            <div class="form-group">
                                                {{ Form::open(['route' => 'add-update-rating-graphic', 'files' => true]) }}
                                                <input type="hidden" name="id" value="{{ $graphic_item['id'] }}">
                                                <input type="hidden" name="rating_text" value="{{$normalNumber}}">
                                                <label>Rating
                                                    {{ str_replace('_', '.', $graphic_item['rating_text']) }}</label>
                                                <div data-graphic-id={{ $graphic_item['id'] }} class="uploadUpdatedImage"
                                                    onClick="javascript:document.getElementById('rating_image_{{ $normalNumber }}').click();"
                                                    align="left" title=" Browse Image">
                                                    <img src="{{ $graphic_item['rating_image'] ? $graphic_item['rating_image'] : url('images/logo/plus.png') }}"
                                                        alt="" class="parkingclass img-responsive "
                                                        style="border: 1px solid #E6E9ED; margin-left: -1px;    width: 100px;
                                                                                                                    object-fit: contain;
                                                                                                                    height: 100px;" />
                                                </div>
                                                <input type="file" name="rating_image_{{ $normalNumber }}"
                                                    class="rating_image_{{ $normalNumber }}"
                                                    id="rating_image_{{ $normalNumber }}"
                                                    data-id={{ $current_rating }}
                                                    onChange="uploadateRatingGraphicImage(this);"
                                                    style="height: 100px; width: 100px; margin-top: -98px; opacity: 0; cursor: pointer;">

                                                <button type="submit"
                                                    class="btn update_button_rating btn-primary">Update</button>

                                                    {{ Form::close() }}
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    </div>
@endsection

<script type="text/javascript" language="javascript">
    //
    function myFunction() {
        console.log($('input').val());
    }




    $(document).on('click', '.update_button_rating', function() {
        console.log('clicked on the button')
        // $('.update_button_rating').hide()
        updateImageOnButtonClick();

    })




    function uploadateRatingGraphicImage(fileInput3) {



        if (fileInput3.files && fileInput3.files[0]) {
            var reader = new FileReader();
            reader.onload = function(e) {
                $(fileInput3).siblings().show();

                console.log($(fileInput3).siblings().children('img'));
                $(fileInput3).siblings('.uploadUpdatedImage').children('img').attr('src', e.target.result);
            };
            reader.readAsDataURL(fileInput3.files[0]);

        }
    }


    // Upload image on upload
    function uploadRatingGraphicImage(fileInput3) {
        if (fileInput3.files && fileInput3.files[0]) {
            var reader = new FileReader();
            reader.onload = function(e) {
                console.log($(fileInput3))
                console.log($(fileInput3).siblings());
                console.log($(fileInput3).siblings().children('img'));
                $(fileInput3).siblings('.uploadProfileImage').children('img').attr('src', e.target.result);
            };
            reader.readAsDataURL(fileInput3.files[0]);
            $(fileInput3).addClass('needsToUploadthisFile')
            console.log(reader);
        }



    }



    function updateImageOnButtonClick() {
        var fileInput3 = $('.needsToUploadthisFile');
        console.log(fileInput3)
        var form = new FormData();

        form.append("id", $(fileInput3).attr('id'));
        form.append("rating_text", $(fileInput3).attr('data-id'));
        form.append("rating_image", fileInput3.files[0], fileInput3.files[0].name);

        var settings = {
            "url": "https://rt66ug.com/admin/public/add-update-rating-graphic?id=29&rating_text=1.2",
            "method": "GET",
            "timeout": 0,
            "headers": {
                "Cookie": "laravel_session=eyJpdiI6InhmcytDY0p5SkdlaWptZ3Y5ZDRoZFE9PSIsInZhbHVlIjoiYnplcFBYMEJhU255aXhxaHh0NnNLTDd0RE1EeWc2Z0VKTEllNWg4VE4yMmZselVCaEJodG4wNTNDRjZXWGtIWmd1ZTdBQm9rSXBPeFZhNjlvWkdvMUE9PSIsIm1hYyI6IjhkZDA2YmFjOWJhZjhhNWU0M2RjZTRhNmZlNGQxOTgyMzNhMmQ4ZjRiYTI3ZjM3YWFiNWMwZjYxM2NlMjNjYzMifQ%3D%3D"
            },
            "processData": false,
            "mimeType": "multipart/form-data",
            "contentType": false,
            "data": form
        };
        try {
            $.ajax(settings).done(function(response) {
                console.log(response);
            });
        } catch (error) {
            console.log(error);
        }
    }



    $(document).ready(function($) {
        $('.update_button_rating').hide();
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });




    });
</script>