@php
    $selectedItems = old('items');
    if ($selectedItems === null && isset($package)) {
        $selectedItems = $package->items->map(fn($item) => [
            'sellable_type' => $item->sellable_type,
            'sellable_id' => $item->sellable_id,
            'quantity' => $item->quantity,
        ])->toArray();
    }
    $selectedKeys = collect($selectedItems ?? [])->map(fn($item) => ($item['sellable_type'] ?? '') . ':' . ($item['sellable_id'] ?? ''))->all();
@endphp

<div class="card shadow-none border my-4 admin-contact-section">
    <div class="card-header p-4 border-bottom bg-body">
        <h4 class="mb-0">{{ isset($package) ? 'Edit Package' : 'Create Package' }}</h4>
    </div>
    <div class="card-body p-4">
        <form method="POST" action="{{ isset($package) ? route('admin.pos.packages.update', $package) : route('admin.pos.packages.store') }}" id="packageForm">
            @csrf
            @isset($package)
                @method('PUT')
            @endisset

            <div class="row g-3">
                <div class="col-md-6">
                    <label class="form-label">Package Title <span class="text-danger">*</span></label>
                    <input type="text" name="title" class="form-control @error('title') is-invalid @enderror" value="{{ old('title', $package->title ?? '') }}">
                    @error('title')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="col-md-3">
                    <label class="form-label">Original Price <span class="text-danger">*</span></label>
                    <input type="number"
       name="original_price"
       id="originalPrice"
       step="0.01"
       min="0"
       class="form-control @error('original_price') is-invalid @enderror"
       value="{{ old('original_price', $package->original_price ?? 0) }}">

@error('original_price')
    <div class="invalid-feedback">{{ $message }}</div>
@enderror
                </div>
                <div class="col-md-3">
                    <label class="form-label">Sale Price</label>
                    <input type="number"
       name="sale_price"
       id="salePrice"
       step="0.01"
       min="0"
       class="form-control @error('sale_price') is-invalid @enderror"
       value="{{ old('sale_price', $package->sale_price ?? '') }}">

@error('sale_price')
    <div class="invalid-feedback">{{ $message }}</div>
@enderror
                </div>
                <div class="col-12">
                    <label class="form-label">Description</label>
                    <textarea name="description" class="form-control" rows="3">{{ old('description', $package->description ?? '') }}</textarea>
                </div>
            </div>

            <hr class="my-4">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h5 class="mb-0">Sellable Items</h5>
                <button type="button" id="recalculatePackagePrice" class="btn btn-sm btn-outline-primary">Recalculate Package Price</button>
            </div>
            @error('items')<div class="text-danger small mb-2">{{ $message }}</div>@enderror
            <div class="row g-3">
                <div class="col-md-6">
                    <h6>Products</h6>
                    @foreach($products as $product)
                        @php($key = $product['type'] . ':' . $product['id'])
                        <label class="d-flex gap-2 border rounded p-2 mb-2 package-item-option">
                            <input type="checkbox"
       class="package-sellable"
       data-type="{{ $product['type'] }}"
       data-id="{{ $product['id'] }}"
       data-price="{{ $product['price'] }}"
       @checked(in_array($key, $selectedKeys, true))>
                            <span class="flex-1">{{ $product['label'] }}</span>
                            <strong>{{ $product['formatted_price'] }}</strong>
                        </label>
                    @endforeach
                </div>
                <div class="col-md-6">
                    <h6>Rank Testing Events</h6>
                    @foreach($rankTestingItems as $item)
                        @php($key = $item['type'] . ':' . $item['id'])
                        <label class="d-flex gap-2 border rounded p-2 mb-2 package-item-option">
                            <input type="checkbox"
       class="package-sellable"
       data-type="{{ $item['type'] }}"
       data-id="{{ $item['id'] }}"
       data-price="{{ $item['price'] }}"
       @checked(in_array($key, $selectedKeys, true))>
                            <span class="flex-1">{{ $item['label'] }}</span>
                            <strong>{{ $item['formatted_price'] }}</strong>
                        </label>
                    @endforeach
                </div>
            </div>

            <div id="packageItemsInputs"></div>
            @error('items.*.sellable_id')<div class="text-danger small">{{ $message }}</div>@enderror

            <div class="form-check form-switch mt-4">
                <input type="hidden" name="status" value="0">
                <input class="form-check-input" type="checkbox" name="status" value="1" @checked(old('status', $package->status ?? 1))>
                <label class="form-check-label">Active</label>
            </div>

            <div class="mt-4">
                <button class="btn btn-primary">Save Package</button>
                <a href="{{ route('admin.pos.packages.index') }}" class="btn btn-secondary ms-2">Back</a>
            </div>
        </form>
    </div>
</div>

