@extends('table.app')

@section('content')
    <div class="row">
        <div class="col-12">
            <div class="page-title-box d-flex align-items-center justify-content-between">
                <h4 class="page-title mb-0">{{ __('product::product.pharmacist_assisted.name') }}</h4>
                <a class="btn btn-primary" href="{{ route('admin.product.pharmacist_assisted.add') }}">
                    <i class="fe-plus"></i> {{ __('product::product.pharmacist_assisted.actions.add') }}
                </a>
            </div>
        </div>
    </div>

    @if (session('error'))
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <button class="btn-close" data-bs-dismiss="alert" type="button" aria-label="Close"></button>
            {{ session('error') }}
        </div>
    @endif

    <div class="card card-body">
        <table class="table table-striped table-bordered text-nowrap w-100" id="{{ $method }}-datatable">
            <thead>
                <tr>
                    <th width="5%">{{ __('field.sequence') }}</th>
                    <th>{{ __('product::product.pharmacist_assisted.fields.member_type') }}</th>
                    <th width="10%">{{ __('product::product.pharmacist_assisted.fields.items_count') }}</th>
                    <th width="10%">{{ __('product::product.pharmacist_assisted.fields.status') }}</th>
                    <th width="15%">{{ __('product::product.pharmacist_assisted.fields.expires_at') }}</th>
                    <th width="10%">{{ __('field.updated') }}</th>
                    <th width="1%">{{ __('field.manage') }}</th>
                </tr>
            </thead>
        </table>
    </div>

    @include('product::pharmacist_assisted.modal_link')
@endsection

@section('scripts')
    <script>
        const $_method = @json($method);
        const $_link_datatable = @json(route("admin.{$module}.{$method}.datatable_ajax"));
        const $_link_detail = @json(route("admin.{$module}.{$method}.detail", ['id' => 999999999]));
        const $_link_status = @json(route("admin.{$module}.{$method}.set_status"));
        const $_link_delete = @json(route("admin.{$module}.{$method}.set_delete"));
        const $_link_copied_msg = @json(__('product::product.pharmacist_assisted.messages.link_copied'));
        const $_modal_no_items = @json(__('product::product.pharmacist_assisted.modal.no_items'));

        function renderPharmacistAssistedItems(items) {
            const tbody = document.getElementById('pharmacist-assisted-detail-items');
            if (!tbody) {
                return;
            }

            if (!Array.isArray(items) || items.length === 0) {
                tbody.innerHTML = `<tr><td class="text-muted text-center py-4" colspan="2">${$_modal_no_items}</td></tr>`;
                return;
            }

            tbody.innerHTML = items.map((item) => `
                <tr>
                    <td>
                        <div class="fw-semibold">${item.name || '-'}</div>
                        ${item.sku ? `<small class="text-muted">${item.sku}</small>` : ''}
                    </td>
                    <td class="text-center">${item.qty}</td>
                </tr>
            `).join('');
        }

        function showPharmacistAssistedLinkModal(url, memberType = '', items = []) {
            $('#pharmacist-assisted-link-modal-url').val(url || '');
            $('#pharmacist-assisted-detail-member-type').text(memberType || '');
            renderPharmacistAssistedItems(items);
            bootstrap.Modal.getOrCreateInstance(document.getElementById('pharmacistAssistedLinkModal')).show();
        }

        function loadPharmacistAssistedDetail(id) {
            $.ajax({
                url: $_link_detail.replace('999999999', id),
                type: 'GET',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json',
                },
                success: function (resp) {
                    if (!resp.success || !resp.data) {
                        mwz_noti('error', resp.msg || 'Error');
                        return;
                    }

                    showPharmacistAssistedLinkModal(resp.data.url, resp.data.member_type, resp.data.items || []);
                },
                error: function (xhr) {
                    ajax_error(xhr);
                },
            });
        }

        $(document).on('click', '.js-show-link-items', function () {
            const id = $(this).data('id');
            if (!id) {
                return;
            }

            loadPharmacistAssistedDetail(id);
        });

        $(document).ready(function () {
            $(`#${$_method}-datatable`).DataTable({
                processing: true,
                serverSide: true,
                stateSave: true,
                ajax: {
                    url: $_link_datatable,
                },
                columns: [
                    { data: "DT_RowIndex", className: "text-center", orderable: false },
                    { data: "member_type", orderable: true },
                    { data: "items_count", className: "text-center", orderable: false },
                    { data: "status", className: "text-center", orderable: true },
                    { data: "expires_at", orderable: true },
                    { data: "updated_at", orderable: true },
                    { data: "action", className: "text-center", orderable: false },
                ],
                language: $_LANG.datatable,
            });
            init_Table();

            const generatedUrl = sessionStorage.getItem('pharmacist_assisted_generated_url');
            if (generatedUrl) {
                sessionStorage.removeItem('pharmacist_assisted_generated_url');
                showPharmacistAssistedLinkModal(generatedUrl);
            }
        });

        $('#copy-pharmacist-assisted-link').on('click', async function () {
            const urlInput = document.getElementById('pharmacist-assisted-link-modal-url');
            if (!urlInput?.value) {
                return;
            }

            await navigator.clipboard.writeText(urlInput.value);
            mwz_noti('success', $_link_copied_msg);
        });

        $(document).on('click', '.js-copy-link-item', async function () {
            const url = $(this).data('url');
            if (!url) {
                return;
            }

            await navigator.clipboard.writeText(url);
            mwz_noti('success', $_link_copied_msg);
        });

        window.setReloadDataTable = function () {
            $(`#${$_method}-datatable`).DataTable().ajax.reload(null, false);
        };

        window.setStatus = function (id) {
            event.preventDefault();
            $.ajax({
                url: $_link_status,
                type: "POST",
                data: { id: id },
                headers: { "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content") },
                success: function (resp) {
                    mwz_noti("success", resp.msg, setReloadDataTable());
                },
                error: function (xhr, status, thrown) {
                    ajax_error(xhr, status, thrown);
                },
            });
        };

        window.setDelete = function (id) {
            event.preventDefault();
            $.ajax({
                url: $_link_delete,
                type: "POST",
                data: { id: id },
                headers: { "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content") },
                success: function (resp) {
                    mwz_noti("success", resp.msg, setReloadDataTable());
                },
                error: function (xhr, status, thrown) {
                    ajax_error(xhr, status, thrown);
                },
            });
        };
    </script>
@endsection