@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"/>
<link href="{{ asset("assets/css/bootstrap-fileupload.css") }}" rel="stylesheet" />
<style type="text/css">
    .clockpicker-popover{
        z-index: 2000;
    }
    .clockpicker-button {
        display: none;
    }
    /*.photoalbum-form-table th {*/
    /*    text-align: right !important;*/
    /*}*/
    /*.photoalbum-form-table tr td {*/
    /*    text-align: right !important;*/
    /*}*/
</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

<div class="page-title"> <a href="{{ URL('/admin/photoalbums') }}"><i class="icon-custom-right"></i></a>
    <h3>الالبومات - <span class="semi-bold">{{$action=='Edit' ? 'تحرير' : 'أضافة'}}</span></h3>
</div>
<div class="row">
    <div class="col-md-12">
        <div class="grid simple">



            <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 ? ['photoalbums.update', $photoalbum->id] : 'photoalbums.store','id'=>'form_photoalbums']) !!}
                <input type="hidden" name="year" id="year" value="">
                <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">انشر في معرض الصور</a>
                                    <a href="javascript:void(0)" class="btn btn-primary form-submit" id="drafts">حفظ في المسودة</a>
                                @else
                                    <a href="javascript:void(0)" class="btn btn-primary form-submit" id="publish">حفظ</a>
                                @endif
                            @else
                                @if($photoalbum->type=='photoalbum')
                                    <a href="javascript:void(0)" class="btn btn-primary form-submit" disabled>انشر في معرض الصور</a>
                                    <a href="javascript:void(0)" class="btn btn-primary form-submit" disabled>حفظ في المسودة</a>
                                @else
                                    <a href="javascript:void(0)" class="btn btn-primary form-submit" id="publish">حفظ</a>
                                @endif
                            @endif
                        </div>
                    </div>
                </div>
                <input type="hidden" name="action_type" value="publish" id="action_type_input">
                <div class="form-group row" style="margin-left: 17px;">

                    <div class="col-md-5 col-md-offset-3 col-sm-12">

                        {!! Form::text('title', null, ['class' => 'form-control', 'id'=>'photoalbum_title']) !!}
                            <span class="help"><span id="char_title">60</span>@lang('helpers.char_count_text')</span>
                    </div>
                    <div class="col-md-2 col-sm-12 text-left">
                        {!! Form::label('title', 'إسم الألبوم', ['class' => 'form-label','style'=>'margin-top: 5px;']) !!}
                    </div>
                </div>
                <div class="form-group row" style="margin-left: 17px;">
                    <div class="input-with-icon  col-md-offset-3 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','required'=>true]) !!}
                        @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 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','required'=>true]) !!}
                        @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="col-md-2 col-sm-12 text-left">
                        {!! Form::label('published_at', 'تاريخ النشر', ['class' => 'form-label','style'=>'margin-top: 5px;']) !!}
                    </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 id="table-top"></div>
                <div class="form-group row">
                    <div class="col-md-10 col-md-offset-1">
                         <div class="controls control-height row" style= 'margin-bottom: 15px;'>
                            <div class='col-sm-6'>
                                <div class="pull-right markaction">

                                    @if(Auth::user()->hasPermission('photoalbums-destroy'))
                                    <a id="del" href="javascript:void(0)" class="btn btn-danger" data-url="{{ URL::to('admin/photoalbums/bulkimagedelete') }}">حذف</a>
                                    @endif
                                </div>
                            </div>
                            <div class='col-sm-6'>
                                @if(Auth::user()->hasPermission('photoalbums-create'))
                                <a href="javascript:void(0)" data-target="#imageModal" data-toggle='modal' class="btn btn-success" id="add_picture_btn">اضافة صورة</a>
                                @endif
                            </div>
                        </div>
                        <table class="table sortable table-hover table-bordered photoalbum-form-table" id="datatable-example" data-reorderUrl="{{ route('admin.photoalbums.reorder')}}">
                            <thead>
                                <tr>
                                    <th width="5%" class="disabled  sorting-arrow"><i class="fa fa-arrows"></i></th>
                                    <th>#</th>
                                    <th><input type="checkbox" class="group-checkable" data-set="#datatable-example .checkboxes" /></th>
                                    <th>الصور</th>
                                    <th>معلومات الصورة</th>
                                    <th>الحجم </th>
                                    <th>التاريخ </th>
                                    <th>إرسلت من</th>
                                    <th></th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
                <div class="form-actions" style="margin-left: -13px !important; margin-right: -13px !important;">
                    <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">انشر في معرض الصور</a>
                                <a href="javascript:void(0)" class="btn btn-primary form-submit" id="drafts">حفظ في المسودة</a>
                            @else
                                <a href="javascript:void(0)" class="btn btn-primary form-submit" id="publish">حفظ</a>
                            @endif
                        @else
                            @if($photoalbum->type=='photoalbum')
                                <a href="javascript:void(0)" class="btn btn-primary form-submit" disabled>انشر في معرض الصور</a>
                                <a href="javascript:void(0)" class="btn btn-primary form-submit" disabled>حفظ في المسودة</a>
                            @else
                                <a href="javascript:void(0)" class="btn btn-primary form-submit" id="publish">حفظ</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' => 'photoalbums.uploadimage','id'=>'form_albumimage', 'files'=>true,"enctype"=>"multipart/form-data"]) !!}

                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel">إضافة الصور</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">


                            <span class="btn btn-file">

                                <span>إبحث</span>


                                <input name="images[]" id="imageUpload" class="photoalbum upload-multiple-images" multiple="multiple" type="file">
                            </span>
                            <a href="javascript:void(0);" data-toggle="modal" data-target="#showMultipleUploadImagesModal"><span class="selected_images_preview_btn badge badge-info" style="font-size: small;"></span></a>
                            <span class="selected_images"></span>
                            <br/>
                            <br/>
                            <code>الحجم الأقصى المسموح به:</code>
                            1MB
                            <br>
                            <span class="help-right" style="margin-right: 1px;">سيتم تقليص أبعاد الصور بنسبة ٥٠٪</span>

                            <br/>
                        </div>
                        <div class="col-md-3 col-sm-12 text-right">
                            <label class="control-label">الصورة</label>
                        </div>
                    </div>
                    <div class="form-group row">

                        <div class="input-with-icon  right col-md-8  col-sm-12">

                            {!! Form::textarea('caption', null, ['class' => 'form-control textarea', 'id'=>'caption_input','rows'=>4]) !!}
                            <span class="help pull-right"><span id="caption_char_count">200</span>@lang('helpers.char_count_text')</span><br>
                            <span class="help">النص المرافق يظهر تحت الصورة (الصور) داخل التطبيق</span>
                        </div>
                        <div class="col-md-3 col-sm-12 text-right">
                            <label class="control-label">النص المرافق</label>
                        </div>
                    </div>
                    <div class="form-group row hidden">

                        <div class="input-with-icon  right col-md-4 col-md-offset-4 col-sm-12">
                            {!! Form::select('compress',['0'=>'0%','25'=>'25%','50'=>'50%'],50, ['class' => 'form-control selectbox','id'=>'compress_input','style'=>'width: 100%']) !!}
                        </div>
                        <div class="col-md-3 col-sm-12 text-right">
                            {!! Form::label('compress', 'ضغط حجم الصورة', ['class' => 'form-label']) !!}
                        </div>
                    </div>
                </div>
                <div class="modal-footer text-left">
                    <button type="button" class="btn btn-default" data-dismiss="modal">إلغاء</button>

                    <button type="submit" class="btn btn-primary btn-cons">حفظ</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' => 'photoalbums.editcaption','id'=>'form_editcaption']) !!}
                <div class="modal-header">
                    <h4 class="modal-title" id="editCaptionModalLabel"> تحرير نص الصورة</h4>

                </div>
                <div class="modal-body">
                    <input type="hidden" name="albumimage_id" id="edit_image_id" value="">
                    <div class="form-group row">

                        <div class="input-with-icon  right col-md-8 col-md-offset-1 col-sm-12">
                            {!! Form::textarea('caption', null, ['class' => 'form-control textarea', 'id'=>'edit_caption_input','rows'=>4]) !!}
                            <span class="help pull-right"><span id="edit_char_caption">200</span>@lang('helpers.char_count_text')</span><br>
                            {{--<input type="textarea" name="caption" id="edit_caption_input" class="form-control">--}}
                        </div>
                        <div class="col-md-3 col-sm-12 text-right">
                            <label class="control-label">تحرير النص</label>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" onclick='closeModal("#editCaptionModal")' aria-label="Close"><span aria-hidden="true">إلغاء</span></button>
                    <button type="submit" class="btn btn-primary btn-cons">تحديث</button>
                </div>
            {!! Form::close() !!}
        </div>
    </div>
