@extends('app')
@section('content')
<link href="{{ asset('assets/plugins/jquery-notifications/css/messenger.css')}}" rel="stylesheet" type="text/css" media="screen"/>
<link href="{{ asset('assets/plugins/jquery-notifications/css/messenger-theme-flat.css')}}" rel="stylesheet" type="text/css" media="screen"/>
<link rel="stylesheet" type="text/css" href="{{ asset("assets/plugins/blueimp/blueimp-gallery.min.css") }}">
<link rel="stylesheet" type="text/css" href="{{asset('assets/plugins/bootstrap-datepicker/css/bootstrap-datepicker.min.css')}}">
<link href="{{ asset('assets/plugins/boostrap-clockpicker/bootstrap-clockpicker.min.css')}}" rel="stylesheet" type="text/css" media="screen"/>
<style type="text/css">
    .clockpicker-popover{
        z-index: 2000;
    }
    .clockpicker-button {
        display: none;
    }
</style>
@if(Session::has('flash_message'))
<div class="alert {{ (Session::has('flash_message_status'))?'alert-error':'alert-success'}}">
    <button class="close" data-dismiss="alert"></button>
    {!! Session::get('flash_message') !!}
</div>
@endif

@if($action=='Edit')
    {!! Breadcrumbs::render('admin.photoalbums.edit',$photoalbum) !!}
@else
    {!! Breadcrumbs::render('admin.photoalbums.create') !!}
@endif

<div class="page-title"> <a href="{{ URL::previous() }}"><i class="icon-custom-left"></i></a>
    <h3>Photo Albums - <span class="semi-bold">{{ $action }}</span></h3>
