@extends('layouts.app')

@section('content')

<meta name="csrf-token" id="csrf-token" content="{{ csrf_token() }}">
<link rel="stylesheet" href="{{ asset('/css/jquery.dataTables.min.css') }}">
<link rel="stylesheet" href="{{ asset('/css/dropzone.min.css') }}">
<style type="text/css">
    .ui-autocomplete {z-index: 99999;}
    .categoryList{margin-top: 20px;}
    #example{margin-top: 10px;}
    #example td .checkbox{margin-right: 5px;}
    .buttonOuter{margin-top: 20px;}
</style>
<script src="{{ asset('/js/dropzone.min.js') }}"></script>

<div class="well">
    <div class="row">
        <div class="col-lg-12">
            <div class="pull-left">
                <h3>Manage Icons</h3>
            </div>
            <div class="pull-right">
                <button type="button" class="btn btn-primary btn-sm " data-toggle="modal" data-target="#import-image-file-modal"><b>Import File</b></button>
            </div>
        </div>
    </div>
</div>

<div class="clearfix addBorderClass categoryList">
    <div class="col-xs-12 col-sm-12 col-md-12">
        <table id="upload-icons" class="table table-bordered table-hover dataTable" width="100%" cellspacing="0">
            <tr>
                <th>S.No.</th>
                <th>Image</th>
                <th>Image Name</th>
            </tr>
            @if(isset($apkList) && !empty($apkList))
                                @foreach($apkList as $key => $file)
                    <tr>
                        <td>{{ $i }}</td>
                        <td><img src="http://pmedia.msgnaa.info:8082/images/apk/xxhdpi/{{ $key }}" class="image-responsive" width="100" alt="{{ $key }}"></td>
                        <td>{{ $key }}</td>
                    </tr> 
                                    @endforeach
            @endif
        </table>
    </div>
</div>

@include('elements.media')

<script src="{{ asset('/js/media.js') }}"></script>
<script type="text/javascript">
    $(document).ready(function () {
        Dropzone.options.albumSongsUpload = {
            maxFilexzaSAsize: 10000,
            acceptedFiles: ".zip",
        };
        
        $("#upload-icons img").each(function(){
            var imgcheck = 1;
            var img = new Image();
            img.src = $(this).attr('src');
            imgcheck = img.width;
            
            if(imgcheck == 0) {
                $(this).attr('src', '/images/processing.gif');
            }
        }); 
    });
</script>
@endsection