@extends('app_client')


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

@section('content')
    <div class="container-fluid" ng-controller="DirectoryCtlr as vm">
        <!-- Header -->
        <div class="page-header">
            <div class="back-navigation">
                <a href="javascript:history.go(-1)" class="btn-back">Back</a>
            </div> <!-- back-navigation -->
            <div class="header">
                <span class="icon icon-label_folder_phone_book_contacts_documents_3 media-middle"></span>
                <h1 class="header-title">Directory / <span
                        class="regular">{{ $directory ? $directory->name : $perk->custom_directory }}</span></h1>
            </div>
        </div>
        <!-- Directory -->
        <div class="row">
            <div class="col-sm-12">
                <div class="panel directory">
                    @if ($directory)
                        <div class="panel-content" ng-init="vm.get_directory({{ $directory->id }})">
                            <div class="row">
                                <div class="col-sm-12 col-md-6">
                                    <!-- Name -->
                                    <div class="panel-heading">
                                        <h1 class="title">{{ $directory->name }}</h1>
                                        <h3 class="subtitle">{{ $directory->categories->last()->name }}</h3>
                                    </div><!--./panel-heading -->
                                    <!-- Main Info -->
                                    <div class="directory-info">
                                        <ul class="directory-info-list list-unstyled">
                                            <!-- Hyperlink -->
                                            @if ($directory->hyperlink)
                                                <li>
                                                    <div class="media">
                                                        <div class="media-left media-top media-fifty text-center">
                                                            <span
                                                                class="icon icon-planet_earth_globe_world_worldwide_space_cosmos_science_solar_system nomg nofloat"></span>
                                                        </div>
                                                        <div class="media-body">
                                                            <a href="{{ $directory->hyperlink }}"
                                                                target="_blank">{{ website($directory->hyperlink) }}</a>
                                                        </div>
                                                    </div>
                                                </li>
                                            @endif
                                            <!-- Address -->
                                            @if ($directory->address)
                                                <li>
                                                    <div class="media">
                                                        <div class="media-left media-top media-fifty text-center">
                                                            <span
                                                                class="icon icon-map_pin_locate_location_marker_gps nomg nofloat"></span>
                                                        </div>
                                                        <div class="media-body">
                                                            {{ $directory->address }}
                                                        </div>
                                                    </div>
                                                </li>
                                            @endif
                                            <!-- Phone -->
                                            @if ($directory->phone && $property->slug == 'lcn')
                                                <li class="clearfix">
                                                    <div class="media">
                                                        <div class="media-left media-middle media-fifty text-center">
                                                            <span
                                                                class="icon icon-phone_iphone_mobile_smartphone_device_contact_call_5 nofloat nomg"></span>
                                                        </div>
                                                        <div class="media-body media-middle">
                                                            {{ $directory->phone }}
                                                        </div>
                                                    </div>
                                                </li>
                                            @endif
                                            <!-- Agent -->
                                            @if ($directory->agent && $property->slug == 'lcn')
                                                <li class="clearfix">
                                                    <div class="directory-agent">
                                                        <!-- Name -->
                                                        @if ($directory->agent->first_name && $directory->agent->last_name)
                                                            <div class="media">
                                                                <div
                                                                    class="media-left media-middle media-fifty text-center">
                                                                    <span
                                                                        class="icon icon-user_profile_avatar_man_boy_silhoette nofloat nomg"></span>
                                                                </div>
                                                                <div class="media-body">
                                                                    <h5>{{ $directory->agent->first_name . ' ' . $directory->agent->last_name }}
                                                                    </h5>
                                                                    @if ($directory->agent->position)
                                                                        <p>{{ $directory->agent->position }}</p>
                                                                    @endif
                                                                </div>
                                                            </div>
                                                        @endif
                                                        <!-- Phone -->
                                                        @if ($directory->agent->phone || $directory->agent->mobile_phone)
                                                            <div class="media">
                                                                <div
                                                                    class="media-left media-middle media-fifty text-center">
                                                                    <span
                                                                        class="icon icon-phone_iphone_mobile_smartphone_device_contact_call_5 nofloat nomg"></span>
                                                                </div>
                                                                <div class="media-body">
                                                                    <p>
                                                                        @if ($directory->agent->phone)
                                                                            <a
                                                                                href="tel:{{ $directory->agent->phone }}">{{ $directory->agent->phone }}</a>
                                                                        @endif
                                                                        @if ($directory->agent->phone && $directory->agent->mobile_phone)
                                                                            <span> / </span>
                                                                        @endif
                                                                        @if ($directory->agent->mobile_phone)
                                                                            <a
                                                                                href="tel:{{ $directory->agent->mobile_phone }}">{{ $directory->agent->mobile_phone }}</a>
                                                                        @endif
                                                                    </p>
                                                                </div>
                                                            </div>
                                                        @endif
                                                        <!-- Email -->
                                                        @if ($directory->agent->email)
                                                            <div class="media">
                                                                <div
                                                                    class="media-left media-middle media-fifty text-center">
                                                                    <span
                                                                        class="icon icon-mail_email_envelope_message nomg nofloat"
                                                                        style="font-size: 22px;"></span>
                                                                </div>
                                                                <div class="media-body">
                                                                    <p>
                                                                        <a
                                                                            href="mailto:{{ $directory->agent->email }}">{{ $directory->agent->email }}</a>
                                                                        @if ($directory->agent->alternative_email)
                                                                            {{ ' / ' }}<a
                                                                                href="mailto:{{ $directory->agent->alternative_email }}">{{ $directory->agent->alternative_email }}</a>
                                                                        @endif
                                                                    </p>
                                                                </div>
                                                            </div>
                                                        @endif
                                                    </div>
                                                </li>
                                            @endif
                                        </ul>
                                        <!-- Directory Perks -->
                                        @if (
                                            $directory->perks->filter(function ($item) {
                                                    return $item->active;
                                                })->count())
                                            <div class="offer">
                                                <div class="tag">
                                                    <i
                                                        class="icon-price_tag_finance_product_info_details"></i>{{ $property->slug == 'lcn' ? 'Concierge' : 'Resident' }}
                                                    Perks
                                                </div>
                                                <!-- Perk -->
                                                @foreach ($directory->perks->filter(function ($item) {
            return $item->active;
        }) as $perk)
                                                    <div class="inner-offer">
                                                        <div class="media">
                                                            <!-- Image -->
                                                            @if ($perk->parent->image)
                                                                <div class="media-left media-middle perk-image">
                                                                    <img src="/assets/images/perks/{{ $perk->parent->image }}"
                                                                        alt="">
                                                                </div>
                                                            @endif
                                                            <div class="media-body">
                                                                {!! $perk->description !!}
                                                            </div>
                                                        </div>
                                                    </div>
                                                @endforeach
                                            </div>
                                        @endif
                                        <!-- Description -->
                                        <div class="description">
                                            {!! $directory->info->description !!}
                                        </div>
                                        <!-- Video -->
                                        @if ($directory->video)
                                            <div class="video">
                                                <iframe
                                                    src="https://www.youtube.com/embed/{{ youtube($directory->video) }}"
                                                    width="100%" height="360" frameborder="0" allowfullscreen>
                                                </iframe>
                                            </div>
                                        @endif
                                        <!-- File -->
                                        @if ($directory->file)
                                            <div class="download-pdf">
                                                <div class="download-pdf-content">
                                                    <span class="icon icon-document_file_oen_write_new_edit_text"></span>
                                                    <h4 class="light">Attached file</h4>
                                                    <a class="btn btn-small btn-download right"
                                                        href="{{ url('/assets/files/' . $directory->file) }}">View file
                                                    </a>
                                                </div>
                                            </div>
                                        @endif
                                    </div><!--./directory-info -->
                                </div><!--./col-sm-6 -->
                                <div class="col-sm-12 col-md-6">
                                    <!-- Map -->
                                    @if ($directory->lat && $directory->lng)
                                        <div id="directory-location-map"></div>
                                    @endif
                                    <!-- Images -->
                                    @if ($directory->images->count() && $property->slug !== 'seiaclub')
                                        <div class="directory-images">
                                            <div class="row">
                                                @if (strpos(strtolower($_SERVER['HTTP_USER_AGENT']), 'iphone'))
                                                    @if (!strpos(strtolower($_SERVER['HTTP_USER_AGENT']), 'safari'))
                                                        @foreach ($directory->images as $key => $image)
                                                            <div class="col-sm-6">
                                                                <a class="fancybox-thumb no-open"
                                                                    rel="group-{{ $key }}" data-action="zoom">
                                                                    <img src="{{ asset('assets/images/directories/' . $image->hyperlink) }}"
                                                                        width="285" />
                                                                </a>
                                                            </div>
                                                        @endforeach
                                                    @endif
                                                @else
                                                    @foreach ($directory->images as $key => $image)
                                                        @if ($key == 0)
                                                            <div class="col-sm-6">
                                                                <a class="fancybox-thumb no-open" rel="group"
                                                                    href="{{ asset('assets/images/directories/' . $image->hyperlink) }}"
                                                                    target="_self">
                                                                    <img src="{{ asset('assets/images/directories/' . $image->hyperlink) }}"
                                                                        alt="" />
                                                                </a>
                                                            </div>
                                                        @elseif($key == 1)
                                                            <div class="col-sm-6 fancybox-extra">
                                                                <a class="fancybox-thumb no-open" rel="group"
                                                                    href="{{ asset('assets/images/directories/' . $image->hyperlink) }}"
                                                                    target="_self">
                                                                    <img src="{{ asset('assets/images/directories/' . $image->hyperlink) }}"
                                                                        alt="" />
                                                                    @if (count($directory->images) > 2)
                                                                        <div class="fancybox-extra-overlay"></div>
                                                                        <div class="fancybox-extra-counter">
                                                                            <span>+{{ count($directory->images) - 2 }}</span>
                                                                        </div>
                                                                    @endif
                                                                </a>
                                                            </div>
                                                        @else
                                                            <div class="hidden">
                                                                <a class="fancybox-thumb no-open" rel="group"
                                                                    href="{{ asset('assets/images/directories/' . $image->hyperlink) }}"
                                                                    target="_self">
                                                                    <img src="{{ asset('assets/images/directories/' . $image->hyperlink) }}"
                                                                        alt="" />
                                                                </a>
                                                            </div>
                                                        @endif
                                                    @endforeach
                                                @endif
                                            </div> <!-- row -->
                                        </div> <!-- directory images -->
                                    @endif
                                </div><!--./col-sm-6 -->
                            </div><!--./row -->
                        </div><!--./panel-content -->
                        <!-- Request Button -->
                        <div ng-show="vm.directory">
                            <hr>
                            <div class="controls text-center">
                                <button class="btn btn-request btn-sm-block no-open"
                                    ng-click="vm.request_directory_modal(vm.directory)">{{ $property->id == 6 ? 'Service Request' : 'Request​' }}
                                </button>
                            </div>
                        </div>
                    @else
                        <!-- Perk -->
                        <div class="panel-content">
                            <div class="row">
                                <div class="col-sm-6">
                                    <!-- Name -->
                                    <div class="panel-heading">
                                        <h1 class="title">{{ $perk->custom_directory }}</h1>
                                        <h3 class="subtitle">{{ $perk->categories->last()->name }}</h3>
                                    </div><!--./panel-heading -->
                                    <!-- Info -->
                                    @if ($perk->info->count())
                                        <div class="offer">
                                            <div class="tag">
                                                <i class="icon-price_tag_finance_product_info_details"></i>
                                                @if ($property->slug == 'lcn')
                                                    Concierge Perks
                                                @elseif ($property->slug == 'ficlub')
                                                    Member Perks
                                                @else
                                                    Residents Perks
                                                @endif
                                            </div>
                                            <div class="inner-offer">
                                                <div class="perk media">
                                                    @if ($perk->image)
                                                        <div class="media-left media-middle perk-image">
                                                            <img src="/assets/images/perks/{{ $perk->image }}"
                                                                alt="">
                                                        </div>
                                                    @endif
                                                    <div class="media-body">
                                                        {!! $perk->info->description !!}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                        <!-- Request Button -->
                        @if ($perk && $perk->info->request)
                            <hr>
                            <div class="controls text-center" ng-controller="modalCtlr">
                                <button class="btn btn-request btn-sm-block no-open"
                                    ng-click="index_modal_perk_request_open({{ $perk->id }})"
                                    ng-init="get_index_perks({{ $perk->id }})">{{ $property->id == 6 ? 'Service Request' : 'Request​' }}
                                </button>
                            </div>
                        @endif
                    @endif
                </div><!-- panel directory -->
            </div> <!-- col-sm-12 -->
        </div> <!-- row -->
    </div><!-- content fluid -->
    <!-- Modals -->
    @include('client.partials.modal.directory')
    @include('client.partials.modal.perk')
