@extends('layout')

@section('h4-page', __('Announcement'))

<style>
    .img-doc {
        width: 40px;
        height: auto;
        margin: 10px;
    }

    #userDiv {
        max-height: 200px;
        overflow-y: auto;
    }

    .form-check-input.custom:checked {
        border-radius: 50% !important;
        background-color: #1792BF !important;
        border: none !important;
    }

    .form-check-input.custom {
        border-radius: 50% !important;
        margin-right: 1rem;
    }
    .btn-create {
        width: 110px;
    }
</style>

@section('contents')
    <div class="row layout-top-spacing">
        <div class="col-lg-12 col-md-12 mb-md-0 mb-4">
            <div class="mb-3">
                @if (session('success'))
                    <div class="alert alert-success alert-dismissible fade show " role="alert">
                        {{ session('success') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif
                @if ($errors->any())
                    <div class="alert alert-danger mt-3 ">
                        <ul class="mb-0">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif
            </div>
            <div class="card mb-3 mt-3">
                <div class="card-body">
                    <ul class="list-group">
                        <li class="list-group-item border-0 px-0">
                            <div class="form-group ps-0">
                                <div class="" style="position: relative">
                                    <label for="" class="form-label">{{ __('Search') }}</label>
                                    <input class="form-control" type="search" id="searchInput"
                                        placeholder="{{ __('Search') }}">
                                    <div style="position: absolute; top: 1rem; right: 1rem; cursor: pointer;">
                                        {{-- <span class="input-group-append" onclick="searchInput()">
                                            <i class="fa fa-search"></i>
                                        </span> --}}
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="mb-3 mt-3">
                <div class="d-flex justify-content-end">
                    <div class="btn btn-create" id="create-announcement">
                        {{ __('create') }} +
                    </div>
                </div>
            </div>

            <div class="table-responsive">
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>{{ __('Title') }}</th>
                            <th>{{ __('Details') }}</th>
                            <th>{{ __('Setting') }}</th>
                            <th>{{ __('Action') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @if (isset($main))
                            @forelse ($main as $key => $item)
                                <tr>
                                    <td>{{ $key + 1 }}</td>
                                    <td>{{ $item->title }}</td>
                                    <td class="w-50 text-truncate" style="max-width: 350px;">

                                        {{ $item->content }}

                                    </td>

                                    <td>{{ $item->type == 'all' ? __('All') : __('Someone') }}</td>
                                    <td>
                                        <button class="btn btn-create" onclick="pushNotify({{ $item->id }})">
                                            @if ($item->count_send <= 0)
                                                {{ __('Send') }}
                                            @else
                                                {{ __('Re-Send') }}
                                            @endif
                                        </button>
                                        <div class="btn-group">
                                            <button type="button" class="btn p-0 border-0 bg-transparent dropdown-toggle"
                                                data-bs-toggle="dropdown" aria-expanded="false">
                                                <svg width="18" height="18" viewBox="0 0 18 18" fill="none"
                                                    xmlns="http://www.w3.org/2000/svg">
                                                    <path
                                                        d="M5.40005 9.0002C5.40005 9.99431 4.59416 10.8002 3.60005 10.8002C2.60594 10.8002 1.80005 9.99431 1.80005 9.0002C1.80005 8.00608 2.60594 7.2002 3.60005 7.2002C4.59416 7.2002 5.40005 8.00608 5.40005 9.0002Z"
                                                        fill="#000000" />
                                                    <path
                                                        d="M10.8 9.0002C10.8 9.99431 9.99416 10.8002 9.00005 10.8002C8.00594 10.8002 7.20005 9.99431 7.20005 9.0002C7.20005 8.00608 8.00594 7.2002 9.00005 7.2002C9.99416 7.2002 10.8 8.00608 10.8 9.0002Z"
                                                        fill="#000000" />
                                                    <path
                                                        d="M16.2 9.0002C16.2 9.99431 15.3942 10.8002 14.4 10.8002C13.4059 10.8002 12.6 9.99431 12.6 9.0002C12.6 8.00608 13.4059 7.2002 14.4 7.2002C15.3942 7.2002 16.2 8.00608 16.2 9.0002Z"
                                                        fill="#000000" />
                                                </svg>

                                            </button>
                                            <ul class="dropdown-menu">
                                                <li onclick="showData({{ $item->id }})">
                                                    <div class="dropdown-item">{{ __('edit') }}</div>
                                                </li>
                                                <li onclick="deleteItem({{ $item->id }})">
                                                    <div class="dropdown-item">{{ __('Delete') }}</div>
                                                </li>
                                            </ul>
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="5" class="text-center">{{ __('NoDataFound') }}</td>
                                </tr>
                            @endforelse
                        @else
                            <tr>
                                <td colspan="5" class="text-center">{{ __('NoDataFound') }}</td>
                            </tr>
                        @endif

                    </tbody>
                </table>
            </div>
            <div class="d-flex justify-content-end pb-0">
                {{ @$main->appends(request()->except('page'))->links('pagination::bootstrap-5') }}
            </div>
        </div>
    </div>
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content bg-white">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">{{ __('Announcement') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <ul class="list-group" id="modalDiv">
                        <input type="text" name="announcement_id" id="announcement_id" class="d-none">
                        <li class="list-group-item border-0 px-0">
                            <p>{{ __('Type') }}</p>
                            <div class="form-group ps-0 d-flex">
                                <div class="form-check mx-2">
                                    <input class="form-check-input custom-radio" type="radio" name="type"
                                        id="type1" value="someone">
                                    <label class="form-check-label m-0 ps-2" for="type1">
                                        {{ __('Someone') }}
                                    </label>
                                </div>
                                <div class="form-check mx-2">
                                    <input class="form-check-input custom-radio" type="radio" name="type"
                                        id="type2" value="all" checked>
                                    <label class="form-check-label m-0 ps-2" for="type2">
                                        {{ __('All') }}
                                    </label>
                                </div>
                            </div>
                        </li>
                        <li class="list-group-item border-0 px-0">
                            <div class="form-group ps-0">
                                <label for="title">{{ __('Title') }}</label>
                                <input type="text" class="form-control" id="title" name="title">
                            </div>
                        </li>
                        <li class="list-group-item border-0 px-0">
                            <div class="form-group ps-0">
                                <label for="details">{{ __('Details') }}</label>
                                <textarea class="form-control" rows="5" id="details" name="details"></textarea>
                            </div>
                        </li>
                        <li class="list-group-item border-0 px-0 d-none" id="AddPeople">
                            <label>{{ __('Add People') }}</label>
                            <div class="form-group ps-0 my-2">
                                <div class="" style="position: relative">
                                    <label for="" class="form-label">{{ __('Search') }}</label>
                                    <input class="form-control" type="search" id="searchInputModal"
                                        onkeyup="searchInputModal()" placeholder="{{ __('Search') }}">
                                    <div style="position: absolute; top: 1rem; right: 1rem; cursor: pointer;">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group ps-0 my-2" id="userDiv">
                            </div>
                        </li>

                    </ul>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn bg-gradient-secondary"
                        data-bs-dismiss="modal">{{ __('close') }}</button>
                    <button type="button" class="btn btn-create saveModel"
                        id="updateModel">{{ __('create') }}</button>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('scripts')
    <script>
        let modal = new bootstrap.Modal(document.getElementById('exampleModal'), {
            keyboard: false
        })
        $('#create-announcement').on('click', function() {
            cleanData()
            modal.show()
        })
        $('#type1').on('click', function() {
            $('#AddPeople').removeClass('d-none')
            fetchUser(true)
        })
        $('#type2').on('click', function() {
            $('#AddPeople').addClass('d-none')
        })

        $(document).on('change', '.user-check', function() {
            let userId = parseInt($(this).val());
            if ($(this).is(':checked')) {
                if (!selectedUserIds.includes(userId)) {
                    selectedUsers.push(userId);
                }
            } else {
                selectedUserIds = selectedUserIds.filter(id => id !== userId);
            }
        });

        function handleEvent() {
            $(document).on('change', '.user-check', function() {
                let userId = parseInt($(this).val());
                if ($(this).is(':checked')) {
                    if (!selectedUserIds.includes(userId)) {
                        selectedUsers.push(userId);
                    }
                } else {
                    selectedUserIds = selectedUserIds.filter(id => id !== userId);
                }
            });
        }

        function cleanData() {
            $('#announcement_id').val('')
            $('#type2').prop('checked', true)
            $('#title').val('')
            $('#details').val('')
        }

        let selectedUserIds = []; // global
        let selectedUsers = []; // เก็บ object user ที่เลือกไว้

        function showData(id) {
            $.ajax({
                url: "{{ route('announcement.show', ':id') }}".replace(':id', id),
                type: "GET",
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    if (response.code == 200) {
                        let data = response.data;
                        console.log(data);

                        $('#announcement_id').val(data.id);

                        if (data.type == 'someone') {
                            $('#type1').prop('checked', true);
                            $('#AddPeople').removeClass('d-none');

                            // เก็บ id คนที่เลือกไว้
                            selectedUserIds = data.users.map(u => u.id);
                            selectedUsers = data.users.map(u => u.id);
                            // กลุ่มแรก: คนจาก DB
                            $('#userDiv').html('');
                            if (data.users && data.users.length > 0) {
                                let html = templateUserDiv(data.users, true);
                                $('#userDiv').append(html);
                                handleEvent();
                            }

                            // โหลดรายชื่อคนอื่นต่อจาก paginate
                            page = 1;
                            lastPage = false;
                            fetchUser();

                        } else {
                            $('#type2').prop('checked', true);
                        }

                        $('#title').val(data.title);
                        $('#details').val(data.content);
                        modal.show();
                    } else {
                        alert(response.message);
                    }
                },
                error: function(xhr) {
                    console.log(xhr.responseText);
                }
            });
        }
        $('#updateModel').on('click', function() {
            saveData()
        });

        function saveData() {
            $id = $('#announcement_id').val();
            if ($id) {
                // update
                let data = {
                    id: $id,
                    type: $('input[name="type"]:checked').val(),
                    title: $('#title').val(),
                    content: $('#details').val(),
                    user_ids: $('input[name="user_id[]"]:checked').map(function() {
                        return this.value;
                    }).get(),
                    _method: 'PUT'
                }
                let url = "{{ route('announcement.update', ':id') }}";
                $.ajax({
                    url: url.replace(':id', $id),
                    type: "POST",
                    data: data,
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        if (response.code == 200) {
                            location.reload();
                        } else {
                            alert(response.message);
                        }
                    },
                    error: function(xhr) {
                        console.log(xhr.responseText);
                    }
                });
            } else {
                let data = {
                    type: $('input[name="type"]:checked').val(),
                    title: $('#title').val(),
                    content: $('#details').val(),
                    user_ids: $('input[name="user_id[]"]:checked').map(function() {
                        return this.value;
                    }).get()
                }
                $.ajax({
                    url: "{{ route('announcement.store') }}",
                    type: "POST",
                    data: data,
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        if (response.code == 200) {
                            location.reload();
                        } else {
                            alert(response.message);
                        }
                    },
                    error: function(xhr) {
                        console.log(xhr.responseText);
                    }
                });
            }
        }

        function deleteItem(id) {
            Swal.fire({
                title: '{{ __('Delete') }}',
                text: "{{ __('You want delete value ?') }}",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#5e72e4',
                cancelButtonColor: '#d33',
                confirmButtonText: '{{ __('Yes') }}',
                cancelButtonText: '{{ __('No') }}'
            }).then((result) => {
                if (result.isConfirmed) {
                    var is_url = "{{ route('announcement.destroy', ':id') }}";
                    $.ajax({
                        url: is_url.replace(':id', id),
                        type: 'DELETE',
                        data: {
                            _token: '{{ csrf_token() }}',
                            status: 0,
                        },
                        success: function(response) {
                            Swal.fire({
                                title: '{{ __('Success') }}',
                                text: "{{ __('Delete value success.') }}",
                                confirmButtonText: '{{ __('OK') }}',
                                icon: 'success',
                            }).then((result) => {
                                if (result.isConfirmed) {
                                    location.reload();
                                }
                            });
                        },
                        error: function(XMLHttpRequest, textStatus, errorThrown) {
                            Swal.fire({
                                title: '{{ __('Error') }}',
                                text: "{{ __('Cannot delete value.') }}",
                                confirmButtonText: '{{ __('OK') }}',
                                icon: 'error',
                            });
                        }
                    });
                }
            })
        }

        function pushNotify(id) {
            Swal.fire({
                title: '{{ __('Announcement') }}',
                text: "{{ __('You want to send announcement ?') }}",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#5e72e4',
                cancelButtonColor: '#d33',
                confirmButtonText: '{{ __('Yes') }}',
                cancelButtonText: '{{ __('No') }}'
            }).then((result) => {
                if (result.isConfirmed) {
                    let url = "{{ route('announcement.sendPushNotification', ':id') }}";
                    $.ajax({
                        url: url.replace(':id', id),
                        type: "POST",
                        headers: {
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        },
                        success: function(response) {
                            if (response.code == 200) {
                                Swal.fire({
                                    title: 'Success',
                                    text: "{{ __('Send push notification success.') }}",
                                    icon: 'success',
                                }).then((result) => {
                                    if (result.isConfirmed) {
                                        location.reload();
                                    }
                                })
                            } else {
                                Swal.fire({
                                    title: 'Error',
                                    text: response.message,
                                    icon: 'error',
                                });
                            }
                        },
                        error: function(xhr) {
                            console.log(xhr.responseText);
                        }
                    });
                }
            })

        }

        let page = 1;
        let loading = false;
        let lastPage = false;


        function searchInputModal() {
            loading = false;
            lastPage = false;
            page = 1;
            setTimeout(() => {

                fetchUser(true);
            }, 500);
        }

        function fetchUser(reset = false) {
            if (loading || lastPage) return;
            loading = true;

            let query = $('#searchInputModal').val();
            $.ajax({
                url: "{{ route('account.fetchUserForAnnounce') }}",
                type: "GET",
                data: {
                    search: query,
                    page: page
                },
                success: function(response) {
                    if (response.code == 200) {
                        let data = response.data;

                        // filter ไม่เอาคนที่เลือกไว้แล้ว
                        data = data.filter(u => !selectedUserIds.includes(u.id));

                        if (reset) {
                            // เวลา reset (search ใหม่) ไม่ลบกลุ่มแรก
                            $('#userDiv').find('.search-result').remove();
                        }

                        let html = `<div class="search-result">${templateUserDiv(data)}</div>`;
                        $('#userDiv').append(html);
                        handleEvent();

                        page = response.meta.current_page + 1;
                        if (response.meta.current_page >= response.meta.last_page) {
                            lastPage = true;
                        }
                    }
                },
                complete: function() {
                    loading = false;
                }
            });
        }

        function templateUserDiv(data) {
            let html = '';
            data.forEach((element) => {
                let isChecked = selectedUsers.includes(element.id);
                html += `
                <div class="form-group d-flex justify-content-between align-items-center">
                    <div>
                        <img src="${element.avatar ? element.avatar : '/images/avatars/default.png'}" 
                        class="img-doc rounded-circle me-2" alt="...">
                    <label class="form-check-label mb-0">
                        ${element.fname + ' ' + element.lname}
                    </label>
                        </div>
                  
                    <input class="form-check-input custom user-check" type="checkbox" 
                        value="${element.id}" name="user_id[]" ${isChecked ? 'checked' : ''}>
                </div>`;

            });
            return html;
        }



        // trigger load more when scroll bottom
        $('#userDiv').on('scroll', function() {
            if ($(this).scrollTop() + $(this).innerHeight() >= this.scrollHeight - 10) {
                fetchUser();
            }
        });
    </script>
@endsection