@extends('layouts.app', ['redirectPage' => 'members', 'redirect_url'=>'members'])
@section('PageHeading', 'Studio Members List')
@section('bodyClass', 'member-management')
@section('sidebar', 'true')
@section('content')
<div class="container_fluid">
    <div class="box_content">
        <div class="box_overlayout">
            <div class="box_innerlayout">
                <div class="task_card">
                    <div class="row align-items-center">
                        <div class="col-md-4 d-flex align-items-center">
                            <div class="training_img">
                                <img src="{{Helper::getStudioLogo($studio->logo)}}" alt="studioLogo">
                            </div>
                            <div class="task_card_header">
                                <h5>{{$studio->name}}</h5>
                                <p class="d-none d-md-block">{{$studio->address}}</p>
                            </div>
                        </div>
                        <div class="col-md-4 columns d-none d-md-block">
                            <div class="admin_total">
                                <div class="overview_total">
                                    <div class="admin_count_header">
                                        <h5>{{ (!empty($studio->getFollowersCount))? $studio->getFollowersCount->total : 0 }}
                                        </h5>
                                        <p>Followers</p>
                                    </div>
                                </div>
                               <!-- <div class="overview_total">
                                    <div class="admin_count_header">
                                        <h5>{{ (!empty($studio->getUnClosedLeadCount))? $studio->getUnClosedLeadCount->total : 0 }}
                                        </h5>
                                        <p>Unclosed Leads</p>
                                    </div>
                                </div>-->
                                <div class="overview_total">
                                    <div class="admin_count_header">
                                        <h5>{{ (!empty($studio->getMessageTodayCount))? $studio->getMessageTodayCount->total : 0 }}
                                        </h5>
                                        <p> Messaged Today</p>
                                    </div>
                                </div>
                                <div class="overview_total">
                                    <div class="admin_count_header">
                                        <h5>{{ (!empty($studio->getLeftToMessageCount))? $studio->getLeftToMessageCount->total : 0 }}
                                        </h5>
                                        <!--<p>Left to Message Today</p>-->
                                        <p>Overdue</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="task_card_wrap d-none d-md-block">
                                <div class="btn-group">
                                    <button class="change_btn stud-btn">
                                        <img src="{{ asset('images/pipe.svg') }}" alt="pipe">
                                        Filter Studio</button>
                                </div>
                                <div class="btn-group all-studio">
                                    <button class="studio_btn">
                                        <img src="{{ asset('images/arrows.svg') }}" alt="arrows">
                                        <a class="show-all-studio-link"
                                            href="{{route('social-tracking.overview')}}">Show All Studio
                                            Tasks</a></button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab_content">
                    <div class="row align-items-center">
                        @include('social_tracking.tab_menu',['tabName' =>'SocialStrategy'])
                    </div>
                </div>
                <div class="property-toggle-content">
                    <div class="theme-toggle-area active">
                    <div class="theme-toggle-trigger">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M20.9998 8.115L18.8848 6L11.9998 12.87L5.11476 6L2.99976 8.115L11.9998 17.115L20.9998 8.115Z" fill="white"/>
                </svg>
                Target Locations
                <div class="accordion_edit ms-auto"
                                    onclick="getModalPopup('{{ route('social-tracking.createLocation',['studioID'=>$studioID]) }}')">
                                    <img src="{{ asset('/images/edit_white.svg') }}" alt="edit">
                                    <span>Edit</span>
                                </div>
            </div>
                        
            <div class="theme-toggle-content d-block">
                            <div class="card_item_body">
                                <div class="card_item">
                                    <div class="row align-items-center">
                                        <div class="col-md-12">
                                            <div class="location_list">
                                                <ul>
                                                    @forelse ($locations as $loc)
                                                    <li>
                                                        <img src="{{ asset('/images/location.svg') }}" alt="location">
                                                        {{$loc->location_name}}
                                                    </li>
                                                    @empty
                                                    <li></li>
                                                    @endforelse
                                                </ul>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="theme-toggle-area">
                    <div class="theme-toggle-trigger">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M20.9998 8.115L18.8848 6L11.9998 12.87L5.11476 6L2.99976 8.115L11.9998 17.115L20.9998 8.115Z" fill="white"/>
                        </svg>
                        HashTag
                        <div class="accordion_edit ms-auto"
                                    onclick="getModalPopup('{{ route('social-tracking.createHashtag',['studioID'=>$studioID]) }}')">
                                    <img src="{{ asset('/images/edit_white.svg') }}" alt="edit">
                                    <span>Edit</span>
                                </div>
                    </div>
                        <div class="theme-toggle-content d-none">
                            <div class="card_item_body">
                                <div class="card_item">
                                    <div class="row align-items-center">
                                        <div class="col-md-12">
                                            <div class="location_list">
                                                <ul>
                                                    @if(!empty($hashtag))
                                                    @php
                                                    $hashtags = explode('#', $hashtag->name);
                                                    $hashtags = array_filter($hashtags);
                                                    @endphp
                                                    @foreach($hashtags as $tagname)
                                                    <li>
                                                        #{{$tagname}}
                                                    </li>
                                                    @endforeach
                                                    @else
                                                    <li></li>
                                                    @endforelse
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="theme-toggle-area">
                        <div class="theme-toggle-trigger">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M20.9998 8.115L18.8848 6L11.9998 12.87L5.11476 6L2.99976 8.115L11.9998 17.115L20.9998 8.115Z" fill="white"/>
                            </svg>
                            Message Template
                            <div class="accordion_edit ms-auto"
                                    onclick="getModalPopup('{{ route('social-tracking.createMsgTemplate',['studioID'=>$studioID]) }}')">
                                    <img src="{{ asset('/images/add_white.svg') }}" alt="add">
                                    <span>Add Template</span>
                                </div>
                                <div class="accordion_edit" onclick="reorder();">
                                    <img src="{{ asset('/images/edit_white.svg') }}" alt="reorder">
                                    <span> Reorder Tracking Sheet</span>
                                </div>
                        </div>
                        <div class="theme-toggle-content d-none">
                            <div class="card_item_body">
                                <p style="display: none" id="copy_message"></p>
                                @forelse($templates as $template)
                                <div class="card_item">
                                    <div class="row ">
                                        <div class="col-md-2">
                                            <div class="card__header">
                                                <div class="toggle_icons">
                                                    <span class="boxArrow">
                                                        <a href="#" id="toggle3">
                                                            <img src="{{ asset('/images/chevron_blue_down.svg') }}"
                                                                alt="down_arrow" id="bg3" />
                                                        </a></span>
                                                    <h5>{{$template->name}}</h5>
                                                </div>
                                                @if(!empty($template->is_track))
                                                <div class="follow_content">
                                                    <img src="{{ asset('/images/blue_bg_white_tick.svg') }}"
                                                        alt="added">
                                                    <p> Added to Social Tracking Sheet </p>
                                                </div>
                                                @endif
                                            </div>
                                        </div>
                                        <div class="col-md-7">
                                            <div class="strategy_listitem toggle3">
                                                {!! $template->description !!}
                                            </div>
                                        </div>
                                        <div class="col-md-3 msg_btn_content columns">
                                            <button class="msg_btn" id="copy_btn_{{$template->id}}"
                                                onclick="getCopyMsg('{{ route('social-tracking.getCopyMsg',['id'=>$template->id])  }}', {{$template->id}})">
                                                <svg width="14" height="15" viewBox="0 0 14 15" fill="none"
                                                    xmlns="http://www.w3.org/2000/svg">
                                                    <path
                                                        d="M9.86654 0.166992H1.86654C1.1332 0.166992 0.533203 0.766992 0.533203 1.50033V10.8337H1.86654V1.50033H9.86654V0.166992ZM9.19987 2.83366L13.1999 6.83366V13.5003C13.1999 14.2337 12.5999 14.8337 11.8665 14.8337H4.52654C3.7932 14.8337 3.19987 14.2337 3.19987 13.5003L3.20654 4.16699C3.20654 3.43366 3.79987 2.83366 4.5332 2.83366H9.19987ZM8.5332 7.50033H12.1999L8.5332 3.83366V7.50033Z" />
                                                </svg>Copy Message
                                            </button>
                                            <button class="msg_edit_btn"
                                                onclick="getModalPopup('{{ route('social-tracking.createMsgTemplate',['studioID'=>$studioID]).'/'.$template->id }}')">
                                                <img src="{{ asset('/images/edit_black.svg') }}" alt="edit">Edit
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                @empty
                                <div class="card_item">
                                    <div class="row ">
                                    </div>
                                </div>
                                @endforelse
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@push('scripts')
<script>
$(function() {
    $('div').on('click', "#addScnt", function() {
        var scntDiv = $('#p_scents');
        var remove = '<div  class="col-md-2 col-sm-12">' +
            '<button class="lib_btn close remScnt">' +
            '<img src="' + "{!! asset(" / images / delete.svg ") !!}" + '" alt="cancel">Remove' +
            '</button>' +
            '</div>';
        $('<div class="row"><div class="col-md-6 col-sm-12 admin_input">' +
            '<input type="text" name="location[]"  class="form-control location-txt-field" placeholder="Enter Location" value=""></div>' +
            remove + '</div>').appendTo(scntDiv);
        locationFiledIndex();
        return false;
    });
    $('div').on('click', ".remScnt", function() {
        $(this).parent().parent().remove();
        locationFiledIndex();
        return false;
    });
});

