@extends('layouts.admin.frame')

@section('header')
    @component('layouts.admin.header')
    {{ $header->title }}
    @slot('subtitle')
        {{ $header->subtitle }}
    @endslot
    @endcomponent
@endsection

@section('content')
    @csrf
    <h5>Új képek felöltése</h5>
    <div id="uploader">
        <p>Your browser doesn't have Flash, Silverlight or HTML5 support.</p>
    </div>
    <div id="log" class="d-none"></div>
    
    <div class="box">
        <div class="box-header">
            <div class="row">
                <div class="col text-md-right">
                    <a href="{{ route(Request::segment(2).'.index') }}" class="btn btn-secondary"><span class="fa fa-arrow-circle-left"></span> Vissza</a>
                </div>
            </div>
            
        </div>
        
        <div class="box-body">
    
    
            @if ($prod->pics->isEmpty())
                <div class="alert alert-warning text-center">Még nincsenek feltöltött képek!</div>
            @else                
                <form id="picRenameForm" method="POST" action="{{ route(Request::segment(2).'.renameallpics', $prod->id) }}">
                    @csrf
                    @method('PUT')
                    <table class="table table-hover sortable-table">
                        <thead>
                            <tr>
                                <th width="100">Kép</th>
                                <th>Cím</th>
                                <th>Alt</th>
                                <th width="40" class="text-center">Törlés</th>
                            </tr>
                        </thead>
                        <tbody>
                
                        @foreach ($prod->pics as $item)
                                <tr id="recordsArray_{{ $item->id }}">
                                    <td class="handle"><img src="/{{ $item->thumbnailImageUrl() }}" width="100" /></td>
                                    <td>
                                        <div class="input-group mb-3">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text">hu</span>
                                            </div>
                                            <input type="text" class="form-control" placeholder="Fotó címe" name="title_hu[{{ $item->id }}]" value="{{ $item->title_hu }}">
                                        </div>
                                        <div class="input-group mb-3">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text">en</span>
                                            </div>
                                            <input type="text" class="form-control" placeholder="Fotó címe" name="title_en[{{ $item->id }}]" value="{{ $item->title_en }}">
                                        </div>
                                    </td>
                                    <td>
                                        <div class="input-group mb-3">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text">hu</span>
                                            </div>
                                            <input type="text" class="form-control" placeholder="Kép ALT tagje" name="alt_hu[{{ $item->id }}]" value="{{ $item->alt_hu }}">
                                        </div>
                                        <div class="input-group mb-3">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text">en</span>
                                            </div>
                                            <input type="text" class="form-control" placeholder="Kép ALT tagje" name="alt_en[{{ $item->id }}]" value="{{ $item->alt_en }}">
                                        </div>
                                    </td>
                                    <td class="text-center">
                                        <div class="custom-checkbox custom-control"><input type="checkbox" id="delCb-{{ $item->id }}" name="deleteMe[{{ $item->id }}]" class="custom-control-input"><label class="custom-control-label" for="delCb-{{ $item->id }}"></label></div>
                                    </td>
                                </tr>
                        @endforeach
                
                        </tbody>
                    </table>  
                    <div class="text-center">
                        <button type="submit" class="btn btn-primary">Képfeliratok mentése</button>
                        <a href="{{ route(Request::segment(2).'.index') }}" class="btn btn-secondary"> Mégsem</a>
                        <button type="submit" class="btn btn-danger swal-confirm-delete">Kijelölt képek törlése</button>
                        <input type="hidden" name="deleteSubmit" value="" />
                        
                    </div>
                </form>
            @endif

        </div>
    </div>

     
        

    
    

@endsection

@section('scripts')
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="{{ asset('adm/plugins/js-toast-master/toast.js') }}"></script>
<script type="text/javascript">
	$(document).ready(function(){ 						   
		$(function() {
			$(".sortable-table tbody").sortable({handle: '.handle', opacity: 0.6, cursor: 'move', update: function() {
                var orderArray = $(this).sortable("serialize");
                console.log(orderArray);			
				var item_order = $(this).sortable("serialize") + '&action=set_service_order';				
                var ajax_url = '/api/prodpics/setorder';
                $.ajax({
                    headers: {
                        'Authorization': 'Bearer {{ Auth::user()->api_token }}',
                    },
                    type: 'PUT',
                    data: item_order,
                    //dataType: "json",
                    url: ajax_url,
                    success: function(res){
                        console.log(res);
                        if(res == 1){
                            iqwerty.toast.Toast("Sikeres sorrend beállítás!", {settings: {duration: 3000 }});
                        }                                            
                    }
                });
			}								  
			});
		});
	});	
</script>

<script>
        $('.swal-confirm-delete').on('click',function(e){
            var form = $(this).parents('form');
            e.preventDefault();
            Swal.fire({
                title: 'Biztosan törölni szeretnéd a kijelölt képeket?',
                icon: 'question',        
                showCloseButton: false,
                showCancelButton: true,
                focusConfirm: false,
                confirmButtonText:
                'Igen',
                confirmButtonAriaLabel: 'Thumbs up, great!',
                cancelButtonText:
                'Mégsem',
                cancelButtonAriaLabel: 'Thumbs down'
            }).then((result) => {
                if (result.value) {
                    $("input[name=deleteSubmit]").val('yes');
                    form.submit();
                }                
            });
        });        
</script>


