@extends('customer.app')

@section('content')
    <div class="dashboard__orders card">
        <div class="card-divider"></div>
        <div class="card-table">
            <div class="container-fluid"
                 style="background-color: #F1B4B8;height: auto;text-align: center;padding: 30px">
                <img src="{{asset('/resim_yok.png')}}" class="rounded-circle" alt="{{$affiliate->user->name}}"
                     width="175px" id="instamage">
                <h5 style="padding-top: 10px">{{$affiliate->user->name}}</h5>
                <p id="instauser"></p>
                <p id="instabio"></p>
                <p><span id="instafollowby"></span> <span id="instafollow"></span></p>
            </div>
            <div class="container-fluid" style="text-align: center;">
                <h4 style="padding-top: 1%">Sosyal Ağlar</h4>
                <div class="row" style="padding-right: 15%;padding-left: 15%;padding-top: 5%;padding-bottom: 5%">
                    <div class="col-2">
                        <a href="https://www.facebook.com/{{$affiliate->facebook}}" target="_blank"
                           class="btn btn-circle btn-xl"
                           style="background-color: #4177F2;border-color: #4177F2;color: white;"><i
                                class="fab fa-facebook"></i></a>
                    </div>
                    <div class="col-2">
                        <a href="https://www.twitter.com/{{$affiliate->twitter}}" target="_blank"
                           class="btn btn-circle btn-xl"
                           style="background-color: #49A1F2;border-color: #49A1F2;color: white;"><i
                                class="fab fa-twitter"></i></a>
                    </div>
                    <div class="col-2">
                        <a href="https://www.youtube.com/channel/{{$affiliate->youtube}}" target="_blank"
                           class="btn btn-circle btn-xl"
                           style="background-color: red;border-color: red;color: white;"><i class="fab fa-youtube"></i>
                        </a>
                    </div>
                    <div class="col-2">
                        <a href="https://www.instagram.com/{{$affiliate->instagram}}" target="_blank"
                           class="btn btn-circle btn-xl"
                           style="background-color: #C52F91;border-color: #C52F91;color: white;"><i
                                class="fab fa-instagram"></i> </a>
                    </div>
                    <div class="col-2">
                        <a href="https://api.whatsapp.com/send?phone={{$affiliate->whatsapp}}&text=Merhaba, SanatsalDünya web sitesi üzerinden yazıyorum."
                           target="_blank" class="btn btn-circle btn-xl"
                           style="background-color: #4BE676;border-color: #4BE676;color: white;"><i
                                class="fab fa-whatsapp"></i> </a>
                    </div>
                    <div class="col-2">
                        <a href="mailto:{{$affiliate->user->email}}" target="_blank" class="btn btn-circle btn-xl"
                           style="background-color: cornflowerblue;border-color: cornflowerblue;color: white;"><i
                                class="fa fa-mail-bulk"></i> </a>
                    </div>
                </div>
            </div>
            @if(!empty($instagram))
                <div class="container-fluid" id="instarea"
                     style="background-color: white;padding: 30px;padding-left: 10%;padding-right: 10%;text-align: center;">
                    <h4>Instagram Görselleri</h4>
                    <div class="owl-carousel owls owl-theme" id="insta-feed">
                        @foreach($instagram as $i)
                        <div class="item"
                             onclick="openImodal('{{$i->id}}')">
                            <img src="{{$i->media_type != 'VIDEO' ? $i->media_url : $i->thumbnail_url}}" style="width: 100%;height: 300px">
                        </div>
                            @endforeach
                    </div>
                </div>
            @endif
            @if(!empty($youtube))
                <div class="container-fluid"
                     style="background-color: white;padding: 30px;padding-left: 10%;padding-right: 10%;text-align: center">
                    <h4>Youtube Videoları</h4>
                    <div class="owl-carousel owls owl-theme" id="youtube-feed">
                        @foreach($youtube as $y)
                            <div class="item" onclick="openYmodal('{{$y['yt:videoId']}}')"><img
                                    src="{{$y['media:group']['media:thumbnail_attr']['url']}}"></div>
                        @endforeach
                    </div>
                </div>
            @endif
        </div>
    </div>

    <div class="modal" tabindex="-1" role="dialog" id="ymodal">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="embed-responsive embed-responsive-16by9" id="ymodalbody">

                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal" tabindex="-1" role="dialog" id="imodal">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" id="imodalbody">
                    <div class="row">
                        <div class="col-8">
                            <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
                                <div class="carousel-inner" id="imedias">

                                </div>
                                <a class="carousel-control-prev" href="#carouselExampleControls" role="button"
                                   data-slide="prev">
                                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                    <span class="sr-only">Previous</span>
                                </a>
                                <a class="carousel-control-next" href="#carouselExampleControls" role="button"
                                   data-slide="next">
                                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                    <span class="sr-only">Next</span>
                                </a>
                            </div>

                        </div>
                        <div class="col-4">
                            <p id="imodaluser"></p>
                            <p><span id="imodalcaption" style="font-size: 13px"></span></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('css')
    <style>

        .owl-item {
            -webkit-box-shadow: 4px 6px 101px -43px rgba(0, 0, 0, 0.75);
            -moz-box-shadow: 4px 6px 101px -43px rgba(0, 0, 0, 0.75);
            box-shadow: 4px 26px 48px -43px rgba(0, 0, 0, 0.75);
        }

        .btn-circle {
            width: 30px;
            height: 30px;
            text-align: center;
            padding: 6px 0;
            font-size: 12px;
            line-height: 1.428571429;
            border-radius: 15px;
        }

        .btn-circle.btn-lg {
            width: 50px;
            height: 50px;
            padding: 10px 16px;
            font-size: 18px;
            line-height: 1.33;
            border-radius: 25px;
        }

        .btn-circle.btn-xl {
            width: 70px;
            height: 70px;
            padding: 19px 16px;
            font-size: 24px;
            line-height: 1.33;
            border-radius: 35px;
        }
        video {
            width: 100%;
            height: auto;
        }
    </style>
