@extends('dashboard.layouts.master')
@section('content')
    <div class="card">
        <div class="card-header">
            <h3>{{@$create}}</h3>
        </div>
        <div class="card-body pb-0">
            <form class="form" method="post" action="{{route(@$route.'.store')}}" enctype="multipart/form-data">
                @csrf
                <div class="row">


                    <div class="col-md-6 form-group">
                        <label class="form-label">الإسم</label>
                        <input class="form-control" name="name" value="{{old('name')}}" type="text" placeholder="">
                        @error('name')
                        <span class="text-danger">{{$message}}</span>
                        @enderror
                    </div>
                    <div class="col-md-6 form-group">
                        <label class="form-label">رقم الجوال</label>
                        <input class="form-control" type="number" name="phone" value="{{old('phone')}}" min="11" placeholder="">
                        @error('phone')
                        <span class="text-danger">{{$message}}</span>
                        @enderror
                    </div>
                    <div class="col-md-6 form-group">
                        <label class="form-label">البريد الإلكتروني</label>
                        <input class="form-control" value="{{old('email')}}" required name="email" type="email" placeholder="">
                        @error('email')
                        <span class="text-danger">{{$message}}</span>
                        @enderror
                    </div>
                    <div class="col-md-6 form-group">

                        <label class="form-label">كلمة المرور</label>
                        <input class="form-control" required value="{{old('password')}}" type="password" name="password" placeholder="">
                        <a href="javascript:;" id="togglePassword"> <i class="fa fa-eye"></i></a>

                        @error('password')
                        <span class="text-danger">كلمه المرور يجب ان تحتوي علي الاقل علي حرف كبير وحرف صغير ورمز و رقم</span>
                        @enderror
                    </div>


                    <div class="col-md-6 form-group">
                        <label class="form-label">النوع</label>
                        <select id="" name="type" class="select2-custom">
                            <option value="admin">مشرف</option>
                            <option value="user">مستخدم</option>
                        </select>
                        @error('type')
                        <span class="text-danger">{{$message}}</span>
                        @enderror
                    </div>
                    <div class="col-md-6 form-group flex-upload">
                        <label class="form-label">الصورة</label>
                        <input type="file" accept="image/*" class="photo form-control" name="photo"/>
                        <img class="image_preview" src="{{getFile()}}" style="width: 100px ; height: 100px" alt="">
                        @error('photo')
                        <span class="text-danger">{{$message}}</span>
                        @enderror
                    </div>

                    <div class="col-md-4 form-group">
                        <label class="form-label">الحاله</label>
                        <label class="switch">
                            <input name="status" value="active" class="status" type="checkbox" checked>
                            <span class="switch-state"></span>
                        </label>
                        @error('status')
                        <span class="text-danger">{{$message}}</span>
                        @enderror
                    </div>
                </div>
                <div class="card-footer">
                    <button class="btn btn-primary btn-air-primary btn-icon" type="submit">
                        <i class="fa fa-save"></i>
                        حفظ
                    </button>
                </div>
            </form>
        </div>
    </div>
@endsection
@push('js')
    <script>
        $('#togglePassword').on('mouseenter', function () {
            $(this).find('i').addClass('fa-eye-slash');
            $('input[name="password"]').attr('type', 'text')
        })
        $('#togglePassword').on('mouseleave', function () {
            $(this).find('i').removeClass('fa-eye-slash');
            $('input[name="password"]').attr('type', 'password')
        })
    </script>
@endpush