@extends('layouts.agency')

@section('title', __('message.manager_account').' | ITVJP.COM Seller')

@section('style-libraries')

@stop

@section('styles')
    <style>
        .custom-modal-content {
            width: 40%;
            padding: 20px;
            border-radius: 10px; 
        }

        .w3-modal.hide {
            display: none;
        }

        .w3-modal.show {
            display: block;
        }

		.select2-container{
			width: 100% !important;
		}
		.td-left {
			text-align: left !important;
			padding-left: 0px !important;
		}
		.select2-selection {
			height: 35px !important;
			background: #1a40487d !important; 
			border: 1px solid #ccc !important;
		}
		.select2-container--default .select2-selection--single .select2-selection__rendered {
			color: white !important;
			padding-top: 3px !important;
		}
    </style>
@stop

@section('content')
<div id="content">
    <section id="account" class="mb-30">
        <div class="w3-container">
            @if(session('successUnlockAccount'))
                <div id="auth" class="w3-modal">
                    <div class="w3-modal-content">
                    <div class="w3-containe w3-center">
                        <h3>{{ __('website.notify') }}</h3>
                        <p>{{ session('successUnlockAccount') }}</p>
                    </div>
                    </div>
                </div>
            @endif

            @if(session('success_changepassword'))
                <div id="auth" class="w3-modal">
                    <div class="w3-modal-content">
                        <div class="w3-containe w3-center">
                            <h3>{{ __('website.notify') }}</h3>
                            <p>{{ session('success_changepassword') }}</p>
                        </div>
                    </div>
                </div>
            @endif

            @if($errors->has('current_password'))
                <div id="auth" class="w3-modal w3-modal-err">
                    <div class="w3-modal-content-err">
                        <div class="w3-containe w3-center">
                            <h3>{{ __('website.notify') }}</h3>
                            {{ $errors->first('current_password') }}
                        </div>
                    </div>
                </div>
            @endif
            @if($errors->has('unknow'))
                <div id="auth" class="w3-modal w3-modal-err">
                    <div class="w3-modal-content-err">
                        <div class="w3-containe w3-center">
                            <h3>{{ __('website.notify') }}</h3>
                            {{ $errors->first('unknow') }}
                        </div>
                    </div>
                </div>
            @endif
            <div id="auth" class="w3-modal hide">
                <div class="w3-modal-content" style="top: 40%">
                <div class="w3-containe w3-center">
                    <h3>{{ __('website.notify') }}</h3>
                    <p id="success_message"></p>
                </div>
                </div>
            </div>
            <div id="auth_err" class="w3-modal hide">
                <div class="w3-modal-content" style="top: 40%">
                <div class="w3-containe w3-center">
                    <h3>{{ __('website.notify') }}</h3>
                    <p id="error_message"></p>
                </div>
                </div>
            </div>
            <h3 class="fw-700 text-center">{{ __('message.manage_the')}}</h3>
            <h3 class="fw-700">{{trans('message.accounts_and_services')}} </h3>
            <p>{{ @$sub_page }}</p>
            <div class="w3-row mt-20">
                <div class="w3-col s12 m3 mb-30">
                    <div class="w3-card pro-menu">
                        @include('pages.agency.profile.nav')
                    </div>
                </div>
              
                <div class="w3-col s12 m9">
                    <div class="w3-row">
                        <div class="w3-col s6" style="display: flex;gap: 10px;">
                            <select name="service_id" class="form-control select2 w3-input w3-border w3-round-large" id="service_id"  data-allow-clear="true"  data-placeholder="{{__('website.select_package')}}"  onchange="updateLink()">
                                <option value="">{{__('website.select_package')}}</option>
                                @foreach ($filteredServices as $filteredService)
                                    <option value="{{$filteredService->service->id}}"  class="service">{{$filteredService->service->name}} ({{$filteredService->total_account - $filteredService->used_account}} {{__('message.account')}})</option>
                                @endforeach
                            </select>

                            <a id="add_account_link" href="">
                                <button class="btn" type="submit" style="white-space: nowrap"  onclick="checkServiceId()">+ {{__('message.creaed_account')}}</button>
                            </a>
                           
                        </div>
                    </div>
                    &nbsp;
                    <div class="w3-card ">
                        <div class="table-responsive" style="overflow-x:auto;">
                            @if($accounts->count() > 0)
                                <table class="my-table">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>{{trans('message.email')}}</th>
                                            <th>{{__('message.package_subscription')}}</th>
                                            <th>{{trans('message.initial_login_date')}}</th>
                                            <th>{{__('message.expiration_date')}}</th>
                                            <th>{{__('message.status')}}</th>
                                            <th>{{__('message.action')}}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($accounts as $account)
                                            <tr>
                                                <td>{{ $loop->index + 1 }}</td>
                                                <td>{{ $account->email }}</td>
                                                <td>
                                                    @if (@$account->active_service->service)
                                                        {{@$account->active_service->service->name}}
                                                    @elseif(@$account->accountServiceTmp->service)
                                                        {{@$account->accountServiceTmp->service->name}} <br>
                                                        <li style="white-space: nowrap;">{{$account->created_at}}</li>
                                                    @else
                                                        
                                                    @endif
                                                </td> 
                                                <td>
                                                    @if ($account->first_login != null)
                                                        {{ $account->first_login }}
                                                    @else
                                                    <span class="w3-text-red"> {{__('website.account_not_activated')}}</span>
                                                    @endif
                                                </td>
                                                <td>
                                                    @if(isset($account->active_service->started_at))
                                                        <li style="white-space: nowrap;">{{ @$account->created_at }}</li>
                                                        <li>{{ @$account->active_service->started_at->format('Y-m-d') }} <b>to</b> {{ @$account->active_service->expiration_at->format('Y-m-d') }}</li>
                                                    @endif
                                                </td>
                                                <td>
                                                    @if($account->status == 1)
                                                        <a style="white-space: nowrap;" class="btn @if ($account->first_login == null) hide  @endif">{{ __('website.active') }}</a>
                                                    @else
                                                        <a style="white-space: nowrap;" class="btn btn-danger @if ($account->first_login == null) hide  @endif ">{{ __('website.inactive') }}</a>
                                                    @endif
                                                </td>
                                                <td style="white-space: nowrap;">
                                                    
                                                    @if($account->status == 1)
                                                        <button type="button" class="w3-button w3-large w3-opacity-min lockAccount @if ($account->first_login == null) hide  @endif" data-id="{{ $account->id}}" data-email="{{$account->email}}" data-status="{{$account->status}}" title="{{__('website.lock_account')}}" onclick="lockAccount({{ $account->id }})">
                                                            <img src="{{ asset('images/account/lock.png') }}" alt="" width="20">
                                                        </button>
                                                    @else
                                                        <button type="button" class="w3-button w3-large w3-opacity-min lockAccount @if ($account->first_login == null) hide  @endif" data-id="{{ $account->id}}" data-email="{{$account->email}}" data-status="{{$account->status}}" title="{{__('website.unlock_account')}}" onclick="lockAccount({{ $account->id }})">
                                                            <a href=""><img src="{{asset('images/account/unlock.png')}}" alt="" width="20"></a>
                                                        </button>
                                                    @endif
                                                    <button type="button" class="w3-button w3-large w3-opacity-min changepassowrd" data-user="{{$account->email}}" data-idaccount="{{$account->id}}" title="{{__('website.reset_password')}}">
                                                        <img src="{{asset('images/account/key.png')}}" alt="" width="20">
                                                    </button>
                                                
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                                {{ $accounts->links() }}
                            @else
                                <h4>{{__('message.no_account')}}</h4>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>  
