[ Avaa Bypassed ]

@extends('admin.layout.app')
@section('title', 'Order Images')
@push('custom_css')
    <link rel="stylesheet" href="{{ asset('assets/js/loader/waitMe.css') }}">
    <style>
        .sortable-container {
            text-align: center;
        }
        
        .sortable-container img {
          margin-right: 10px; /* Adjust the spacing value as desired */
          margin-bottom: 10px; /* Adjust the spacing value as desired */
        }
    </style>
@endpush
@section('content')
    <div class="row">
        <div class="col-12">
            <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                <h4 class="mb-sm-0">Order Images</h4>
                <div class="page-title-right">
                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item"><a href="{{route('admin.dashboard')}}">Dashboard</a></li>
                        <li class="breadcrumb-item active">Order Images</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-header align-items-center d-flex">
            <h4 class="card-title mb-0 flex-grow-1">Order Images</h4>
            <div class="flex-shrink-0">
                <a href="{{route('admin.images.add')}}" class="btn btn-primary">+ Add New</a>
            </div>
        </div><!-- end card header -->

        <div class="card-body">
            <div class="live-preview">
                <div id="image-container" class="sortable-container"></div>
                <div class="mt-3">
                    <button type="submit" class="btn btn-primary image_btn" id="submit">Submit</button>
                </div>
            </div>
        </div><!-- end card-body -->
    </div>
@endsection
@push('custom_scripts')
    <script src="{{ asset('assets/js/loader/waitMe.js') }}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.13.0/Sortable.min.js"></script>

    <script type="module">
        import {initializeApp} from 'https://www.gstatic.com/firebasejs/9.15.0/firebase-app.js'
        import {getDatabase, ref, onValue} from 'https://www.gstatic.com/firebasejs/9.15.0/firebase-database.js'

        let newOrder = []
        
        const firebaseConfig = {
            apiKey: "AIzaSyCWb6aMoFp29WaI2ITsXxXWHxDvmD_2ciM",
            authDomain: "radio-kaya.firebaseapp.com",
            databaseURL: "https://radio-kaya-default-rtdb.firebaseio.com",
            projectId: "radio-kaya",
            storageBucket: "radio-kaya.appspot.com",
            messagingSenderId: "921680294488",
            appId: "1:921680294488:web:17ae5a382598ef539f102d",
            measurementId: "G-JQ5TKD66V2"
        };

        showLoader() 
        
        const app = initializeApp(firebaseConfig);
        const db = getDatabase();
        const starCountRef = ref(db, 'app_images')
        var images = []
        
        onValue(starCountRef, (snapshot) => {
            showLoader()
            images = []
            newOrder = []
            let url = "{{route('image', ['app_images', ':img'])}}"
            if(snapshot.val() && Object.keys(snapshot.val()).length > 0)
                Object.keys(snapshot.val()).forEach(key => {
                    let newURL = url.replace(':img', snapshot.val()[key])
                    images.push(newURL)
                })
            
            loadImages()
            stopLoader()
        });
        
        function showLoader() {
            $('.card').waitMe({
                effect: 'bounce',
                text: 'Getting images. Please wait...',
                color: "#fff",
                bg: 'rgba(0,0,0,0.5)'
            });
        }

        function stopLoader() {
            $('.card').waitMe("hide");
        }
        
        function loadImages() {
            $('#image-container').html('')
            var resizedWidth = 200; // Desired width in pixels
            var resizedHeight = 150; // Desired height in pixels
            
            var imageContainer = document.getElementById('image-container');

            images.forEach(function(url) {
              var img = document.createElement('img');
              img.src = url;
              img.width = resizedWidth;
              img.height = resizedHeight;
              imageContainer.appendChild(img);
            });
            
            images.forEach(function(imageUrl) {
                var extractedUrl = imageUrl.substring(imageUrl.indexOf('app_images/') + 'app_images/'.length);
                newOrder.push(extractedUrl);
            });
           
            new Sortable(imageContainer, {
                animation: 150,
                onEnd: function(evt) {
                  var items = evt.target.getElementsByTagName('img');
                  var imageUrls = Array.from(items).map(function(item) {
                    return item.src;
                  });
                  newOrder = [];
                  imageUrls.forEach(function(imageUrl) {
                      var extractedUrl = imageUrl.substring(imageUrl.indexOf('app_images/') + 'app_images/'.length);
                      newOrder.push(extractedUrl);
                    });
                }
            });
            
            $('#submit').on('click', function (e) {
            e.preventDefault()

            $('body').waitMe({
                effect: 'bounce',
                text: 'Submitting. Please wait...',
                color: "#fff",
                bg: 'rgba(0,0,0,0.5)'
            });

            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                url: '{{route("admin.images.order")}}',
                dataType: 'json',
                type: 'POST',
                data: {images: newOrder},
                success: function (json) {
                    $('body').waitMe("hide");
                    if (json.status) {
                        newOrder = []
                        images.forEach(function(imageUrl) {
                          var extractedUrl = imageUrl.substring(imageUrl.indexOf('app_images/') + 'app_images/'.length);
                          newOrder.push(extractedUrl);
                        });
                        console.log(json.message)
                        toastr.success(json.message);
                        // location.href = window.location
                    } else {
                        Snackbar.show({
                            text: json.message,
                            pos: 'bottom-center',
                            backgroundColor: '#a3220f',
                            timeout: 3000
                        });

                    }
                },
                error: function (json) {
                    // console.log(json)
                    Snackbar.show({
                        text: 'Something went wrong. Please try again later!',
                        pos: 'bottom-center',
                        backgroundColor: '#a3220f'
                    });
                    $('body').waitMe("hide");
                }
            });
        })
        }


    </script>
@endpush