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

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

    <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">&times;</button>
                                @foreach($errors->all() as $error)
                                    <p>{{ $error }}</p>
                                @endforeach
                            </div>
                        </div>
                    @endif

                    <form
                        method="{{ $user ? 'POST' : 'POST' }}"
                        action="{{ $user ? route('users.update', $user->id) : route('users.store') }}"
                        id="form_users"
                        enctype="multipart/form-data"
                        novalidate
                    >
                        @csrf
                        @if($user)
                            @method('PATCH')
                        @endif

                        {{-- First Name --}}
                        <div class="form-group row">
                            <div class="col-md-5 col-md-offset-4 col-sm-12">
                                <input type="text" name="first_name" class="form-control" value="{{ old('first_name', $user->first_name ?? '') }}" required>
                            </div>
                            <div class="col-md-3 col-sm-12 text-left">
                                <label for="first_name" class="control-label label-b">الاسم الاول</label>
                            </div>
                        </div>

                        {{-- Last Name --}}
                        <div class="form-group row">
                            <div class="col-md-5 col-md-offset-4 col-sm-12">
                                <input type="text" name="last_name" class="form-control" value="{{ old('last_name', $user->last_name ?? '') }}">
                            </div>
                            <div class="col-md-3 col-sm-12 text-left">
                                <label for="last_name" class="control-label label-b">اسم العائلة</label>
                            </div>
                        </div>

                        {{-- Username --}}
                        <div class="form-group row">
                            <div class="col-md-5 col-md-offset-4 col-sm-12">
                                <input type="text" name="username" class="form-control" value="{{ old('username', $user->username ?? '') }}">
                            </div>
                            <div class="col-md-3 col-sm-12 text-left">
                                <label for="username" class="control-label label-b">اسم المستخدم</label>
                            </div>
                        </div>

                        {{-- Email --}}
                        <div class="form-group row">
                            <div class="col-md-5 col-md-offset-4 col-sm-12">
                                <input type="email" name="email" class="form-control" value="{{ old('email', $user->email ?? '') }}">
                            </div>
                            <div class="col-md-3 col-sm-12 text-left">
                                <label for="email" class="control-label label-b">البريد الإلكتروني</label>
                            </div>
                        </div>

                        {{-- Password --}}
                        <div class="form-group row">
                            <div class="col-md-5 col-md-offset-4 col-sm-12">
                                <input type="password" name="password" class="form-control">
                                <span class="help">اترك هذا الصندوق فارغاً إذا كنت لا تريد تغيير كلمة المرور</span>
                            </div>
                            <div class="col-md-3 col-sm-12 text-left">
                                <label for="password" class="control-label label-b">كلمه المرور</label>
                            </div>
                        </div>

                        {{-- Role --}}
                        <div class="form-group row">
                            <div class="col-md-5 col-md-offset-4 col-sm-12">
                                <select name="role" class="form-control selectbox">
                                    @foreach($roles as $key => $value)
                                        <option value="{{ $key }}" {{ (old('role', $userRole ?? '') == $key) ? 'selected' : '' }}>
                                            {{ $value }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-3 col-sm-12 text-left">
                                <label for="role" class="control-label label-b">الدور</label>
                            </div>
                        </div>

                        {{-- Status --}}
                        <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" name="status" id="yes" value="1" {{ ($user && $user->status == 1) || !$user ? 'checked' : '' }}>
                                    <label for="yes">نشط</label>
                                    <input type="radio" name="status" id="no" value="0" {{ ($user && $user->status == 0) ? 'checked' : '' }}>
                                    <label for="no">متوقف</label>
                                </div>
                            </div>
                            <div class="col-md-3 col-sm-12 text-left">
                                <label for="status" class="control-label label-b">الحالة</label>
                            </div>
                        </div>

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

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

@section('page_script')
    <script>
        jQuery('#form_users').submit(function (event) {
            var pass = true;

            if (!pass) {
                return false;
            }

            const 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');
            var AspectRatio = '1:1';
            var maxWidth = MaxHeight = 1170;
            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,
            });

            $("#image1-dim").html('width: 0, height: 0').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