@endsection
@section('js')
    <script>
        $('#save-social').on('click', function () {
            $('#save-social').attr('disabled', 'disabled');
            $('#save-social').text('Kaydediliyor...');
            $.post('{{route('affiliate-save-social')}}', $('#socials').serialize(), function (response) {
                if (response.status == 'success') {
                    $('#save-social').text('Kaydedildi');
                } else {

                    $('#save-social').text('Kaydedilemedi');
                    setTimeout(function () {
                        $('#save-social').removeAttr('disabled');
                        $('#save-social').text('Kaydet');
                    }, 2000);
                }
            }).fail(function () {
                $('#save-social').text('Kaydedilemedi');
                setTimeout(function () {
                    $('#save-social').removeAttr('disabled');
                    $('#save-social').text('Kaydet');
                }, 2000);
            });
        });

        function openImodal(mediaId) {
            var html = '';
            $.get('{{route('instagram-get-media-detail')}}?media_id='+mediaId+'&user_id={{$affiliate->user_id}}',function (response) {
            var num = 0;
            if (response.status == 'success') {
                switch (response.data.media_type) {
                    case 'CAROUSEL_ALBUM':
                        $.each(response.data.edges, function (key, v2) {
                            if (num == 0) {
                                html += '<div class="carousel-item active">';
                                num += 1;
                            } else {
                                html += '<div class="carousel-item">';
                            }
                            if(v2.type == 'VIDEO'){
                                html += '<video muted autoplay loop>';
                                html += '<source src="' + v2.url + '" type="video/mp4">';
                                html += '<source src="' + v2.url + '" type="video/ogg">';
                                html += '</video>';
                            }else{
                                html += '<img class="d-block w-100" src="' + v2.url + '">';
                            }
                            html += '</div>';

                        });
                        break;
                    case 'VIDEO':
                        html += '<div class="carousel-item active">';
                        html += '<video autoplay>';
                        html += '<source src="' + response.data.media_url + '" type="video/mp4">';
                        html += '<source src="' + response.data.media_url + '" type="video/ogg">';
                        html += '</video>';
                        html += '</div>';
                        break;
                    default:
                        html += '<div class="carousel-item active">';
                        html += '<img class="d-block w-100" src="' + response.data.media_url + '">';
                        html += '</div>';
                        break;
                }


            }
            $('#imedias').html(html);
            $('#imodalcaption').text(response.data.caption);
            $('#imodaluser').html('<a href="' + response.data.permalink + '" target="_blank"><i style="color: rebeccapurple" class="fab fa-instagram"></i> @' + response.data.username + '</a>');
            $('#imodal').modal('show');
            });
        }

        function openYmodal(id) {
            $('#ymodalbody').html('<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/' + id + '" allowfullscreen></iframe>')
            $('#ymodal').modal('show');
        }

        $('#youtube-feed').owlCarousel({
            loop: true,
            margin: 10,
            nav: true,
            responsive: {
                0: {
                    items: 1
                },
                600: {
                    items: 3
                },
                1000: {
                    items: 5
                }
            }
        });
        $('#insta-feed').owlCarousel({
            loop: true,
            margin: 10,
            nav: true,
            responsive: {
                0: {
                    items: 1
                },
                600: {
                    items: 3
                },
                1000: {
                    items: 5
                }
            }
        });
        function httpGet(url, callback) {
            var xmlhttp = new XMLHttpRequest();
            xmlhttp.onreadystatechange = function () {
                // return if not ready state 4
                if (this.readyState !== 4) {
                    return;
                }

                // check for redirect
                if (this.status === 302 /* or may any other redirect? */) {
                    var location = this.getResponseHeader("Location");
                    return ajax.call(this, location /*params*/, callback);
                }

                // return data
                var data = JSON.parse(this.responseText);
                callback(data);
            };
            xmlhttp.open("GET", url, true);
            xmlhttp.send();
        }

    </script>
@endsection