<!-- plupload -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="{{ asset('/adm/plugins/plupload/plupload.full.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('/adm/plugins/plupload/jquery.ui.plupload/jquery.ui.plupload.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('/adm/plugins/plupload/i18n/hu.js') }}"></script>
<script>        

        $(function() {
            $("#uploader").plupload({
                // General settings
                runtimes : 'html5,flash,silverlight,html4',
                url : "{{ route(Request::segment(2).'.storepics', $prod->id) }}",
        
                // Maximum file size
                max_file_size : '8mb',        
                chunk_size: '1mb',
        
                // Resize images on clientside if we can
                resize : {
                    width : 1600,
                    height : 1200,
                    quality : 100,
                    crop: false // crop to exact dimensions
                },
        
                // Specify what files to browse for
                filters : [
                    {title : "Image files", extensions : "jpg,gif,png"},
                    //{title : "Zip files", extensions : "zip,avi"}
                ],
        
                // Rename files by clicking on their titles
                rename: true,
                
                // Sort files
                sortable: true,
        
                // Enable ability to drag'n'drop files onto the widget (currently only HTML5 supports that)
                dragdrop: true,
        
                // Views to activate
                views: {
                    list: true,
                    thumbs: true, // Show thumbs
                    active: 'thumbs'
                },
        
                // Flash settings
                flash_swf_url : '/plupload/js/Moxie.swf',
            
                // Silverlight settings
                silverlight_xap_url : '/plupload/js/Moxie.xap',
                headers: {
                    "x-csrf-token" : $("[name=_token]").val()
                },

                // PreInit events, bound before any internal events
                preinit : {
                    Init: function(up, info) {
                        log('[Init]', 'Info:', info, 'Features:', up.features);
                    },
        
                    UploadFile: function(up, file) {
                        log('[UploadFile]', file);
        
                        // You can override settings before the file is uploaded
                        // up.setOption('url', 'upload.php?id=' + file.id);
                        // up.setOption('multipart_params', {param1 : 'value1', param2 : 'value2'});
                    }
                },
        
                // Post init events, bound after the internal events
                init : {                    
        
                    Browse: function(up) {
                        // Called when file picker is clicked
                        log('[Browse]');
                    },
        
                    Refresh: function(up) {
                        // Called when the position or dimensions of the picker change
                        log('[Refresh]');
                    },
        
                    StateChanged: function(up) {
                        // Called when the state of the queue is changed
                        log('[StateChanged]', up.state == plupload.STARTED ? "STARTED" : "STOPPED");
                    },
        
                    QueueChanged: function(up) {
                        // Called when queue is changed by adding or removing files
                        log('[QueueChanged]');
                    },
        
                    OptionChanged: function(up, name, value, oldValue) {
                        // Called when one of the configuration options is changed
                        log('[OptionChanged]', 'Option Name: ', name, 'Value: ', value, 'Old Value: ', oldValue);
                    },
        
                    BeforeUpload: function(up, file) {
                        // Called right before the upload for a given file starts, can be used to cancel it if required
                        log('[BeforeUpload]', 'File: ', file);
                    },
        
                    UploadProgress: function(up, file) {
                        // Called while file is being uploaded
                        log('[UploadProgress]', 'File:', file, "Total:", up.total);
                    },
        
                    FileFiltered: function(up, file) {
                        // Called when file successfully files all the filters
                        log('[FileFiltered]', 'File:', file);
                    },
        
                    FilesAdded: function(up, files) {
                        // Called when files are added to queue
                        log('[FilesAdded]');
        
                        plupload.each(files, function(file) {
                            log('  File:', file);
                        });
                    },
        
                    FilesRemoved: function(up, files) {
                        // Called when files are removed from queue
                        log('[FilesRemoved]');
        
                        plupload.each(files, function(file) {
                            log('  File:', file);
                        });
                    },
        
                    FileUploaded: function(up, file, info) {
                        // Called when file has finished uploading
                        log('[FileUploaded] File:', file, "Info:", info);
                    },
        
                    ChunkUploaded: function(up, file, info) {
                        // Called when file chunk has finished uploading
                        log('[ChunkUploaded] File:', file, "Info:", info);
                    },
        
                    UploadComplete: function(up, files) {
                        // Called when all files are either uploaded or failed
                        log('[UploadComplete]');
                        location.reload();
                    },
        
                    Destroy: function(up) {
                        // Called when uploader is destroyed
                        log('[Destroy] ');
                    },
        
                    Error: function(up, args) {
                        // Called when error occurs
                        log('[Error] ', args);
                    }
                }
                
            });
        });

        function log() {
            var str = "";
    
            plupload.each(arguments, function(arg) {
                var row = "";
    
                if (typeof(arg) != "string") {
                    plupload.each(arg, function(value, key) {
                        // Convert items in File objects to human readable form
                        if (arg instanceof plupload.File) {
                            // Convert status to human readable
                            switch (value) {
                                case plupload.QUEUED:
                                    value = 'QUEUED';
                                    break;
    
                                case plupload.UPLOADING:
                                    value = 'UPLOADING';
                                    break;
    
                                case plupload.FAILED:
                                    value = 'FAILED';
                                    break;
    
                                case plupload.DONE:
                                    value = 'DONE';
                                    break;
                            }
                        }
    
                        if (typeof(value) != "function") {
                            row += (row ? ', ' : '') + key + '=' + value;
                        }
                    });
    
                    str += row + " ";
                } else {
                    str += arg + " ";
                }
            });
    
            var log = $('#log');
            log.append(str + "\n");
            log.scrollTop(log[0].scrollHeight);
        }
        
</script>            
@endsection

@section('css')
    <!-- plupload -->
    <link type="text/css" rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/smoothness/jquery-ui.min.css" media="screen" />
    <link type="text/css" rel="stylesheet" href="https://www.plupload.com/plupload/js/jquery.ui.plupload/css/jquery.ui.plupload.css" media="screen" />   
@endsection