@extends('layout.layout')

@section('content')
    @include('components.alert')

    <div class="container-fluid app-bg">
        <div class="page-shell">
            <div class="d-flex flex-column gap-4">
                <x-page-title
                    title="Program Pricing Plan - {{ $track->name_en }}"
                    description="Manage {{ $track->name_en }} pricing by program type, student type, teacher type, and package."
                ></x-page-title>

                <div class="ui-card ui-card--table">
                    <div class="ui-card__header d-flex align-items-center justify-content-between gap-3 flex-wrap">
                        <div>
                            <h6 class="mb-1 ui-title">Program: {{ $track->name_en }}</h6>
                            <p class="mb-0 ui-muted">{{ $track->name_ar }}</p>
                        </div>
                        <div class="d-flex align-items-center gap-2 flex-wrap">
                            <span class="ui-pill ui-pill--neutral">{{ $tracktypes->count() }} Program Types</span>
                            <span class="ui-pill ui-pill--info">{{ $pricing_plan_types->count() }} Student Types</span>
                            <span class="ui-pill ui-pill--success">{{ $packages->count() }} Packages</span>
                        </div>
                    </div>

                    @if ($tracktypes->isEmpty() || $pricing_plan_types->isEmpty() || $packages->isEmpty())
                        <div class="px-6 py-12 text-center">
                            <p class="text-slate-500 mb-0">Program types, student types, and packages are required before pricing can be configured.</p>
                        </div>
                    @else
                        <div class="px-3 pb-3">
                            <div class="row g-3 align-items-end">
                                <div class="col-lg-3 col-md-6">
                                    <label for="program-mode" class="form-label">Program Mode</label>
                                    <select id="program-mode" class="form-select form-select-sm general-select pricing-filter"></select>
                                </div>
                                <div class="col-lg-3 col-md-6">
                                    <label for="program-audience" class="form-label">Program Audience</label>
                                    <select id="program-audience" class="form-select form-select-sm general-select pricing-filter"></select>
                                </div>
                                <div class="col-lg-3 col-md-6">
                                    <label for="pricing-plan-type" class="form-label">Student Type</label>
                                    <select id="pricing-plan-type" class="form-select form-select-sm general-select pricing-filter"></select>
                                </div>
                                <div class="col-lg-3 col-md-6">
                                    <label for="teacher-type" class="form-label">Teacher Type</label>
                                    <select id="teacher-type" class="form-select form-select-sm general-select pricing-filter">
                                        <option value="native_like">Native-like</option>
                                        <option value="native">Native</option>
                                    </select>
                                </div>
                            </div>

                            <div class="d-flex align-items-center justify-content-between gap-3 flex-wrap mt-4">
                                <div class="ui-muted" id="pricing-context-note"></div>
                                <div class="d-flex align-items-center gap-2 flex-wrap">
                                    <div class="input-group input-group-sm d-none" id="native-increase-wrap" style="width: 210px;">
                                        <input type="number" min="0" step="0.01" class="form-control" id="native-increase-percentage" placeholder="Increase %">
                                        <span class="input-group-text">%</span>
                                    </div>
                                    <button type="button" class="asset-btn asset-btn--secondary d-none" id="copy-native-like-prices">
                                        Copy Native-like
                                    </button>
                                    <button type="button" class="asset-btn asset-btn--primary" id="save-all-prices">
                                        Save All
                                    </button>
                                </div>
                            </div>
                        </div>

                        <div class="ui-table-wrap nice-scrollbar">
                            <table class="ui-table">
                                <thead class="ui-table__head">
                                    <tr>
                                        <th class="text-center" style="min-width: 220px;">Package</th>
                                        <th class="text-center" style="min-width: 130px;">Level Count</th>
                                        <th class="text-center" style="min-width: 150px;">Level Price</th>
                                        <th class="text-center" style="min-width: 150px;">Package Price</th>
                                        <th class="text-center" style="min-width: 160px;">Discount %</th>
                                        <th class="text-center" style="min-width: 170px;">Total After Discount</th>
                                        <th class="text-center" style="min-width: 120px;">Action</th>
                                    </tr>
                                </thead>
                                <tbody class="ui-table__body" id="pricing-package-rows"></tbody>
                            </table>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        $(document).ready(function () {
            const trackTypes = @json($tracktypes);
            const pricingPlanTypes = @json($pricing_plan_types);
            const packages = @json($packages);
            const pricingData = @json($pricing_data);
            const saveUrl = "{{ route('track-pricing-plan.store', ['id' => $track->id]) }}";
            const csrfToken = "{{ csrf_token() }}";

            function escapeHtml(value) {
                return String(value ?? '').replace(/[&<>"']/g, function (char) {
                    return {
                        '&': '&amp;',
                        '<': '&lt;',
                        '>': '&gt;',
                        '"': '&quot;',
                        "'": '&#039;',
                    }[char];
                });
            }

            function normalizeTrackTypeValue(value) {
                return String(value || '')
                    .toLowerCase()
                    .trim()
                    .replace(/_/g, '-')
                    .replace(/\s+/g, '-');
            }

            function parseTrackTypeSelection(trackType) {
                const name = String(trackType.name || trackType.slug || '').trim();
                const [modeLabel = '', ...audienceParts] = name.split(/\s+/);
                const audienceLabel = audienceParts.join(' ').trim() || modeLabel;
                const mode = normalizeTrackTypeValue(modeLabel);
                const audience = normalizeTrackTypeValue(audienceLabel);

                return mode && audience ? { mode, modeLabel, audience, audienceLabel } : null;
            }

            const trackTypeSelections = (trackTypes || [])
                .map(trackType => ({ trackType, selection: parseTrackTypeSelection(trackType) }))
                .filter(item => item.selection);

            const programModes = [...new Set(trackTypeSelections.map(item => item.selection.mode))];

            function optionsHtml(items, selectedValue, placeholder, labelCallback) {
                let html = `<option value="">${escapeHtml(placeholder)}</option>`;

                items.forEach(item => {
                    const value = String(item.value ?? item.id);
                    const selected = String(selectedValue ?? '') === value ? 'selected' : '';
                    html += `<option value="${escapeHtml(value)}" ${selected}>${escapeHtml(labelCallback(item))}</option>`;
                });

                return html;
            }

            function modeLabel(value) {
                return trackTypeSelections.find(item => item.selection.mode === value)?.selection.modeLabel || value;
            }

            function audienceLabel(value) {
                return trackTypeSelections.find(item => item.selection.audience === value)?.selection.audienceLabel || value;
            }

            function audiencesForMode(mode) {
                const source = mode
                    ? trackTypeSelections.filter(item => item.selection.mode === mode)
                    : trackTypeSelections;

                return [...new Set(source.map(item => item.selection.audience))];
            }

            function resolveTrackTypeId(mode, audience) {
                return trackTypeSelections.find(item =>
                    item.selection.mode === mode && item.selection.audience === audience
                )?.trackType.id || '';
            }

            function currentTrackTypeId() {
                return resolveTrackTypeId($('#program-mode').val(), $('#program-audience').val());
            }

            function currentPricingPlanTypeId() {
                return $('#pricing-plan-type').val();
            }

            function currentTeacherType() {
                return $('#teacher-type').val() || 'native_like';
            }

            function packageLevelCount(packageItem) {
                return Number(packageItem.levels_count || packageItem.level_count || 1);
            }

            function packagePricing(packageId, teacherType = currentTeacherType()) {
                const trackTypeId = currentTrackTypeId();
                const pricingPlanTypeId = currentPricingPlanTypeId();

                return pricingData?.[trackTypeId]?.[pricingPlanTypeId]?.[packageId]?.[teacherType] || null;
            }

            function firstOneLevelPackage() {
                return (packages || []).find(packageItem => packageLevelCount(packageItem) === 1) || null;
            }

            function baseLevelPrice(teacherType = currentTeacherType()) {
                const basePackage = firstOneLevelPackage();
                const basePricing = basePackage ? packagePricing(basePackage.id, teacherType) : null;

                return Number(basePricing?.level_price || basePricing?.price || 0);
            }

            function calculateTotal(price, discountPercentage) {
                const numericPrice = Number(price || 0);
                const discount = Number(discountPercentage || 0);

                return Math.max(0, numericPrice - (numericPrice * (discount / 100)));
            }

            function syncRowPrice($row) {
                const levelCount = Number($row.data('levels-count') || 1);
                const $priceInput = $row.find('.price-input');
                const $levelPriceInput = $row.find('.level-price-info');

                if (levelCount === 1) {
                    $priceInput.prop('readonly', false);
                    $levelPriceInput.val($priceInput.val());
                } else {
                    const levelPrice = baseLevelPrice();
                    $priceInput.prop('readonly', true);

                    if (!levelPrice) {
                        return;
                    }

                    $levelPriceInput.val(levelPrice.toFixed(2));
                    $priceInput.val((levelPrice * levelCount).toFixed(2));
                }

                syncRowTotal($row);
            }

            function syncRowTotal($row) {
                const total = calculateTotal($row.find('.price-input').val(), $row.find('.discount-percentage-input').val());
                $row.find('.total-after-discount-info').val($row.find('.price-input').val() ? total.toFixed(2) : '');
            }

            function markRowStatus($row, status) {
                const $badge = $row.find('.row-status-badge');
                const classes = 'ui-pill--success ui-pill--neutral ui-pill--info';
                $badge.removeClass(classes);

                if (status === 'saved') {
                    $badge.addClass('ui-pill--success').text('Saved');
                    $row.attr('data-has-pricing', '1');
                    $row.attr('data-original-price', $row.find('.price-input').val() || '');
                    $row.attr('data-original-discount', $row.find('.discount-percentage-input').val() || 0);
                    return;
                }

                if (status === 'unsaved') {
                    $badge.addClass('ui-pill--info').text('Unsaved');
                    return;
                }

                $badge.addClass('ui-pill--neutral').text('Missing');
            }

            function markRowIfChanged($row) {
                const hasPricing = String($row.attr('data-has-pricing') || '') === '1';
                const price = String($row.find('.price-input').val() || '');
                const discount = String($row.find('.discount-percentage-input').val() || 0);
                const originalPrice = String($row.attr('data-original-price') || '');
                const originalDiscount = String($row.attr('data-original-discount') || 0);

                if (!hasPricing && !price) {
                    markRowStatus($row, 'missing');
                    return;
                }

                if (!hasPricing || price !== originalPrice || discount !== originalDiscount) {
                    markRowStatus($row, 'unsaved');
                    return;
                }

                markRowStatus($row, 'saved');
            }

            function renderPackageRows() {
                const trackTypeId = currentTrackTypeId();
                const pricingPlanTypeId = currentPricingPlanTypeId();
                const teacherType = currentTeacherType();
                const $tbody = $('#pricing-package-rows');

                const nativeToolsHidden = teacherType !== 'native' || !trackTypeId || !pricingPlanTypeId;
                $('#copy-native-like-prices').toggleClass('d-none', nativeToolsHidden);
                $('#native-increase-wrap').toggleClass('d-none', nativeToolsHidden);
                $('#save-all-prices').prop('disabled', !trackTypeId || !pricingPlanTypeId || !teacherType);

                if (!trackTypeId || !pricingPlanTypeId || !teacherType) {
                    $tbody.html('<tr><td colspan="7" class="text-center">Select program mode, audience, student type, and teacher type first.</td></tr>');
                    $('#pricing-context-note').text('');
                    return;
                }

                const modeText = $('#program-mode option:selected').text();
                const audienceText = $('#program-audience option:selected').text();
                const studentText = $('#pricing-plan-type option:selected').text();
                const teacherText = $('#teacher-type option:selected').text();
                $('#pricing-context-note').text(`${modeText} / ${audienceText} / ${studentText} / ${teacherText}`);

                const rows = (packages || []).map(packageItem => {
                    const levelsCount = packageLevelCount(packageItem);
                    const pricing = packagePricing(packageItem.id, teacherType);
                    const price = pricing?.price ?? '';
                    const levelPrice = pricing?.level_price ?? '';
                    const discount = pricing?.discount_percentage ?? 0;
                    const totalAfterDiscount = pricing?.total_after_discount ?? '';

                    return `
                        <tr class="pricing-package-row" data-package-id="${escapeHtml(packageItem.id)}" data-levels-count="${escapeHtml(levelsCount)}" data-original-price="${escapeHtml(price)}" data-original-discount="${escapeHtml(discount)}" data-has-pricing="${pricing ? '1' : '0'}">
                            <td>
                                <div class="d-flex align-items-center justify-content-between gap-2">
                                    <span class="fw-semibold">${escapeHtml(packageItem.name)}</span>
                                    <span class="ui-pill ${pricing ? 'ui-pill--success' : 'ui-pill--neutral'} row-status-badge">${pricing ? 'Saved' : 'Missing'}</span>
                                </div>
                            </td>
                            <td><input type="number" class="form-control form-control-sm text-center" value="${escapeHtml(levelsCount)}" readonly></td>
                            <td><input type="number" step="0.01" class="form-control form-control-sm level-price-info text-center" value="${escapeHtml(levelPrice)}" readonly></td>
                            <td><input type="number" step="0.01" min="0" class="form-control form-control-sm price-input text-center" value="${escapeHtml(price)}"></td>
                            <td><input type="number" step="0.01" min="0" max="100" class="form-control form-control-sm discount-percentage-input text-center" value="${escapeHtml(discount)}"></td>
                            <td><input type="number" step="0.01" class="form-control form-control-sm total-after-discount-info text-center" value="${escapeHtml(totalAfterDiscount)}" readonly></td>
                            <td class="text-center"><button type="button" class="asset-btn asset-btn--primary save-package-price">Save</button></td>
                        </tr>
                    `;
                }).join('');

                $tbody.html(rows);

                $tbody.find('tr.pricing-package-row').each(function () {
                    syncRowPrice($(this));
                });
            }

            function saveRow($row, silent = false) {
                const trackTypeId = currentTrackTypeId();
                const pricingPlanTypeId = currentPricingPlanTypeId();
                const teacherType = currentTeacherType();
                const packageId = $row.data('package-id');
                const levelsCount = Number($row.data('levels-count') || 1);
                const price = $row.find('.price-input').val();
                const discount = $row.find('.discount-percentage-input').val() || 0;

                if (!trackTypeId || !pricingPlanTypeId || !teacherType || !packageId) {
                    toastr.warning('Select the pricing context first.');
                    return $.Deferred().reject().promise();
                }

                if (!price) {
                    toastr.warning(levelsCount === 1
                        ? 'Price is required for one-level packages.'
                        : 'Save the one-level package price for this combination first.');
                    return $.Deferred().reject().promise();
                }

                return $.ajax({
                    url: saveUrl,
                    type: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': csrfToken,
                        'Accept': 'application/json',
                    },
                    data: {
                        track_type_id: trackTypeId,
                        pricing_plan_type_id: pricingPlanTypeId,
                        teacher_type: teacherType,
                        package_id: packageId,
                        price,
                        discount_percentage: discount,
                    },
                    success: function (response) {
                        if (!response.success) {
                            toastr.error('Something went wrong.');
                            return;
                        }

                        const data = response.data;
                        pricingData[data.track_type_id] = pricingData[data.track_type_id] || {};
                        pricingData[data.track_type_id][data.pricing_plan_type_id] = pricingData[data.track_type_id][data.pricing_plan_type_id] || {};
                        pricingData[data.track_type_id][data.pricing_plan_type_id][data.package_id] = pricingData[data.track_type_id][data.pricing_plan_type_id][data.package_id] || {};
                        pricingData[data.track_type_id][data.pricing_plan_type_id][data.package_id][data.teacher_type || 'native_like'] = data;

                        $row.find('.level-price-info').val(data.level_price ?? '');
                        $row.find('.price-input').val(data.price ?? '');
                        $row.find('.discount-percentage-input').val(data.discount_percentage ?? 0);
                        $row.find('.total-after-discount-info').val(data.total_after_discount ?? '');
                        markRowStatus($row, 'saved');

                        if (!silent) {
                            toastr.success(response.message || 'Pricing saved successfully.');
                        }
                    },
                    error: function (xhr) {
                        const message = xhr.responseJSON?.message
                            || Object.values(xhr.responseJSON?.errors || {}).flat()[0]
                            || 'Failed to save pricing.';
                        toastr.error(message);
                    }
                });
            }

            function initFilters() {
                $('#program-mode').html(optionsHtml(
                    programModes.map(value => ({ value })),
                    programModes[0] || '',
                    'Select Mode',
                    item => modeLabel(item.value)
                ));

                rebuildAudienceOptions();

                $('#pricing-plan-type').html(optionsHtml(
                    pricingPlanTypes,
                    pricingPlanTypes?.[0]?.id || '',
                    'Select Student Type',
                    item => item.name
                ));

                $('.pricing-filter').select2({
                    placeholder: 'Select',
                    allowClear: false,
                    width: '100%'
                });
            }

            function rebuildAudienceOptions() {
                const mode = $('#program-mode').val() || programModes[0] || '';
                const audiences = audiencesForMode(mode);
                const currentAudience = $('#program-audience').val();
                const selectedAudience = audiences.includes(currentAudience) ? currentAudience : (audiences[0] || '');

                if ($('#program-audience').hasClass('select2-hidden-accessible')) {
                    $('#program-audience').select2('destroy');
                }

                $('#program-audience').html(optionsHtml(
                    audiences.map(value => ({ value })),
                    selectedAudience,
                    'Select Audience',
                    item => audienceLabel(item.value)
                ));
            }

            initFilters();
            renderPackageRows();

            $('#program-mode').on('change', function () {
                rebuildAudienceOptions();
                $('#program-audience').select2({ placeholder: 'Select', allowClear: false, width: '100%' });
                renderPackageRows();
            });

            $('#program-audience, #pricing-plan-type, #teacher-type').on('change', renderPackageRows);

            $(document).on('input', '.price-input, .discount-percentage-input', function () {
                const $row = $(this).closest('tr');
                const levelsCount = Number($row.data('levels-count') || 1);

                if ($(this).hasClass('price-input') && levelsCount === 1) {
                    $row.find('.level-price-info').val($(this).val());
                }

                syncRowTotal($row);
                markRowIfChanged($row);
            });

            $(document).on('click', '.save-package-price', function () {
                const $button = $(this);
                const $row = $button.closest('tr');

                $button.prop('disabled', true).text('Saving...');
                saveRow($row).always(function () {
                    $button.prop('disabled', false).text('Save');
                });
            });

            $('#save-all-prices').on('click', function () {
                const $button = $(this);
                const rows = $('#pricing-package-rows tr.pricing-package-row')
                    .toArray()
                    .map(row => $(row))
                    .filter($row => $row.find('.price-input').val());

                if (!rows.length) {
                    toastr.warning('There are no prices to save.');
                    return;
                }

                rows.sort((a, b) => Number(a.data('levels-count') || 1) - Number(b.data('levels-count') || 1));
                $button.prop('disabled', true).text('Saving...');

                let chain = $.Deferred().resolve().promise();
                let savedCount = 0;

                rows.forEach($row => {
                    chain = chain.then(() => saveRow($row, true).then(() => { savedCount++; }));
                });

                chain
                    .done(function () {
                        toastr.success(`${savedCount} pricing rows saved successfully.`);
                    })
                    .always(function () {
                        $button.prop('disabled', false).text('Save All');
                    });
            });

            $('#copy-native-like-prices').on('click', function () {
                const trackTypeId = currentTrackTypeId();
                const pricingPlanTypeId = currentPricingPlanTypeId();

                if (!trackTypeId || !pricingPlanTypeId || currentTeacherType() !== 'native') {
                    return;
                }

                let copiedRows = 0;

                $('#pricing-package-rows tr.pricing-package-row').each(function () {
                    const $row = $(this);
                    const nativeLikePricing = packagePricing($row.data('package-id'), 'native_like');

                    if (!nativeLikePricing) {
                        return;
                    }

                    const increasePercentage = Number($('#native-increase-percentage').val() || 0);
                    const multiplier = 1 + (increasePercentage / 100);
                    const increasedPrice = Number(nativeLikePricing.price || 0) * multiplier;
                    const increasedLevelPrice = Number((nativeLikePricing.level_price ?? nativeLikePricing.price) || 0) * multiplier;

                    $row.find('.price-input').val(increasedPrice ? increasedPrice.toFixed(2) : '');
                    $row.find('.level-price-info').val(increasedLevelPrice ? increasedLevelPrice.toFixed(2) : '');
                    $row.find('.discount-percentage-input').val(nativeLikePricing.discount_percentage ?? 0);
                    syncRowTotal($row);
                    markRowStatus($row, 'unsaved');
                    copiedRows++;
                });

                if (!copiedRows) {
                    toastr.warning('No Native-like prices found for this selection.');
                    return;
                }

                toastr.success('Native-like prices copied. Review them, then save all or save the rows you need.');
            });
        });
    </script>
@endpush