@extends('admin.layouts.app')

@section('title', 'Team Owner Detail')

@section('styles')
<link rel="stylesheet" href="{{ asset('assets/css/reports-shared.css') }}">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
@endsection

@section('content')
<div class="content_area feedmanagement finance_management reports_management team-owner-detail-container">

    <!-- Top Navigation & Header Block -->
    <div class="detail-header-block">
        <nav class="detail-breadcrumb" aria-label="breadcrumb">
            <a href="{{ route('admin.dashboard.index') }}">Dashboard</a>
            <span class="separator">
                <svg width="4" height="7" viewBox="0 0 4 7" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M0.5 0.5L3.5 3.5L0.5 6.5" stroke="#424141" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
            </span>
            <a href="{{ route('admin.reports') }}">Reports</a>
            <span class="separator">
                <svg width="4" height="7" viewBox="0 0 4 7" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M0.5 0.5L3.5 3.5L0.5 6.5" stroke="#424141" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
            </span>
            <span class="current">Team Owner Detail</span>
        </nav>

        <div class="detail-title-tabs-row">
            <h2 class="detail-page-title">Team Owner Detail</h2>
            <!-- Top Right Segmented Tabs -->
            <x-segmented-tabs :tabs="$tabs" activeTab="Overview" />
        </div>
    </div>

    <!-- Tab Pane 1: Overview -->
    @include('admin.reports.partials._tab-overview')

    <!-- Tab Pane 2: Transactions -->
    @include('admin.reports.partials._tab-transactions')

    <!-- Tab Pane 3: Pending -->
    @include('admin.reports.partials._tab-pending')

    <!-- Overlay Backdrop for Right Drawers -->
    <div id="iclDrawerBackdrop" class="icl-drawer-backdrop"></div>

    <!-- Drawer 1: User Coupon Activity Panel -->
    @include('admin.reports.partials._drawer-user-activity')

    <!-- Drawer 2: Transaction Details Panel -->
    @include('admin.reports.partials._drawer-transaction-detail')

    <!-- Modal 1: QR Coupon Preview Modal -->
    @include('admin.reports.partials._modal-qr-preview')

    <!-- Modal 2: Send Reminder Confirmation Modal -->
    @include('admin.reports.partials._modal-send-reminder')

