@extends('layouts.app_settings')

@section('title', __( 'user.edit_user' ))
@section("css")
    <link rel="stylesheet" href="{{asset('assets/vendor/pages/page-profile.css')}}" />
@stop

@section('offcanvas-title',__('lang_v1.instructions'))

@section('offcanvas-end')
    <ul class="list-group">
        <li class="list-group-item " aria-current="true">{{ __( 'lang_v1.status_for_user') .' '. __('lang_v1.tooltip_enable_user_active')}}</li>
        <li class="list-group-item " aria-current="true">{{ __( 'role.access_locations' ) .' : '.__('tooltip.all_location_permission')}}</li>
        <li class="list-group-item " aria-current="true">{{ __('lang_v1.admin_role_location_permission_help')}}</li>
        <li class="list-group-item " aria-current="true">{{ __('business.username') .' : '. __('lang_v1.username_help')}}</li>
        <li class="list-group-item " aria-current="true">{{ __('business.password') .' : '. __('user.leave_password_blank')}}</li>

    </ul>
@stop

@section('content')

    <section class="content-header">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb breadcrumb-style1">
                <li class="breadcrumb-item">
                    <a href="#">{{__('home.home')}}</a>
                </li>
                <li class="breadcrumb-item">
                    <a href="#">{{__('user.manage_roles')}}</a>
                </li>
                <li class="breadcrumb-item active">{{__('new.employee_roles')}}</li>
                <button class=" btn-label-primary btn-sm" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasEnd" aria-controls="offcanvasEnd"><i class="ri-questionnaire-fill"></i></button>

            </ol>
        </nav>

    </section>
    <!-- Main content -->
    <section class="content">

        <div class="row w-transition-all tw-duration-200  tw-rounded-xl hover:tw-translate-y-0.5 " >
            <div class="col-12">
                <div class="card mb-6" >
                    <div class="user-profile-header-banner"  >
                        <img src="{{asset('assets/img/pages/profile-banner.png')}}" alt="Banner image" class="rounded-top">
                    </div>
                    <div class="user-profile-header d-flex flex-column flex-sm-row text-sm-start text-center mb-5">
                        <div class="flex-shrink-0 mt-n2 mx-sm-0 mx-auto">

                            @if(!@empty($user->emp_photo))
                                <img  src="{{ asset('assets/admin/uploads').'/'.$user->emp_photo }}"  class="d-block h-auto ms-0 ms-sm-5 rounded-4 user-profile-img">
                            @else

                                @if($user->gender ==1)
                                    <img  src="{{ asset('assets/admin/imgs/avatar-man.png') }}"    class="d-block h-auto ms-0 ms-sm-5 rounded-4 user-profile-img">
                                @elseif($user->gender ==2 )
                                    <img  src="{{ asset('assets/admin/imgs/avatar-woman.png') }}"   class="d-block h-auto ms-0 ms-sm-5 rounded-4 user-profile-img">
                                @else

                                    <img  src="{{ asset('assets/admin/imgs/not-selected.jpg') }}" class="d-block h-auto ms-0 ms-sm-5 rounded-4 user-profile-img">

                                @endif

                            @endif
                        </div>
                        <div class="flex-grow-1 mt-4 mt-sm-12">
                            <div class="d-flex align-items-md-end align-items-sm-start align-items-center justify-content-md-between justify-content-start mx-5 flex-md-row flex-column gap-6">
                                <div class="user-profile-info">
                                    <h4 class="mb-4">{{$user->first_name}}</h4>
                                    <ul class="list-inline mb-0 d-flex align-items-center flex-wrap justify-content-sm-start justify-content-center gap-4">
                                        <li class="list-inline-item">
                                            <i class="ri-palette-line me-2 ri-24px "  data-bs-toggle="tooltip" data-bs-placement="top" title="{{__('hr.job')}}"></i><span class="fw-medium">{{$user->jobs->name  ?? __('hr.not_added')}}</span>
                                        </li>
                                        <li class="list-inline-item">
                                            <i class="ri-album-fill me-2 ri-24px "  data-bs-toggle="tooltip" data-bs-placement="top" title="{{__('hr.department')}}"></i><span class="fw-medium">{{$user->departments->name ?? __('hr.not_added')}}</span>
                                        </li>
                                        <li class="list-inline-item">
                                            <i class="ri-map-pin-line me-2 ri-24px " data-bs-toggle="tooltip" data-bs-placement="top" title="{{__('business.business_location')}}"></i><span class="fw-medium"> {{ $user->location->name ?? __('hr.not_added')}}</span>
                                        </li>
                                    </ul>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {!! Form::open(['url' => action([\App\Http\Controllers\ManageUserController::class, 'update'], [$user->id]), 'method' => 'PUT', 'id' => 'user_edit_form' ]) !!}
        <div class="row">

            <div class="col-md-12">
                @component('components.widget', ['class' => 'card'])
                    <div class="col-md-2 hide ">
                        <div class="form-group">
                            {!! Form::label('surname', __( 'business.prefix' ) . ':') !!}
                            {!! Form::text('surname', $user->surname, ['class' => 'form-control', 'placeholder' => __( 'business.prefix_placeholder' ) ]); !!}
                        </div>
                    </div>
                    <div class="col-md-5  hide">
                        <div class="form-group">
                            {!! Form::label('first_name', __( 'business.first_name' )  ) !!}
                            {!! Form::text('first_name', $user->first_name, ['class' => 'form-control', 'placeholder' => __( 'business.first_name' ) ]); !!}
                        </div>
                    </div>
                    <div class="col-md-5 hide ">
                        <div class="form-group">
                            {!! Form::label('last_name', __( 'business.last_name' ) . ':') !!}
                            {!! Form::text('last_name', $user->last_name, ['class' => 'form-control', 'placeholder' => __( 'business.last_name' ) ]); !!}
                        </div>
                    </div>


                    <div class="col-md-3 ">
                        <div class="form-group">
                            <div class="form-check custom-option custom-option-basic">
                                <label class="form-check-label custom-option-content" >
                                    {!! Form::checkbox('is_active', $user->status, $is_checked_checkbox, ['class' => 'form-check-input status']); !!} {{ __('lang_v1.status_for_user') }}
                                </label>
                                @show_tooltip(__('lang_v1.tooltip_enable_user_active'))
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <div class="form-check custom-option custom-option-basic">
                                <label class="form-check-label custom-option-content" >
                                    {!! Form::checkbox('allow_login', 1, !empty($user->allow_login),
                                    [ 'class' => 'form-check-input', 'id' => 'allow_login']); !!} {{ __( 'lang_v1.allow_login' ) }}
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-floating form-floating-outline">
                            {!! Form::select('role', $roles, !empty($user->roles->first()->id) ? $user->roles->first()->id : null, ['class' => 'form-control select2', 'style' => 'width: 100%;']); !!}
                            {!! Form::label('role', __( 'user.role' ) . ':*') !!} @show_tooltip(__('lang_v1.admin_role_location_permission_help'))
                        </div>
                    </div>
                    <div class="clearfix"></div>

                    <div class="user_auth_fields mt-5  {{ $user->allow_login == 1 ? '' : 'hide' }}">
                        <div class="col-md-3">
                            <div class="form-floating form-floating-outline">
                                {!! Form::text('email', $user->email, ['id'=>'email','class' => 'form-control', 'placeholder' => __( 'business.email' ) ]); !!}
                                {!! Form::label('email', __( 'new.email' ) . ':*') !!}
                            </div>

                        </div>

                        <div class="col-md-3">
                            <div class="form-floating-outline form-floating">
                                @if(!empty($username_ext))
                                    <div class="input-group">
                                        {!! Form::text('username', $user->username ?? null, ['class' => 'form-control', 'placeholder' => __( 'business.username' ) ]); !!}
                                        <span class="input-group-addon">{{$username_ext}}</span>
                                    </div>
                                    <p class="help-block" id="show_username"></p>
                                @else
                                    {!! Form::text('username', $user->username ?? null, ['id' => 'username', 'class' => 'form-control', 'placeholder' => __( 'business.username' ) ]); !!}
                                @endif
                                {!! Form::label('username', __( 'business.username' ) . ':') !!}
                                <input type="hidden" value="{{$user->id}}" id="user_id">
                            </div>
                        </div>

                        <div class="col-md-3">
                            <div class="form-floating form-floating-outline">
                                {!! Form::password('password', ['id' => 'password','class' => 'form-control', 'placeholder' => __( 'business.password'), 'required' => empty($user->allow_login) ? true : false
                                 ,'value' => '', 'autocomplete' => 'new-password']); !!}
                                {!! Form::label('password', __( 'business.password' ) . ':') !!}
                             </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-floating form-floating-outline">
                                {!! Form::password('confirm_password', ['id' => 'confirm_password','class' => 'form-control', 'placeholder' => __( 'business.confirm_password' ), 'required' => empty($user->allow_login) ? true : false ]); !!}
                                {!! Form::label('confirm_password', __( 'business.confirm_password' ) . ':') !!}

                            </div>
                        </div>

                        <div class="clearfix"></div>

                    </div>
                    <div class="divider">
                        <div class="divider-text text-bold">@lang( 'role.access_locations' ) @show_tooltip(__('tooltip.access_locations_permission'))</div>
                    </div>

                    <div class="col-md-12">
                        <div class="col-md-3">
                            <div class="form-check custom-option custom-option-basic">
                                <label class="form-check-label custom-option-content">

                                    {!! Form::checkbox('access_all_locations', 'access_all_locations', !is_array($permitted_locations) && $permitted_locations == 'all',
                                  [ 'class' => 'form-check-input']); !!} {{ __( 'role.all_locations' ) }}
                                </label>
                                @show_tooltip(__('tooltip.all_location_permission'))
                            </div>
                        </div>
                        @foreach($locations as $location)
                            <div class="col-md-3">
                                <div class="form-check custom-option custom-option-basic">
                                    <label class="form-check-label custom-option-content">
                                        {!! Form::checkbox('location_permissions[]', 'location.' . $location->id, is_array($permitted_locations) && in_array($location->id, $permitted_locations),
                                        [ 'class' => 'form-check-input']); !!} {{ $location->name }} @if(!empty($location->location_id))({{ $location->location_id}}) @endif
                                    </label>
                                </div>
                            </div>
                        @endforeach
                    </div>


                    <div class="col-md-3 hide">
                        <div class="form-group">
                            <div class="checkbox">
                                <br/>
                                <label>
                                    {!! Form::checkbox('is_enable_service_staff_pin', 1, $user->is_enable_service_staff_pin, ['class' => 'form-check-input status', 'id' => 'is_enable_service_staff_pin']); !!} {{ __('lang_v1.enable_service_staff_pin') }}
                                </label>
                                @show_tooltip(__('lang_v1.tooltip_is_enable_service_staff_pin'))
                            </div>
                        </div>
                    </div>
                    <div class="col-md-2 service_staff_pin_div {{ $user->is_enable_service_staff_pin == 1 ? '' : 'hide' }}">
                        <div class="form-group">
                            {!! Form::label('service_staff_pin', __( 'lang_v1.staff_pin' ) . ':') !!}
                            {!! Form::password('service_staff_pin', ['class' => 'form-control','placeholder' => __( 'lang_v1.staff_pin' ) ]); !!}
                        </div>
                    </div>

                @endcomponent
            </div>


            <div class="col-md-12 hide">
                @component('components.widget', ['title' => __('sale.sells')])

                    <div class="col-md-4">
                        <div class="form-group">
                            {!! Form::label('cmmsn_percent', __( 'lang_v1.cmmsn_percent' ) . ':') !!} @show_tooltip(__('lang_v1.commsn_percent_help'))
                            {!! Form::text('cmmsn_percent', !empty($user->cmmsn_percent) ? @num_format($user->cmmsn_percent) : 0, ['class' => 'form-control input_number', 'placeholder' => __( 'lang_v1.cmmsn_percent' )]); !!}
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="form-group">
                            {!! Form::label('max_sales_discount_percent', __( 'lang_v1.max_sales_discount_percent' ) . ':') !!} @show_tooltip(__('lang_v1.max_sales_discount_percent_help'))
                            {!! Form::text('max_sales_discount_percent', !is_null($user->max_sales_discount_percent) ? @num_format($user->max_sales_discount_percent) : null, ['class' => 'form-control input_number', 'placeholder' => __( 'lang_v1.max_sales_discount_percent' ) ]); !!}
                        </div>
                    </div>
                    <div class="clearfix"></div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <div class="checkbox">
                                <br/>
                                <label>
                                    {!! Form::checkbox('selected_contacts', 1,
                                    $user->selected_contacts,
                                    [ 'class' => 'form-check-input', 'id' => 'selected_contacts']); !!} {{ __( 'lang_v1.allow_selected_contacts' ) }}
                                </label>
                                @show_tooltip(__('lang_v1.allow_selected_contacts_tooltip'))
                            </div>
                        </div>
                    </div>

                    <div class="col-sm-4 selected_contacts_div @if(!$user->selected_contacts) hide @endif">
                        <div class="form-group">
                            {!! Form::label('user_allowed_contacts', __('lang_v1.selected_contacts') . ':') !!}
                            <div class="form-group">
                                {!! Form::select('selected_contact_ids[]', $contact_access, array_keys($contact_access), ['class' => 'form-control select2', 'multiple', 'style' => 'width: 100%;', 'id' => 'user_allowed_contacts' ]); !!}
                            </div>
                        </div>
                    </div>
                @endcomponent
            </div>
        </div>

        <div class="row">
            <div class="col-md-12 text-center">
                <button type="submit" class="btn btn-primary btn-lg" id="submit_user_button">@lang( 'messages.update' )</button>
            </div>
        </div>
        {!! Form::close() !!}
        @stop
        @section('javascript')
            <script type="text/javascript">
                $(document).ready(function(){
                    __page_leave_confirmation('#user_edit_form');

                    $('#selected_contacts').on('ifChecked', function(event){
                        $('div.selected_contacts_div').removeClass('hide');
                    });
                    $('#selected_contacts').on('ifUnchecked', function(event){
                        $('div.selected_contacts_div').addClass('hide');
                    });

                    $('#is_enable_service_staff_pin').on('ifChecked', function(event){
                        $('div.service_staff_pin_div').removeClass('hide');
                    });

                    $('#is_enable_service_staff_pin').on('ifUnchecked', function(event){
                        $('div.service_staff_pin_div').addClass('hide');
                        $('#service_staff_pin').val('');
                    });

                    $("#allow_login").change(function() {
                        allow_login_changed();
                    });

                    function allow_login_changed() {
                        if($('#allow_login').is(":checked")) {
                            $('div.user_auth_fields').removeClass('hide');

                        } else {
                            $('div.user_auth_fields').addClass('hide');
                        }
                    }


                    $('#user_allowed_contacts').select2({
                        ajax: {
                            url: '/contacts/customers',
                            dataType: 'json',
                            delay: 250,
                            data: function(params) {
                                return {
                                    q: params.term, // search term
                                    page: params.page,
                                    all_contact: true
                                };
                            },
                            processResults: function(data) {
                                return {
                                    results: data,
                                };
                            },
                        },
                        templateResult: function (data) {
                            var template = '';
                            if (data.supplier_business_name) {
                                template += data.supplier_business_name + "<br>";
                            }
                            template += data.text + "<br>" + LANG.mobile + ": " + data.mobile;

                            return  template;
                        },
                        minimumInputLength: 1,
                        escapeMarkup: function(markup) {
                            return markup;
                        },
                    });

                });
                const errorSound = new Audio('{{asset("/audio/error.mp3")}}'); // تأكد من وجود الملف الصوتي

                $('form#user_edit_form').validate({
                    errorPlacement: function (error, element) {
                        
                        // عرض رسالة الخطأ في Toast
                        toastr.error(error.text());
                        errorSound.play()
                    },

                    errorElement: 'div',
                    rules: {
                        email: {
                            email: true,
                            remote: {
                                url: "/business/register/check-email",
                                type: "post",
                                data: {
                                    email: function() {
                                        return $( "#email" ).val();
                                    },
                                    user_id: {{$user->id}}
                                }
                            }
                        },
                        password: {
                            minlength: 5
                        },
                        confirm_password: {
                            equalTo: "#password",
                        },
                        username: {
                            minlength: 5,
                            remote: {
                                url: "/business/register/check-username",
                                type: "post",
                                data: {
                                    username: function() {
                                        return $( "#username" ).val();
                                    },user_id: function() {
                                        return $( "#user_id" ).val();
                                    },
                                    @if(!empty($username_ext))
                                    username_ext: "{{$username_ext}}"
                                    @endif
                                }
                            }
                        }
                    },
                    messages: {
                        password: {
                            required: '{{__("business.password"). ' '. __("validation.required")}}',
                            minlength: '{{__("validation.password_min_length")}}',
                        },
                        confirm_password: {
                            equalTo: '{{__("business.confirm_password"). ' '. __("validation.Should be same as password")}}',
                            required: '{{__("business.confirm_password"). ' '.__("validation.required")}}',
                        },
                        username: {
                            remote: '{{__("validation.invalid_username")}}',
                            minlength: '{{__("validation.username_min_length")}}'
                        },

                        email: {
                            remote: '{{ __("validation.unique", ["attribute" => __("business.email")]) }}',
                            email: '{{ __("validation.email") }}',
                        },
                    }
                });




            </script>
@endsection