@extends('layouts.app')

@section('content')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.css" />
<style type="text/css">
    span.error {
        position: relative;
        top: 0rem;
        left: 0rem;
        color: #FF4081;
    }

    .avatar-upload {
        position: relative;
        max-width: 205px;
        margin: 20px auto;
    }

    .avatar-upload .avatar-edit {
        position: absolute;
        right: 12px;
        z-index: 1;
        top: 10px;
    }

    .avatar-upload .avatar-edit input {
        display: none;
    }

    .avatar-upload .avatar-edit input+label {
        display: inline-block;
        width: 34px;
        height: 34px;
        margin-bottom: 0;
        border-radius: 100%;
        background: #FFFFFF;
        border: 1px solid transparent;
        box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
        cursor: pointer;
        font-weight: normal;
        transition: all 0.2s ease-in-out;
    }

    .avatar-upload .avatar-edit input+label:hover {
        background: #f1f1f1;
        border-color: #d6d6d6;
    }

    .avatar-upload .avatar-edit input+label:after {
        content: "\f040";
        font-family: 'FontAwesome';
        color: #757575;
        position: absolute;
        top: 10px;
        left: 0;
        right: 0;
        text-align: center;
        margin: auto;
    }

    .avatar-upload .avatar-preview {
        width: 192px;
        height: 192px;
        position: relative;
        border-radius: 100%;
        border: 6px solid #F8F8F8;
        box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
    }

    .avatar-upload .avatar-preview>div {
        width: 100%;
        height: 100%;
        border-radius: 100%;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }

</style>

<div style="height: 45px;">
    <a href="{{ route('user_manage') }}" type="button" class="btn pull-right bg-gray btn-sm">Back</a>
</div>

