@extends('admin.layouts.app', ['title' => 'Merchant Settings'])

@push('head')
    <style>
        .settings-shell {
            display: grid;
            gap: 1.5rem;
        }
        .settings-topbar {
            display: flex;
            justify-content: center;
        }
        .settings-tabs {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            padding: 0.35rem;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.88);
            box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
        }
        .settings-tab {
            border: 0;
            min-width: 10rem;
            border-radius: 999px;
            padding: 0.85rem 1.5rem;
            background: transparent;
            color: #6b7280;
            font-weight: 700;
            transition: all 0.2s ease;
        }
        .settings-tab.active {
            background: linear-gradient(135deg, #243b53 0%, #334e68 52%, #486581 100%);
            color: #fff;
            box-shadow: 0 10px 22px rgba(36, 59, 83, 0.22);
        }
        .settings-grid {
            display: grid;
            grid-template-columns: minmax(290px, 360px) minmax(0, 1fr);
            gap: 1.5rem;
            align-items: start;
        }
        .settings-card {
            border: 0;
            border-radius: 1.5rem;
            overflow: hidden;
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), #fff);
            box-shadow: 0 24px 50px rgba(15, 23, 42, 0.08);
        }
        .settings-card-header {
            padding: 1rem 1.25rem;
            background: linear-gradient(135deg, #243b53 0%, #334e68 52%, #486581 100%);
            color: #fff;
        }
        .settings-search {
            position: relative;
        }
        .settings-search .form-control {
            min-height: 3rem;
            padding-left: 2.85rem;
            border-radius: 1rem;
            background: var(--admin-input);
            border-color: var(--admin-border);
        }
        .settings-search i {
            position: absolute;
            left: 1rem;
            top: 50%;
            transform: translateY(-50%);
            color: var(--admin-muted);
        }
        .settings-user-list {
            display: grid;
            gap: 0.9rem;
            max-height: 64vh;
            overflow: auto;
            padding-right: 0.25rem;
        }
        .settings-user-card {
            width: 100%;
            border: 1px solid rgba(148, 163, 184, 0.16);
            border-radius: 1.1rem;
            background: var(--admin-panel);
            padding: 1rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            text-align: left;
            transition: all 0.2s ease;
            box-shadow: 0 12px 24px rgba(15, 23, 42, 0.05);
        }
        .settings-user-card.active {
            border-color: rgba(20, 184, 166, 0.35);
            box-shadow: inset 4px 0 0 #011a17, 0 38px 34px rgba(20, 184, 166, 0.14);
            transform: translateY(-1px);
        }
        .settings-user-card:hover {
            background: var(--admin-hover);
        }
        .settings-user-meta {
            min-width: 0;
        }
        .settings-user-title {
            font-size: 1rem;
            font-weight: 700;
            color: var(--admin-text);
        }
        .settings-user-subtitle {
            color: var(--admin-muted);
            font-size: 0.88rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .settings-user-action {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            color: #091d4b;
            font-size: 0.88rem;
            font-weight: 700;
        }
        .settings-status-pill {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 999px;
            padding: 0.35rem 0.8rem;
            font-size: 0.78rem;
            font-weight: 700;
            line-height: 1;
        }
        .settings-status-pill.success {
            background: rgba(34, 197, 94, 0.16);
            color: #15803d;
        }
        .settings-status-pill.danger {
            background: rgba(100, 116, 139, 0.14);
            color: #475569;
        }
        .settings-detail {
            min-height: 70vh;
        }
        .settings-detail-body {
            padding: 1.5rem;
        }
        .settings-section-title {
            font-size: 1rem;
            font-weight: 700;
            color: var(--admin-text);
        }
        .settings-row {
            display: grid;
            grid-template-columns: minmax(170px, 220px) minmax(0, 1fr);
            gap: 1rem;
            align-items: center;
            padding: 0.85rem 0;
            border-bottom: 1px solid rgba(148, 163, 184, 0.14);
        }
        .settings-row:last-child {
            border-bottom: 0;
        }
        .settings-label {
            font-weight: 600;
            color: var(--admin-text);
        }
        .settings-segment {
            display: inline-flex;
            padding: 0.25rem;
            border-radius: 999px;
            background: #f3f4f6;
            gap: 0.25rem;
            width: fit-content;
        }
        .settings-segment input {
            position: absolute;
            opacity: 0;
            pointer-events: none;
        }
        .settings-segment label {
            min-width: 5.8rem;
            padding: 0.6rem 1rem;
            border-radius: 999px;
            text-align: center;
            font-size: 0.88rem;
            font-weight: 700;
            color: #334e68;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        .settings-segment input:checked + label {
            color: #fff;
            background: linear-gradient(135deg, #01060f 0%, #041a55 100%);
            box-shadow: 0 10px 20px rgba(37, 99, 235, 0.18);
        }
        .settings-inline-fields {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 90px;
            gap: 0.65rem;
        }
        .settings-input,
        .settings-select {
            min-height: 2.8rem;
            border-radius: 0.85rem;
            border-color: var(--admin-border);
            background: var(--admin-input);
            color: var(--admin-text);
        }
        .settings-submit {
            min-width: 12rem;
            border: 0;
            border-radius: 0.85rem;
            padding: 0.9rem 1.5rem;
            background: linear-gradient(135deg, #02060f 0%, #051746 100%);
            color: #fff;
            font-weight: 700;
            box-shadow: 0 14px 24px rgba(37, 99, 235, 0.18);
        }
        .settings-note {
            border-radius: 0.95rem;
            padding: 0.9rem 1rem;
            background: rgba(22, 163, 74, 0.08);
            color: #166534;
            font-weight: 600;
        }
        .settings-placeholder {
            min-height: 24rem;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: var(--admin-muted);
        }
        html[data-theme="dark"] .settings-tabs {
            background: rgba(15, 23, 42, 0.9);
        }
        html[data-theme="dark"] .settings-card {
            background: linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(15, 23, 42, 0.94));
        }
        html[data-theme="dark"] .settings-segment {
            background: rgba(148, 163, 184, 0.12);
        }
        html[data-theme="dark"] .settings-status-pill.success {
            background: rgba(34, 197, 94, 0.18);
            color: #86efac;
        }
        html[data-theme="dark"] .settings-status-pill.danger {
            background: rgba(248, 113, 113, 0.16);
            color: #fca5a5;
        }
        @media (max-width: 991.98px) {
            .settings-grid {
                grid-template-columns: 1fr;
            }
            .settings-user-list {
                max-height: none;
            }
        }
        @media (max-width: 767.98px) {
            .settings-tab {
                min-width: 8rem;
                padding-inline: 1rem;
            }
            .settings-row {
                grid-template-columns: 1fr;
                gap: 0.7rem;
            }
            .settings-inline-fields {
                grid-template-columns: 1fr;
            }
        }
    </style>
@endpush

@section('content')
    <div
        class="settings-shell"
        id="userSettingsPage"
        data-index-url="{{ route('admin.user_settings.index') }}"
        data-active-tab="{{ $activeTab }}"
        data-selected-user="{{ $selectedUser?->id }}"
    >
        <div class="alert alert-success d-none" id="userSettingsSuccessAlert"></div>
        <div class="alert alert-danger d-none" id="userSettingsErrorAlert"></div>

        <div class="settings-topbar" id="userSettingsTabs">
            <div class="settings-tabs" role="tablist" aria-label="Merchant settings tabs">
                <button type="button" class="settings-tab {{ $activeTab === 'collection' ? 'active' : '' }}" data-settings-tab="collection">Collection</button>
                <button type="button" class="settings-tab {{ $activeTab === 'payout' ? 'active' : '' }}" data-settings-tab="payout">Payout</button>
            </div>
        </div>

        <div class="settings-grid">
            <section class="settings-card">
                <div class="settings-card-header">
                    <div class="fw-bold">Merchant Settings</div>
                    {{-- <div class="small opacity-75">Select any user from the left list and manage settings instantly.</div> --}}
                </div>
                <div class="p-3 border-bottom">
                    <form action="{{ route('admin.user_settings.index') }}" id="userSettingsSearchForm">
                        <div class="settings-search">
                            <i class="bi bi-search"></i>
                            <input type="search" name="search" class="form-control" id="userSettingsSearchInput" value="{{ $search }}" placeholder="Search merchant by name, username, email...">
                        </div>
                    </form>
                </div>
                <div class="p-3" id="userSettingsListPane">
                    @include('admin.user_settings.partials._user_list', [
                        'users' => $users,
                        'activeTab' => $activeTab,
                        'selectedUserId' => $selectedUser?->id,
                    ])
                </div>
            </section>

            <section class="settings-card settings-detail">
                <div id="userSettingsDetailPane">
                    @include('admin.user_settings.partials._detail_panel', [
                        'selectedUser' => $selectedUser,
                        'activeTab' => $activeTab,
                    ])
                </div>
            </section>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const page = document.getElementById('userSettingsPage');

            if (!page) {
                return;
            }

            const successAlert = document.getElementById('userSettingsSuccessAlert');
            const errorAlert = document.getElementById('userSettingsErrorAlert');
            const searchInput = document.getElementById('userSettingsSearchInput');
            const indexUrl = page.dataset.indexUrl;
            const state = {
                tab: page.dataset.activeTab || 'collection',
                user: page.dataset.selectedUser || '',
                page: new URL(window.location.href).searchParams.get('page') || '',
                search: searchInput ? searchInput.value : '',
            };

            function showAlert(element, message) {
                element.textContent = message;
                element.classList.remove('d-none');
                window.scrollTo({ top: 0, behavior: 'smooth' });
            }

            function hideAlerts() {
                successAlert.classList.add('d-none');
                errorAlert.classList.add('d-none');
            }

            function getPayinChargeModeElements(root = document) {
                const detailPane = root.getElementById ? root.getElementById('userSettingsDetailPane') : document.getElementById('userSettingsDetailPane');

                if (!detailPane) {
                    return null;
                }

                const modeInputs = detailPane.querySelectorAll('input[name="payin_charge_mode"]');
                const overallInput = detailPane.querySelector('[data-payin-overall-input]');
                const individualInputs = detailPane.querySelectorAll('[data-payin-individual-input]');

                if (!modeInputs.length || !overallInput || !individualInputs.length) {
                    return null;
                }

                return {
                    detailPane: detailPane,
                    modeInputs: Array.from(modeInputs),
                    overallInput: overallInput,
                    individualInputs: Array.from(individualInputs),
                };
            }

            function applyPayinChargeMode(root = document, forcedMode = null) {
                const elements = getPayinChargeModeElements(root);

                if (!elements) {
                    return;
                }

                const activeMode = forcedMode || (elements.modeInputs.find(function (input) {
                    return input.checked;
                }) || {}).value || 'overall';
                const isOverall = activeMode === 'overall';

                elements.modeInputs.forEach(function (input) {
                    input.checked = input.value === activeMode;
                });

                if (isOverall) {
                    elements.overallInput.readOnly = false;
                    elements.overallInput.removeAttribute('readonly');
                } else {
                    elements.overallInput.readOnly = true;
                    elements.overallInput.setAttribute('readonly', 'readonly');
                }

                elements.overallInput.classList.toggle('opacity-75', !isOverall);

                elements.individualInputs.forEach(function (input) {
                    if (isOverall) {
                        input.readOnly = true;
                        input.setAttribute('readonly', 'readonly');
                    } else {
                        input.readOnly = false;
                        input.removeAttribute('readonly');
                    }

                    input.classList.toggle('opacity-75', isOverall);
                });
            }

            function initPayinChargeMode(root = document) {
                const elements = getPayinChargeModeElements(root);

                if (!elements) {
                    return;
                }

                applyPayinChargeMode(root);
            }

            function buildUrl() {
                const url = new URL(indexUrl, window.location.origin);

                if (state.search.trim() !== '') {
                    url.searchParams.set('search', state.search.trim());
                }

                if (state.tab) {
                    url.searchParams.set('tab', state.tab);
                }

                if (state.user) {
                    url.searchParams.set('user', state.user);
                }

                if (state.page) {
                    url.searchParams.set('page', state.page);
                }

                return url;
            }

            function syncStateFromDocument(doc) {
                const nextPage = doc.getElementById('userSettingsPage');
                const nextSearchInput = doc.getElementById('userSettingsSearchInput');

                if (!nextPage) {
                    return;
                }

                state.tab = nextPage.dataset.activeTab || 'collection';
                state.user = nextPage.dataset.selectedUser || '';
                state.search = nextSearchInput ? nextSearchInput.value : '';
            }

            async function refreshPage(pushHistory = true) {
                const requestUrl = buildUrl();

                try {
                    const response = await fetch(requestUrl.toString(), {
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest',
                        },
                    });

                    if (!response.ok) {
                        throw new Error('Unable to load merchant settings.');
                    }

                    const html = await response.text();
                    const parser = new DOMParser();
                    const doc = parser.parseFromString(html, 'text/html');
                    const nextList = doc.getElementById('userSettingsListPane');
                    const nextDetail = doc.getElementById('userSettingsDetailPane');
                    const nextTabs = doc.getElementById('userSettingsTabs');
                    const currentList = document.getElementById('userSettingsListPane');
                    const currentDetail = document.getElementById('userSettingsDetailPane');
                    const currentTabs = document.getElementById('userSettingsTabs');

                    if (nextList && currentList) {
                        currentList.innerHTML = nextList.innerHTML;
                    }

                    if (nextDetail && currentDetail) {
                        currentDetail.innerHTML = nextDetail.innerHTML;
                    }

                    if (nextTabs && currentTabs) {
                        currentTabs.innerHTML = nextTabs.innerHTML;
                    }

                    syncStateFromDocument(doc);

                    if (searchInput) {
                        searchInput.value = state.search;
                    }

                    if (pushHistory) {
                        window.history.replaceState({}, '', buildUrl().toString());
                    }

                    initPayinChargeMode(document);
                } catch (error) {
                    showAlert(errorAlert, error.message || 'Unable to load merchant settings.');
                }
            }

            document.addEventListener('click', function (event) {
                const tabButton = event.target.closest('[data-settings-tab]');
                const userButton = event.target.closest('[data-settings-user-card]');
                const paginationLink = event.target.closest('#userSettingsListPane .pagination a');
                const payinModeLabel = event.target.closest('label[for="payin_charge_mode_overall"], label[for="payin_charge_mode_individual"]');

                if (tabButton) {
                    hideAlerts();
                    state.tab = tabButton.dataset.settingsTab;
                    state.page = '';
                    refreshPage();
                    return;
                }

                if (userButton) {
                    hideAlerts();
                    state.user = userButton.dataset.userId || '';
                    refreshPage();
                    return;
                }

                if (paginationLink) {
                    event.preventDefault();
                    hideAlerts();
                    const url = new URL(paginationLink.href);
                    state.page = url.searchParams.get('page') || '';
                    refreshPage();
                    return;
                }

                if (payinModeLabel) {
                    const mode = payinModeLabel.getAttribute('for') === 'payin_charge_mode_individual' ? 'individual' : 'overall';
                    window.setTimeout(function () {
                        applyPayinChargeMode(document, mode);
                    }, 0);
                }
            });

            document.addEventListener('change', function (event) {
                if (event.target.matches('input[name="payin_charge_mode"]')) {
                    applyPayinChargeMode(document, event.target.value);
                }
            });

            if (searchInput) {
                let searchTimer;

                searchInput.addEventListener('input', function () {
                    window.clearTimeout(searchTimer);

                    searchTimer = window.setTimeout(function () {
                        hideAlerts();
                        state.search = searchInput.value;
                        state.page = '';
                        refreshPage();
                    }, 350);
                });
            }

            document.addEventListener('submit', async function (event) {
                const form = event.target.closest('[data-user-settings-form]');

                if (!form) {
                    return;
                }

                event.preventDefault();
                hideAlerts();

                const submitButton = form.querySelector('[data-settings-submit]');
                const originalLabel = submitButton ? submitButton.textContent : '';

                if (submitButton) {
                    submitButton.disabled = true;
                    submitButton.textContent = 'Saving...';
                }

                try {
                    const response = await fetch(form.action, {
                        method: 'POST',
                        headers: {
                            'Accept': 'application/json',
                            'X-Requested-With': 'XMLHttpRequest',
                        },
                        body: new FormData(form),
                    });

                    const data = await response.json();

                    if (!response.ok) {
                        const message = data.message || Object.values(data.errors || {}).flat()[0] || 'Unable to save settings.';
                        throw new Error(message);
                    }

                    const currentCard = document.querySelector('[data-settings-user-card][data-user-id="' + data.user_id + '"]');

                    if (currentCard && data.user_card_html) {
                        const wrapper = document.createElement('div');
                        wrapper.innerHTML = data.user_card_html.trim();
                        const nextCard = wrapper.firstElementChild;

                        if (nextCard) {
                            currentCard.replaceWith(nextCard);
                        }
                    }

                    showAlert(successAlert, data.message || 'Settings updated successfully.');
                } catch (error) {
                    showAlert(errorAlert, error.message || 'Unable to save settings.');
                } finally {
                    if (submitButton) {
                        submitButton.disabled = false;
                        submitButton.textContent = originalLabel;
                    }
                }
            });

            initPayinChargeMode(document);
        });
    </script>
@endpush