@extends('mix::layouts.master')
@section('title', __('View Audience'))
@section('content')

@section('back-button', route('user-mix-audience-index'))
@section('footerJS')
    <script>

        var objects = {
            switch: function(flag){
                flag = flag.toLowerCase();
                var src = "{{ gs('assets/image/countries/') }}/" + flag + '.svg';
                jQuery('.flag-img-tag').attr('src', src);
                jQuery('.flag-img-tag').show();
            }
        };

        var sw = jQuery('[name="lastCountry"]');
        objects.switch(sw.val());

        sw.on('change', function(){
            objects.switch(jQuery(this).val());
        });


    </script>
@stop


<div class="mix-padding-10">
    
        <div class="mb-5 flex bg-gray-100 p-5 rounded-xl">
            <div class="text-lg font-bold mr-auto hidden">{{ __('View') }}</div>
        
            <div class="ml-auto flex items-center gap-2">
                @if ($page = $au->has_page())
                <a class="sandy-expandable-btn bg-black cursor-pointer" href="{{ route('user-mix-message-create-convo', $page->username) }}" app-sandy-prevent>
                    <span class="flex items-center justify-between text-white">
                        {!! ori('Support, Help, Question', 'Messages, Chat.2', 'w-5 h-5') !!} <span>{{ __('Chat') }}</span></span>
                </a>
                @endif
                
                <a class="sandy-expandable-btn bg-white cursor-pointer mail-popup-open">
                    <span class="flex items-center justify-between">{!! orion('mail-1', 'w-5 h-5') !!} <span>{{ __('Email') }}</span></span>
                </a>
                <a class="a-options-open cursor-pointer sandy-expandable-btn bg-white">
                    <span class="flex items-center justify-between">{!! orion('more-1', 'w-4 h-4 rotate-90 transform') !!}</span>
                </a>
            </div>
        </div>
    
    <div class="audience-preview-top-section">
        <div class="audience-preview-photo">
            <div class="h-avatar is-video remove-before rounded-full bg-transparent">
                {!! $au->avatar() !!}
            </div>
        </div>

        <div>
            <h4 class="audience-preview-name">{{ $au->info('name') }}</h4>
            <div class="mt-1 text-gray-500 flex items-center text-sm">
                <a href="" class="sandy-expandable-btn rounded-full px-10 py-1 hidden">{{ __('Invite to Yetti') }}</a>
                
                <p class="flex items-center gap-2">{!! orion('priority-warning-1', 'pr-1 hidden') !!} <img src="{{ \Country::icon($au->info('lastCountry')) }}" class="w-5 h-5" alt=""> {{ \Country::country_code($au->info('lastCountry')) }} - {{ \Carbon\Carbon::parse($audience->created_at)->toFormattedDateString() }}<br></p>
            </div>
        </div>
    </div>

    
    <div class="flex bg-white p-5 rounded-xl items-center my-6">
        <div class="text-base font-bold mr-auto">{{ __('Integrations') }}</div>
    
        <div class="ml-auto flex items-center gap-2">
            <a class="sandy-expandable-btn bg-black text-white rounded-2xl send-integration-open cursor-pointer">
                <span>{{ __('Send To Intergration') }}</span>
            </a>
        </div>
    </div>




    <div class="px-2">
        <div class="mt-4 ml-0">
            <div class="flex gap-2">
                <a href="" class="sandy-expandable-btn flex items-center justify-center audience-btn border border-gray-300 border-solid hidden">
                    <span class="flex items-center justify-between p-0">{!! orion('new-message-1', 'w-7 h-7') !!} {{ __('Email') }}</span>
                </a>

                @if (!empty($email = $au->info('email')))
                    <a href="mailto:{{ $email }}" class="audience-btn rounded-lg w-full ion-no-margin flex justify-center items-center h-12 border border-solid">
                        {!! orion('mail-1', 'mr-2 mb-1 stroke-current') !!}
                        
                        <span class="font-semibold text-sm xs:text-base mb-1">{{ __('Email') }}</span>
                    </a>
                @endif
                @if (!empty($phone = $au->info('phone_number')))
                <a href="tel:{{ $phone }}" class="audience-btn rounded-lg w-full ion-no-margin flex justify-center items-center h-12 border border-solid">
                    {!! orion('calls-1', 'mr-2 mb-1 stroke-current') !!}
                    
                    <span class="font-semibold text-sm xs:text-base mb-1">{{ __('Call') }}</span>
                </a>
                @endif
                @if (!empty($phone = $au->info('phone_number')))
                <a href="sms:{{ $phone }}" class="audience-btn rounded-lg w-full ion-no-margin flex justify-center items-center h-12 border border-solid">
                    {!! orion('new-message-1', 'mr-2 mb-1 stroke-current') !!}
                    
                    <span class="font-semibold text-sm xs:text-base mb-1">{{ __('Text') }}</span>
                </a>
                @endif
            </div>
        </div>
    
    
        <div class="mt-5 flex flex-col gap-4 p-5 bg-white">
            <div class="contact-list block border-b border-gray-200 border-solid px-0 remove-before">
                <div class="flex items-center justify-center">
                    <div class="mr-auto">
                        <h2 class="flex items-center text-sm font-semibold">
                            <div class="truncate">{{ __('Phone Number') }}</div>
                        </h2>
                        <div class="text-sm text-gray-500">
                            <div class="truncate"><span>{{ $au->info('phone_number') }}</span></div>
                        </div>
                    </div>
    
                    <div class="flex gap-4 mr-0">
                        <a href="sms:{{ $au->info('phone_number') }}">
                            {!! orion('cellphone-1', 'w-6 h-6') !!}
                        </a>
                        <a href="sms:{{ $au->info('phone_number') }}">
                            {!! orion('message-1', 'w-6 h-6') !!}
                        </a>
                    </div>
                </div>
            </div>
            <div class="contact-list block border-b border-gray-200 border-solid px-0 remove-before">
                <div class="flex items-center justify-center">
                    <div class="mr-auto">
                        <h2 class="flex items-center text-sm font-semibold">
                            <div class="truncate">{{ __('Email') }}</div>
                        </h2>
                        <div class="text-sm text-gray-500">
                            <div class="truncate"><span>{{ $au->info('email') }}</span></div>
                        </div>
                    </div>
    
                    <div class="flex gap-4 mr-0">
                        <a href="mailto:{{ $au->info('email') }}">
                            {!! orion('mail-1', 'w-6 h-6') !!}
                        </a>
                    </div>
                </div>
            </div>
            <div class="contact-list block border-b border-gray-200 border-solid px-0 remove-before">
                <div class="flex items-center justify-center">
                    <div class="mr-auto">
                        <h2 class="flex items-center text-sm font-semibold">
                            <div class="truncate">{{ __('Address') }}</div>
                        </h2>
                        <div class="text-sm text-gray-500">
                            <div class="truncate"><span>{{ $au->info('settings.location') }}</span></div>
                        </div>
                    </div>
    
                    <div class="flex gap-4 mr-0">
                        <div>
                            {!! orion('home-1', 'w-6 h-6') !!}
                        </div>
                    </div>
                </div>
            </div>


            @if ($page = $au->has_page())
            <a class="contact-list block px-0 remove-before" target="_blank" href="{{ bio_url($page->id, 'full') }}">
                <div class="flex items-center justify-center">
                    <div class="h-avatar md bg-transparent remove-before remove-after rounded-full w-12 h-12 mr--auto">
                        {!! avatar($page->id, true) !!}
                    </div>
        
                    <div class="mr-auto ml-4">
                        <h2 class="flex items-center text-sm font-semibold">
                            <div class="truncate">{{ $page->name }}</div>
                        </h2>
                        <div class="text-sm text-gray-500">
                            <div class="truncate"><span>{{ bio_url($page->id, 'short') }}</span></div>
                        </div>
                    </div>

                    <div class="ml-auto">
                        {!! orion('angle-right-1', 'w-7 h-7') !!}
                    </div>
                </div>
            </a>
            @endif

            <div class="flex flex-col gap-3">
                                    
                @foreach (\App\Sandy\SandyMembership::plans($audience->user) as $item)
                <div class="index-header-wrap p-5 block rounded-xl shadow-none border-2 border-dashed border-gray-300">
                    <div class="flex- justify-between items-center mb-0">
                        <div class="index-header-line mb-0">
                        
                            <div class="index-header-details">
                                <div class="index-header-info">{{ __('Ongoing Plan') }}</div>
                                <div class="index-header-money">{{ ao($item->membership, 'name') }}</div>
                            </div>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>

            <a href="{{ route('user-mix-audience-activity', $audience->id) }}" class="contact-list block border-b border-gray-200 border-solid px-0 remove-before">
                <div class="flex items-center justify-center">
                    <div class="mr-auto">
                        <h2 class="flex items-center text-sm font-semibold">
                            <div class="truncate">{{ __('Activity') }}</div>
                        </h2>
                    </div>
    
                    <div class="flex gap-4 mr-0">
                        <span>
                            {!! orion('angle-right-1', 'w-7 h-7') !!}
                        </span>
                    </div>
                </div>
            </a>
            <a href="{{ route('user-mix-audience-notes', $audience->id) }}" class="contact-list block border-b border-gray-200 border-solid px-0 remove-before">
                <div class="flex items-center justify-center">
                    <div class="mr-auto">
                        <h2 class="flex items-center text-sm font-semibold">
                            <div class="truncate">Notes</div>
                        </h2>
                    </div>
    
                    <div class="flex gap-4 mr-0">
                        <span>
                            {!! orion('angle-right-1', 'w-7 h-7') !!}
                        </span>
                    </div>
                </div>
            </a>
        </div>


        <div class="mt-5">
            <form action="{{ route('user-mix-audience-post', 'download_contact') }}" method="POST">
                @csrf

                <input type="hidden" name="auid" value="{{ $audience->id }}">
                <button class="sandy-expandable-btn w-full rounded-xl p-3 no-disabled-btn">
                    <span class="flex items-center justify-center gap-1">{!! orion('download-6', 'w-5 h-5') !!} <span>{{ __('Download as Contact') }}</span></span>
                </button>
            </form>
        </div>
    </div>