<div class="box">
    <div class="box-header">
        <h3 class="box-title">{{ $user['action'] }} User</h3>
    </div>

    @php
    $readonly = $user['action'] === 'View' ? 'disabled' : '';

    @endphp

    <form class="box-body" id="user-form" enctype="multipart/form-data">

        <div class="avatar-upload">
            @if (empty($user['bkend_user_profile_image']))
            <div class="avatar-edit">
                <input type='file' id="imageUpload" name="profile_image" accept=".png, .jpg, .jpeg"  />
                <label for="imageUpload"></label>
            </div>
            @endif
            <div class="avatar-preview">
                @if (!empty($user['bkend_user_profile_image']))

                <div id="imagePreview" style="background-image: url('{{ asset('/storage/profile_image/'.$user['bkend_user_profile_image']) }}');">
                </div>
                @else
                    <div id="imagePreview" style="background-image: url('{{ asset('assets/images/image_upload.png') }}');"></div>
                @endif
            </div>
        </div>
        <div class="row">

            <div class="form-group col-xs-4">
                <label for="usr_rl" class="col-sm-4 control-label">User Role</label>

                <select class="form-control select2 usr_rl" style="width: 100%;" id="usr_rl" name="usr_rl" {{ $readonly
                    }}>
                    <option value="">Please Select</option>
                    @foreach ($user['usr_role'] as $usr_rl)

                    <option value="{{$usr_rl['val_id']}}" {{ (old('usr_rl', $user['role_id'] ?? '' )==$usr_rl['val_id'])
                        ? 'selected' : '' }}>
                        {{$usr_rl['val_des_en']}}</option>
                    @endforeach
                </select>

                @error('usr_rl')
                <span class="invalid-feedback" role="alert">
                    <strong>{{ $message }}</strong>
                </span>
                @enderror

            </div>
            @if ($user['action'] === 'Add')
            <div class="form-group col-xs-4 prcsr-entity" style="display: none;">
                <label for="prcsr" class="col-sm-4 control-label">Entity</label>

                <select class="form-control select2 prcsr" style="width: 100%;" id="prcsr" name="prcsr" {{ $readonly }}>
                    <option selected="selected" value="">Please Select</option>
                    @foreach ($user['prcus'] as $prcus)
                    <option value="{{ $prcus['processor_id'] }}">{{ $prcus['processor_name'] }}</option>
                    @endforeach
                </select>
                @error('prcsr')
                <span class="invalid-feedback" role="alert">
                    <strong>{{ $message }}</strong>
                </span>
                @enderror
            </div>

            <div class="form-group col-xs-4 prvdir-entity" style="display: none;">
                <label for="prvdir" class="col-sm-4 control-label">Entity</label>

                <select class="form-control select2 prvdir" style="width: 100%;" id="prvdir" name="prvdir" {{ $readonly
                    }}>
                    <option selected="selected" value="">Please Select</option>
                    @foreach ($user['prvdir'] as $prvdir)
                    <option value="{{ $prvdir['prvnce_id'] }}">{{ $prvdir['prvnce_name_en'] }}</option>
                    @endforeach
                </select>
                @error('prvdir')
                <span class="invalid-feedback" role="alert">
                    <strong>{{ $message }}</strong>
                </span>
                @enderror
            </div>

            <div class="form-group col-xs-4 adm-entity" style="display: none;">
                <label for="adm" class="col-sm-4 control-label">Entity</label>

                <select class="form-control select2 adm" style="width: 100%;" id="adm" name="adm" {{ $readonly }}>
                    <option selected="selected" value="">Please Select</option>
                    @foreach ($user['admin'] as $adm)
                    <option value="{{ $adm['id'] }}">{{ $adm['name'] }}</option>
                    @endforeach
                </select>
                @error('adm')
                <span class="invalid-feedback" role="alert">
                    <strong>{{ $message }}</strong>
                </span>
                @enderror
            </div>
            @else
            <div class="form-group col-xs-4">
                <label for="enty" class="control-label">Entity</label>
                <div>
                    <input type="text" class="form-control" id="enty" name="enty"
                        value="{{ old('enty', $user['bkend_user_entityid']) }}" readonly>
                </div>
            </div>
            @endif


        </div>
        <div class="row">

            <div class="form-group col-xs-4">
                <label for="usr_id" class="control-label">User ID</label>
                <div>
                    <input type="text" class="form-control" id="usr_id" name="usr_id"
                        value="{{ old('usr_id', $user['user_id']) }}" readonly>
                </div>
            </div>

            <div class="form-group col-xs-4">
                <label for="usr_rg" class="control-label">User Reg.No</label>
                <div>
                    <input type="text" class="form-control" id="usr_rg" name="usr_rg"
                        value="{{ old('usr_rg', $user['user_regno'] ?? '') }}" readonly>
                </div>
            </div>

            <div class="form-group col-xs-4">
                <label for="rle_id" class="control-label">Role ID</label>
                <div>
                    <input type="text" class="form-control" id="rle_id" name="rle_id"
                        placeholder="Please select user role" value="{{ old('rle_id', $user['role_id'] ?? '') }}"
                        readonly>
                </div>
            </div>

        </div>

        <div class="row">

            <div class="form-group col-xs-4">
                <label for="frst_nme" class="control-label">First Name</label>
                <div>
                    <input type="text" class="form-control" id="frst_nme" name="frst_nme"
                        value="{{ old('frst_nme', $user['frst_nme'] ?? '') }}" placeholder="First Name" {{ $readonly }}>
                </div>
                @error('frst_nme')
                <span class="invalid-feedback" role="alert">
                    <strong>{{ $message }}</strong>
                </span>
                @enderror
            </div>

            <div class="form-group col-xs-4">
                <label for="lst_nme" class="control-label">Last Name</label>
                <div>
                    <input type="text" class="form-control" id="lst_nme" name="lst_nme"
                        value="{{ old('lst_nme', $user['lst_nme'] ?? '') }}" placeholder="Last Name" {{ $readonly }}>
                </div>
                @error('lst_nme')
                <span class="invalid-feedback" role="alert">
                    <strong>{{ $message }}</strong>
                </span>
                @enderror
            </div>

            <div class="form-group col-xs-4">
                <label for="is_active" class="control-label">Is Active</label>
                <div>
                    <input id="is_active" type="checkbox" name="is_active" value="1" {{ old('is_active',
                        isset($user['is_active']) && $user['is_active']=='1' ) ? 'checked' : '' }} {{ $readonly }}>

                </div>
            </div>


        </div>

        <div class="row">

            <div class="form-group col-xs-4">
                <label for="eml" class="control-label">Email</label>
                <div>
                    <input type="text" class="form-control" id="eml" name="eml"
                        value="{{ old('eml', $user['eml'] ?? '') }}" placeholder="Email" {{ $readonly }}>
                </div>
                @error('eml')
                <span class="invalid-feedback" role="alert">
                    <strong>{{ $message }}</strong>
                </span>
                @enderror
            </div>

            <div class="form-group col-xs-4">
                <label for="mbl" class="control-label">Mobile</label>
                <div>
                    <input type="text" class="form-control" id="mbl" name="mbl"
                        value="{{ old('mbl', $user['mbl'] ?? '') }}" placeholder="Mobile" {{ $readonly }}>
                </div>
                @error('mbl')
                <span class="invalid-feedback" role="alert">
                    <strong>{{ $message }}</strong>
                </span>
                @enderror
            </div>


        </div>
        <input id="act" type="hidden" name="act" value={{ $user['action'] }}>
        <div class="row">
            <div class="form-group col-xs-2 pull-right">
                @if($user['action'] === 'View')
                <button type="button" class="btn btn-block btn-dropbox" id="vw_btn">
                    OK
                </button>
                @else
                <button type="button" class="btn btn-block btn-dropbox" id="user_store">
                    {{ $user['action'] }}
                </button>
                @endif
            </div>

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

