@extends('layouts.app')

@section('title')
    {{ __('Thông báo') }}
@endsection

@section('admin')
    active
@endsection
@php
    use Illuminate\Support\Facades\Storage;
@endphp
@section('section.header')
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1>{{ __('Gửi thông báo đến đối tác') }}</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a
                                href="{{ route('app.admin.notify.create') }}">{{ __('Gửi thông báo') }}</a>
                        </li>
                        <li class="breadcrumb-item active">{{ __('Thông tin') }}</li>
                    </ol>
                </div>
            </div>
        </div><!-- /.container-fluid -->
    </section>
@endsection

@section('section.content')
    <section class="content">
        @can('admin_send_notify')
            <div class="card">
                <div class="card-header">
                    <div class="row">
                        <h3 class="col-lg-2 card-title">Thông báo</h3>
                    </div>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-lg-4">
                            <form id="notificationForm" enctype="multipart/form-data">
                                <div class="form-group">
                                    <label for="editor">Nội dung thông báo:</label>
                                    <textarea class="form-control" placeholder="Nhập nội dung hoặc paste text ở đây..." id="editor" rows="10"
                                        required>{{ $configure['content_notify'] ?? '' }}</textarea>
                                    <small class="text-muted">
                                        Có thể paste text vào đây. Ảnh paste vào khung bên dưới.
                                    </small>
                                </div>

                                <div class="form-group">
                                    <label>Ảnh thông báo</label>

                                    <div id="paste-image-box" class="paste-image-box">
                                        <div class="paste-image-placeholder">
                                            Dán ảnh vào đây (Ctrl+V) hoặc chọn file
                                        </div>

                                        <img id="imagePreview" src="" alt="preview" class="paste-image-preview d-none">

                                        <input type="file" id="imageInput" accept="image/*" class="d-none">
                                    </div>

                                    <div class="mt-2 d-flex align-items-center flex-wrap">
                                        <button type="button" class="btn btn-sm btn-outline-secondary mr-2"
                                            id="chooseImageBtn">
                                            Chọn ảnh
                                        </button>
                                        <button type="button" class="btn btn-sm btn-outline-danger d-none" id="removeImageBtn">
                                            Xóa ảnh
                                        </button>
                                    </div>
                                    <small class="text-muted d-block mt-2">
                                        Telegram sẽ gửi ảnh phía trên và phần text trong caption phía dưới, trong cùng một tin
                                        nhắn.
                                    </small>
                                </div>

                                <div class="form-group">
                                    <label for="status">{{ __('status') }}</label>
                                    <label class="switch">
                                        <input type="checkbox" name="send_notice_to_partner" id="send_notice_to_partner"
                                            value="{{ $configure['send_notice_to_partner'] ?? '' }}"
                                            {{ ($configure['send_notice_to_partner'] ?? '') == 'on' ? 'checked' : '' }}>
                                        <span class="slider round"></span>
                                    </label>
                                </div>

                                <button type="submit" class="btn btn-primary" id="saveNotification">Lưu thông báo</button>
                                <button type="submit" class="btn btn-secondary" id="createNotification">Thêm thông báo</button>
                            </form>
                        </div>
                        <div class="col-lg-8">
                            <div class="telegram-group-card">
                                <div
                                    class="telegram-group-header d-flex justify-content-between align-items-center flex-wrap mb-3">
                                    <div>
                                        <h5 class="mb-1 fw-bold">Gửi thông báo đến đối tác</h5>
                                        <div class="text-muted small">Danh sách nhóm Telegram đối tác</div>
                                    </div>

                                    <a href="{{ route('app.admin.notify.setting_group_telegram') }}" role="button"
                                        class="btn btn-secondary btn-sm mt-2 mt-md-0">
                                        {{ __('Cài đặt nhóm Telegram') }}
                                    </a>
                                </div>

                                <form action="" method="POST" id="groupTelegramForm">
                                    @csrf

                                    @if (!empty($groupNames) && count($groupNames))
                                        <div class="telegram-toolbar mb-3">
                                            <div class="telegram-toolbar-row">
                                                <div class="telegram-toolbar-search">
                                                    <input type="text" id="group-search" class="form-control"
                                                        placeholder="Tìm theo tên nhóm hoặc username...">
                                                </div>

                                                <label for="select-all" class="telegram-select-all-box mb-0">
                                                    <input type="checkbox" name="select-all" id="select-all"
                                                        class="telegram-select-all-checkbox">
                                                    <span class="telegram-select-all-text">Chọn tất cả</span>
                                                </label>
                                            </div>
                                        </div>

                                        <div class="telegram-group-list">
                                            <div class="telegram-group-grid">
                                                @foreach ($groupNames as $list)
                                                    @php
                                                        $groupName = trim((string) ($list->group_name ?? ''));
                                                        $username = trim((string) ($list->username ?? ''));
                                                    @endphp

                                                    <label class="telegram-group-item"
                                                        data-group-name="{{ mb_strtolower($groupName, 'UTF-8') }}"
                                                        data-username="{{ mb_strtolower($username, 'UTF-8') }}">

                                                        <div class="telegram-group-item-inner">
                                                            <div class="telegram-group-check">
                                                                <input type="checkbox" name="list-group[]"
                                                                    value="{{ $list->chat_id }}"
                                                                    class="telegram-group-checkbox">
                                                            </div>

                                                            <div class="telegram-group-content">
                                                                <div class="telegram-group-name">
                                                                    {{ $groupName !== '' ? $groupName : 'Không có tên nhóm' }}
                                                                </div>

                                                                <div class="telegram-group-meta text-muted small">
                                                                    {{ $username !== '' ? '@' . $username : 'Không có username' }}
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </label>
                                                @endforeach
                                            </div>
                                        </div>
                                    @else
                                        <div class="alert alert-warning mb-0">
                                            Không có sẵn nhóm nào
                                        </div>
                                    @endif

                                    <div class="text-center mt-3">
                                        <button type="submit" class="btn btn-primary px-4" id="sendNotification">
                                            Gửi thông báo
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card">
                @if (Session::has('success'))
                    <div id="message-alert" class="alert alert-success">
                        {{ Session::get('success') }}
                    </div>
                @endif
                @if (Session::has('error'))
                    <div id="message-alert" class="alert alert-danger">
                        {{ Session::get('error') }}
                    </div>
                @endif
                <div class="card-header" style="background-color: rgb(206, 225, 233)">
                    <h3 class="card-title">Danh sách thông báo thường dùng</h3>
                </div>
                <div class="card-body">
                    @if ($listNotifies->count())
                        <div class="row">
                            <div class="col-lg-6">
                                <ul class="list-group">
                                    @php $halfCount = ceil($listNotifies->count() / 2); @endphp
                                    @foreach ($listNotifies->take($halfCount) as $list)
                                        <div class="row align-content-center align-items-center">
                                            <div class="col-lg-11">
                                                @php
                                                    $notifyData = [
                                                        'id' => $list->id,
                                                        'content' => $list->content,
                                                        'image' => $list->image,
                                                        'image_url' => $list->image
                                                            ? asset('storage/' . ltrim($list->image, '/'))
                                                            : null,
                                                        'image_name' => $list->image ? basename($list->image) : null,
                                                    ];
                                                @endphp

                                                <li class="list-group-item list-notify"
                                                    data-notify-content='@json($notifyData)'>
                                                    {{ $list->content }}
                                                </li>
                                            </div>
                                            <div class="col-lg-1">
                                                <form action="{{ route('app.admin.notify.delete', ['id' => $list->id]) }}"
                                                    method="POST">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button type="submit" class="btn btn-danger">Xoá</button>
                                                </form>
                                            </div>
                                        </div>
                                        <br>
                                    @endforeach
                                </ul>
                            </div>
                            <div class="col-lg-6">
                                <ul class="list-group">
                                    @foreach ($listNotifies->slice($halfCount) as $list)
                                        <div class="row align-content-center align-items-center">
                                            <div class="col-lg-11">
                                                @php
                                                    $notifyData = [
                                                        'id' => $list->id,
                                                        'content' => $list->content,
                                                        'image' => $list->image,
                                                        'image_url' => $list->image
                                                            ? asset('storage/' . ltrim($list->image, '/'))
                                                            : null,
                                                        'image_name' => $list->image ? basename($list->image) : null,
                                                    ];
                                                @endphp

                                                <li class="list-group-item list-notify"
                                                    data-notify-content='@json($notifyData)'>
                                                    {{ $list->content }}
                                                </li>
                                            </div>
                                            <div class="col-lg-1">
                                                <form action="{{ route('app.admin.notify.delete', ['id' => $list->id]) }}"
                                                    method="POST">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button type="submit" class="btn btn-danger">Xoá</button>
                                                </form>
                                            </div>
                                        </div>
                                        <br>
                                    @endforeach
                                </ul>
                            </div>
                        </div>
                    @else
                        <p>{{ __('Chưa có thông báo nào được thêm.') }}</p>
                    @endif
                </div>
            </div>
        @else
            <h3>Bạn không được quyền thực hiện tính năng này</h3>
        @endcan
    </section>
