@extends('admin.layouts.main')

@section('title')
Franchises
@endsection

@section('content')

<main>
	<loading :active.sync="isLoading"></loading>

	<div class="two-col">

		@include("admin.common.sidebar")

		<div class="right-sec" v-cloak>

			<nav aria-label="breadcrumb">
				<ol class="breadcrumb">
					<li class="breadcrumb-item"><a href="javascript:void(0)">{{ @trans('franchises.franchises') }}</a>
					</li>
				</ol>
			</nav>

			<div class="top-bar d-flex align-items-center">
				<h2>{{ @trans('franchises.franchises') }}</h2>
				<div class="right-table-container ml-auto">
					<div class="form-group search-input">
						<img src="{{asset('/img/admin/ic_search.png')}}"
							srcset="{{asset('/img/admin/ic_search@2x.png')}} 2x" alt="search">
						<input type="text" name="search_text" @input="search" id="search_text" v-model="search_text"
							placeholder="Search">
						<i class="material-icons" v-if="search_text" @click="clearSearch">close</i>
					</div>
					@permission('franchise-write')
					<a href="{{ route('admin.franchise.showfrenchisedetail',['id' => null] )}}"
						class="btn btn-primary-em">Create New</a>
					@endpermission
				</div>
			</div>

			<div class="full-width-card">
				<ul class="m-0 p-0">
					<li class="box" v-for="(item,index) in items">
						<span class="card-img">
							<img :src="item.logo_src" width="150" height="100">
						</span>
						<div class="card-content">
							<h3 class="card-name">@{{ item.name }}</h3>
							<div class="abt">
								<span class="country-name"
									v-if="item.countries !== null">@{{ item.countries.name}}</span>
								<span class="country-name" v-if="item.countries == null ">-</span>
								<span class="product-name orange"
									v-if="item.franchise_type == 'coaching'">Coaching</span>
								<span class="product-name orange"
									v-if="item.franchise_type == 'mystery_program'">Mystery Program</span>
								<span class="product-name orange"
									v-if="item.franchise_type == 'recruitment'">Recruitment</span>
								<span class="card-date"><i
										class="material-icons">date_range</i>@{{ date(item.created_at)}}</span>
							</div>
						</div>
						<div class="card-act text-right">
							<span class="badge badge-pill badge-info"
								v-if="item.status == 'draft'">{{ @trans('franchises.draft') }}</span>
							<span class="badge badge-pill badge-success"
								v-if="item.status == 'active'">{{ @trans('franchises.active') }}</span>
							<span class="badge badge-pill badge-secondary"
								v-if="item.status == 'inactive'">{{ @trans('franchises.inactive') }}</span>
							<div class="d-flex">
								<a :href="'{{url('super-admin/franchises/show/')}}/'+ item.id"
									class="btn transparent-btn mr-3">{{ @trans('franchises.view') }}</a>

								<a :href="'{{url('impersonate/take')}}/'+ item.franchise_admin_user_id"
									class="btn transparent-btn">Login</a>
							</div>
						</div>
					</li>
				</ul>
			</div>

			<div class="row" v-if="!items.length && loaded == true">
				<div class="col-md-12">
					<div class="alert alert-warning" role="alert">
						{{ @trans('franchises.no_records_to_show') }}
					</div>
				</div>
			</div>
			<span v-if="items.length > 0">
				@include('admin.common.paginate_js')
			</span>

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

@endsection
@push('pageJs')
<script type="text/javascript">
	var franchiseJsonUrl = "{{route('admin.franchise.getindexjson')}}";
	@if(Session::has('message'))
	Snackbar.show({
		pos: 'bottom-right',
		text: "{!! session('message') !!}",
		actionText: 'Okay'
	});
	@endif
</script>
<script type="text/javascript" src="{{ asset('js/admin/franchise.js') }}"></script>
@endpush