<div class="modal fade" id="packagePriceConfirmModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Replace Package Price?</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>The latest calculated Package Price is different from the current Original Price.</p>
                <p class="mb-1"><strong>Current Original Price</strong><br><span id="currentOriginalPriceText"></span></p>
                <p class="mb-1"><strong>Latest Calculated Original Price</strong><br><span id="calculatedOriginalPriceText"></span></p>
                <p>Replacing the Original Price will update the Package's current Original Price with the newly calculated value.</p>
                <p class="mb-0">You can still manually modify the Original Price before saving the Package.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="confirmReplacePackagePrice">Yes, Replace Price</button>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Keep Current Price</button>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
(function () {
    const checkboxes = Array.from(document.querySelectorAll('.package-sellable'));
    const inputsWrap = document.getElementById('packageItemsInputs');
    const originalPrice = document.getElementById('originalPrice');
    const recalculateButton = document.getElementById('recalculatePackagePrice');
    let pendingCalculatedPrice = null;

    function selectedItems() {
        return checkboxes.filter((checkbox) => checkbox.checked).map((checkbox) => ({
            sellable_type: checkbox.dataset.type,
            sellable_id: checkbox.dataset.id,
            quantity: 1
        }));
    }
	
	function getSelectedItemsTotal() {
    return checkboxes
        .filter((checkbox) => checkbox.checked)
        .reduce((total, checkbox) => {
            const price = parseFloat(
                checkbox.closest('.package-item-option')
                    ?.querySelector('strong')
                    ?.textContent
                    ?.replace(/[^\d.-]/g, '')
            ) || 0;

            return total + price;
        }, 0);
}

    function syncInputs() {
        inputsWrap.innerHTML = '';
        selectedItems().forEach((item, index) => {
            inputsWrap.insertAdjacentHTML('beforeend', `
                <input type="hidden" name="items[${index}][sellable_type]" value="${item.sellable_type}">
                <input type="hidden" name="items[${index}][sellable_id]" value="${item.sellable_id}">
                <input type="hidden" name="items[${index}][quantity]" value="1">
            `);
        });
    }
	
	function getItemsTotal() {
    return checkboxes
        .filter(checkbox => checkbox.checked)
        .reduce((total, checkbox) => {
            return total + (parseFloat(checkbox.dataset.price) || 0);
        }, 0);
}

function validatePackagePrices(showMessage = true) {

    const itemsTotal = getItemsTotal();

    const original = parseFloat(originalPrice.value) || 0;

    const saleInput = document.getElementById('salePrice');
    const sale = saleInput.value !== ''
        ? parseFloat(saleInput.value)
        : null;

    if (itemsTotal <= 0) {

        if (showMessage) {
            alert('Please select at least one sellable item.');
        }

        return false;
    }

    if (original > itemsTotal) {

        if (showMessage) {
            alert(
                `Original Price cannot be greater than the total price of selected items (${itemsTotal.toFixed(2)}).`
            );

            originalPrice.focus();
        }

        return false;
    }

    if (sale !== null && sale > original) {

        if (showMessage) {
            alert(
                'Sale Price cannot be greater than Original Price.'
            );

            saleInput.focus();
        }

        return false;
    }

    return true;
}

    async function calculatePrice() {
        const response = await fetch(`{{ route('admin.pos.packages.calculate') }}`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'X-Requested-With': 'XMLHttpRequest'
            },
            body: JSON.stringify({items: selectedItems()})
        });

        if (!response.ok) {
            throw new Error('Package price could not be calculated.');
        }

        return response.json();
    }

    checkboxes.forEach((checkbox) => checkbox.addEventListener('change', async () => {
        syncInputs();
        if (selectedItems().length === 0) {
            originalPrice.value = '0.00';
            return;
        }
        const data = await calculatePrice();
        originalPrice.value = Number(data.original_price).toFixed(2);
    }));

    recalculateButton.addEventListener('click', async () => {
        if (selectedItems().length === 0) {
            return;
        }
        const data = await calculatePrice();
        const current = Number(originalPrice.value || 0).toFixed(2);
        const calculated = Number(data.original_price || 0).toFixed(2);
        if (current === calculated) {
            return;
        }

        pendingCalculatedPrice = calculated;
        document.getElementById('currentOriginalPriceText').textContent = `{{ currency_symbol() }}` + current;
        document.getElementById('calculatedOriginalPriceText').textContent = data.formatted_original_price;
        new bootstrap.Modal(document.getElementById('packagePriceConfirmModal')).show();
    });

    document.getElementById('confirmReplacePackagePrice').addEventListener('click', () => {
        if (pendingCalculatedPrice !== null) {
            originalPrice.value = pendingCalculatedPrice;
        }
        bootstrap.Modal.getInstance(document.getElementById('packagePriceConfirmModal')).hide();
    });

    syncInputs();
	
	document.getElementById('packageForm').addEventListener('submit', function (e) {

    syncInputs();

    if (!validatePackagePrices(true)) {
        e.preventDefault();
        return false;
    }
});
})();
</script>
@endpush