</div>
<div class="row">
    <div class="col-md-12">
        <div class="grid simple">
            <div class="grid-title">
                <div class="tools">
                    <a class="collapse" href="javascript:;"></a>
                    <a class="reload" href="javascript:;"></a>
                </div>
                {{--<h4>{{ $action }} <span class="semi-bold">Photo Album</span></h4>--}}
                <h4><span class="semi-bold">Description</span></h4>
                <p>This is dummy text.This is dummy Text.This is dummy text.This is dummy text..This is dummy Text.This is dummy text.This is dummy text.</p>

            </div>



            <div class="grid-body">

                @if($errors->any())
                <div class="row">
                    <div class="alert alert-error col-md-6 col-sm-12 col-md-offset-3">
                        <button data-dismiss="alert" class="close"></button>
                        @foreach($errors->all() as $error)
                        <p>{{ $error }}</p>
                        @endforeach
                    </div>
                </div>
                @endif

                {!! Form::model($photoalbum, ['method' => $photoalbum ? 'PATCH' : 'POST','route' => $photoalbum ? ['admin.photoalbums.update', $photoalbum->id] : 'admin.photoalbums.store','id'=>'form_photoalbums']) !!}
                <div class="form-group row">
                    {{--<div class="col-md-10 col-md-offset-1">--}}
                    <div class="col-md-12">
                        <div class="pull-right">
                            @if(count($photoalbum->images)!= 0 )
                                @if($photoalbum->type=='photoalbum')
                                    <a href="javascript:void(0)" class="btn btn-primary form-submit" id="publish">Publish in Gallery</a>
                                    <a href="javascript:void(0)" class="btn btn-primary form-submit" id="drafts">Save to Drafts</a>
                                @else
                                    <a href="javascript:void(0)" class="btn btn-primary form-submit" id="publish">Save</a>
                                @endif
                            @else
                                @if($photoalbum->type=='photoalbum')
                                    <a href="javascript:void(0)" class="btn btn-primary form-submit" disabled>Publish in Gallery</a>
                                    <a href="javascript:void(0)" class="btn btn-primary form-submit" disabled>Save to Drafts</a>
                                @else
                                    <a href="javascript:void(0)" class="btn btn-primary form-submit" id="publish">Save</a>
                                @endif
                            @endif
                        </div>
                    </div>
                </div>
                <input type="hidden" name="action_type" value="publish" id="action_type_input">
                <div class="form-group row">
                    <div class="col-md-3 col-sm-12 text-right">
                        {!! Form::label('title', 'Title', ['class' => 'form-label']) !!}
                    </div>
                    <div class="input-with-icon  right col-md-6 col-sm-12">                                       

                        {!! Form::text('title', null, ['class' => 'form-control','id'=>'photoalbum_title','maxlength' => 60,'required'=>'required']) !!}
                    </div>
                </div>
             <div class="form-group row">
                    <div class="col-md-3 col-sm-12 text-right">
                        {!! Form::label('published_at', 'Published Date', ['class' => 'form-label']) !!}
                    </div>
                    <div class="input-with-icon  right col-md-3 col-sm-12">
                        @if($photoalbum->type=='photoalbum')                                     
                            {!! Form::text('published_at', $photoalbum->published_at ? strftime("%d/%m/%Y",strtotime(str_replace("/","-",$photoalbum->published_at)))  : strftime("%d/%m/%Y",strtotime(str_replace("/","-",$photoalbum->published_at))), ['class' => 'form-control','id'=>'published_at']) !!}
                        @else
                            {!! Form::text('published_at', $photoalbum->published_at ?  strftime("%d/%m/%Y",strtotime(str_replace("/","-",$photoalbum->published_at))) : strftime("%d/%m/%Y",strtotime(str_replace("/","-",$photoalbum->published_at))), ['class' => 'form-control','id'=>'','readonly']) !!}
                        @endif
                    </div>
                    <div class="col-md-1 col-sm-12 text-right">
                        {!! Form::label('published_at_time', 'Time', ['class' => 'form-label']) !!}
                    </div>
                    <div class="input-with-icon  right col-md-2 col-sm-12">
                        @if($photoalbum->type=='photoalbum')
                            {!! Form::text('published_at_time', $photoalbum->published_at ? strftime("%H:%M",strtotime(str_replace("/","-",$photoalbum->published_at)))  : strftime("%H:%M",strtotime(str_replace("/","-",$photoalbum->published_at))), ['class' => 'form-control','id'=>'publish_date_time_field']) !!}
                        @else
                            {!! Form::text('published_at_time', $photoalbum->published_at ?  strftime("%H:%M",strtotime(str_replace("/","-",$photoalbum->published_at))) : strftime("%H:%M",strtotime(str_replace("/","-",$photoalbum->published_at))), ['class' => 'form-control','readonly']) !!}
                        @endif
                    </div>
                </div>

                <!-- <div class="form-group row">
                    <div class="col-md-3 col-sm-12 text-right">
                        {!! Form::label('published', 'Published', ['class' => 'form-label']) !!}
                    </div>
                    <div class='inline col-md-6 col-sm-12'>    
                        <div class="radio">
                            <input type="radio" {{$photoalbum ?  ($photoalbum->published==1 ? 'checked' : ''):'checked' }} value="1" name="published" id="published_yes">
                            <label for="published_yes">Yes</label>
                            <input type="radio" value="0" {{$photoalbum ?  ($photoalbum->published==0 ? 'checked' : ''):'' }}  name="published" id="published_no">
                            <label for="published_no">No</label>
                        </div>
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-md-3 col-sm-12 text-right">
                        {!! Form::label('is_tawasul', 'Set as Tawasul', ['class' => 'form-label']) !!}
                    </div>
                    <div class='inline col-md-6 col-sm-12'>    
                        <div class="radio">
                            <input type="radio" {{$photoalbum ?  ($photoalbum->is_tawasul==1 ? 'checked' : ''):'checked' }} value="1" name="is_tawasul" id="is_tawasul_yes">
                            <label for="is_tawasul_yes">Yes</label>
                            <input type="radio" value="0" {{$photoalbum ?  ($photoalbum->is_tawasul==0 ? 'checked' : ''):'' }}  name="is_tawasul" id="is_tawasul_no">
                            <label for="is_tawasul_no">No</label>
                        </div>
                    </div>
                </div> -->

                {!! Form::close() !!}
                
                <div class="form-group row">
                    <div class="col-md-10 col-md-offset-1">
                        <div class="controls">
                            @if(Auth::user()->can('photoalbums-create'))
                            <a href="javascript:void(0)" data-target="#imageModal" data-toggle='modal' class="btn btn-success">Add Image</a>
                            @endif
                            <div class="pull-right markaction">
                                @if(Auth::user()->can('photoalbums-destroy'))
                                <a id="del" href="javascript:void(0)" class="btn btn-danger" data-url="{{ URL::to('admin/photoalbums/bulkimagedelete') }}">Delete</a>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-md-10 col-md-offset-1">
                        <table class="table sortable table-hover table-bordered" id="datatable-example" data-reorderUrl="{{ route('admin.photoalbums.reorder')}}">
                            <thead>
                                <tr>
                                    <th><input type="checkbox" class="group-checkable" data-set="#datatable-example .checkboxes" /></th>
                                    <th>#</th>
                                    <th>Image</th>
                                    <th>Caption</th>
                                    <th>Size</th>
                                    <th>Date</th>
                                    <th>User</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
                <div class="form-actions">  
                    <div class="pull-right">
                        @if(count($photoalbum->images)!= 0 )
                            @if($photoalbum->type=='photoalbum')
                                <a href="javascript:void(0)" class="btn btn-primary form-submit" id="publish">Publish in Gallery</a>
                                <a href="javascript:void(0)" class="btn btn-primary form-submit" id="drafts">Save to Drafts</a>
                            @else
                                <a href="javascript:void(0)" class="btn btn-primary form-submit" id="publish">Save</a>
                            @endif
                        @else
                            @if($photoalbum->type=='photoalbum')
                                <a href="javascript:void(0)" class="btn btn-primary form-submit" disabled>Publish in Gallery</a>
                                <a href="javascript:void(0)" class="btn btn-primary form-submit" disabled>Save to Drafts</a>
                            @else
                                <a href="javascript:void(0)" class="btn btn-primary form-submit" id="publish">Save</a>
                            @endif
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{!! Form::open([
'method' => 'POST',
'class' => 'inline',
'id'=> 'bulkaction'
]) !!}
<input type="hidden" value="" name="ids" id="ids" />
{!! Form::close() !!} 