</div>


<div data-popup=".mail-popup" class="mobile-modal half-short">
    <div class="modal-handle"></div>
	<div class="dashboard-header-banner relative mt-0 mb-5">
		<div class="card-container">
			
			<div class="text-lg font-bold">{{ __('Send Email') }}</div>
            <div class="side-cta top-8 right-3 text-6xl">
                📫
            </div>
		</div>
	</div>

    <form action="{{ route('user-mix-audience-post', 'send_single_email') }}" class="bordered-form-input" method="POST">
        @csrf

        <input type="hidden" name="auid" value="{{ $audience->id }}">
        
        
        <div class="flex flex-col gap-4">
            <div class="form-input">
                <label>{{ __('Subject') }}</label>
                <input type="text" name="subject">
            </div>
            <div class="form-input">
                <label>{{ __('Message') }}</label>
                <textarea name="message" class="resize-none"></textarea>
            </div>
        </div>

        <button class="mt-5 sandy-expandable-btn px-7"><span>{{ __('Send') }}</span></button>
    </form>



    <button class="sandy-expandable-btn bg-transparent w-full mail-popup-close mt-5"><span>{{ __('Close') }}</span></button>
</div>


<div data-popup=".send-integration" class="mobile-modal half-short">
    <div class="modal-handle"></div>
	<div class="dashboard-header-banner relative mt-0 mb-5">
		<div class="card-container">
			
			<div class="text-lg font-bold">{{ __('Integration') }}</div>
            <div class="side-cta top-8 right-3 text-6xl">
                🛠️
            </div>
		</div>
	</div>
    
	<div class="grid grid-cols-1">
		@foreach (config('sandy.integrations') as $key => $value)
        @if (user("integrations.$key.enable"))
            <form action="{{ route('user-mix-audience-post', 'send_integration_single') }}" method="POST" class="mb-5">
                @csrf
                <input type="hidden" name="type" value="{{ $key }}">
                <input type="hidden" name="auid" value="{{ $audience->id }}">
            
                <button data-delete="{{ __('Are you sure you want to send this audience to this Integration?') }}" data-title="{{ __('Confirm') }}" data-confirm-btn="{{ __('Yes, Send') }}" data-confirm-btn-color="#000" class="contact-list block border-b border-gray-200 border-solid px-0 remove-before w-full outline-none no-disabled-btn">
                    <div class="flex items-center justify-center">
                        <div class="preview mr-">
                            <img src="{{ gs('assets/image/brands', ao($value, 'img')) }}" class="w-10 h-10 object-contain" alt="">
                        </div>
                        <div class="ml-5 mr-auto">
                            <h2 class="flex items-center text-sm font-semibold">
                                <div class="truncate">{{ ao($value, 'name') }}</div>
                            </h2>
                        </div>
    
                        <div class="flex gap-4 mr-0">
                            <div>
                                {!! orion('angle-right-1', 'w-5 h-5') !!}
                            </div>
                        </div>
                    </div>
                </button>
            </form>
        @endif
		@endforeach
	</div>

    <a href="{{ route('user-mix-settings-integrations-all') }}" class="px-5 sandy-expandable-btn mt-0"><span>{{ __('Setup Integrations') }}</span></a>
    <button class="sandy-expandable-btn bg-transparent w-full send-integration-close mt-5"><span>{{ __('Close') }}</span></button>
</div>

<div data-popup=".edit-audience" class="mobile-modal half-short">

    <div class="modal-handle"></div>

    <form class="px-0 pb-9 bordered-form-input" method="post" action="{{ route('user-mix-audience-post', 'edit_audience') }}" enctype="multipart/form-data">
        @csrf

        <input type="hidden" name="auid" value="{{ $audience->id }}">

        <div class="text-xl font-bold text-center mb-5">{{ __('Edit Audience') }}</div>
        <div class="wj-image-selector-w is-avatar relative active is-sandy-upload-modal mb-5" data-generic-preview=".h-avatar">
            <a class="wj-image-selector-trigger rounded-xl flex items-center relative">
                <div class="wj-image-container inline-flex items-center justify-center rounded-lg">
                    {!! $au->avatar() !!}
                </div>
                <div class="wj-image-selector-text ml-3 flex flex-col">
                    <span class="wj-text-holder text-sm font-bold">{{ __('Upload an Avatar') }}</span>
                    <span class="font-8 font-bold uppercase">{{ __('2mb Max') }}</span>
                </div>

                <input type="file" name="avatar">
            </a>
        </div>

        <div class="form-input">
            <label>{{ __('First & Last Name') }}</label>
            <input type="text" name="name" value="{{ $au->info('name') }}">
        </div>
        <div class="form-input mt-5">
            <label>{{ __('Email') }}</label>
            <input type="email" name="email" value="{{ $au->info('email') }}">
        </div>
        <div class="form-input is-link always-active active mt-5">
            <label>{{ __('Phone Number') }}</label>
			<div class="is-link-inner">
                <div class="side-info pl-1 relative">
                    <img src="" class="w-12 h-10 pl-2 flag-img-tag" alt="">
                    <select name="lastCountry" class="p-0 pl-0 w-14 absolute opacity-0 inset-0 cursor-pointer">
                        @foreach (\App\Others\Country::list() as $key => $value)
                            <option value="{{ $key }}" {{ $au->info('lastCountry') == $key ? 'selected' : '' }}>{{ $value }}</option>
                        @endforeach
                    </select>
                </div>
                <input type="text" name="phone_number" value="{{ $au->info('phone_number') }}" placeholder="{{ __('Enter a phone number') }}" class="is-alt-input bg-white">
			</div>
		</div>

        <div class="form-input mt-5">
            <label>{{ __('Job Title') }}</label>
            <input type="text" name="settings[job_title]" value="{{ $au->info('settings.job_title') }}">
        </div>
        
        <div class="form-input mt-5">
            <label>{{ __('Location') }}</label>
            <input type="text" name="settings[location]" value="{{ $au->info('settings.location') }}" placeholder="{{ __('Enter a location (Ex: Alabama, USA)') }}">
        </div>


        <button class="sandy-expandable-btn px-7 mt-5"><span>{{ __('Save') }}</span></button>
    </form>

    <button class="sandy-expandable-btn bg-transparent w-full edit-audience-close"><span>{{ __('Close') }}</span></button>
</div>


<div data-popup=".a-options" class="mobile-modal half-short">

    <div class="modal-handle"></div>

    <div class="px-4 py-9">
        <div class="flex flex-col gap-3">

            @if (!$au->has_page() && SandyTeam::permission('can_edit'))
            <div class="contact-list block px-0 remove-before pb-5 edit-audience-open cursor-pointer">
                <div class="flex items-center justify-center">
                    <div class="mr-auto flex items-center gap-3">
                        {!! orion('edit-1', 'w-5 h-5') !!}
                        <h2 class="flex items-center text-sm font-semibold">
                            <div class="truncate">{{ __('Edit Information') }}</div>
                        </h2>
                    </div>
                </div>
            </div>
            @endif

            <div class="contact-list block px-0 remove-before pb-5 send-integration-open cursor-pointer">
                <div class="flex items-center justify-center">
                    <div class="mr-auto flex items-center gap-3">
                        {!! orion('upload-1', 'w-5 h-5') !!}
                        <h2 class="flex items-center text-sm font-semibold">
                            <div class="truncate">{{ __('Send to Integration') }}</div>
                        </h2>
                    </div>
                </div>
            </div>
            
            <form action="{{ route('user-mix-audience-post', 'download_contact') }}" method="POST">
                @csrf

                <input type="hidden" name="auid" value="{{ $audience->id }}">
                <button class="contact-list block px-0 remove-before pb-5 w-full outline-none no-disabled-btn">
                    <div class="flex items-center justify-center">
                        <div class="mr-auto flex items-center gap-3">
                            {!! orion('contact-1', 'w-5 h-5') !!}
                            <h2 class="flex items-center text-sm font-semibold">
                                <div class="truncate">{{ __('Download as Contact') }}</div>
                            </h2>
                        </div>
                    </div>
                </button>
            </form>

            @if (SandyTeam::permission('can_delete'))
                
            <form action="{{ route('user-mix-audience-post', 'remove_audience') }}" class="w-full" method="post">
                @csrf
                <input type="hidden" name="_id" value="{{ $audience->id }}">
                <button class="contact-list block px-0 remove-before pb-5 w-full outline-none no-disabled-btn" data-delete="{{ __('Are you sure you want to delete this user?') }}">
                    <div class="flex items-center justify-center">
                        <div class="mr-auto flex items-center gap-3">
                            {!! orion('trash-1', 'w-5 h-5 text-red-500 stroke-current') !!}
                            <h2 class="flex items-center text-sm font-semibold text-red-500">
                                <div class="truncate">{{ __('Remove this User') }}</div>
                            </h2>
                        </div>
                    </div>
                </button>
            </form>
            @endif
        </div>
    </div>

    <button class="sandy-expandable-btn bg-transparent w-full a-options-close"><span>{{ __('Close') }}</span></button>
</div>
@endsection