</div>
<div id="passwordModal" class="w3-modal hide">
    <div class="w3-modal-content custom-modal-content">
        <div class="w3-container">
            <h3 class="w3-center">{{ __('website.reset_password') }} - {{__('message.account')}} <span id="account_email"></span></h3>
            &nbsp;
            <form action="{{route('agency.postChangePassword.account')}}" method="post" id="formchangepassword">
                {!! csrf_field() !!}
                <input type="hidden" id="id_account" name="id_account">
                <div class="form-input">
                    <label class="w3-text fw-700 @if($errors->has('new_password')) w3-text-red @endif" for="new_password">{{__('website.new_password')}}</label>
                    <input type="password" class="w3-input w3-border w3-round-large w3-change-password w3-input-color @if($errors->has('new_password')) w3-border-red @endif" readonly onfocus="this.removeAttribute('readonly');" autocomplete="off" autofill="off" id="new_password" name="new_password" value="{{ old('new_password') }}" placeholder/>
                    <div class="help-block" id="passwordError"></div>
                </div>
                <div class="form-input">
                    <label class="w3-text fw-700 @if($errors->has('confirm_new_password')) w3-text-red @endif" for="confirm_new_password">{{__('website.confirm_new_password')}}</label>
                    <input type="password" class="w3-input w3-border w3-round-large w3-change-password w3-input-color @if($errors->has('confirm_new_password')) w3-border-red @endif" readonly onfocus="this.removeAttribute('readonly');" autocomplete="off" autofill="off" id="confirm_new_password" name="confirm_new_password" value="{{ old('confirm_new_password') }}" placeholder/>
                    <div class="help-block" id="rePasswordError"></div>
                </div>
                <div class="form-input">
                    <button class="btn btn-login disabled" type="submit" id="submit_change_password">{{ trans('website.change_password') }}</button>
                </div>
            </form>
        </div>
    </div>