@endsection

@section('scripts')
    <script src="{{ asset('plugins/toastr/toastr.min.js') }}"></script>
    <script>
        function normalizeText(value) {
            return String(value || '').toLowerCase().trim();
        }

        function refreshSelectAllState() {
            const visibleCheckboxes = $('.telegram-group-item:visible').find('.telegram-group-checkbox');
            const checkedVisible = $('.telegram-group-item:visible').find('.telegram-group-checkbox:checked');

            $('#select-all').prop(
                'checked',
                visibleCheckboxes.length > 0 && visibleCheckboxes.length === checkedVisible.length
            );
        }

        let pastedImageFile = null;
        let existingImagePath = '';

        function setPreviewImage(file) {
            pastedImageFile = file;
            existingImagePath = '';

            const reader = new FileReader();
            reader.onload = function(e) {
                $('#imagePreview').attr('src', e.target.result).removeClass('d-none');
                $('#removeImageBtn').removeClass('d-none');
                $('#paste-image-box').addClass('has-image');
                $('#paste-image-box .paste-image-placeholder').text(file.name || 'Đã chọn ảnh');
                $('#paste-image-box').attr('data-existing-image', '');
            };
            reader.readAsDataURL(file);
        }

        function setPreviewImageFromUrl(url, fileName = 'Ảnh đã lưu', imagePath = '') {
            pastedImageFile = null;
            existingImagePath = imagePath || '';

            $('#imagePreview')
                .attr('src', url)
                .removeClass('d-none')
                .off('error')
                .on('error', function() {
                    console.error('Không load được ảnh:', url);
                });

            $('#removeImageBtn').removeClass('d-none');
            $('#paste-image-box').addClass('has-image');
            $('#paste-image-box .paste-image-placeholder').text(fileName);
            $('#paste-image-box').attr('data-existing-image', url);
        }

        function clearPreviewImage() {
            pastedImageFile = null;
            existingImagePath = '';
            $('#imageInput').val('');
            $('#imagePreview').attr('src', '').addClass('d-none');
            $('#removeImageBtn').addClass('d-none');
            $('#paste-image-box').removeClass('has-image');
            $('#paste-image-box .paste-image-placeholder').text('Dán ảnh vào đây (Ctrl+V) hoặc chọn file');
            $('#paste-image-box').removeAttr('data-existing-image');
        }

        $(document).ready(function() {
            $('#group-search').on('keydown', function(e) {
                if (e.key === 'Enter') {
                    e.preventDefault();
                }
            });

            $('#group-search').on('input', function() {
                const keyword = normalizeText($(this).val());

                $('.telegram-group-item').each(function() {
                    const groupName = normalizeText($(this).attr('data-group-name'));
                    const username = normalizeText($(this).attr('data-username'));

                    const matched =
                        keyword === '' ||
                        groupName.includes(keyword) ||
                        username.includes(keyword);

                    $(this).toggle(matched);
                });

                refreshSelectAllState();
            });

            $('#select-all').on('change', function() {
                $('.telegram-group-item:visible').find('.telegram-group-checkbox').prop('checked', this
                    .checked);
            });

            $(document).on('change', '.telegram-group-checkbox', function() {
                refreshSelectAllState();
            });

            document.getElementById('send_notice_to_partner').addEventListener('change', function() {
                const currentStatus = this.checked;
                const status = currentStatus ? 'on' : 'off';
            });

            $('#saveNotification').click(function(e) {
                e.preventDefault();
                saveNotification();
            });

            function saveNotification() {
                const notificationContent = $('#editor').val();
                const status = $('#send_notice_to_partner').is(':checked') ? 'on' : 'off';

                const formData = new FormData();
                formData.append('_token', '{{ csrf_token() }}');
                formData.append('_method', 'PUT');
                formData.append('content', notificationContent);
                formData.append('status', status);
                formData.append('remove_image', '0');

                if (pastedImageFile) {
                    formData.append('image', pastedImageFile);
                }

                $.ajax({
                    url: '{{ route('app.admin.notify.save') }}',
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(data) {
                        if (data.code == 1) {
                            toastr.success(data.msg);
                            location.reload();
                        } else {
                            toastr.error(data.msg);
                        }
                    },
                    error: function(xhr) {
                        toastr.error(xhr.responseJSON?.msg || 'Đã xảy ra lỗi khi lưu thông báo');
                    }
                });
            }

            $('#createNotification').click(function(e) {
                e.preventDefault();
                createNotification();
            });

            function createNotification() {
                const notificationContent = $('#editor').val();

                const formData = new FormData();
                formData.append('_token', '{{ csrf_token() }}');
                formData.append('content', notificationContent);

                if (pastedImageFile) {
                    formData.append('image', pastedImageFile);
                }

                $.ajax({
                    url: '{{ route('app.admin.addNotification') }}',
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(data) {
                        if (data.code == 1) {
                            toastr.success(data.msg);
                            location.reload();
                        } else {
                            toastr.error(data.msg);
                        }
                    },
                    error: function(xhr) {
                        toastr.error(xhr.responseJSON?.msg || 'Đã xảy ra lỗi khi thêm thông báo');
                    }
                });
            }

            $('#chooseImageBtn').on('click', function() {
                $('#imageInput').trigger('click');
            });

            $('#imageInput').on('change', function(e) {
                const file = e.target.files[0];
                if (!file) return;

                if (!file.type.startsWith('image/')) {
                    toastr.error('File được chọn không phải ảnh');
                    return;
                }

                setPreviewImage(file);
            });

            $('#removeImageBtn').on('click', function() {
                clearPreviewImage();
            });

            $('#paste-image-box').on('click', function() {
                $('#editor').focus();
            });

            $('#paste-image-box').on('paste', function(e) {
                const clipboardData = e.originalEvent.clipboardData;
                if (!clipboardData || !clipboardData.items) return;

                for (let i = 0; i < clipboardData.items.length; i++) {
                    const item = clipboardData.items[i];
                    if (item.type.indexOf('image') !== -1) {
                        const file = item.getAsFile();
                        if (file) {
                            setPreviewImage(file);
                            toastr.success('Đã nhận ảnh từ clipboard');
                            e.preventDefault();
                            return;
                        }
                    }
                }
            });

            $('#editor').on('paste', function(e) {
                const clipboardData = e.originalEvent.clipboardData;
                if (!clipboardData || !clipboardData.items) return;

                for (let i = 0; i < clipboardData.items.length; i++) {
                    const item = clipboardData.items[i];
                    if (item.type.indexOf('image') !== -1) {
                        const file = item.getAsFile();
                        if (file) {
                            setPreviewImage(file);
                            toastr.success('Đã nhận ảnh từ clipboard');
                            e.preventDefault();
                            return;
                        }
                    }
                }
            });

            $('#sendNotification').click(function(e) {
                e.preventDefault();
                sendNotification();
            });

            function sendNotification() {
                const notificationContent = $('#editor').val();
                const selectedChatIDs = [];

                $("input[name='list-group[]']:checked").each(function() {
                    selectedChatIDs.push($(this).val());
                });

                const formData = new FormData();
                formData.append('_token', '{{ csrf_token() }}');
                formData.append('content', notificationContent);
                formData.append('chatIDs', selectedChatIDs.join(','));

                if (pastedImageFile) {
                    formData.append('image', pastedImageFile);
                } else if (existingImagePath) {
                    formData.append('existing_image', existingImagePath);
                }

                $.ajax({
                    url: '{{ route('app.admin.notify.sendNoticeMaintenance') }}',
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(data) {
                        if (data.code == 1) {
                            toastr.success(data.msg);
                            location.reload();
                        } else {
                            toastr.error(data.msg);
                        }
                    },
                    error: function(xhr, status, error) {
                        toastr.error('Đã xảy ra lỗi: ' + error);
                    }
                });
            }

            $(document).on('click', '.list-notify', function() {
                const raw = $(this).attr('data-notify-content');
                const content = raw ? JSON.parse(raw) : {};

                $('#editor').val(content.content || '');

                if (content.image_url) {
                    setPreviewImageFromUrl(
                        content.image_url,
                        content.image_name || 'Ảnh đã lưu',
                        content.image || ''
                    );
                } else {
                    clearPreviewImage();
                }
            });

            const oldImageUrl =
                "{{ !empty($configure['content_notify_image'])
                    ? asset('storage/' . ltrim($configure['content_notify_image'], '/'))
                    : '' }}";

            const oldImagePath = "{{ $configure['content_notify_image'] ?? '' }}";

            if (oldImageUrl) {
                setPreviewImageFromUrl(oldImageUrl, 'Ảnh thông báo hiện tại', oldImagePath);
            }
        });
    </script>