<div class="modal fade" id="imageModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            {!! Form::open(['method' => 'POST','route' => 'admin.photoalbums.uploadimage','id'=>'form_albumimage', 'files'=>true]) !!}
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel">(Select Image(s</h4>
                </div>
                <div class="modal-body">
                    <input type="hidden" name="photo_album_id" value="{{$photoalbum->id}}">
                    <input type="hidden" name="album_title" id="album_title" value="">
                    <div class="form-group row">
                        
                        <div class="input-with-icon  right col-md-8 col-sm-12">    
                            <label class="btn btn-default btn-file">
                                Browse <input type="file" name="images[]" class="" multiple="multiple" style="display: none;">
                            </label>
                            <br>
                            <span class="help">Don’t upload the image greater than 5 mb</span>
                        </div>
                        <div class="col-md-4 col-sm-12 text-right">
                            <label class="control-label">(Image(s</label>
                        </div>
                    </div>
                    <div class="form-group row">
                        
                        <div class="input-with-icon  right col-md-8 col-sm-12">                                       
                            <input type="text" name="caption" class="form-control">
                            <span class="help">In case of bulk it will caption to all images. Leave it empty if you want caption explicitly for each image.</span>
                        </div>
                        <div class="col-md-4 col-sm-12 text-right">
                            <label class="control-label">Caption</label>
                        </div>
                    </div>
                    <div class="form-group row">
                        
                        <div class="input-with-icon  right col-md-8 col-sm-12">                                       
                            {!! Form::select('compress',['0'=>'0%','25'=>'25%','50'=>'50%'],0, ['class' => 'form-control selectbox','id'=>'compress_input','style'=>'width: 100%']) !!}
                        </div>
                        <div class="col-md-4 col-sm-12 text-right">
                            {!! Form::label('compress', '(Compress Image(s', ['class' => 'form-label']) !!}
                        </div>
                    </div>
                </div>
                <div class="modal-footer text-left">
                    <button type="button" class="btn btn-default" onclick='closeModal("#imageModal")' aria-label="Close"><span aria-hidden="true">Cancel</span></button>
                    <button type="submit" class="btn btn-primary">Upload</button>
                </div>
            {!! Form::close() !!}
        </div>
    </div>
</div>

<div class="modal fade" id="editCaptionModal" tabindex="-1" role="dialog" aria-labelledby="editCaptionModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            {!! Form::open(['method' => 'POST','route' => 'admin.photoalbums.editcaption','id'=>'form_editcaption']) !!}
                <div class="modal-header">
                    <h4 class="modal-title" id="editCaptionModalLabel">Edit Caption</h4>

                </div>
                <div class="modal-body">
                    <input type="hidden" name="albumimage_id" id="edit_image_id" value="">
                    <div class="form-group row">
                        <div class="col-md-3 col-sm-12 text-right">
                            <label class="control-label">Caption :</label>
                        </div>
                        <div class="input-with-icon  right col-md-8 col-sm-12">
                            {!! Form::textarea('caption', null, ['class' => 'form-control textarea', 'id'=>'edit_caption_input','rows'=>4,'maxlength' => 100]) !!}
                            {{--<input type="textarea" name="caption" id="edit_caption_input" class="form-control">--}}
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" onclick='closeModal("#editCaptionModal")' aria-label="Close"><span aria-hidden="true">Cancel</span></button>
                    <button type="submit" class="btn btn-primary">Update</button>
                </div>
            {!! Form::close() !!}
        </div>
    </div>
</div>

<script>
    
    jQuery('#form_editcaption').submit(function (event) {
        var pass = true;
        //some validations

        if (pass == false) {
            return false;
        }
        form = this;
        jQuery('#btn-submit').attr('disabled', 'disabled');
        event.preventDefault();
        setTimeout(function () {
            form.submit();
        }, 500);
        jQuery('#progressbar').show();

        return true;
    });
    jQuery('#form_albumimage').submit(function (event) {
        var pass = true;
        //some validations

        if (pass == false) {
            return false;
        }
        form = this;
        jQuery('#btn-submit').attr('disabled', 'disabled');
        event.preventDefault();
        setTimeout(function () {
            form.submit();
        }, 500);
        jQuery('#progressbar').show();

        return true;
    });
    jQuery('#form_photoalbums').submit(function (event) {
        var pass = true;
        //some validations

        if (pass == false) {
            return false;
        }
        form = this;
        jQuery('#btn-submit').attr('disabled', 'disabled');
        event.preventDefault();
        setTimeout(function () {
            form.submit();
        }, 500);
        jQuery('#progressbar').show();

        return true;
    });
    $(document).ready(function(){
        // Save title even when first image is uploaded
        var title = $('#photoalbum_title').val();
        $('#album_title').val(title);   
        $('#photoalbum_title').keyup(function(e){
            var title = $(this).val();
            $('#album_title').val(title);
        });
        jQuery('.form-submit').click(function (event) {
            var pass = true;
            //some validations
            var btn = $(this);
            var id = btn.attr('id');
            $('#action_type_input').val(id);
            if (pass == false) {
                return false;
            }
            form = $('#form_photoalbums');
            jQuery('#btn-submit').attr('disabled', 'disabled');
            event.preventDefault();
            setTimeout(function () {
                form.submit();
            }, 500);
            jQuery('#progressbar').show();

            return true;
        });

        $(document).on('click','.setcover',function(e){
            var span = $(this).find('span');
            if (span.hasClass('fa-star-o')) {
                $('.setcover span.fa-star').attr('class','fa fa-star-o');
                span.attr('class','fa fa-star');
                var id = $(this).data('id');
                $.post('{{url("/")}}/admin/photoalbums/'+id+'/setcover',{},function(response){
                    // console.log('sucess');    
                });
            };
        });
        $('.selectbox').select2({placeholder: 'Select Role'});
        $('body').append($('#imageModal'));
        $('body').append($('#editCaptionModal'));
        $('#published_at').datepicker({format: 'dd/mm/yyyy',autoclose: true,orientation: 'bottom'});
        $('#publish_date_time_field').clockpicker({autoclose: true});
        // $('#published_at').datepicker({format: 'yyyy-mm-dd',endDate: '+0d',autoclose: true});
        // Columns and column defs to be used in both tables
        var columns = [
                {data: 'check', name: 'check'},
                {data: 'id', name: 'id'},
                {data: 'image', name: 'image'},
                {data: 'caption', name: 'caption'},
                {data: 'size', name: 'size'},
                {data: 'published_at', name: 'published_at'},
                {data: 'user', name: 'user'},
                {data: 'actions', name: 'actions'}
            ];
        var columnDefs = [
                {
                    "targets": [1],
                    "visible": false,
                    "searchable": false
                },
                {
                    "targets": [0,1,2,3,4, 5,6,7],
                    "searchable": false
                },
                {
                    "targets": [0, 2, 3, 4, 5, 6,7],
                    "orderable": false
                },
               
            ];
        $('#datatable-example').DataTable({

            processing: true,
            serverSide: true,
            "pageLength": 25,
            "order": [[1, "asc"]],
            ajax: {
                "url": "{{ URL::to('admin/photoalbums/'.$photoalbum->id.'/imagesdatatable') }}",
                "type": "POST"
            },
            columns: columns,
            "columnDefs": columnDefs
        });
        $('#datatable-example_wrapper .dataTables_filter input').addClass("input-medium "); // modify table search input
        $('#datatable-example_wrapper .dataTables_length select').addClass("select2-wrapper span12"); // modify table per page dropdown
        $('#datatable-example_wrapper .dataTables_length select').removeClass("form-control");

        $("table.sortable tbody").sortable({
            helper: fixHelperModified,
            stop: updateIndex
        }).disableSelection();
    });

    var fixHelperModified = function (e, tr) {
        var $originals = tr.children();
        var $helper = tr.clone();
        $helper.children().each(function (index) {
        $(this).width($originals.eq(index).width())
        });
        return $helper;
    },
    updateIndex = function (e, ui) {
        
        $('table tbody tr:odd').removeClass('alt-row');
        $('table tbody tr:even').removeClass().addClass('alt-row');
        var ids = [($('table tbody tr').size() - 1)];
        var idsIndex = 0;
        $('table tbody tr').each(function (i) {
            rcheckbox = $(this).find(':checkbox');
            if (rcheckbox.length > 0) {
                ids[idsIndex] = rcheckbox.val();
                idsIndex++;
            }
        });
        rids = ids.join(',');
        var reorderUrl = $('table.sortable').attr('data-reorderUrl');
        $.post(
                reorderUrl,
                {
                    ids: rids
                },
        function (response) {

        },'json');

    };
    function closeModal(id) {
        $(id).modal('hide');
    }

    function editImage(id, caption){
        $('#edit_caption_input').val(caption);
        $('#edit_image_id').val(id);
        $('#editCaptionModal').modal('show');
    }
</script>
<script src="{{ asset("assets/plugins/blueimp/jquery.blueimp-gallery.min.js") }}"></script>
<script src="{{ asset('assets/plugins/jquery-notifications/js/messenger.min.js')}}" type="text/javascript"></script>
<script src="{{ asset('assets/plugins/jquery-notifications/js/messenger-theme-future.js')}}" type="text/javascript"></script>
@endsection