@extends('layouts.main')

@section('container')
    <form class="card" method="POST" cemes="form" action="{{ route('admin.email.update', $email->id) }}"
        cemes-redirect="{{ url()->current() }}">
        <div class="card-body">
            <p>
                <strong>Deskripsi</strong> : {{ $email->description }}
            </p>
            <div class="row">
                <input type="hidden" name="id" value="{{ $email->id }}">
                <div class="col-12 col-sm-6">
                    <div class="form-group">
                        <label for="name">Notifikasi Email</label>
                        <input name="name" id="name" class="form-control" value="{{ $email->name }}" readonly>
                    </div>

                    <div class="form-group">
                        <label for="description">Deskripsi</label>
                        <input name="description" id="description" class="form-control" value="{{ $email->description }}"
                            readonly>
                    </div>

                    <div class="form-group">
                        <div class="row mb-4">
                            <div class="col-12">
                                <label for="subscriber">Subscriber</label>
                            </div>
                        </div>
                        @php
                            $subs = $email->subscriber->map(fn($item) => $item['id'])->toArray();
                        @endphp
                        <select class="select2" name="subscriber" id="subscriber" multiple="multiple"
                            data-placeholder="User" style="width: 100%;">
                            @foreach ($user_option as $user)
                            <option id="sub_{{ $user->id }}" value="{{ $user->id }}"
                                {{ in_array($user->id, $subs) ? 'selected' : '' }}>
                                {{ ($user->role->name ?? '') ." | ". $user->name ." (".$user->email.") " }}</option>
                            @endforeach
                        </select>

                        <div class="col-12 mt-4">
                            <button class="btn btn-sm btn-info email-subs-control" data-context="admin_ids"
                                data-target="#subscriber"
                                data-url="{{ route('admin.resource.email_user_id', 'admin') }}">Semua Admin</button>
                            <button class="btn btn-sm btn-info email-subs-control" data-context="staff_ids"
                                data-target="#subscriber"
                                data-url="{{ route('admin.resource.email_user_id', 'staff') }}">Semua Staff</button>
                            <button class="btn btn-sm btn-info email-subs-control" data-context="manager_ids"
                                data-target="#subscriber"
                                data-url="{{ route('admin.resource.email_user_id', 'manager') }}">Semua Manager</button>
                        </div>
                    </div>


                    <div class="form-group">
                        <div class="row mb-2">
                            <div class="col-12">
                                <label for="emails">Subscriber Non-User</label>
                            </div>
                        </div>

                        <select class="select2-tags" name="emails" id="emails" multiple="multiple" data-placeholder=""
                            style="width: 100%;">
                            @foreach ($email->emails_decoded as $e)
                                <option id="{{ $e }}" value="{{ $e }}" selected>{{ $e }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>

            <div class="card-footer text-right">
                <button class="btn btn-primary" type="submit">Simpan Perubahan</button>
            </div>
        </div>
    </form>
@endsection

@push('stack-script')
    <script>
        $(document).ready(() => {
            $('.select2').select2();
            $('.select2-tags').select2({
                tags: true
            });
            var user_ids;



            $('.email-subs-control').click((e) => {
                e.preventDefault();
                let el = $(e.target);
                let context = el.data('context');
                let select_el = $(el.data('target'));
                let data_url = el.data('url');
                $.get(data_url)
                    .done((res) => {
                        let data = res.result;
                        console.log(data);
                        let result = [].concat(Object.values(data), select_el.val())
                        console.log(result);
                        select_el.val(result);
                        select_el.trigger('change');
                    }).fail((err) => {
                        alert(err.error_message);
                    });
            })

        });
    </script>
@endpush