@extends('app_admin')


@section('title', $title . ' | Luxury Concierge')

@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>
            <span class="icon icon-label_folder_phone_book_contacts_documents_3"></span>
            <h1>Directory / <span class="regular">{{ $directory ? $directory->name : $perk->custom_directory }}</span></h1>
        </div>
        <!-- Filter -->
        @if ($properties->count() >= 2)
            <div class="filter-group">
                <div class="form-group select">
                    <select id="directoryFilter">
                        @foreach ($properties as $property)
                            <option value="{{ $property->id }}">{{ $property->name }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
        @endif
        <!-- Directory -->
        <div class="row">
            <div class="col-sm-12">
                <div class="panel directory">
                    @if ($directory)
                        <!-- Title -->
                        <div class="panel-heading">
                            <h1 class="title">{{ $directory->name . ($directory->duplicate ? ' (Duplicate)' : '') }}</h1>
                            <h3 class="subtitle">{{ $directory->categories->last()->name }}</h3>
                        </div><!--./panel-heading -->
                        <!-- Content -->
                        <div class="panel-content">
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="directory-info">
                                        <ul class="directory-info-list list-unstyled">
                                            <!-- Hyperlink -->
                                            @if ($directory->hyperlink)
                                                <li class="clearfix">
                                                    <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 nofloat nomg"></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 class="clearfix">
                                                    <div class="media">
                                                        <div class="media-left media-middle media-fifty text-center">
                                                            <span
                                                                class="icon icon-map_pin_locate_location_marker_gps nofloat nomg"></span>
                                                        </div>
                                                        <div class="media-body">
                                                            {{ $directory->address }}
                                                        </div>
                                                    </div>
                                                </li>
                                            @endif
                                            <!-- Phone -->
                                            @if ($directory->phone)
                                                <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">
                                                            {{ phone_number($directory->phone) }}
                                                        </div>
                                                    </div>
                                                </li>
                                            @endif
                                            <!-- Agent -->
                                            @if ($directory->agent)
                                                <li class="clearfix">
                                                    <div class="directory-agent">
                                                        @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">
                                                                    <!-- Name -->
                                                                    <h5>{{ $directory->agent->first_name . ' ' . $directory->agent->last_name }}
                                                                    </h5>
                                                                    <!-- Position -->
                                                                    @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 }}">{{ phone_number($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 }}">{{ phone_number($directory->agent->mobile_phone) }}</a>
                                                                        @endif
                                                                        @if ($directory->agent->mobile_phone && $directory->agent->ext)
                                                                            <span> / </span>
                                                                        @endif
                                                                        @if ($directory->agent->ext)
                                                                            <a
                                                                                href="tel:{{ $directory->agent->ext }}">{{ phone_number($directory->agent->ext) }}</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 (count($directory->perks))
                                            <div id="perks">
                                                @foreach ($directory->perks as $perk)
                                                    <div
                                                        class="offer {{ $properties->count() > 1 ? 'hidden' : '' }} {{ $perk->venue_id }}">
                                                        <div class="tag">
                                                            @if ($perk->venue_id === 4)
                                                                <i
                                                                    class="icon-price_tag_finance_product_info_details"></i>Concierge
                                                                Perks
                                                            @elseif ($perk->venue_id === 20)
                                                                <i
                                                                    class="icon-price_tag_finance_product_info_details"></i>Member
                                                                Perks
                                                            @else
                                                                <i
                                                                    class="icon-price_tag_finance_product_info_details"></i>Residents
                                                                Perks
                                                            @endif
                                                        </div>
                                                        <!-- Perk -->
                                                        <div class="inner-offer">
                                                            <div class="perk 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
                                                                <!-- Description -->
                                                                <div class="media-body">
                                                                    {!! $perk->description !!}
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                @endforeach
                                            </div>
                                        @endif
                                        <!-- Description -->
                                        <div class="description">
                                            <div id="directories">
                                                @foreach ($directory->child->filter(function ($item) use ($properties) {
            return $properties->contains($item->property);
        }) as $directory_info)
                                                    <div
                                                        class="inner-offer {{ $properties->count() >= 2 ? 'hidden' : '' }} {{ $directory_info->property_id }}">
                                                        <div class="directory media">
                                                            <div class="media-body">
                                                                {!! $directory_info->description !!}
                                                            </div>
                                                        </div>
                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>
                                        <!-- Video -->
                                        @if ($directory->video)
                                            <div class="video">
                                                <iframe width="100%" height="360"
                                                    src="https://www.youtube.com/embed/{{ youtube($directory->video) }}"
                                                    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 href="{{ url('/assets/files/' . $directory->file) }}"
                                                        class="btn btn-small btn-download right">View file</a>
                                                </div>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <!-- Map -->
                                    @if ($directory->lat && $directory->lng)
                                        <div id="directory-location-map"></div>
                                    @endif
                                    <!-- Images -->
                                    @if ($directory->images->count())
                                        <div class="directory-images">
                                            <div class="row">
                                                @foreach ($directory->images as $key => $image)
                                                    @if ($key == 0)
                                                        <div class="col-sm-6">
                                                            <a class="fancybox-thumb" rel="group"
                                                                href="{{ asset('assets/images/directories/' . $image->hyperlink) }}">
                                                                <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" rel="group"
                                                                href="{{ asset('assets/images/directories/' . $image->hyperlink) }}">
                                                                <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" rel="group"
                                                                href="{{ asset('assets/images/directories/' . $image->hyperlink) }}">
                                                                <img src="{{ asset('assets/images/directories/' . $image->hyperlink) }}"
                                                                    alt="" />
                                                            </a>
                                                        </div>
                                                    @endif
                                                @endforeach
                                            </div> <!--./row -->
                                        </div><!--./directory-images -->
                                    @endif
                                </div>
                            </div><!--./row -->
                        </div><!--./panel-content -->
                    @else
                        <!-- Custom Directory -->
                        <div class="panel-heading">
                            <h1 class="title">{{ $perk->custom_directory }}</h1>
                            <h3 class="subtitle">{{ $perk->categories->last()->name }}</h3>
                        </div><!--./panel-heading -->
                        <div class="panel-content">
                            <div class="row">
                                <div class="col-sm-6">
                                    <!-- Property Info -->
                                    @if ($perk->info->count())
                                        <div class="offer">
                                            <div class="tag">
                                                <i class="icon-price_tag_finance_product_info_details"></i>Residents Perks
                                            </div>
                                            <!-- Info -->
                                            <div id="perks">
                                                @foreach ($perk->info as $perk)
                                                    <div
                                                        class="inner-offer {{ $properties->count() > 1 ? 'hidden' : '' }} {{ $perk->venue_id }}">
                                                        <div class="perk media">
                                                            @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>
                                        </div>
                                    @endif

                                </div><!-- .col-sm-6 -->
                            </div><!-- .row -->
                        </div><!-- .panel-content -->
                    @endif

                </div><!-- .panel directory -->
            </div><!-- .col-sm-12 -->
        </div><!-- .row -->

    </div><!-- .container-fluid -->
