@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>


</style>
@section('content')
    <div class="right_col" role="main">



        <div class="">
            <div class="page-title">
                <div class="title_left">
                    <h3>POI 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">

                                {{-- Add poi images --}}
                                <!-- Trigger the modal with a button -->
                                <button type="button" class="btn btn-info btn-lg btn-sm addPoiButton">Add Poi Image</button>

                                <!-- Modal -->
                                <div id="addPoiImage" class="modal fade" role="dialog">
                                    <div class="modal-dialog">

                                        <!-- Modal content-->
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="exampleModalLabel">Add New Image</h5>

                                            </div>
                                            <form id="add_poi_image" name="add_poi_image" class="form-horizontal"
                                                enctype="multipart/form-data">
                                                <div class="modal-body p-4 bg-light">
                                                    <div class="row p-4" style="padding: 1em">
                                                        <div class="col-lg " style="padding-bottom: 1em">
                                                            <label for="poi_text">Image Title</label>
                                                            <input type="text" name="poi_text" class="form-control poi_text"
                                                                placeholder="Image Title" required>
                                                        </div>
                                                        <div class="col-lg">
                                                            <label for="poi_image">Image file</label>


                                                            <div class="uploadProfileImage"
                                                                onClick="javascript:document.getElementById('poi_image').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="image_preview_default img img-responsive " />
                                                            </div>
                                                            <input required type="file" name="poi_image"
                                                                class="poi_image" id="poi_image" value=""
                                                                onChange="uploadRatingGraphicImage(this);"
                                                                style="height: 100px; width: 100px; margin-top: -98px; opacity: 0; cursor: pointer;">
                                                        </div>

                                                    </div>
                                                </div>

                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-secondary"
                                                        data-dismiss="modal">Close</button>
                                                    <button type="submit" id="add_employee_btn" class="btn btn-primary">Add
                                                        Images</button>
                                                </div>
                                            </form>
                                        </div>
                                    </div>

                                </div>

                                {{-- Edit Poi Image --}}
                                <div id="editPoiImage" class="modal fade" role="dialog">
                                    <div class="modal-dialog">

                                        <!-- Modal content-->
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="exampleModalLabel">Add New Image</h5>
                                            </div>
                                            <form id="update_poi_image" name="update_poi_image" class="form-horizontal"
                                                enctype="multipart/form-data">
                                                <div class="modal-body p-4 bg-light">
                                                    <div class="row p-4" style="padding: 1em">
                                                        <div class="col-lg " style="padding-bottom: 1em">
                                                            <label for="poi_text">Image Title</label>
                                                            <input type="hidden" name="id" class="id" value="">
                                                            <div> <input type="text" name="poi_text"
                                                                    class="form-control poi_text" placeholder="Image Title"
                                                                    required></div>

                                                        </div>
                                                        <div class="col-lg">
                                                            <label for="poi_image">Image file</label>
                                                            <div class="uploadProfileImage poi_image_viewer"
                                                                onClick="javascript:document.getElementById('poi_image').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="image_preview_default img img-responsive " />
                                                            </div>
                                                            <input type="file" name="poi_image" class="poi_image"
                                                                id="poi_image" onChange="uploadRatingGraphicImage(this);"
                                                                style="height: 100px; width: 100px; margin-top: -98px; opacity: 0; cursor: pointer;">
                                                        </div>

                                                    </div>
                                                </div>

                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-secondary"
                                                        data-dismiss="modal">Close</button>
                                                    <button type="submit" id="add_employee_btn"
                                                        class="btn btn-primary">Update
                                                        POI Setting</button>
                                                </div>
                                            </form>
                                        </div>
                                    </div>

                                </div>

                                <div class="show-images-container">
                                    <div class="container">
                                        <div class="row inner_content_show_images">

                                            @foreach ($data as $item)
                                                <div class="col-md-2 edit-wrapper"
                                                    style="margin-top:1em; text-align:center">
                                                    <div class="d-flex-column"
                                                        style="display: flex;flex-direction: column">
                                                        <label style="margin-bottom: 1em">{{ $item['poi_text'] }}</label>
                                                        <img src="{{ $item['poi_image'] }}" alt="" srcset=""
                                                            style="object-fit: contain;margin:auto" height="100px"
                                                            width="100px">
                                                    </div>
                                                    <div class="actions" style="margin-top: 1em">
                                                        <a href="#" id="{{ $item['id'] }}"
                                                            class="text-success editIcon"><i
                                                                class="fa fa-edit btn-success btn-sm"></i></a>

                                                        <a href="#" id="{{ $item['id'] }}"
                                                            class="text-danger  deleteIcon"><i
                                                                class="fa fa-trash-o btn btn-danger btn-sm"></i></a>

                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script type="text/javascript" language="javascript">
    //upload image 
    // 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')

        }
    }


    $(document).ready(function($) {

        let DEFAULT_IMAGE = 'https://rt66ug.com/admin/public/images/logo/plus.png'

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

        $('body').on('click', '.addPoiButton', function(e) {
            e.preventDefault();
            $('#addPoiImage').modal('show')
        })


        $('body').on('click', '.editIcon', function(e) {
            e.preventDefault();
            console.log('clicked on edit');
            var id = $(this).attr('id');
            console.log(id);
            $.ajax({
                url: '{{ route('edit-pois-setting') }}',
                method: 'post',
                data: {
                    id: id,
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    console.log(response);
                    $('#editPoiImage').find('.modal-title').text(
                        `Edit ${response.poi_text}`);
                    $('#editPoiImage').find('.poi_text').val(
                        response.poi_text);
                    $('#editPoiImage').find('.id').val(
                        response.id);

                    $('#editPoiImage').find('.poi_image_viewer img').attr('src', response
                        .poi_image)
                    $('#editPoiImage').modal('show');
                }
            });
        });



        // update_poi_image poi Image
        $('body').on('submit', '#update_poi_image', function(e) {
            e.preventDefault();
            const fd = new FormData(this);
            $.ajax({
                url: '{{ route('add-update-pois-setting') }}',
                method: 'post',
                data: fd,
                cache: false,
                contentType: false,
                processData: false,
                dataType: 'json',
                success: function(response) {
                    $("#editPoiImage").modal('hide');
                    if (response.status == 200) {
                        Swal.fire(
                            'Added!',
                            'Image Added Successfully!',
                            'success'
                        )

                    }
                    $('#editPoiImage').find('.image_preview_default').attr('src',
                        DEFAULT_IMAGE)

                    $("#update_poi_image").reset();
                    $("#editPoiImage").modal('hide');
                    fetchAllSettings();
                }
            });
        });
        //update form ends here

        // Add poi Image
        $('body').on('submit', '#add_poi_image', function(e) {
            e.preventDefault();

            const fd = new FormData(this);

            $.ajax({
                url: '{{ route('add-update-pois-setting') }}',
                method: 'post',
                data: fd,
                cache: false,
                contentType: false,
                processData: false,
                dataType: 'json',
                success: function(response) {

                    if (response.status == 200) {
                        Swal.fire(
                            'Added!',
                            'Image Added Successfully!',
                            'success'
                        )
                    }
                    $('#add_poi_image').find('.image_preview_default').attr('src',
                        DEFAULT_IMAGE)
                    $("#add_poi_image").trigger("reset");
                    $("#addPoiImage").modal('hide');
                    fetchAllSettings();
                }
            });
        });
        //Add form ends here


        // delete poi image 
        $('body').on('click', '.deleteIcon', function(e) {
            e.preventDefault();
            e.preventDefault();
            let id = $(this).attr('id');
            let csrf = '{{ csrf_token() }}';
            Swal.fire({
                title: 'Are you sure?',
                text: "You won't be able to revert this!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, delete it!'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: '{{ route('delete-pois-setting') }}',
                        method: 'delete',
                        data: {
                            id: id,
                            _token: csrf
                        },
                        success: function(response) {
                            console.log(response);
                            Swal.fire(
                                'Deleted!',
                                'Your file has been deleted.',
                                'success'
                            )
                            fetchAllSettings();
                        }
                    });
                }
            })
        })


        //fetchAllSettings poi
        const fetchAllSettings = function() {
            $.ajax({
                url: '{{ route('get-all-pois-settings') }}',
                method: 'get',
                success: function(response) {
                    const {
                        data
                    } = response;
                    var html = '';
                    data.forEach(item => {
          
                        html += ` <div class="col-md-2 edit-wrapper"
                                style="margin-top:1em; text-align:center">
                                <div class="d-flex-column"
                                    style="display: flex;flex-direction: column">
                                    <label style="margin-bottom: 1em">${item['poi_text']}</label>
                                    <img src="${item['poi_image'] }" alt="" srcset=""
                                        style="object-fit: contain;margin:auto" height="100px" width="100px">
                                </div>
                                <div class="actions">
                                    <a href="#" id="${item['id']}"
                                        class="text-success editIcon"><i
                                            class="fa fa-edit btn-success btn-sm"></i></a>

                                    <a href="#" id="${item['id']}"
                                        class="text-danger  deleteIcon"><i
                                            class="fa fa-trash-o btn btn-danger btn-sm"></i></a>
                                </div>
                            </div>`
                    });
                    $('.inner_content_show_images').html(html);
                }
            });
        }
    });
</script>