</div>
@endsection

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script src="{{ asset('assets/js/reports-shared.js') }}"></script>
<script>

    document.addEventListener('DOMContentLoaded', function() {
        // Tab switching handler with URL state persistence
        document.querySelectorAll('.icl-segmented-tabs .segmented-tab-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                const targetTab = this.getAttribute('data-tab');
                document.querySelectorAll('.icl-segmented-tabs .segmented-tab-btn').forEach(b => b.classList.remove('active'));
                this.classList.add('active');

                document.querySelectorAll('.tab-pane-content').forEach(pane => {
                    pane.style.display = 'none';
                });
                const activePane = document.getElementById('tab-' + targetTab);
                if (activePane) {
                    activePane.style.display = 'flex';
                }

                // Update URL without reload
                const url = new URL(window.location);
                url.searchParams.set('tab', targetTab);
                window.history.replaceState({}, '', url);
            });
        });

        // Restore active tab from URL (case-insensitive)
        const urlParams = new URLSearchParams(window.location.search);
        const activeTab = urlParams.get('tab');
        if (activeTab) {
            const tabBtn = Array.from(document.querySelectorAll('.segmented-tab-btn')).find(
                btn => (btn.getAttribute('data-tab') || '').toLowerCase() === activeTab.toLowerCase()
            );
            if (tabBtn) {
                tabBtn.click();
            }
        }

        // Safe Flatpickr Date Range Initialization
        if (typeof flatpickr !== 'undefined') {
            try {
                flatpickr('#txnDateRange, #pendingDateRange', {
                    mode: 'range',
                    dateFormat: 'M d, Y',
                    locale: {
                        rangeSeparator: ' – '
                    },
                    defaultDate: ['Mar 01, 2026', 'Mar 20, 2026'],
                    allowInput: true
                });
            } catch (err) {
                console.warn('Flatpickr init skipped:', err);
            }
        }

        // Keyboard accessibility for custom (non-button) modal triggers, e.g. the Coupon QR preview card
        document.querySelectorAll('[role="button"][data-bs-toggle="modal"]').forEach(trigger => {
            trigger.addEventListener('keydown', function(e) {
                if (e.key === 'Enter' || e.key === ' ') {
                    e.preventDefault();
                    this.click();
                }
            });
        });

        // Initialize Custom Dropdowns
        initIclCustomSelects();
    });

    // ===== Right-Side Drawer Global Interaction Handlers =====
    window.openDrawer = function(drawerId) {
        const backdrop = document.getElementById('iclDrawerBackdrop');
        const drawer = document.getElementById(drawerId);
        if (!backdrop || !drawer) return;

        document.querySelectorAll('.icl-drawer-panel.is-active').forEach(p => {
            p.classList.remove('is-active');
            p.setAttribute('aria-hidden', 'true');
        });

        backdrop.classList.add('is-active');
        drawer.classList.add('is-active');
        drawer.setAttribute('aria-hidden', 'false');
        document.body.style.overflow = 'hidden';
    };

    window.closeAllDrawers = function() {
        const backdrop = document.getElementById('iclDrawerBackdrop');
        if (backdrop) backdrop.classList.remove('is-active');

        document.querySelectorAll('.icl-drawer-panel.is-active').forEach(p => {
            p.classList.remove('is-active');
            p.setAttribute('aria-hidden', 'true');
        });

        document.body.style.overflow = '';
    };

    // ===== Shared Bootstrap 5 Modal API Helpers =====
    window.openModal = function(modalId, triggerEl) {
        const modalEl = document.getElementById(modalId);
        if (!modalEl || typeof bootstrap === 'undefined') return;
        const instance = bootstrap.Modal.getOrCreateInstance(modalEl);
        instance.show(triggerEl);
    };

    window.closeModal = function(modalId) {
        const modalEl = document.getElementById(modalId);
        if (!modalEl || typeof bootstrap === 'undefined') return;
        const instance = bootstrap.Modal.getInstance(modalEl);
        if (instance) {
            instance.hide();
        }
    };

    // Shared Bootstrap Modal Lifecycle Cleanup Safeguard:
    // Ensures body scroll, modal-open class, and residual backdrops are cleanly restored whenever ANY Bootstrap modal finishes hiding.
    document.addEventListener('hidden.bs.modal', function() {
        if (!document.querySelector('.modal.show')) {
            document.body.classList.remove('modal-open');
            document.body.style.overflow = '';
            document.body.style.paddingRight = '';
            document.querySelectorAll('.modal-backdrop').forEach(b => b.remove());
        }
    });

    // Dynamic population of Send Reminder Confirmation Modal
    const sendReminderModal = document.getElementById('sendReminderModal');
    if (sendReminderModal) {
        sendReminderModal.addEventListener('show.bs.modal', function(event) {
            const button = event.relatedTarget;
            if (!button) return;

            const userName = button.getAttribute('data-user-name') || 'Mia Johnson';
            const couponCode = button.getAttribute('data-coupon-code') || 'ICL-LIAM-2025';
            const lastAction = button.getAttribute('data-last-action') || 'Opened Offer';

            const nameTextEl = sendReminderModal.querySelector('#reminderModalUserName .name-text');
            const couponEl = sendReminderModal.querySelector('#reminderModalCouponCode');
            const actionTextEl = sendReminderModal.querySelector('#reminderModalLastAction .action-text') || sendReminderModal.querySelector('#reminderModalLastAction');

            if (nameTextEl) nameTextEl.textContent = userName;
            if (couponEl) couponEl.textContent = couponCode;
            if (actionTextEl) actionTextEl.textContent = lastAction;
        });
    }

    document.addEventListener('click', function(e) {
        // Pending tab actions -> Open User Activity Drawer (for View Activity button)
        const pendingDrawerBtn = e.target.closest('#tab-pending .btn-purple-outlined, .trigger-user-activity');
        if (pendingDrawerBtn) {
            e.preventDefault();
            window.openDrawer('userActivityDrawer');
            return;
        }

        // Transactions tab actions -> Open Transaction Details Drawer
        const txnBtn = e.target.closest('#tab-transactions .btn.view-action-btn, .trigger-txn-detail');
        if (txnBtn) {
            e.preventDefault();
            window.openDrawer('transactionDetailDrawer');
            return;
        }

        // Close drawer triggers
        if (e.target.closest('.close-drawer-trigger, .icl-drawer-close-btn') || e.target.id === 'iclDrawerBackdrop') {
            window.closeAllDrawers();
        }
    });

    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') {
            // Close right-side drawer ONLY if no Bootstrap modal is currently active
            if (!document.querySelector('.modal.show')) {
                window.closeAllDrawers();
            }
        }
    });
</script>
@endsection