@extends('drivers_management.profile.includes.main')
@section('attachments')
active
@stop
@section('navigation')
    <ul class="breadcrumb">
        <li><a href="{{route('home')}}">Dashboard</a> <span class="divider">/</span></li>
        <li><a href="{{route('drivers_management.index')}}">Drivers Management</a> <span class="divider">/</span></li>
        <li class="active">Attachments</li>
    </ul>
@stop
@section('profile')
    <div id="glyphs" class="tab-pane active" style="height: 450px">
        <div class="container-fluid">
            <div class="mediamgr">
                <div class="mediamgr_left">
                    <!-- <div class="mediamgr_head"> -->



    
    <div class="row">
        <div class="col-md-12">
            <li class="right btn-group">
                <div class="btn-group">
                    <button class="btn" onclick='modelShow("file_upload_modal")'>
                        <i class="icon-picture"></i> &nbsp;UPLOAD NEW <span class="icon-upload"></span>
                    </button>
                </div>
            </li>
        </div>
    </div>
    
    <!-- 
    <div class="row">
        <div class="col-md-12">
            <li><a href="javascript:file_upload();" id=''>Upload</a></li>
            <li><a href="{{ route('repositories.preview', 'filename.pdf') }}" target="_blank">Preview</a></li>
            <li><a href="{{ route('repositories.download', 'filename.pdf') }}" target="_blank">Download</a></li>
        </div>
    </div>
    -->
    
    <div class="row">
        <div class="col-md-12">
            @forelse($repository_categories as $rc)
                <table class='table table-bordered'>
                    <tr><th colspan='5'>{{ $rc->name }}</th></tr>
                    <tr>
                        @forelse($rc->repositories as $r)
                            <td>
                                <a href="{{ route('repositories.preview', $rc->path . $r->filename) }}" target="_blank">
                                    <img src="{{ asset($r->repository_category->path . $r->filename) }}" class='img-responsive img-thumbnail' width="100em">
                                </a>
                            </td>
                        @empty
                            <td>No file found!</td>
                        @endforelse
                    </tr>
                    <tr><td colspan='5'>&nbsp;</td></tr>
                </table>
            @empty
                No data found!
            @endforelse
            
            <hr>
            {{ route('repositories.preview', 'filename.png') }}
            <img src="{{ route('repositories.preview', 'filename.png') }}" class='img-responsive img-thumbnail' />
            <div class='clearfix'></div>
        </div>
    </div>


    <div aria-hidden="false" class="fade hide modal animated" data-backdrop="static" id="file_upload_modal" data-backdrop="static">
        <form method="POST" action="{{ route('repositories.store') }}" accept-charset="UTF-8" class="stdform">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3 id="myModalLabel">Upload Attachments</h3>
            </div>
            <div class="modal-body body_of_modal">
                <div class="row-fluid" style="margin-top: 6px">
                    <div class="span12">
                        <input type="hidden" name="driver_id" value="{{ $driver->id }}" class="span12" >
                    </div>
                </div>

                <div class="row-fluid" style="margin-top: 6px">
                    <div class="span12">
                        <label class="span3">Name</label>
                        <div class="field span9">
                           <input type="text" name="name" value="tmp name" class="span12" >
                        </div>
                    </div>
                </div>

                <div class="row-fluid" style="margin-top: 4px">
                    <div class="span12">
                        <label class="span3">Category</label>
                        <div class="field span9">
                            <select name="repository_category_id" style="width: 100%" class="searchable_select"  >
                                <option value="">Select category</option>
                                @forelse($repository_categories as $rc)
                                    <option value="{{ $rc->id }}">{{ $rc->name }}</option>
                                @empty
                                    <option>No data found!</option>
                                @endforelse
                            </select>
                        </div>
                    </div>
                </div>

                <div class="row-fluid" style="margin-top: 6px">
                    <div class="span12">
                        <label class="span3">Document(s)</label>
                        <div class="field span9">
                           <input type="file" name="_photos[]" class="span12" multiple>
                        </div>
                    </div>
                </div>

                <div class="row-fluid" style="margin-top: 6px">
                    <div class="span12">
                        <label class="span3">Description</label>
                        <span class="field span9">
                           <textarea rows="3" rows="1" class="span12" name="description"></textarea>
                        </span>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-success">UPLOAD</button>
                <button type="reset" class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
            </div>
        </form>
    </div>


    <script type="text/javascript">
        var file_upload_modal = jQuery('#file_upload_modal');
        var form = file_upload_modal.find('form');

        form.on('submit', function(e) {
            e.preventDefault();

            var fd = new FormData(jQuery(this)[0]); // XXX: Neex AJAX2
            console.log(fd);
            // You could show a loading image for example...

            jQuery.ajax({
                url: "{{ route('repositories.store') }}",
                xhr: function() { // custom xhr (is the best)
                    var xhr = new XMLHttpRequest();

                    // Get the total size of files
                    var total = 0;
                    var photo_field = form.find('input:file');
                    
                    // jQuery.each(photo_field.files, function(i, file) {
                    //     total += file.size;
                    //     console.log('Files '+ i +' size: ' + total);
                    // });

                    // Called when upload progress changes. xhr2
                    // xhr.upload.addEventListener("progress", function(evt) {
                    //     show progress like example
                    //     var loaded = (evt.loaded / total).toFixed(2)*100; // percent
                        
                    //     jQuery('.progress-bar').fadeIn(0); 
                    //     jQuery('.progress-bar').css('width', loaded+'%').attr('aria-valuenow', loaded).text(loaded+'% Complete'); 
                    //     if(loaded == 100) {
                    //         //jQuery('.progress-bar').removeClass('active');
                    //         setTimeout(function() {
                    //             jQuery('.progress-bar').fadeOut(0).delay(1500).css('width', 0+'%').attr('aria-valuenow', 0).text(''); 
                    //         }, 1500);
                    //     }
                    // }, false);

                    return xhr;
                },
                type: 'post',
                processData: false,
                contentType: false,
                data: fd,
                success: function(data) {
                    console.log(data);

                    if(data.state == 'Done') {
                        console.log('Done');
                        jQuery.jGrowl(data.msg);

                        // var img_src = "{{ asset('/VenueManagement/images/:img_src') }}" . replace(':img_src', data.img_src);
                        // console.log(img_src);

                        // jQuery('#' + data.field_name).children('img').attr('src', "http://via.placeholder.com/400x400");
                        // setTimeout(function() {
                        //     jQuery('#' + data.field_name).children('img').attr('src', img_src);
                        // }, 2000);
                        
                    } else if(data.state == 'Fail') {
                        console.log('Fail');
                        jQuery.jGrowl(data.msg);
                    } else {
                        var tmp = 1;
                        jQuery.each(data, function(k, v) {
                            // jQuery.jGrowl(v);

                            if(tmp == 1) jQuery.jGrowl(v);
                            tmp++;
                        });
                    }
                },
                error: function(data) {
                    console.log('Error');
                    console.log(data);
                }
            });
        });
        
        // Ajax function to delete a record
        // function deleteRecordFn(id) {
        //     swal({
        //         title: "Are you sure?",
        //         text: "You will not be able to recover this imaginary file!",
        //         type: "warning",
        //         showCancelButton: true,
        //         confirmButtonColor: "#DD6B55",
        //         confirmButtonText: "Yes, delete it!",
        //         closeOnConfirm: false
        //     },
        //     function () {
        //         swal({title: "", text: "", timer: 0, showConfirmButton: false});
                
        //         var route = "{{ route('orders.destroy', ':id') }}". replace(':id', id);

        //         jQuery.ajax({
        //             url: route,
        //             type: 'DELETE',
        //             {{--data: {"id":stadiumId, "_token": "{{ csrf_token() }}" },--}}
        //             success: function (data) {
        //                 console.log(data.state + ' ' + data.msg);

        //                 if (data.state === 'Done') {
        //                     jQuery.jGrowl(data.msg);
        //                     mainDataTable.draw();
        //                 } else if (data.state === 'Fail') {
        //                     jQuery.jGrowl(data.msg);
        //                 } else {
        //                     jQuery.jGrowl('Something went wrong!');
        //                 }
        //             },
        //             error: function (data) {
        //                 console.log(data);
        //             }
        //         });
        //     });
        // }
        
    </script>

                    <!-- </div> -->
                </div>
            </div>
        </div>
    </div>
@stop