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

<link href="{{ asset("assets/css/bootstrap-fileupload.css") }}" rel="stylesheet" />
<link href="{{ asset("assets/css/imgareaselect-default.css") }}" rel="stylesheet" />

<style>
    .brownbtn{
         background: #CF806B !important;
        }
</style>

<div class="row">
    <div class="col-md-12">
        <div class="grid simple">
            <div class="grid-body no-border"> <br>
                @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($user, ['method' => $user ? 'PATCH' : 'POST','route' => $user ? ['users.update', $user->id] : 'users.store','id'=>'form_users', 'novalidate'=>"novalidate","enctype"=>"multipart/form-data"]) !!}
                <div class="form-group row">

                    <!-- <span class="help">e.g. "Jonh Smith"</span> -->
                    <div class=" right col-md-5 col-md-offset-4 col-sm-12">

                        {!! Form::text('first_name', null, ['class' => 'form-control','required']) !!}
                    </div>
                    <div class="col-md-3 col-sm-12 text-left">
                        {!! Form::label('first_name', 'الاسم الاول', ['class' => 'control-label label-b']) !!}
                    </div>
                </div>
                <div class="form-group row">

                    <!-- <span class="help">e.g. "Jonh Smith"</span> -->
                    <div class=" right col-md-5 col-md-offset-4 col-sm-12">

                        {!! Form::text('last_name', null, ['class' => 'form-control']) !!}
                    </div>
                     <div class="col-md-3 col-sm-12 text-left">
                        {!! Form::label('last_name', 'اسم العائلة', ['class' => 'control-label label-b']) !!}
                    </div>
                </div>
                <div class="form-group row">

                    <!-- <span class="help">e.g. "Jonh Smith"</span> -->
                    <div class=" right col-md-5 col-md-offset-4 col-sm-12">

                        {!! Form::text('username', null, ['class' => 'form-control']) !!}
                    </div>
                    <div class="col-md-3 col-sm-12 text-left">
                        {!! Form::label('username', 'اسم المستخدم', ['class' => 'control-label label-b']) !!}
                    </div>
                </div>
                <div class="form-group row">

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

                        {!! Form::text('email', null, ['class' => 'form-control']) !!}
                    </div>
                     <div class="col-md-3 col-sm-12 text-left">
                        {!! Form::label('email', 'البريد الإلكتروني', ['class' => 'control-label label-b']) !!}
                      <!-- <span class="help">e.g. "john@examp.com"</span> -->
                    </div>
                </div>
                <div class="form-group row">

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

                        {!! Form::text('password', "", ['class' => 'form-control']) !!}
                      <span class="help">اترك هذا الصندوق فارغاً إذا كنت لا تريد تغيير كلمة المرور</span>
                    </div>
                     <div class="col-md-3 col-sm-12 text-left">
                        {!! Form::label('password', 'كلمه المرور', ['class' => 'control-label label-b']) !!}
                    </div>
                </div>
                <div class="form-group row">

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


                        {!! Form::select('role', $roles,$userRole, ['class' => 'selectbox']) !!}
                    </div>
                    <div class="col-md-3 col-sm-12 text-left">
                        {!! Form::label('role', 'الدور', ['class' => 'control-label label-b']) !!}
                    </div>
                </div>
                <div class="form-group row">

                    <div class='radio-group inline col-md-5 col-md-offset-4 col-sm-12'>
                        <div class="radio">
                            <input type="radio" {{$user ?  ($user->status==1 ? 'checked' : ''):'checked' }} value="1" name="status" id="yes">
                            <label for="yes">نشط</label>
                            <input type="radio" value="0" {{$user ?  ($user->status==0 ? 'checked' : ''):'' }}  name="status" id="no">
                            <label for="no">متوقف</label>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-12 text-left">
                        {!! Form::label('status', 'الحالة', ['class' => 'control-label label-b']) !!}
                    </div>
                </div>

                <div class="form-actions" style="margin-left: -13px !important; margin-right: -13px !important; padding-bottom: 13px !important">
                    <div class="pull-right">
                        {!! Form::submit($user ? 'تحديث' : 'حفظ', ['class' => 'btn btn-primary btn-cons brownbtn','id' => 'btn-submit']) !!}
                    </div>
                    <a href="{{url('/admin/users')}}" class="btn btn-info btn-cons">إلغاء</a>

                </div>
                {!! Form::close() !!}

            </div>
        </div>
    </div>
</div>
@endsection

@section('page_script')
<script>
    jQuery('#form_users').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(){
        $('.selectbox').select2({placeholder: 'Select Role'});
    });
    $(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);
    }
</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/js/jquery.imgareaselect.pack.js') }}"></script>


@endsection