@extends('admin::layouts.master')

@section('title')
@lang('translation.Admins') / Edit
@endsection

@section('content')
@component('admin::components.breadcrumb')
@slot('li_1')
<a href="{{ route('admin.admin.index') }}">Admins</a>
@endslot
@slot('title')
Edit
@endslot
@endcomponent

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <form id="admin" action="{{ route('admin.admin.update', $admin->id) }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="first_name" class="form-label">First name</label> <span class="required">*</span>
                                <input type="text" class="form-control" id="first_name" name="first_name" placeholder="First name" value="{{ $admin->first_name }}">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="last_name" class="form-label">Last name</label> <span class="required">*</span>
                                <input type="text" class="form-control" id="last_name" name="last_name" placeholder="Last name" value="{{ $admin->last_name }}">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="phone">Phone</label> <span class="required">*</span>
                                <input type="text" name="phone" class="form-control" id="phone" placeholder="Enter Phone" value="{{ $admin->phone }}">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="email">Email</label> <span class="required">*</span>
                                <input type="email" name="email" class="form-control" id="email" placeholder="Enter Email" value="{{ $admin->email }}">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="password">Password</label>
                                <input type="password" name="password" class="form-control" id="password" placeholder="Enter Password">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="user_type">Role</label>
                                <select class="form-control" name="user_type" id="user_type">
                                    <option value="">-- Select Role --</option>
                                    @foreach($roles as $key => $value)
                                    <option @if($admin->user_type == $value->user_type)selected @endif value="{{ $value->user_type }}">{{ $value->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="image" class="form-label">Image</label> <span class="required">*</span>
                                <input class="form-control" type="file" name="image" id="image" onchange="readURL(this);">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <img src="{{ asset($admin->image) }}" id="box-image" alt="" style="width: 128px; border: #ebebeb 1px solid;">
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="status">Status</label> <span class="required">*</span>
                                <select name="status" class="form-control">
                                    <option @if($admin->status == '1')selected @endif value="1">Active</option>
                                    <option @if($admin->status == '0')selected @endif value="0">Inactive</option>
                                    <option @if($admin->status == '2')selected @endif value="2">Deleted</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div>
                        <button class="btn btn-primary" type="submit">Submit</button>
                    </div>
                </form>
            </div>
        </div>
    </div> <!-- end col -->
</div> <!-- end row -->
@endsection
@section('script')
<!-- jquery-validation -->
<script src="{{ asset('themes/backend/custom/build/libs/jquery-validation/jquery.validate.min.js') }}"></script>

<script>
    $(function() {
        $('#admin').validate({
            rules: {
                first_name: {
                    required: true,
                },
                last_name: {
                    required: true,
                },
                phone: {
                    required: true,
                    minlength: 7,
                    digits: true,
                },
                email: {
                    required: true,
                },
                company_name: {
                    required: true,
                },
                user_type: {
                    required: true,
                },
                status: {
                    required: true
                },
            },
            messages: {
                first_name: "Please enter first name",
                last_name: "Please enter last name",
                phone: {
                    required: "Please enter phone number",
                    minlength: "Your phone number must be at least 7 characters long"
                },
                email: "Please enter email",
                company_name: "Please enter company name",
                user_type: "Please choose one role",
                status: "Please select one status",
            },
            errorElement: 'span',
            errorPlacement: function(error, element) {
                error.addClass('invalid-feedback');
                element.closest('.mb-3').append(error);
            },
            highlight: function(element, errorClass, validClass) {
                $(element).addClass('is-invalid');
            },
            unhighlight: function(element, errorClass, validClass) {
                $(element).removeClass('is-invalid');
            }
        });
    });

    function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function(e) {
                $('#box-image')
                    .attr('src', e.target.result)
                    .width(128)
                    .height(128);
            };

            reader.readAsDataURL(input.files[0]);
        }
    }
</script>
@endsection