@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',
            'uiSwitch',
            'ngFileUpload',
            'modal',
            'directories',
            'user',
            'socket',
            'liveChat'
        ]);
    </script>
    <script type="text/javascript" src="/assets/js/ngSticky.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/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='/assets/js/angular-ui-switch.min.js'></script>
    <script type="text/javascript" src='//cdnjs.cloudflare.com/ajax/libs/textAngular/1.5.0/textAngular-rangy.min.js'>
    </script>
    <script type="text/javascript" src='//cdnjs.cloudflare.com/ajax/libs/textAngular/1.5.0/textAngular-sanitize.min.js'>
    </script>
    <script type="text/javascript" src='//cdnjs.cloudflare.com/ajax/libs/textAngular/1.5.0/textAngular.min.js'></script>
    <script type="text/javascript" src="{{ elixir('assets/js/controllers/modal.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>
    @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">
        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
                }
            }
        }

        $(document).ready(function() {
            $('.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>
    @if ($properties->count() >= 2)
        <script type="text/javascript">
            function loadInfo() {
                var directoryFilter = $('#directoryFilter').val();
                $('#directories > div').each(function() {
                    if ($(this).hasClass(directoryFilter)) $(this).removeClass('hidden');
                    else $(this).addClass('hidden');
                });
                $('#perks > div').each(function() {
                    if ($(this).hasClass(directoryFilter)) $(this).removeClass('hidden');
                    else $(this).addClass('hidden');
                });
            }

            loadInfo();

            $('#directoryFilter').change(function() {
                loadInfo();
            });
        </script>
    @endif
@endsection