@extends('web.pages.showroom._template', ['page' => ''])

@section('showroom-page-content')
    <div class="mb-5" style="
            border: .4px solid #dd333355;
    ">
        <div
            style="
            height: 200px;
            background-image: url('{{ $showroom->logo_showroom_url }}');
            background-position: 50% 50%;
            background-repeat: none;
            background-size: cover" class="mb-5">
        </div>
        <div class="row m-3">
            <div class="col-12 col-lg-6">
                <div class="row justify-content-start mb-4">
                    <div class="col-12 col-sm-4 d-flex justify-content-center">
                        <div style="
                        height: 120px; width: 120px; overflow: hidden; border-radius: 50%; border: 6px solid #d33"
                            class="d-flex align-items-center mb-3">
                            <img src="{{ $showroom->logo_showroom_url }}" alt="" style="object-fit:cover">
                        </div>
                    </div>
                    <div class="d-none d-sm-block mr-5 "></div>
                    <div class="col-12 col-sm-6">
                        <div>
                            <h4>{{ $showroom->name }}</h4>
                        </div>
                        <div class="">
                            <p style="line-height: 2rem"><strong>Lokasi:</strong>{{ $showroom->full_address }}</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12 col-lg-6 mb-4">
                <div class="row justify-content-end">
                    <div class="col-12 col-lg-4">
                        <button data-toggle="modal" data-target="#shareLinkModal"
                            class="btn btn-block btn-sm  btn-outline btn-ellipse btn-reveal-left"><i
                                class="fa fa-share-alt"></i>
                            Bagikan</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Social Link Modal -->
    <div class="modal fade" id="shareLinkModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <strong class="modal-title">Bagikan</strong>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body text-center mb-4">
                    Bagikan laman ini
                    <br>
                    @php
                        $message = 'Lihat apa yang saya temukan di Carshow.id! ';
                        $media_url = url()->current();
                    @endphp
                    <div class="social-icons stacked-icons">
                        <a href="https://web.whatsapp.com/send?text={{ $message . $media_url }}"
                            data-action="share/whatsapp/share" target="_blank"
                            class="social-link social-whatsapp fab fa-whatsapp" title="Bagikan di Whatsapp"
                            rel="noopener noreferrer"></a>
                        <a href="https://www.facebook.com/share.php?u={{ $media_url }}" target="_blank"
                            class="social-link social-facebook fab fa-facebook-f" title="Bagikan di Facebook"
                            rel="noopener noreferrer"></a>
                        <a href="https://twitter.com/intent/tweet?text={{ $message . $media_url }}" target="_blank"
                            class="social-link social-twitter fab fa-twitter" title="Bagikan di Twitter"></a>
                        <a href="mailto:?subject=&amp;body=" class="social-icon stacked social-email" target="_blank"
                            title="email"></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <input type="hidden" id="showroom_id" name="showroom_id" value="{{ $showroom->slug ?? $showroom_id }}">
    <div id="catalog"></div>
    @push('stack-script')
        <script src="{{ asset('reactjs/PublicCatalog.js') }}?v=1.0.12"></script>
    @endpush
@endsection