@extends('app')
@section('content')

@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($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
{{--@if($request_type=='Add')
{!! Breadcrumbs::render('admin.generalnews.create') !!}
@else
{!! Breadcrumbs::render('admin.generalnews.edit',$worthy) !!}
@endif--}}
<link href="{{ asset('assets/cpanel/css/image_upload.css')}}" rel="stylesheet" type="text/css" media="screen"/>
<link rel="stylesheet" type="text/css" href="{{ asset("assets/plugins/blueimp/blueimp-gallery.min.css") }}">
<style>
    body {
        overflow-y: scroll !important;
    }
</style>

<div class="row">
    <div class="col-md-12">
        <div class="grid simple">
            <div class="grid-title no-border">
            </div>
            <div class="grid-body no-border"> <br>
                <div class="form-wizard-steps m-b-60 row">
                    <ul class="wizard-steps narrow col-md-9 col-md-offset-3 col-sm-12">
                        <li data-target="#step5" class=""> <a href="#tab5" class='tab5 last' data-toggle="tab"> <span class="step">5</span> <span class="title">ملخص </span> </a> </li>
                        <li data-target="#step4" class=""> <a href="#tab4" class='tab4' data-toggle="tab"> <span class="step">4</span> <span class="title">مرجع </span> </a> </li>
                        <li data-target="#step3" class=""> <a href="#tab3" class='tab3' data-toggle="tab"> <span class="step">3</span> <span class="title">شخص ذي صلة</span> </a> </li>
                        <li data-target="#step2" class="active"> <a href="#tab2" class='tab2' data-toggle="tab"> <span class="step">2</span> <span class="title">صور</span> </a> </li>
                        <li data-target="#step2" class="complete"> <a href="#tab2" class='tab2' data-toggle="tab"> <span class="step">2</span> <span class="title">الأقسام</span> </a> </li>
                        <li class="complete" data-target="#step1"> <a href="#tab1" class='tab1' data-toggle="tab"> <span class="step"><i class="fa fa-check"></i></span> <span class="title">معلومات أساسية</span> </a> </li>
                    </ul>
                    <div class="clearfix"></div>
                </div>

                
                {!! Form::model($worthy,['route'=>['admin.worthy.addimages','worthy'=>$worthy->id,'q'=>$request_type],'method'=>'PUT', 'id'=>'addnewsimages_form',"enctype"=>"multipart/form-data"]) !!}
                <!-- Show save btn if request is in edit -->
                <div class="row form-group">
                    <div class="col-sm-12">
                        @if($request_type=='Edit')
                            <a href="javascript:void(0)" class="btn btn-primary btn-cons" id="save_news">Save</a>
                        @endif  
                        {!! Form::submit('التالى', ['class' => 'btn btn-info btn-cons pull-right','id' => 'btn-submit']) !!}
                        <a href="{{ URL::route('admin.worthy.addworthy',['worthy'=>$worthy->id,'q'=>$request_type])}}" class="btn btn-info btn-cons pull-right">الى الخلف</a>
                    </div>
                </div>
                <input type="hidden" name="save_now" id="save_now" value="false"/>
                <input type="hidden" name="upload_cover" id="upload_cover" value=""/>
                
                <div class="form-group row " >
                  <!-- <label class="col-md-3 col-xs-12 form-label text-right">Select Cover Image </label> -->
                  <div class="col-md-6 col-md-offset-3 col-xs-12 controls text-center">
                      

                      <div class="fileupload">

                        
                        <div>
                         <a href="javascript:void(0)" data-target="#imageModal" data-toggle='modal' class="btn btn-success">إضافة صورة</a>
                        </div>
                      </div>
                     
                      <br>
                  </div>
                  <div class="img-container" class="input">
                      <input type="hidden" class="x" name="logo_x" id="x" />
                      <input type="hidden" class="y" name="logo_y" id="y"/>
                      <input type="hidden" class="w" name="logo_w" id="w"/>
                      <input type="hidden" class="h" name="logo_h" id="h"/>
                  </div>
                </div>
                {!! Form::close() !!}

                <!-- Images section outside the form. inorder to work events on delete action from jQuery -->
                <div class="form-group row">
                    <div class="col-md-10 col-md-offset-1">
                        <div class="controls">
                            {{--@if(Auth::user()->can('generalnews-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('worthy-destroy'))
                                <a id="del" href="javascript:void(0)" class="btn btn-danger" data-url="{{ URL::to('admin/worthy/bulkimagedelete') }}">حذف</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" id="datatable-example" data-reorderUrl="{{ route('admin.worthy.reorder')}}">
                            <thead>
                                <tr>
                                    <th><input type="checkbox" class="group-checkable" data-set="#datatable-example .checkboxes" /></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; padding-bottom: 13px !important">
                    <a href="{{ URL::route('admin.worthy.index')}}" class="btn btn-info btn-cons">إلغاء</a>

                    <div class="pull-right">

                        <a href="javascript::void(0)" class="btn btn-info btn-cons" id="btn-submit" onclick="$('#addnewsimages_form').trigger('submit')">التالى</a>
                    </div>
                    <a href="{{ URL::route('admin.worthy.editContent',['worthy'=>$worthy->id,'q'=>$request_type])}}" class="btn btn-info btn-cons pull-right">الى الخلف</a>
                </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.worthy.uploadimage','id'=>'form_albumimage', 'files'=>true]) !!}
            {!! csrf_field() !!}
                <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">Add Picture</h4>
                </div>
                <div class="modal-body">
                    <input type="hidden" name="worthy_id" value="{{$worthy->id}}">
                    {{--<div class="form-group row">
                        <div class="input-with-icon  right col-md-8 col-sm-12">
                            <label class="btn btn-default btn-file">
                                تصفح <input type="file" name="images[]" class="" multiple="multiple" required>
                            </label>
                            <br>
                            <span class="help">لا تحمل الصورة التي تزيد عن 5 ميغابايت</span>
                        </div>
                        <label class="col-md-3 col-xs-12 form-label text-right">صورة </label>
                    </div>--}}
                    {{--*/ $return = false /*--}}
                    <div class="form-group row " >
                        <label class="col-md-3 col-xs-12 form-label text-right">صورة </label>
                        <div class="col-md-6 col-xs-12 controls">
                            <div class="fileupload fileupload-new" data-provides="fileupload">

                                                                <div style="max-width: 400px; max-height: 400px;" class="fileupload-new thumbnail">
                                    <img alt="" src="{{asset("assets/img/no-image.png")}}">
                                </div>
                                <div class="fileupload-preview fileupload-exists thumbnail" id="image2" style="max-width: 400px; max-height: 400px; line-height: 20px;">
                                </div>
                                                                <div>
                      <span class="btn btn-file">
                          <span class="fileupload-new">اختر صورة</span>
                          <span class="fileupload-exists">يتغيرون</span>
                          <input type="file" name="images[]" class="" multiple="multiple" required>
                          {{--{!! Form::file('image', ['class' => '']) !!}--}}
                      </span>
                                    <a class="btn hide" id="startCrop2">قص الصورة</a>

                                    <a href="javascript:void(0)" class="btn remove_picture fileupload-exists" data-dismiss="fileupload" >Remove</a>
                                    <p id="image2-dim" class="label label-success" style="display:none;">

                                    </p>
                                    <p id="image2-size" class="label label-success" style="display:none;">

                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="img-container" class="input">
                            <input type="hidden" class="x" name="logo_x2" id="x2" />
                            <input type="hidden" class="y" name="logo_y2" id="y2"/>
                            <input type="hidden" class="w" name="logo_w2" id="w2"/>
                            <input type="hidden" class="h" name="logo_h2" id="h2"/>
                        </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">إلغاء</span></button>
                    <button type="submit" class="btn btn-primary">تحميل</button>
                </div>
            {!! Form::close() !!}
        </div>
    </div>
</div>
@endsection

{{--Scripts section--}}
@section('page_script')
<script>
    $(document).on('click', '#startCrop2', function (e) {

        var image = $('#image2 .cropbox');
        AspectRatio = '220:138';
        maxWidth = MaxHeight = 10000;
        // console.log(image[0]);
        var originalWidth = image[0].naturalWidth;
        var originalHeight = image[0].naturalHeight;
        $('#image2 .cropbox').imgAreaSelect({
            handles: true,
            fadeSpeed: 200,
            onSelectChange: updateCoords2,
            imageHeight: originalHeight,
            imageWidth: originalWidth,
            aspectRatio: AspectRatio,
            maxHeight: MaxHeight,
            maxWidth: maxWidth,
            // parent: '#image1'
        });
        $("#image2-dim").html('width: 0, height: 0');
        $("#image2-dim").show();

    });
    function updateCoords2(img, selection){
        if (!selection.width || !selection.height)
            return;
        $('#x2').val(selection.x1);
        $('#y2').val(selection.y1);
        $('#w2').val(selection.width);
        $('#h2').val(selection.height);
        $("#image2-dim").html('width: ' + selection.width + ', height: ' + selection.height);
    }

    jQuery('form').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;
    });
    function loadDefault(id){
        $('#'+id).attr('href',"{{asset('assets/img/no-image.png')}}");
        $('#'+id+' img').attr('src',"{{asset('assets/img/no-image.png')}}");
    }
    $(document).ready(function(){
        $('body').append($('#imageModal'));
        
        // Load no-image.png when an image loading fails
        // $('.listing-icon').on('error',function(e){
        //     console.log('error while loading');
        // });
        // on saving redirect to index
        $('#save_news').click(function(e){
            $('#save_now').val('true');
            $('#progressbar').show();
            $('#addnewsimages_form').trigger('submit');
        });
        // If cover image is selected and has not been uploaded then upload it manualy via ajax
        
        // On change of cover image set flag for uploading it manualy to true
        // $('#cover_image_compression').select2();
        

       
        // 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: 'actions', name: 'actions'}
            ];
        var columnDefs = [
                {
                    "targets": [1],
                    "visible": false,
                    "searchable": false
                },
                {
                    "targets": [0,1,2,3],
                    "searchable": false
                },
                {
                    "targets": [0, 1, 2, 3],
                    "orderable": false
                },

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

            processing: true,
            serverSide: true,
            "order": [[1, "desc"]],
            language: { search: "",
                searchPlaceholder: "بحث",
                processing: "<img src='{{url('/')}}/assets/img/Webp.net-resizeimage.gif' />" },
            ajax: {
                "url": "{{ URL::to('admin/worthy/'.$worthy->id.'/imagesdatatable') }}",
                "type": "POST"
            },
            columns: columns,
            "iDisplayLength": 50,
            "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();
    });

    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/cpanel/js/image_upload.js')}}" type="text/javascript"></script>
<script src="{{ asset("assets/plugins/blueimp/jquery.blueimp-gallery.min.js") }}"></script>
@endsection