@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 href="{{ asset("assets/css/bootstrap-fileupload.css") }}" rel="stylesheet" />
<link href="{{ asset("assets/css/imgareaselect-default.css") }}" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="{{ asset("assets/plugins/blueimp/blueimp-gallery.min.css") }}">
<style>
    body {
        overflow-y: scroll !important;
    }
    .brownbtn{
         background: #CF806B !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

<br>
<div class="grid simple vertical mobile-scroll">

    <div class="grid-body no-border">
        <div class='row control' style="margin-bottom: 10px; margin-top: 10px;  background-color: #fff;">
                    <div class="col-sm-5 col-xs-12">
                       <div class="pull-right markaction">
                         @if(Auth::user()->hasPermission('backgroundimage-destroy'))
                        <a id="del" href="javascript:void(0)" class="btn btn-danger" data-url="{{ URL::to('admin/backgroundimage/bulkdelete') }}">حذف</a>
                        @endif
                        </div>
                    </div>

                       <div class="col-sm-2 col-xs-12" style="text-align: center;">
                           <span class="bold" style="font-size: 20px;">صورة التطبيق الخلفية</span>
                       </div>

                       <div class="col-sm-5 col-xs-12">
                        @if(Auth::user()->hasPermission('backgroundimage-create'))
                            <!-- <a href="{{ URL::to('admin/backgroundimage/create') }}" class="btn btn-primary">إضافة</a> -->
                            <a href="javascript:void(0)" data-target="#addModal" data-toggle='modal' class="btn btn-primary">إضافة</a>
                        @endif

                        @if(!Auth::user()->hasPermission('backgroundimage-create') && Auth::user()->hasPermission('backgroundimage-destroy') || Auth::user()->hasPermission('backgroundimage-edit'))
                             <a href="#" class="btn btn-primary" style="visibility: hidden;">no visibilty</a>
                        @endif
                       </div>

                </div>
        <table class="table table-hover" id="datatable-example" >
            <thead>
                <tr>
                    <th><input type="checkbox" class="group-checkable" data-set="#datatable-example .checkboxes" /></th>
                    <th>Id</th>
                    <th>صورة</th>
                    <th>الحالة</th>
                    <th></th>
                </tr>
            </thead>
        </table>
    </div>
</div>

<!--Add background image Modal-->
<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="addModal">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            {!! Form::open(['method' => 'POST','route' => 'backgroundimage.store','id'=>'form_backgroungimage_add','files'=>true]) !!}
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">إضافة الصورة الخلفية</h4>
            </div>
            <div class="modal-body">

                <div id="image1_div">
                    <div class="row">
                        <div class="col-md-6">
                            <img src="{{asset('assets/img/bg-family-project.png')}}" class="img-responsive">
                            <p>إختيارك لصورة تمتلك أبعاد أكبر من أبعاد زجهزة الهاتف سيتيح الفرصة لحركة الصورة الأفقية</p>
                        </div>
                        <div class="col-md-6">
                            {{--*/ $return = false /*--}}
                            <div class="form-group row " >

                              <div class="col-md-10 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="image1" 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>
                                          {!! Form::file('background_image', ['class' => 'background_image']) !!}
                                      </span>
                                      <!-- <a class="btn hide" id="startCrop" style="padding-left: 0.5vmax; padding-right: 0.5vmax">قص الصورة</a> -->

                                      <a href="javascript:void(0)" class="btn remove_picture fileupload-exists" data-dismiss="fileupload" style="padding-left: 0.5vmax; padding-right: 0.5vmax"><i class="fa fa-trash-o" aria-hidden="true"></i></a>
                                      <p id="image1-dim" class="label label-success" style="display:none;">
                                      </p>
                                      <p id="image1-size" class="label label-success" style="display:none;">
                                      </p>
                                    </div>
                                  </div>
                                  <code>الحجم الأقصى المسموح به:</code> 1MB
                              </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>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" onclick='closeModal("#addModal")' aria-label="Close"><span aria-hidden="true">إلغاء</span></button>
                 <!-- {!! Form::submit('حفظ', ['class' => 'btn btn-primary btn-cons','id' => 'btn-submit']) !!} -->
                 <button class="btn btn-primary img-submit-btn brownbtn">حفظ</button>
            </div>
            {!! Form::close() !!}
        </div>
    </div>
</div>
<!--Modal Close-->

<!-- Edit Twasul Type Modal -->
<div class="modal fade" id="editModal" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content" style="margin-top: 70px ">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">تحرير الصورة الخلفية</h4>
            </div>
            {!! Form::open(['method' => 'POST','route' => 'backgroundimage.editbackground','id'=>'form_backgroungimage_edit','files'=>true]) !!}

            <div class="modal-body">

                <div id='editModal_data'></div>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" onclick='closeModal("#editModal")' aria-label="Close"><span aria-hidden="true">إلغاء</span></button>
                <button class="btn btn-primary img-submit-btn">تحديث</button>
            </div>
            {!! Form::close() !!}
        </div>
    </div>
</div>
<!-- Modal Close -->

{!! Form::open(['method' => 'POST','class' => 'inline','id'=> 'bulkaction']) !!}
<input type="hidden" value="" name="ids" id="ids" />
{!! Form::close() !!}

@endsection

@section('page_script')
<script type="text/javascript" language="javascript" class="init">

    $(document).on("change",".background_image",function(e){
        var image = $(this).val();
        if (image) {
            $('.img-submit-btn').removeAttr('disabled');
        }else{
            $('.img-submit-btn').prop('disabled','disabled');
        }
    });
    // $(document).on("click","#add_form",function(e){

    //     var src = $("#image1_div #image1 img").attr('src');
    //     if(!src){
    //         alert("The image field is required.");
    //         return false;
    //     }else{
    //         jQuery('#progressbar').show()
    //         $( "#add_form" ).submit();
    //     }

    // });

    $(document).on("click","#edit_background",function(e){

        var id = $(this).data('edit_background');
        $.get('{{URL::to("admin/backgroundimage/geteditcomponent")}}',{id:id}, function(response){
            $('#editModal_data').html(response);
            $('#editModal').modal().show();
        });

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

    jQuery(document).ready(function ($) {

        $('#datatable-example').DataTable({
            processing: true,

            serverSide: true,
            "order": [[1, "desc"]],
            language: { search: "",
                         searchPlaceholder: "بحث",
                         "zeroRecords": "لا يوجد محتوى",
                         processing: "<img src='{{url('/')}}/assets/img/Webp.net-resizeimage.gif' />" },
            ajax: {
                "url": "{{ URL::to('admin/backgroundimage/datatable') }}",
                "type": "POST"
            },
            columns: [
                {data: 'check', name: 'check'},
                {data: 'id', name: 'id'},
                {data: 'image_url', name: 'image_url'},
                {data: 'status', name: 'status'},
                {data: 'actions', name: 'actions'}
            ],
            "iDisplayLength": 50,
            "columnDefs": [
                {
                    "targets": [1],
                    "visible": false,
                    "searchable": false
                },
                {
                    "targets": [0,1,2,4],
                    "searchable": false
                },
                {
                    "targets": [0, 1, 2, 3,4],
                    "orderable": false
                },

            ]
        });

        $('#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");



        $('#datatable-example input').click(function () {
            $(this).parent().parent().parent().toggleClass('row_selected');
        });
        $(".select2-wrapper").select2({minimumResultsForSearch: -1});

    });

    //image cropping code write below
    $(document).on('click', '#startCrop', function (e) {

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

    });
    function updateCoords(img, selection)
    {
        if (!selection.width || !selection.height)
            return;

        $('#x').val(selection.x1);
        $('#y').val(selection.y1);
        $('#w').val(selection.width);
        $('#h').val(selection.height);
        $("#image1-dim").html('width: ' + selection.width + ', height: ' + selection.height);
    }

    //image cropping edit code write below
    $(document).on('click', '#startCrop2', function (e) {

        var image = $('#image2 .cropbox');
        AspectRatio = '1:1';
        maxWidth = MaxHeight = 1170;
        var value = $("#beacon_target").val();
        // 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: '#image2'
        });
        $("#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);
    }

</script>
<script src="{{ asset("assets/plugins/blueimp/jquery.blueimp-gallery.min.js") }}"></script>
<script src="{{ asset("assets/plugins/bootstrap/js/bootstrap-fileupload.js") }}"></script>
<script src="{{ asset('assets/cpanel/js/image_upload.js')}}" type="text/javascript"></script>
<script src="{{ asset("assets/js/jquery.imgareaselect.pack.js") }}"></script>
@endsection