function locationFiledIndex() {
    $(".location-txt-field").each(function(index) {
        var name = 'location[' + index + ']';
        $(this).attr("name", name);
    });
}

function reorder() {
    getModalPopup('{{ route('
        social - tracking.sortMsgTemplate ',['
        studioID '=>$studioID]) }}');
    var myInterval = setInterval(function() {
        if ($("#sortable").length) {
            $("#sortable").sortable({
                update: function() {
                    $("#sortable li").each(function(index) {
                        $(this).find('.seq_no').html(index + 1);
                    });
                }
            });
        }
    }, 500);
}
</script>
<style>
#p_scents .row,
#p_scents2 .row {
    margin-bottom: 15px;
}

.follow_list ul li {
    border: 0;
    background: none;
}

.follow_list_item p {
    min-width: 300px;
    text-align: left;
}

.follow_list_item p span {
    padding-left: 25px;
}
</style>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script>
function getCopyMsg(url, id) {
    $.get(url, function(data) {
        $('#copy_message').html(data[0]);
        copyToClipboard('copy_message', id);
    });
}

function copyToClipboard(elementId, id) {

    // Create an auxiliary hidden input
    var aux = document.createElement("input");
    // Get the text from the element passed into the input
    aux.setAttribute("value", document.getElementById(elementId).innerHTML);
    // Append the aux input to the body
    document.body.appendChild(aux);
    // Highlight the content
    aux.select();
    // Execute the copy command
    document.execCommand("copy");
    // Remove the input from the body
    document.body.removeChild(aux);
    $('#copy_btn_' + id).html('Copied');
    setTimeout(
        function() {
            var cpy_icon = "{!! asset(" / images / clone_black.svg ") !!}";
            $('#copy_btn_' + id).html('<img src="' + cpy_icon + '" alt="copy">Copy Message');
        }, 5000);
}
</script>
@endpush