@extends('theme.layouts.freelancer')
@section('content')
<main id="site-main" ng-cloak ng-app="homeApplication" ng-controller="clientsController">
    @include('theme.layouts.partials.loading')
    <div class="wrap">
        <div class="content-container clients">
            <section class="data-table">
                <header class="data-table__header">
                    <h2 class="page-heading">
                        <svg width="38px" height="37px" viewBox="0 0 38 38">
                            <g id="Pages" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
                                <g stroke-width="1.5">
                                    <path class="svg-stroke" d="M18,18 C20.7417273,18 22.9090909,15.9962727 22.9090909,13.0909091 L22.9090909,10.6363636 C22.9090909,7.731 20.7417273,5.72727273 18,5.72727273 C15.2582727,5.72727273 13.0909091,7.731 13.0909091,10.6363636 L13.0909091,13.0909091 C13.0909091,15.9962727 15.2582727,18 18,18 Z" id="Stroke-1"></path>
                                    <path class="svg-stroke" class="svg-stroke" d="M27.8181818,30.2727273 L27.8181818,26.1818182 C27.8181818,22.5155455 21.3021818,20.4545455 18,20.4545455 C14.6978182,20.4545455 8.18181818,22.5155455 8.18181818,26.1818182 L8.18181818,30.2727273" id="Stroke-3"></path>
                                    <path class="svg-stroke" d="M36,18 C36,27.9409091 27.9409091,36 18,36 C8.05909091,36 0,27.9409091 0,18 C0,8.05909091 8.05909091,0 18,0 C27.9409091,0 36,8.05909091 36,18 Z" id="Stroke-5"></path>
                                </g>
                            </g>
                        </svg>
                        {{ trans('clients.clients') }}
                    </h2><!-- data-table__heading -->
                </header><!-- end billing-header -->
                <div class="data-table__wrap">
                    <header class="data-table__controls">
                        <select class="select-link" id="tab-links-select">
                            <option value="0" >
                                {{ trans('clients.all_clients') }} (@{{ clients?( clients.total ):0 }})
                            </option>
                            <option value="1" >
                                {{ trans('clients.invited') }} (@{{ invitedClients?( invitedClients.total ):0 }})
                            </option>
                        </select>
                        <ul class="nav nav-pills" id="pills-tab" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active" id="pills-all-clients-pill" data-toggle="pill" href="#pills-all-clients" role="tab" aria-controls="pills-all-clients" aria-selected="true">{{ trans('clients.all_clients') }} (@{{ clients?( clients.total ):0 }})</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="pills-invited-client-pill" data-toggle="pill" href="#pills-invited-client" role="tab" aria-controls="pills-invited-client" aria-selected="false">{{ trans('clients.invited') }} (@{{ invitedClients?( invitedClients.total ):0 }})</a>
                            </li>
                        </ul>
                        <div class="data-table__btn-wrap">
                            <a href="javascript:;" class="xl-download" ng-click="downloadExcel()">
                                <svg xmlns="http://www.w3.org/2000/svg" width="26" height="25" viewBox="0 0 26 25">
                                    <g fill="#0CC5D1" fill-rule="evenodd">
                                        <path d="M24.375 19.458h-9.75v-1.621h2.438a.812.812 0 1 0 0-1.622h-2.438v-1.621h2.438a.812.812 0 1 0 0-1.622h-2.438v-1.621h2.438a.812.812 0 1 0 0-1.622h-2.438V8.108h2.438a.812.812 0 1 0 0-1.622h-2.438V4.864h9.75v14.594zM13 22.534L1.625 20.407V3.916L13 1.789v20.745zM25.188 3.243H14.624V.811a.808.808 0 0 0-.962-.796l-13 2.432A.809.809 0 0 0 0 3.243V21.08c0 .389.278.724.663.796l13 2.432a.813.813 0 0 0 .962-.796V21.08h10.563a.812.812 0 0 0 .812-.811V4.054a.812.812 0 0 0-.813-.811z"></path>
                                        <path d="M20.129 8.387h1.677a.839.839 0 0 0 0-1.677H20.13a.839.839 0 0 0 0 1.677M20.129 11.892h1.677a.839.839 0 0 0 0-1.678H20.13a.839.839 0 0 0 0 1.678M20.129 14.677h1.677a.839.839 0 0 0 0-1.677H20.13a.839.839 0 0 0 0 1.677M20.129 17.463h1.677a.839.839 0 0 0 0-1.677H20.13a.839.839 0 0 0 0 1.677M7.953 12.351l2.681-3.447a.838.838 0 1 0-1.323-1.032l-2.483 3.193-2.092-2.391a.838.838 0 1 0-1.263 1.104l2.306 2.636-2.338 3.007a.84.84 0 0 0 .663 1.353c.248 0 .496-.11.66-.322l2.14-2.752 2.439 2.787a.836.836 0 0 0 1.184.08.837.837 0 0 0 .079-1.183L7.953 12.35z"></path>
                                    </g>
                                </svg>
                                <span>download .xls</span>
                            </a>
                            <a href="#" id="update-payment" class="tu-btn-circular pink outline">
                                <svg width="16" height="12" viewBox="0 0 16 12">
                                    <path stroke-width="2" d="M1 5.667l4.667 4.666L15 1"/>
                                </svg>
                            </a>
                            <div class="btn-row">
                                <form class="data-table__search" ng-show="isEmpty(clientDetails)">
                                    <input type="text" ng-model="searchKey" ng-keyup="init()" placeholder="{{ trans('clients.type_search_here') }}"/>
                                    <a href="javascript:;" id="search-open">
                                        <svg width="20" height="19" viewBox="0 0 20 19">
                                            <g class="svg-stroke" fill="none" fill-rule="evenodd" stroke-width="1.5" transform="translate(1 1)">
                                                <circle cx="7" cy="7" r="7"/>
                                                <path stroke-linecap="square" d="M13.5 12.5L18 17"/>
                                            </g>
                                        </svg>
                                    </a>
                                    <svg id="search-close" width="15" height="15" class="close-icon" version="1.1" x="0px" y="0px" viewBox="0 0 14 14" style="enable-background:new 0 0 14 14;" xml:space="preserve">
                                        <path class="svg-stroke" fill="none" stroke-width="2" stroke-linecap="square" d="M2.8,11.2l8.5-8.5 M2.8,2.8l8.5,8.5"/>
                                    </svg>
                                </form>
                                <a href="javascript:;" data-toggle="modal" data-target="#newClient" class="tu-btn-circular pink add-button" ng-click="reset(inviteClientInfo)" ng-show="isEmpty(clientDetails)">
                                    <svg width="14" height="14" viewBox="0 0 14 14">
                                        <g fill="none" fill-rule="evenodd" stroke="#FFF" stroke-linecap="square" stroke-width="2">
                                            <path d="M1 7h12M7 1v12"/>
                                        </g>
                                    </svg>
                                </a>
                                <a href="javascript:;" class="tu-btn-circular pink add-button clicked" ng-hide="isEmpty(clientDetails)" ng-click="closeClientDetails()">
                                    <svg width="14" height="14" viewBox="0 0 14 14">
                                        <g fill="none" fill-rule="evenodd" stroke="#FFF" stroke-linecap="square" stroke-width="2">
                                            <path d="M1 7h12M7 1v12"/>
                                        </g>
                                    </svg>
                                </a>
                            </div>
                        </div>
                    </header><!-- end header -->
                    
                    <div class="tab-content data-table__tab-content" id="pills-tabContent" ng-show="isEmpty(clientDetails)">
                        <div class="tab-pane fade show active" id="pills-all-clients" role="tabpanel" aria-labelledby="pills-all-clients-tab">
                            @include('theme.freelancer.clients.all-clients')
                        </div>
                        <div class="tab-pane fade" id="pills-invited-client" role="tabpanel" aria-labelledby="pills-invited-client-tab">
                            @include('theme.freelancer.clients.invited-clients')
                        </div>
                    </div>
                    @include('theme.freelancer.clients.client-details')
                </div><!-- end data-table__wrap -->
                @include('theme.freelancer.clients.modal-invite-new-client')
            </section><!-- end data-table -->
        </div><!-- end content-container -->
    </div>
</main>
@endsection

@section('scripts')
    <script>
        window.baseUrl = "{{ URL::to('/') }}";
        window.currency = "@php echo $freelancer->user->currency @endphp";
        window.freelancer = {
            id: {{ $freelancer->id }},
            is_available: {{ $freelancer->freelancer_visibility_id }}
        };
	</script>
    <script src="/theme/js/lib/moment.js"></script>
    <script src="/theme/js/freelancer/js/common.js"></script>    
    <script src="/theme/js/freelancer/js/clients/clients-ctrl.js"></script>
@endsection