@push('scripts')
<script type="text/javascript">
    jQuery(document).ready(function($) {
        var action = "{{ $user['action'] }}";
        var select = document.getElementById("usr_rl");



        $("#user_store").click(function() {
            store_user_details();
        });

        $('.prcsr-entity').hide();
        $('.prvdir-entity').hide();
        $('.adm-entity').hide();

        function showEntityBasedOnRole(selectedUserRole) {
            $('.prcsr-entity').hide();
            $('.prvdir-entity').hide();
            $('.adm-entity').hide();

            if (selectedUserRole === 'PRCUSR') {
                $('.prcsr-entity').show();
            } else if (selectedUserRole === 'PRVDIR') {
                $('.prvdir-entity').show();
            } else if (selectedUserRole === 'ADMIN') {
                $('.adm-entity').show();
            }
            $('#rle_id').val(selectedUserRole);
        }

        function disableNonSelectedOptions() {
            for (var i = 0; i < select.options.length; i++) {
                if (!select.options[i].selected) {
                    select.options[i].disabled = true;
                }
            }
        }

        if (action === 'View') {
            var selectedUserRole = $('#usr_rl').val();
            showEntityBasedOnRole(selectedUserRole);
            disableNonSelectedOptions();
        }
        $('#usr_rl').change(function() {
            var selectedUserRole = $(this).val();


            showEntityBasedOnRole(selectedUserRole);
        });



    });

    function store_user_details() {
        var formData = new FormData($('#user-form')[0]);
        var selectedUserRole = $('#usr_rl').val();

        var action = "{{ $user['action'] }}";

        $.ajax({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
                type: 'POST',
                url: "{{ route('mng_user_store') }}",
                data: formData,
                contentType: false,
                processData: false,
                success: function(response) {

                    Swal.fire({
                        title: 'Success!',
                        text: 'Your changes have been saved.',
                        icon: 'success',
                        showConfirmButton: false,
                        timer: 2500
                    }).then(function() {
                        if ("{{ $user['action'] }}" === 'Add') {
                            $('#user-form').closest('form').find("input[type=text]").val("");
                        }
                        $('.datatable').DataTable();
                        location.reload();
                    });
            },
                error: function(data) {

                $('.error').empty();

                var errors = data.responseJSON.errors;

                $.each(errors, function(key, value) {

                    $("#" + key).closest('div').append("<span class='error'>" + value + " </span>");
                });

            }
        , });
    }
    $("#imageUpload").change(function() {
        readURL(this);
    });

    function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function(e) {
            $('#imagePreview').css('background-image', 'url('+e.target.result +')');
            $('#imagePreview').hide();
            $('#imagePreview').fadeIn(650);
        }
        reader.readAsDataURL(input.files[0]);
    }
}
</script>
@endpush