@extends('layouts.agency')

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

@section('style-libraries')

@stop

@section('styles')
    
@stop

@section('content')
<div id="content">
    <section id="account" class="mb-30">
        <div class="w3-container">
            @if(session('successCreateAcc'))
                <div id="auth" class="w3-modal">
                    <div class="w3-modal-content">
                    <div class="w3-containe w3-center">
                        <h3>{{ __('website.notify') }}</h3>
                        <p>{{ __('auth.success_message_create_account') }}</p>
                    </div>
                    </div>
                </div>
            @endif
            <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-card ">
                        <div class="table-responsive" style="overflow-x:auto;">
                            @if($manageraccounts->count() > 0)
                            <table class="my-table">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>{{trans('website.service')}}</th>
                                        <th>{{trans('website.total_account')}}</th>
                                        <th>{{trans('website.account_opened')}}</th>
                                        <td>{{__('message.action')}}</td>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($manageraccounts as $index => $manageraccount)
                                        <tr>
                                            <td>
                                                {{$index+1}}
                                            </td>
                                            <td>{{ $manageraccount->service->name }}</td>
                                            <td>{{ $manageraccount->total_account }}</td>
                                            <td>{{ $manageraccount->used_account }}</td>
                                            @if ($manageraccount->used_account != $manageraccount->total_account)
                                                <td>
                                                    <a href="{{route('agency.addAccount.agency',$manageraccount->service_id)}}"> <button class="btn btn-primary" type="button" >{{__('website.create_account')}}</button></a>
                                                </td>
                                            @else
                                                <td>
                                                    <a href="{{route('agency.buy.account')}}"> <button class="btn btn-primary" type="button" >{{__('website.register')}}</button></a>
                                                </td>
                                            @endif
                                            
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                            @else
                                <h4>{{__('message.no_service')}}</h4>
                            @endif
                          
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>  
</div>

@stop
@section('scripts')
	<script type="text/javascript">
		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';
			}
    	});
	</script>
@stop