@extends('frontEnd.layout-ex')

@section('content')
<style>
    .artwork-content>p {
        font-family: "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, sans-serif !important;
        font-size: 13px !important;
        line-height: 18px !important;
        font-weight: 600 !important;
    }
    @media only screen and (min-device-width: 320px) and (max-device-width: 767px) {
        .artwork-content {
            margin-top: 20px;
        }
        .my-banner-text a {
            display: inline-block;
            color: #ffffff;
            font-size: 16px !important;
            font-weight: 600;
            text-align: center !important;
            margin-top: 10px !important;
            border: 1px solid #ccc !important;
            padding: 5px 10px !important;
            background: #ee2e24 !important;
        }
    }
</style>
    <section class="pager-section overlay">
        <div class="container">
                        <div class="main-banner-content p-relative">
                            <div class="social-links">
                                <ul>
                                    <li><a href="https://www.facebook.com/theblackstoryproject" title=""><i class="fab fa-facebook-f"></i></a></li>
                                    <li><a href="https://www.instagram.com/theblackstoryproject/" title=""><i class="fab fa-instagram"></i></a></li>
                                </ul>
                            </div><!--social-links end-->
                            <div class="pager-content">
                                <ul class="breadcrumb-list">
                                    <li><a href="#" title="">Home</a></li>
                                    <li><a href="{{url('artworks')}}">Artworks</a></li>
                                    @if(isset(($artwork->categories[0]->section->title_en)))<li><span>{{$artwork->categories[0]->section->title_en}}</span></li>@endif
                                </ul><!--breadcrumb end-->
                                <h2 class="page-title">{{$artwork->title_en}}</h2>
                            </div><!--pager-content end-->
                        </div><!--main-banner-content end-->
        </div>
    </section><!--pager-section end-->


    <section class="page-content pt-0">
        <div class="container">
            <div class="row">
                <div class="col-lg-2"></div>

                <div class="col-lg-8">
                    <div class="blog-post-single">
                        <div class="float-right inquiry-button"><a href="#popup1">INQUIRE</a></div>
                        <h2>&nbsp;</h2>
                        <div class="row">
                            <div class="col-lg-6">
                                <img src="@if($artwork->photo_file){{asset('uploads/topics/').'/'.$artwork->photo_file}}@else{{'https://via.placeholder.com/880x449'}} @endif" alt="" class="w-100-artist details">
                            </div>
                            <div class="col-lg-6">
                                <div class="artwork-content">
                                    @if(isset($artwork->categories[0]->section->title_en))
                                        <p style="font-size: 13.92px;">Artist: {{$artwork->categories[0]->section->title_en}}</p>
                                        <hr>
                                    @endif
                                    {!! $artwork->details_en !!}
                                </div>
                            </div>
                        </div>
                        {{--                        <span>Chine 2020</span>--}}

                    </div><!--blog-post-single end-->
                    <div class="my-banner-text">
                        <a href="#popup1">Request for price</a>
                    </div>
                    {{--                    <div class="tags-list">--}}
                    {{--                        <h4>Tags:</h4>--}}
                    {{--                        <ul>--}}
                    {{--                            <li><a href="#" title="">Law</a></li>--}}
                    {{--                            <li><a href="#" title="">Pandemic</a></li>--}}
                    {{--                            <li><a href="#" title="">World</a></li>--}}
                    {{--                        </ul>--}}
                    {{--                    </div><!--tags-list end-->--}}
                    {{--                    <div class="related-posts">--}}
                    {{--                        <div class="section-title">--}}
                    {{--                            <h2 class="h-title dark-clr">Viewed news</h2>--}}
                    {{--                        </div><!--section-title end-->--}}
                    {{--                        <div class="blog-posts">--}}
                    {{--                            <div class="row">--}}
                    {{--                                <div class="col-lg-4 col-md-6 col-sm-6">--}}
                    {{--                                    <div class="blog-post">--}}
                    {{--                                        <div class="blog-thumbnail">--}}
                    {{--                                            <img src="https://via.placeholder.com/444x287" alt="" class="w-100">--}}
                    {{--                                        </div>--}}
                    {{--                                        <div class="blog-info">--}}
                    {{--                                            <h4>Family relation</h4>--}}
                    {{--                                            <h2><a href="#" title="">What should I do if the landlord terminates the contract?</a></h2>--}}
                    {{--                                            <span>23 October 2019</span>--}}
                    {{--                                        </div>--}}
                    {{--                                    </div><!--blog-post end-->--}}
                    {{--                                </div>--}}
                    {{--                                <div class="col-lg-4 col-md-6 col-sm-6">--}}
                    {{--                                    <div class="blog-post">--}}
                    {{--                                        <div class="blog-thumbnail">--}}
                    {{--                                            <img src="https://via.placeholder.com/444x287" alt="" class="w-100">--}}
                    {{--                                        </div>--}}
                    {{--                                        <div class="blog-info">--}}
                    {{--                                            <h4>Business</h4>--}}
                    {{--                                            <h2><a href="#" title="">How to take out <br /> a loan with minimal interest </a></h2>--}}
                    {{--                                            <span>18 April 2020</span>--}}
                    {{--                                        </div>--}}
                    {{--                                    </div><!--blog-post end-->--}}
                    {{--                                </div>--}}
                    {{--                                <div class="col-lg-4 col-md-6 col-sm-6">--}}
                    {{--                                    <div class="blog-post">--}}
                    {{--                                        <div class="blog-thumbnail">--}}
                    {{--                                            <img src="https://via.placeholder.com/444x287" alt="" class="w-100">--}}
                    {{--                                        </div>--}}
                    {{--                                        <div class="blog-info">--}}
                    {{--                                            <h4>Business</h4>--}}
                    {{--                                            <h2><a href="#" title="">New method of safe home purchase in Russia</a></h2>--}}
                    {{--                                            <span>18 April 2020</span>--}}
                    {{--                                        </div>--}}
                    {{--                                    </div><!--blog-post end-->--}}
                    {{--                                </div>--}}
                    {{--                            </div>--}}
                    {{--                        </div><!--blog-posts end-->--}}
                    {{--                    </div><!--related-posts end-->--}}
                </div>
                <div class="col-lg-2"></div>

            </div>
        </div>
    </section><!--page-content end-->

    <div id="popup1" class="art-overlay">
        <div class="art-popup">
            <h2>{{$artwork->title_en}}</h2>
            <hr>
            <a class="art-close" href="#">&times;</a>
            <div class="cnst-form inquiry-top">
                <div class="consulation-form">
                    <form id="inquiry-form" method="post" action="#">
                        <div class="response"></div>
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="form-group">
                                    <input type="text" name="name" class="form-control name" placeholder="Your name*">
                                </div><!--form-group end-->
                            </div>
                            <div class="col-lg-12">
                                <div class="form-group">
                                    <input type="text" name="email" class="form-control email" placeholder="Email*">
                                </div><!--form-group end-->
                            </div>
                            <div class="col-lg-12">
                                <div class="form-group">
                                    <input type="tel" name="phone" class="form-control email" placeholder="Phone*">
                                </div><!--form-group end-->
                            </div>
                            <div class="col-lg-12">
                                <div class="form-group">
                                    <textarea name="message" placeholder="Message"></textarea>
                                </div>
                            </div>
                            <input type="hidden" name="art_id" value="{{$artwork->id}}">
                            <div class="col-lg-4"></div>
                            <div class="col-lg-4">
                                <button type="button" class="submit inquery-btn" id="req-submit">Submit</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection