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

@section('footerJS')
<script>
app.utils.popup_notes = function(){
    jQuery('[data-popup=".edit-note"]').on('dialog:open', function(e, $elem) {
        var _data = jQuery($elem).data('var');
        var _id = jQuery($elem).data('id');
        var _note = jQuery($elem).data('note');
        var $dialog = jQuery(this);
        $dialog.find('input[name="note_id"]').val(_id);
        $dialog.find('textarea[name="note"]').html(_note);
    });
}
app.utils.popup_notes();
</script>
@stop

<div class="mix-padding-10">
    
    <div class="mb-5 flex items--center flex-col py-5 rounded-xl">
        <a href="{{ route('user-mix-audience-view', $audience->id) }}" class="sandy-expandable-btn bg-white -ml-2">
            <span class="flex items-center justify-between px-0">{!! orion('arrow-left-1', 'w-8 h-8') !!}</span>
        </a>
        <div class="text-lg font-bold mr-auto">{{ $au->info('name') }} {{ __('Notes') }}</div>
        <p class="text-xs">{{ __('These notes are not shared with this audience.') }}</p>
    </div>
    
  <div class="overflow-x-auto min-h--screen flex flex-col">
    
    @foreach ($notes as $item)
    <div class="contact-list block border-b border-gray-200 border-solid px-0 remove-before edit-note-open cursor-pointer" data-id="{{ $item->id }}" data-note="{{ $item->note }}">
        <div class="flex items-center justify-center">
            <div class="truncate mr-auto w-full">
                <h2 class="flex items-center text-sm font-normal">
                    <div class="truncate flex gap-1 items-center"><span>{{ $item->note }}</span> </div>
                </h2>
                <div class="text-xs text-gray-500">
                    <div class="truncate"><span>{{ __('Updated by :name on :date_time', ['name' => user('name', ao($item->extra, 'posted_by')), 'date_time' => \Carbon\Carbon::parse($item->updated_at)->format('F j g:s a')]) }}</span></div>
                </div>
            </div>
            <div class="flex justify-center w-10 ml-auto">
                {!! orion('angle-right-1', 'w-7 h-7') !!}
            </div>
        </div>
    </div>
    @endforeach
  </div>
  <button class="sandy-expandable-btn px-10 py-1 create-note-open mt-5"><span>{{ __('Add Note') }}</span></button>


</div>


<div data-popup=".edit-note" 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">{{ __('Edit Note') }}</div>
            <div class="side-cta top-8 right-3 text-6xl">
                📝
            </div>
		</div>
	</div>

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

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

        <input type="hidden" name="note_id" value="">
        
        
        <div class="flex flex-col gap-4">
            <div class="form-input">
                <label>{{ __('Note') }}</label>
                <textarea name="note" class="resize-none"></textarea>
            </div>
        </div>

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



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

<div data-popup=".create-note" 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">{{ __('Add Personal Note') }}</div>
            <div class="side-cta top-8 right-3 text-6xl">
                📝
            </div>
		</div>
	</div>

    <form action="{{ route('user-mix-audience-post', 'create_note') }}" 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>{{ __('Note') }}</label>
                <textarea name="note" class="resize-none"></textarea>
            </div>
        </div>

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



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