</div>

<div id="showMultipleUploadImagesModal" class="modal" aria-labelledby="showMultipleUploadImagesModal" style="z-index: 10000">
    <div class="modal-dialog">
        <div class="modal-content" role="document">

            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">الصور المختارة</h4>
            </div>
            <div class="modal-body">
                <div id="upload-multiple-images-preview"></div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-default pull-left" data-dismiss="modal">إلغاء</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>

<script>
   $( document ).ready(function() {
    var d = new Date();
    // Set the value of the "date" field
    document.getElementById("year").value = d.getFullYear();

});
    // $(".photoalbum").on('change', function() {
    //       var numFiles = $("input:file")[0].files.length;
    //       $('.selectedImagesCount').text(numFiles+' تم تحديد الصور');
    //       console.log(numFiles);
    // });

    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 (document.getElementById("imageUpload").files.length < 1) {
              pass = false;

            $("#uploadImageMessage").modal()

        };

        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(){
        // Scroll to table top on page change
        $('#add_picture_btn').click(function(e){
            $('.upload-multiple-images').val('');
            $('.selected_images_preview_btn').text('');
            updateFeatureCharLimitNum('caption_input','caption_char_count',200);
            $('#caption_input').val('');
        });

        $("#imageModal").on('show.bs.modal', function(){
            $("#imageUpload").val('');
        });

        $(document).on('click','#datatable-example_paginate',function(){
           $('html, body').animate({
                   scrollTop: $("#table-top").offset().top
            }, 500);
        });
        // 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'));
        $('#imageModal').append($('#uploadImageMessage'));

        $('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: 'sequence', name: 'sequence'},
                {data: 'id', name: 'id'},
                {data: 'check', name: 'check'},
                {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
                },
                {
                    "targets": [2,3,4,5,6],
                    "className": 'dt-body-right'
                },

            ];
        $('#datatable-example').DataTable({

            processing: true,
            serverSide: true,
            ordering: false,
            pageLength: 50,
            order: [[1, "asc"]],
            language: {
                    search: "",
                    searchPlaceholder: "بحث",
                    processing: "<img src='{{url('/')}}/assets/img/Webp.net-resizeimage.gif' />",
                    emptyTable: "لا يوجد محتوى",
                    zeroRecords: "لا يوجد محتوى",

						},
            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");

        $(".select2-wrapper").select2({minimumResultsForSearch: -1});

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

    updateFeatureCharLimitNum('caption_input','caption_char_count',200);
        $("#caption_input").keyup(function (event) {
            updateFeatureCharLimitNum('caption_input','caption_char_count',200);
        });

    updateFeatureCharLimitNum('edit_caption_input','edit_char_caption',200);
        $("#edit_caption_input").keyup(function (event) {
            updateFeatureCharLimitNum('edit_caption_input','edit_char_caption',200);
        });

    updateFeatureCharLimitNum('photoalbum_title','char_title',60);
        $("#photoalbum_title").keyup(function (event) {
            updateFeatureCharLimitNum('photoalbum_title','char_title',60);
        });

    function updateFeatureCharLimitNum(textarea,limitElement,limitNum){
        var field = document.getElementById(textarea);

        if (field.value.length > limitNum) {
            field.value = field.value.substring(0, limitNum);
        } else {
            $('#'+limitElement).html(limitNum - field.value.length);
        }
    }

    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);
        updateFeatureCharLimitNum('edit_caption_input','edit_char_caption',200);
        $('#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