@extends('app_client')

@section('title', ' Resident Perks | ' . $property->name)

@section('content')
    <div class="container-fluid" ng-controller="PerkCtlr as vm" ng-init="vm.get_perks({{ $filter_category }})">
        <!-- Header -->
        <div class="page-header" ng-controller="modalCtlr">
            <div class="header left">
                <span class="icon icon-price_tag_finance_product_info_details"></span>
                <h1 class="header-title">
                    @if ($property->slug == 'lcn')
                        {{ 'Concierge Perks' }}
                    @elseif(
                        $property->slug == 'loulavie' ||
                            $property->slug == 'ficlub' ||
                            $property->slug == 'lifestyle' ||
                            $property->slug == 'seiaclub')
                        {{ 'Member Perks' }}
                    @else
                        {{ 'Resident Perks' }}
                    @endif
                </h1>
            </div>
            <div class="clear"></div>
        </div>
        @if ($perks->count())
            <div class="row">
                <div class="mobile-filter">
                    <div class="{{ $filter_category ? 'col-xs-6' : 'col-xs-12' }}">
                        <div class="form-group select">
                            <!-- Categories -->
                            <label>Category</label>
                            <select class="form-control" onchange="location = this.value;">
                                <option value="{{ url('perks') }}">All</option>
                                @foreach ($perk_categories as $category)
                                    @if ($main_category)
                                        @if ($main_category->parent_id == 0)
                                            <option value="{{ url('perks?category=' . $category->id) }}"
                                                {{ $category->id == $main_category->id ? 'selected' : '' }}>
                                                {{ $category->name }}</option>
                                        @else
                                            <option value="{{ url('perks?category=' . $category->id) }}"
                                                {{ $category->id == $filter_category->id ? 'selected' : '' }}>
                                                {{ $category->name }}</option>
                                        @endif
                                    @else
                                        <option value="{{ url('perks?category=' . $category->id) }}">{{ $category->name }}
                                        </option>
                                    @endif
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <!-- Subcategories -->
                    @if ($main_category)
                        <div class="col-xs-6" ng-show="{{ $filter_category }}">
                            <div class="form-group select">
                                <label>Sub-category</label>
                                <select class="form-control" onchange="location = this.value;">
                                    <option value="{{ url('perks?category=' . $main_category->id) }}">All</option>
                                    @foreach ($main_category->subcategories->filter(function ($item) use ($property) {
            return $item->perk_category_is_in_property($property);
        }) as $subcategory)
                                        <option value="{{ url('perks?category=' . $subcategory->id) }}"
                                            {{ $subcategory->id == $filter_category ? 'selected' : '' }}>
                                            {{ $subcategory->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    @endif
                    <div class="clear"></div>
                </div>
                <div class="desktop-filter" ng-init="get_filter()">
                    <div class="col-sm-3 col-md-3 dirnavigation">
                        <div class="filters">
                            <!-- Perk Categories -->
                            @if ($perk_categories->count())
                                <div class="media category">
                                    <div class="media-left media-middle">
                                        <span class="otmicon otmicon-list"></span>
                                    </div>
                                    <div class="media-body" href="{{ url('perks') }}">
                                        <a href="{{ url('perks') }}" class="{{ !$filter_category ? 'bold' : '' }}">
                                            <span class="uppercase category-title">All listings</span>
                                        </a>
                                    </div>
                                </div>
                                <!-- Categories -->
                                @foreach ($perk_categories as $category)
                                    <div id="{{ $category->id }}"
                                        class="media category {{ $perk_categories->last()->id == $category->id ? 'last' : '' }}">
                                        <div class="media-left media-middle">
                                            <span class="otmicon icon-{{ $category->icon_slug }}"></span>
                                        </div>
                                        <div class="media-body">
                                            <a class="{{ $filter_category == $category->id || $category->is_subcategory($filter_category) ? 'bold' : '' }}"
                                                href="{{ url('perks?category=' . $category->id) }}">
                                                <span class="uppercase category-title">{{ $category->name }}</span>
                                            </a>
                                        </div>
                                    </div>
                                    <!-- Subcategories -->
                                    <ul
                                        class="subcategory {{ $filter_category == $category->id || $category->is_subcategory($filter_category) ? 'show' : '' }}">
                                        @foreach ($category->subcategories->filter(function ($item) use ($property) {
            return $item->perk_category_is_in_property($property);
        }) as $subcategory)
                                            <li>
                                                <a class="{{ $filter_category == $subcategory->id ? 'underline' : '' }}"
                                                    href="{{ url('perks?category=' . $subcategory->id) }}">
                                                    <span>{{ $subcategory->name }}</span>
                                                </a>
                                            </li>
                                        @endforeach
                                    </ul>
                                @endforeach
                            @endif
                        </div><!--./filters-->
                    </div><!--./col-sm-2-->
                </div><!--./desktop-filter -->
                <!-- Content -->
                <div class="col-sm-9 col-md-9">
                    <!-- Loader -->
                    <div class="loading-directories text-center" ng-show="!vm.perks_loaded">
                        <img src="{{ asset('assets/images/loading-primary.svg') }}" alt="" width="62px">
                        <em>Loading perks ...</em>
                    </div>
                    <div class="masonry" ng-show="vm.perks_loaded && vm.perks.length">
                        <div class="toggle animate-repeat masonry-item card card-news shadowed"
                            dir-paginate="perk in vm.perks | orderBy: sortBy:reverseSort | itemsPerPage: 21">
                            <div class="perk" ng-controller="modalCtlr">
                                <!-- Directory Name -->
                                <div class="place">
                                    <span>@{{ perk.parent.directory ? perk.parent.directory.name : perk.parent.custom_directory }}</span>
                                </div>
                                <!-- Title -->
                                <p>@{{ perk.title }}</p>
                                <!-- Controls -->
                                <div class="controls" ng-controller="DirectoryCtlr">
                                    <!-- View Button -->
                                    <a class="btn-small accent view"
                                        ng-class="{ 'half-width': perk.request, 'btn-sm-block': !perk.request }"
                                        href="/directories/@{{ perk.parent.directory ? perk.parent.directory.slug : perk.parent.custom_directory_slug }}">View
                                    </a>
                                    <!-- Request Button -->
                                    <button class="btn-small green request half-width"
                                        ng-click="modal_perk_request_open(perk)"
                                        ng-if="perk.request">{{ $property->id == 6 ? 'Service Request' : 'Request​' }}
                                    </button>
                                </div>
                            </div><!-- ./masonry item perk -->
                        </div><!-- ./animate repeat -->
                    </div><!-- ./masonry -->
                    <!-- No Filtered Perks -->
                    <h5 ng-if="vm.perks_loaded && vm.perks.length == 0">There are no resident perks.</h5>
                </div><!-- ./col-sm-10 -->
                <!-- Pagination -->
                <dir-pagination-controls ng-if="vm.perks_loaded"></dir-pagination-controls>
            </div><!-- ./row -->
        @else
            <!-- No Perks -->
            <div class="row">
                <div class="col-sm-12">
                    <h5>{!! $empty !!}</h5>
                </div>
            </div>
        @endif
    </div>
    <!-- Modal -->
    @include('client.partials.modal.perk')
@endsection

@section('script')
    <script type="text/javascript">
        angular.module('luxury-concierge', [
            'angularUtils.directives.dirPagination',
            'ui.dateTimeInput',
            'ngFileUpload',
            'modal',
            'perks',
            'directories',
            'user',
            'socket',
            'liveChat'
        ]);
    </script>
    <script type="text/javascript" src="/assets/js/moment.min.js"></script>
    <script type="text/javascript" src="/assets/js/angular-moment.min.js"></script>
    <script type="text/javascript" src="/assets/js/dateTimeInput.js"></script>
    <script type="text/javascript" src="/assets/js/datetimepicker.js"></script>
    <script type="text/javascript" src="/assets/js/datetimepicker.templates.js"></script>
    <script type="text/javascript" src="/assets/js/dirPagination.js"></script>
    <script type="text/javascript" src="/assets/js/ng-file-upload-shim.min.js"></script>
    <script type="text/javascript" src="/assets/js/ng-file-upload.min.js"></script>
    <script type="text/javascript" src="{{ elixir('assets/js/controllers/modal.js') }}"></script>
    <script type="text/javascript" src="{{ elixir('assets/js/controllers/perks.js') }}"></script>
    <script type="text/javascript" src="{{ elixir('assets/js/controllers/directories.js') }}"></script>
    <script type="text/javascript" src="{{ elixir('assets/js/controllers/user.js') }}"></script>
    <script type="text/javascript" src="{{ elixir('assets/js/controllers/socket.js') }}"></script>
    <script type="text/javascript" src="{{ elixir('assets/js/controllers/liveChat.js') }}"></script>
@endsection