</div>
@stop
@section('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
    <link rel="stylesheet" href="{{url('css/jquery-ui.css')}}">
	<script src="{{ url('js/packages/jquery-ui.js')}}"></script>
	<script src="{{ url('js/packages/select2.min.js') }}"></script>
	<link rel="stylesheet" href="{{ url('css/select2.min.css') }}">
	<script type="text/javascript">
        function updateLink() {
            var serviceId = document.getElementById("service_id").value;
            var link = "{{ route('agency.addAccount.agency', ':serviceId') }}";
            link = link.replace(':serviceId', serviceId);
            document.getElementById("add_account_link").href = link;
        }
        $(document).ready(function() {
			$('.select2').select2();
		});
        function checkServiceId() {
            var serviceId = document.getElementById("service_id").value;
            if (serviceId === "") {
                alert('{{__('message.please_select')}}');
                return false;
            }
        }
		var modal = document.getElementById('auth');
		var timeout = 3000;
		setTimeout(function() {
			modal.style.display = 'none';
		}, timeout);

		window.addEventListener('click', function(event) {
			if (event.target !== modal) {
				modal.style.display = 'none';
			}
    	});

        $('#new_password').on('input', function() {
	        var passwordValue = $('#new_password').val();
	        var errorMessage = $('#passwordError');
	        var rePassword = $('#confirm_new_password').val();

	        if (passwordValue.length < 6) {
	        	$('#new_password').removeClass('success');
	            errorMessage.text('{{__('message.password_length')}}');
	        } else if (/\s/.test(passwordValue)) {
	        	$('#new_password').removeClass('success');
	            errorMessage.text('{{__('message.password_spaces')}}');
	        } else if( rePassword != "" && passwordValue != rePassword){
	        	$('#new_password').removeClass('success');
	        	errorMessage.text('{{__('message.password_confirmation')}}');
	        }else {
	        	$('#new_password').addClass('success');
	            errorMessage.text('');
	        }
	    });

	    $('#confirm_new_password').on('input', function() {
	        var passwordValue = $('#new_password').val();
	        var rePassword = $('#confirm_new_password').val();
	        var errorMessage = $('#rePasswordError');

	        if( passwordValue != rePassword){
	        	$('#confirm_new_password').removeClass('success');
	        	errorMessage.text('{{__('message.password_confirmation')}}');
	        }else {
	        	$('#confirm_new_password').addClass('success');
	            errorMessage.text('');
	        }
	    });

        
	    $('#new_password, #confirm_new_password').on('input', function() {
	    	if( $('.success').length != 2 ){
	    		$('#submit_change_password').addClass('disabled');
	    		$('#subsubmit_change_passwordmit').attr('disabled', true);
	    	}else {
	    		$('#submit_change_password').removeClass('disabled');
	    		$('#submit_change_password').attr('disabled', false);
	    	}
	    });

	    $('#formchangepassword').on('submit', function(event) {
	    	$('#submit_change_password').addClass('disabled');
	    	$('#submit_change_password').attr('disabled', true);
		});

        $('.lockAccount').on('click', function(event) {
            event.preventDefault();
            var email = $(this).attr('data-email');
            var status = $(this).attr('data-status');
            if(status==1){
                 if (!window.confirm('{{__('website.confirm_lock')}}' + email + '?')) {
                    return;
                }
            }else {
                if (!window.confirm('{{__('website.confirm_unlock')}}' + email + '?')) {
                    return;
                }
            }
           
            var id = $(this).attr('data-id');
            var _token = '{{ csrf_token() }}';
            var data = { _token: _token, id: id };
            var url = "{{ route('agency.profile.lockAccount') }}";

            $.post(url, data, function(result) {
                if (result.status === 'success') {
                    var modal = document.getElementById('auth');
                    $('#auth').removeClass('hide').addClass('show');
                    $('#success_message').text(result.message)
                    setTimeout(function() {
                        $('#auth').removeClass('show').addClass('hide');
                        location.reload();
                    }, 3000);
                    window.addEventListener('click', function(event) {
                        if (event.target !== modal) {
                            $('#auth').removeClass('show').addClass('hide');
                            location.reload();
                        }
                    });

                } else if (result.status === 'error') {
                    var modal = document.getElementById('auth');
                    $('#auth_err').removeClass('hide').addClass('show');
                    $('#error_message').text(result.message)
                    setTimeout(function() {
                        $('#auth_err').removeClass('show').addClass('hide');
                        location.reload();
                    }, 3000);
                    window.addEventListener('click', function(event) {
                        if (event.target !== modal) {
                            $('#auth').removeClass('show').addClass('hide');
                            location.reload();
                        }
                    });
                }
            })
        });

        $('.changepassowrd').on('click', function() {
            event.preventDefault();
            $('#passwordModal').removeClass('hide').addClass('show');
            var email = $(this).attr('data-user');
            var id_account = $(this).attr('data-idaccount');
            $('#account_email').text(email);
            $('#id_account').val(id_account);
            
        });
        
        window.addEventListener('click', function(event) {
            var modal = document.getElementById('passwordModal');
            if (event.target === modal) {
                $('#passwordModal').removeClass('show').addClass('hide');
            }
        });
        $('#resetPasswordButton').on('click', function() {
            $('#passwordModal').removeClass('show').addClass('hide');
        });
        
	</script>
@stop