WordPress

{% extends 'base.html.twig' %}
{% block header_class %}{% endblock %}

{% block title %}Sura Images - {{ image.title|title }}{% endblock %}
{% block meta_share_url %}
    <meta property="og:image" content="{{ image.sharableImage ? absolute_url(asset('uploads/stock/')~image.sharableImage): absolute_url(asset('uploads/stock/')~image.thumbName)  }}">
    <meta property="og:type" content="website" />
    <meta property="og:title" content="{{ image.title }}" />
{% endblock %}

{% block hero_banner %}

{% endblock %}
{% block header %}
    {% include 'dashboard/header.html.twig' %}
{% endblock %}

{% block body %}
    {# @var helper \App\Service\Helper #}
<div class="app_main_inner">
    <div class="section_stock_detail">

        <div class="wrap">
            <div class="alert alert-success add-to-cart-notif" style="display: none">
                Item Successfully added to Your {% if app.user %} <a href="{{ path('membershp_membership_index') }}" class="table_link"> Cart!</a> {% else %}
                <a href="{{ path('membershp_membership_offline') }}"> Cart!</a>
                {% endif %}
            </div>
            {% for message in app.flashes("report_success") %}
                <div class="alert alert-success">{{ message }}</div>
            {% endfor %}
            <div class="stock_wrap">
                <h2 class="stock_title">{{ image.title }}</h2>
                <div class="stock_detail_left">
                    {% if image.type.title == "video" %}
                        <video class="detail_thumbnail" controls autoplay muted>
                            <source src="{{ asset('uploads/stock/')~ image.previewName }}" type="video/mp4">
                            Your browser does not support videos.
                        </video>
                        {% else %}
                            <img src="{{asset('uploads/stock/'~ image.previewName)}}" class="detail_thumbnail">
                    {% endif %}

                    <div class="thumbnail_int">
                        <a href="{{ path('membershp_member_download_preview',{'id':image.id}) }}" class="download_preview">Download Preview</a>
                        <div class="share_main">
                            <a href="" class="share_trigger" data-toggle="dropdown">Share</a>
                            <ul class="dropdown-menu">
                                {% set url = absolute_url(path('image_details',{id:image.id})) %}
                                {% set hashtags="SuraImages #AfricaStockPhotography #AfricaStockImages #AfricanPhotography #Photography #AuthenticAfricanImages #Sura" %}
                                <li><a href="" data-sharer="twitter" data-title="{{ image.title }}" title="Share on Twitter" data-hashtags="SuraImages,AfricaStockPhotography,AfricaStockImages,AfricanPhotography,Photography,AuthenticAfricanImages,Sura" data-url="{{ url }}" ><img src="{{asset('images/twitter_square.svg')}}" alt="">Twitter</a></li>
                                <li><a href="" data-sharer="facebook" data-title="{{ image.title }}" title="Share on Facebook" data-hashtag="{{ hashtags }}" data-url="{{ url }}"><img src="{{asset('images/facebook_square.svg')}}" alt="">Facebook</a></li>
                                <li><a class="data_sharer" href="" data-sharer="whatsapp"   data-title="{{ image.title }}" title="Share on Whatsapp"  data-url="{{ url }}" data-web=""><img src="{{asset('images/whats_app.svg')}}" alt="">Whatsapp</a></li>

                            </ul>
                        </div>
                    </div>
                    <div class="details_table">
                        <table>
                            <tbody>
                            <tr>
                                <td> <b>Title</b></td>
                                <td>{{ image.title }}</td>
                            </tr>
                            <tr>
                                <td><b>Image ID</b></td>
                                <td>suraimages - {{ image.formattedId }}</td>
                            </tr>
                            <tr>
                                <td><b>Release Information</b></td>
                                <td>{{ releaseInfo ? "Yes (<i>Availabe with Sura Images</i>)" : "No" }}</td>
                            </tr>
                            <tr>
                                <td> <b>License Type</b></td>
                                <td>
                                    {% if image.type.title == "video" %}
                                        {{ image.licenceType == "Rights Managed" ? "Rights Ready" : image.licenceType }}
                                    {% else %}
                                        {{ image.licenceType }}
                                    {% endif %}
                                </td>
                            </tr>
                            <tr>
                                <td><b>{{ image.type.title is same as('video') ? "Video Type" : "Image Type" }}</b></td>
                                {% if image.type.title is same as('video') %}
                                    <td>{{ image.videoType is same as('Creative Video') ? 'Creative Video':'Editorial Video ( <i class="editorial_note">Strictly for Editorial use ONLY</i> )' }}</td>
                                {% else %}
                                <td>{{ image.imageType is same as('Creative Image') ? 'Creative Image':'Editorial Image (<i class="editorial_note">Strictly for Editorial use ONLY</i>   )' }}</td>
                                {% endif %}
                            </tr>
                            <tr>
                                <td><b>Photographer</b></td>
                                <td>
                                    <a href="{{ path('search_contributor', {'id': image.contributor.id, 'stock': image.id}) }}">{{ image.contributor.firstName}}  {{ image.contributor.lastName }}</a>
                                </td>
                            </tr>
                            <tr>
                                <td> <b>Categories</b></td>
                                <td>
                                    {% for stockCat in image.stocksCats %}
                                        {% if stockCat.categoryStockCat is not null %}
                                            {{ stockCat.categoryStockCat.name|title }}{% if loop.last == false %}, {% else %}.{% endif %}
                                        {% endif %}
                                    {% else %}
                                        {{ image.category }}
                                    {% endfor %}
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                {% if(image.licenceType=='Royalty Free') %}
                <div class="stock_detail_right">
                    <ul class="licence_tabs">
                        <li class="active"><a  href="#standard_licence" data-toggle="tab"  aria-expanded="true">Standard License</a></li>
                        {% if(image.contributor.isExclusive) %}
                        <li><a class="nav-link exclusive exclusive_royalty_free" data-toggle="tab" href="#exclusive_licence">Exclusive Licence </a></li>
                        {% endif %}
                    </ul>

                    <div class="tab-content">
                        <div class="alert  alert-danger" style="display: none">
                        </div>
                        <div class="tab_pane fade show active in" id="standard_licence">

                            <label for="small_size" class="selectable_type">
                                <input type="radio" data-size="small" name="image_small" value="{{ image.priceSmall }}" id="small_size" class="selected_tag price_tag">
                                {% if image.type.title == "video" %}
                                    <span class="select_left">
                                        <h4>Small Resolution</h4>
                                        <p>{{ video_small_res }} ({{ video_small_width }} x {{ video_small_height }} | {{ video_small_fps }} FPS) - {{ video_small_size }} MB</p>
                                    </span>
                                {% else %}
                                    <span class="select_left">
                                        <span class="details_text">Small Size</span> <span style="font-style: italic; font-size: small">(suitable for Mobile & Web)</span>
                                        <p>{{ smallWidth?smallWidth:"1077" }} x {{ smallHeight?smallHeight:"1612" }}px | {{ smallDPI ? smallDPI ~ " dpi" : "dpi not set" }} | {{ smallSize }} MB</p>
                                    </span>
                                {% endif %}
                                <span class="select_right">${{ image.priceSmall }}</span>
                            </label>

                            <label for="medium_size" class="selectable_type">
                                <input type="radio" data-size="medium" name="image_medium" value="{{ image.price }}" id="medium_size" class="selected_tag price_tag">
                                {% if image.type.title == "video" %}
                                    <span class="select_left">
                                        <h4>Medium Resolution</h4>
                                        <p>{{ video_medium_res }} ({{ video_medium_width }} x {{ video_medium_height }} | {{ video_medium_fps }} FPS) - {{ video_medium_size }} MB</p>
                                    </span>
                                {% else %}
                                    <span class="select_left">
{#                                        <h4>Medium Size</h4>#}
                                        <span class="details_text">Medium Size</span> <span style="font-style: italic; font-size: small"> (suitable for digital use)</span>
                                        <p>{{ width }} x {{ height }}px | {{ mediumDPI ? mediumDPI ~ " dpi" : "dpi not set" }} | {{ mediumSize }} MB</p>
                                    </span>
                                {% endif %}
                                <span class="select_right">${{ image.price }}</span>
                            </label>

                            <label for="large_size" class="selectable_type">
                                <input type="radio" name="image_large" data-size="large" value="{{ image.priceLarge }}" id="large_size" class="selected_tag price_tag">
                                {% if image.type.title == "video" %}
                                    <span class="select_left">
                                        <h4>High Resolution</h4>
                                        <p>{{ video_large_res }} ({{ video_large_width }} x {{ video_large_height }} | {{ video_large_fps }} FPS) - {{ video_large_size }} MB</p>
                                    </span>
                                {% else %}
                                    <span class="select_left">
{#                                        <h4>Large Size</h4>#}
                                        <span class="details_text">Large Size</span> <span style="font-style: italic; font-size: small"> (suitable for high quality print)</span>
                                        <p>{{ largeWidth?largeWidth:"3230" }} x {{ largeHeight?largeHeight:"4835" }}px | {{ largeDPI ? largeDPI ~ " dpi" : "dpi not set" }} | {{ largeSize ? largeSize : mediumSize }} MB</p>
                                    </span>
                                {% endif %}
                                <span class="select_right">${{ image.priceLarge }}</span>
                            </label>
                        </div>
                        <div class="tab_pane fade" id="exclusive_licence">
                            <div class="licence_excerpt">
                                Exclusive license means that the licensee/ the buyer has exclusive rights to the content (Images, Videos) they buy for a specified period of time. Meaning, the licensee will be the only person to use the content for the stipulated period of time and within that period the content will be inactive for purchase from any other licensee until the duration of the license expires. See our Exclusivity & Control page for more information.
                            </div>
                            <label for="1_month_licence" class="selectable_type">
                                <input type="radio" name="exclusive_one" data-duration="One Month" data-int-duration="1" value="{{ exclusivePricing.photoOneMonth }}" id="1_month_licence" class="selected_tag exclusive_price_tag">
                                <span class="select_left">
                                    <h4>1 Month</h4>
                                    <p>Exclusive license</p>
                                </span>
                                <span class="select_right">${{ exclusivePricing.photoOneMonth }}</span>
                            </label>

                            <label for="3_month_licence" class="selectable_type">
                                <input type="radio" name="exclusive_three" data-int-duration="3" data-duration="Three Months" value="{{ exclusivePricing.photoThreeMonth }}" id="3_month_licence" class="selected_tag exclusive_price_tag">
                                <span class="select_left">
                                    <h4>3 Months</h4>
                                    <p>Exclusive license</p>
                                </span>
                                <span class="select_right">${{ exclusivePricing.photoThreeMonth }}</span>
                            </label>

                            <label for="6_month_licence" class="selectable_type">
                                <input type="radio" data-duration="Six months" data-int-duration="6" value="{{ exclusivePricing.photoSixMonths }}" name="exclusive_six" id="6_month_licence" class="selected_tag exclusive_price_tag">
                                <span class="select_left">
                                    <h4>6 Months</h4>
                                    <p>Exclusive license</p>
                                </span>
                                <span class="select_right">${{ exclusivePricing.photoSixMonths }}</span>
                            </label>

                            <label for="12_month_licence" class="selectable_type">
                                <input type="radio" data-duration="One Year" data-int-duration="12" value="{{ exclusivePricing.photoOneYear }}" name="exclusive_twelve" id="12_month_licence" class="selected_tag exclusive_price_tag">
                                <span class="select_left">
                                    <h4>1 Year</h4>
                                    <p>Exclusive license</p>
                                </span>
                                <span class="select_right">${{ exclusivePricing.photoOneYear }}</span>
                            </label>

{#                            <label for="24_month_licence" class="selectable_type">#}
{#                                <input type="radio" data-duration="Two Years" data-int-duration="24" value="{{ exclusivePricing.photoTwoYears }}" name="exclusive_twentyFour" id="24_month_licence" class="selected_tag exclusive_price_tag">#}
{#                                <span class="select_left">#}
{#                                    <h4>2 Years</h4>#}
{#                                    <p>Exclusive license</p>#}
{#                                </span>#}
{#                                <span class="select_right">${{ exclusivePricing.photoTwoYears }}</span>#}
{#                            </label>#}
                        </div>
                        <div class="total_image_amount">
                            <h3>License Fee : $ <span class="licence_fee">0.00</span></h3>
                            {% if(image.hibernated) %}
                                <p>File will be available for sale on {{ image.hibernateEnd.format("d F Y, h:i:s") }}</p>
                            {% else %}
                            <button class="purchase_btn basket_btn btn_royalty_free add-to-cart"
                                    data-id="{{ image.id }}"
                                    data-thumb-url="{{asset('uploads/stock/'~ image.thumbName)}}"
                                    data-name="{{ image.title }}"
                                    data-price="{{ image.price }}"
                                    data-small-price="{{ image.priceSmall }}"
                                    data-medium-price="{{ image.price }}"
                                    data-large-price="{{ image.priceLarge }}"
                                    data-exclusive-1-month="{{ exclusivePricing.photoOneMonth }}"
                                    data-exclusive-3-month="{{ exclusivePricing.photoThreeMonth}}"
                                    data-exclusive-6-month="{{ exclusivePricing.photoSixMonths }}"
                                    data-exclusive-12-month="{{ exclusivePricing.photoOneYear }}"
                                    data-exclusive-24-month="{{ exclusivePricing.photoTwoYears }}"
                                    data-has-exclusive="{{ image.contributor.isExclusive ?image.contributor.isExclusive : 0 }}"
                                    data-add-to-cart-url="{{ path('cart_item_new') }}"
                                    data-load-cart-items-url="{{ path('cart_item_index') }}"
                                    data-remove-from-cart-url = "{{ path('cart_item_remove') }}"
                                    data-licence_type="{{ image.licenceType }}"
                                    data-sura_id="{{ image.suraID }}"

                            >Add to Basket</button>
                            {% endif %}
                        </div>


                    </div>

                    <br>


                    {% include 'reported_stock/new.html.twig' %}

                </div>
                {% else %}

                    {% if image.type.title == "video" %}
                        {% include 'stock/right_ready_pricing.html.twig' %}
                    {% else %}
                        {% include 'stock/right_managed_pricing.html.twig' %}
                    {% endif %}

                {% endif %}

            </div>
            <div class="search_key">
                <h4>Keywords</h4>
                <ul class="tags_wrap">
                    {% set keywords = image.keywords|split(",") %}
                    {% set rendered_keywords = [] %}
                    {% for word in keywords %}
                        {% if word not in rendered_keywords %}

                            <li>
                                <input type="hidden" name="stock" value="{{ image.id }}">
                                <input type="hidden" name="keyword" value="{{ word }}">
                                <a href="{{ path('search_keyword_search', {id: image.id,keyword: word ? word: "null" } ) }}" >{{ word }}</a>
                            </li>
                            {% set rendered_keywords = rendered_keywords|merge([word]) %}
                        {% endif %}
                    {% endfor %}
                </ul>
            </div>
            <div class="similar_images">
                <ul class="similar_menu">
                    <li class="active"><a href="#similar_img" data-toggle="tab"  aria-expanded="true">Similar Images</a></li>
                    <li><a href="#similar_shoot" data-toggle="tab" aria-expanded="true">Same Shoot</a></li>
                    <li><a href="#similar_model" data-toggle="tab" aria-expanded="true">Same Model</a></li>
                </ul>
                <div class="tab-content">
                    <div class="tab_pane fade show active in" id="similar_img">
                        <ul class="similar_thum">
                            {% for stock in similarStocks|slice(0,7) %}
                                <li><a href="{{ path('image_details', {id: stock.id}) }}"> <img src="{{asset('uploads/stock/')~stock.thumbName}}" class="similar_thumb"></a></li>
                            {% else %}
                                <span>No similar stocks found</span>
                            {% endfor %}
                            {% if similarStocks|length > 0 %}
                                <li>
                                    <a href="{{ path('home_similar_stock', {id: image.id}) }}" class="similar_link">
                                        View All
                                    </a>
                                </li>
                            {% endif %}
                        </ul>
                    </div>
                    <div class="tab_pane fade" id="similar_shoot">
                        <ul class="similar_thum">
                            {% for stock in sammeShootStock|slice(0,7) %}
                                <li><a href="{{ path('image_details', {id: stock.id}) }}"> <img src="{{asset('uploads/stock/')~stock.thumbName}}" class="similar_thumb"></a></li>
                                {% else %}
                                <span>No same shoot stock found</span>
                            {% endfor %}
                            {% if sammeShootStock|length > 0 %}
                                <li>
                                    <a href="{{ path('home_same_shoot', {id: image.id}) }}" class="similar_link">
                                        View All
                                    </a>
                                </li>
                            {% endif %}
                            {#<li><a href=""> <img src="{{asset('images/pexels-photo-1124066.jpeg')}}" class="similar_thumb"></a></li>#}
                        </ul>
                    </div>
                    <div class="tab_pane fade" id="similar_model">
                        <ul class="similar_thum">
                            {% for stock in sameModelStocks|slice(0,7) %}
                                <li><a href="{{ path('image_details', {id: stock.id}) }}"> <img src="{{asset('uploads/stock/')~stock.thumbName}}" class="similar_thumb"></a></li>
                            {% endfor %}
                            {% if sameModelStocks|length > 0 %}
                                <li>
                                    <a href="{{ path('home_model_stocks', {id: image.id}) }}" class="similar_link">
                                        View All
                                    </a>
                                </li>
                            {% else %}
                                <span>No stocks with the same model found</span>
                            {% endif %}
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>


</div>

    <!-- Modal -->
    <div class="modal fade" id="cart" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <a href="" class="close_modal" data-dismiss="modal"></a>
                <h2 class="modal_title">Cart <span class="total-count"></span></h2>
                <div class="modal-body">
                    <div class="datagrid cart_table">
                        <table>
                            <thead>
                            <tr>
                                <th>Image</th>
                                <th>Image ID</th>
                                <th>Size</th>
                                <th>Exclusive licence</th>
                                <th>Price</th>
                                <th>Delete</th>
                            </tr>
                            </thead>
                            <tbody class="show-cart">

                            </tbody>
                            <tfoot>
                            <tr>
                                <td colspan="6" class="total_cart">Total: <span class="total_price"></span>	</td>
                            </tr>
                            </tfoot>
                        </table>
                    </div>
                    <a href="{{ path('membershp_checkout') }}" class="proceed_btn">Proceed to Checkout</a>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button data-order-url="{{ path('cart_buy') }}" id="btn-order-now" type="button" class="btn btn-primary">Order now</button>
                </div>
            </div>
        </div>
    </div>

{% endblock %}
{% block javascripts %}


{% endblock %}