@endsection

@section('styles')
    <link rel="stylesheet" href="{{ asset('plugins/toastr/toastr.min.css') }}">
    <link rel="stylesheet" href="{{ asset('dist/css/input.css') }}">
    <style>
        .list-notify:hover {
            cursor: pointer;
            background: #f8f9fa;
        }

        .telegram-group-card {
            border: 1px solid #e5e7eb;
            border-radius: 12px;
            padding: 16px;
            background: #fff;
        }

        .telegram-group-header h5 {
            margin: 0;
        }

        .telegram-toolbar {
            background: #f8fafc;
            border: 1px solid #e9ecef;
            border-radius: 10px;
            padding: 12px;
        }

        .telegram-toolbar-row {
            display: flex;
            align-items: center;
            gap: 14px;
        }

        .telegram-toolbar-search {
            flex: 1;
            min-width: 0;
        }

        .telegram-select-all-box {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            min-height: 42px;
            padding: 0 14px;
            border: 1px solid #dbe3ea;
            border-radius: 10px;
            background: #fff;
            cursor: pointer;
            user-select: none;
            transition: all 0.2s ease;
            white-space: nowrap;
        }

        .telegram-select-all-box:hover {
            border-color: #86b7fe;
            background: #f8fbff;
        }

        .telegram-select-all-checkbox {
            width: 18px;
            height: 18px;
            margin: 0;
            flex-shrink: 0;
            accent-color: #0d6efd;
            cursor: pointer;
        }

        .telegram-group-list {
            max-height: 560px;
            overflow-y: auto;
            border: 1px solid #e9ecef;
            border-radius: 10px;
            padding: 10px;
            background: #fff;
        }

        .telegram-group-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 12px;
        }

        .telegram-group-item {
            display: block;
            width: 100%;
            margin: 0;
            cursor: pointer;
        }

        .telegram-group-item-inner {
            display: flex;
            align-items: flex-start;
            min-height: 86px;
            padding: 12px;
            border: 1px solid #edf0f2;
            border-radius: 10px;
            background: #fff;
            transition: all 0.2s ease;
        }

        .telegram-group-item:hover .telegram-group-item-inner {
            background: #f8fbff;
            border-color: #bcdcff;
        }

        .telegram-group-check {
            margin-right: 10px;
            padding-top: 2px;
            flex-shrink: 0;
        }

        .telegram-group-checkbox {
            width: 18px;
            height: 18px;
        }

        .telegram-group-content {
            min-width: 0;
            flex: 1;
        }

        .telegram-group-name {
            font-weight: 600;
            color: #212529;
            line-height: 1.35;
            word-break: break-word;
        }

        .telegram-group-meta {
            margin-top: 4px;
            word-break: break-word;
        }

        .telegram-select-all-text {
            font-weight: 600;
            color: #0d6efd;
            line-height: 1;
        }

        @media (max-width: 1199.98px) {
            .telegram-group-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }

        @media (max-width: 767.98px) {
            .telegram-group-grid {
                grid-template-columns: 1fr;
            }

            .telegram-group-list {
                max-height: 420px;
            }

            .telegram-toolbar-row {
                flex-direction: column;
                align-items: stretch;
            }

            .telegram-select-all-box {
                width: 100%;
                justify-content: center;
            }
        }

        .paste-image-box {
            position: relative;
            width: 100%;
            min-height: 230px;
            border: 2px dashed #bcd2f7;
            border-radius: 14px;
            background: #f8fbff;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .paste-image-box:hover {
            border-color: #86b7fe;
            background: #f4f9ff;
        }

        .paste-image-box.has-image {
            padding: 0;
            background: #fff;
            border-style: solid;
        }

        .paste-image-placeholder {
            color: #6c757d;
            font-size: 16px;
            text-align: center;
            padding: 20px;
            z-index: 1;
        }

        .paste-image-box.has-image .paste-image-placeholder {
            display: none;
        }

        .paste-image-preview {
            width: 100%;
            height: 100%;
            max-height: 360px;
            object-fit: contain;
            display: block;
            background: #fff;
        }

        .paste-image-preview.d-none {
            display: none !important;
        }
    </style>
@endsection