@endsection

@section('script')
    @if ($directory && $directory->lat && $directory->lng)
        <script type="text/javascript" src="//maps.googleapis.com/maps/api/js?key=AIzaSyAok3PHxGwYlbq2AggZ7upd-1ltmBUJCMs">
        </script>
    @endif
    <script type="text/javascript" src="/assets/js/jquery.fancybox.pack.js"></script>
    <script type="text/javascript" src="/assets/js/jquery.fancybox-thumbs.js"></script>
    <script type="text/javascript" src="/assets/js/mobileImageZoom.js"></script>
    <script type="text/javascript">
        angular.module('luxury-concierge', [
            'angularUtils.directives.dirPagination',
            'ui.dateTimeInput',
            'ui.bootstrap.datetimepicker',
            'ngFileUpload',
            'modal',
            'directories',
            'user',
            'socket',
            'liveChat'
        ]);
    </script>
    <script type="text/javascript" src="/assets/js/ngSticky.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="/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="{{ 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>
    <script type="text/javascript" src="{{ elixir('assets/js/controllers/modal.js') }}"></script>
    @if ($directory && $directory->lat && $directory->lng)
        <script type="text/javascript">
            function initMap() {
                var map = new google.maps.Map(document.getElementById('directory-location-map'), {
                    zoom: 14,
                    center: {
                        lat: parseFloat({{ $directory->lat }}),
                        lng: parseFloat({{ $directory->lng }})
                    }
                });
                marker = new google.maps.Marker({
                    map: map,
                    draggable: false,
                    animation: google.maps.Animation.DROP,
                    position: {
                        lat: parseFloat({{ $directory->lat }}),
                        lng: parseFloat({{ $directory->lng }})
                    }
                });
            }
            google.maps.event.addDomListener(window, 'load', initMap);
        </script>
    @endif
    <script type="text/javascript">
        $(document).ready(function() {
            var fancyOptions = {
                prevEffect: 'none',
                nextEffect: 'none',
                helpers: {
                    title: {
                        type: 'inside'
                    },
                    buttons: {},
                    overlay: {
                        css: {
                            'background': 'rgba(28, 27, 35, 0.95)'
                        }
                    },
                    thumbs: {
                        width: 50,
                        height: 50
                    }
                }
            }

            $('.panel a').each(function(key, anchor) {
                $(this).attr('target', '_blank');
            });
            @if (
                !strpos(strtolower($_SERVER['HTTP_USER_AGENT']), 'iphone') &&
                    strpos(strtolower($_SERVER['HTTP_USER_AGENT']), 'safari'))
                $('.fancybox-thumb').fancybox(fancyOptions);
            @endif
        });
    </script>
@endsection