@extends('layouts.app')
@section('title', 'Create ' . $title)

@section('content')
    <div class="fixed-action-bar d-flex align-items-center justify-content-between">
        <div class="fw-semibold fixed-nav-title">Create {{ $title }}</div>
        <div class="d-flex align-items-center">
            <i class="fa-regular fa-plus fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center"
               data-toggle="tooltip" title="Add"></i>
            @can($type === 'beers' ? 'CSM Beer Sales create' : 'CSM Alcohol Sales create')
                <button type="submit" form="eventSalesCreateForm" class="border-0 bg-transparent p-0">
                    <i class="fa-regular fa-save fixed-nav-btn fixed-nav-btn-active rounded-5 p-1 d-inline-flex align-items-center justify-content-center mx-1"
                       data-toggle="tooltip" title="Save"></i>
                </button>
            @endcan
            
            <i class="fa-regular fa-edit fixed-nav-btn rounded-5 p-1 d-inline-flex align-items-center justify-content-center mx-1"
                data-toggle="tooltip" title="Edit"></i>
            <i 
                class="fa-regular fa-trash-can fixed-nav-btn fixed-nav-btn rounded-5 p-1 d-inline-flex align-items-center justify-content-center mx-1"
                data-toggle="tooltip" title="Delete"></i>
            
            <a href="{{ route('csm.event-sales.index', ['type' => $type]) }}" data-toggle="tooltip" title="Close">
                <i class="fa-solid fa-xmark fixed-nav-btn fixed-nav-btn-active rounded-5 p-1 d-inline-flex align-items-center justify-content-center ms-1"></i>
            </a>
        </div>
    </div>

    <div class="card mt-3 rounded-border">
        <div class="card-body">
            @if ($errors->any())
                <div class="alert alert-danger">
                    <ul class="mb-0">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <form action="{{ route('csm.event-sales.store', ['type' => $type]) }}" method="POST" id="eventSalesCreateForm">
                @csrf

                <div class="row">
                    <div class="col-md-4 mb-3">
                        <label for="event_id" class="form-label">Event *</label>
                        <select name="event_id" id="event_id" class="form-control select2" required>
                            <option value="">Select Event</option>
                            @foreach ($events as $event)
                                <option value="{{ $event->id }}" {{ old('event_id', $sale->event_id) == $event->id ? 'selected' : '' }}>
                                    {{ $event->event_name }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-md-4 mb-3">
                        <label for="entry_date" class="form-label">Date *</label>
                        <input type="date" name="entry_date" id="entry_date" class="form-control"
                               value="{{ old('entry_date', \Carbon\Carbon::now()->format('Y-m-d')) }}" required>
                    </div>
                </div>

                <div class="mt-4">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <div class="fw-semibold">Product Selection</div>
                    </div>

                    <div class="table-responsive" style="margin-bottom: 45px">
                        <table class="table table-bordered align-middle mb-0">
                            <thead class="bg-light">
                                <tr>
                                    <th>Brand</th>
                                    <th>SKU</th>
                                    <th>Cost</th>
                                    <th>Sell Price</th>
                                    <th>Qty</th>
                                    <th style="width: 200px; border: none; background-color: #fff;"></th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>
                                        <input type="text" id="newItemBrand" class="form-control" placeholder="Brand">
                                    </td>
                                    <td>
                                        <input type="text" id="newItemSku" class="form-control" placeholder="SKU">
                                    </td>
                                    <td>
                                        <input type="number" step="0.01" min="0" id="newItemCost" class="form-control" placeholder="Cost">
                                    </td>
                                    <td>
                                        <input type="number" step="0.01" min="0" id="newItemSellPrice" class="form-control" placeholder="Sell Price">
                                    </td>
                                    <td>
                                        <input type="number" step="1" min="1" id="newItemQty" class="form-control" placeholder="Qty">
                                    </td>
                                    <td class="text-start border-0">
                                        <button type="button" class="btn btn-sm btn-primary me-1 border-0" id="addItemBtn">ADD +</button>
                                        <button type="button" class="btn btn-sm btn-outline-secondary" data-toggle="modal" data-target="#importItemsModal">IMPORT</button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                <hr>
                    <div class="table-responsive">
                        <table class="table table-bordered align-middle" id="itemsTable">
                            <thead class="bg-light">
                                <tr>
                                    <th>Brand</th>
                                    <th>SKU</th>
                                    <th>Cost</th>
                                    <th>Sell Price</th>
                                    <th>Qty</th>
                                    {{-- <th>Subtotal (Cost x Qty)</th> --}}
                                    <th>Total (Sell Price x Qty)</th>
                                    <th style="width: 100px;">Action</th>
                                </tr>
                            </thead>
                            <tbody id="itemsTableBody">
                                @php
                                    $items = session('imported_items', old('items', []));
                                @endphp
                                @foreach ($items as $index => $item)
                                    <tr data-index="{{ $index }}">
                                        <td>
                                            <span class="display-brand">{{ $item['brand'] ?? '' }}</span>
                                            <input type="hidden" name="items[{{ $index }}][brand]" class="item-brand" value="{{ $item['brand'] ?? '' }}">
                                        </td>
                                        <td>
                                            <span class="display-sku">{{ $item['sku'] ?? '' }}</span>
                                            <input type="hidden" name="items[{{ $index }}][sku]" class="item-sku" value="{{ $item['sku'] ?? '' }}">
                                        </td>
                                        <td class="text-end">
                                            <span class="display-cost">{{ isset($item['cost']) ? number_format($item['cost'], 2) : '0.00' }}</span>
                                            <input type="hidden" name="items[{{ $index }}][cost]" class="item-cost" value="{{ $item['cost'] ?? 0 }}">
                                        </td>
                                        <td class="text-end">
                                            <span class="display-sell-price">{{ isset($item['sell_price']) ? number_format($item['sell_price'], 2) : '0.00' }}</span>
                                            <input type="hidden" name="items[{{ $index }}][sell_price]" class="item-sell-price" value="{{ $item['sell_price'] ?? 0 }}">
                                        </td>
                                        <td class="text-end">
                                            <span class="display-qty">{{ $item['qty'] ?? 0 }}</span>
                                            <input type="hidden" name="items[{{ $index }}][qty]" class="item-qty" value="{{ $item['qty'] ?? 0 }}">
                                        </td>
                                        {{-- <td class="text-end">
                                            <span class="item-subtotal-display">0.00</span>
                                        </td> --}}
                                        <td class="text-end">
                                            <span class="item-total-display">{{ number_format(($item['sell_price'] ?? 0) * ($item['qty'] ?? 0), 2) }}</span>
                                        </td>
                                        <td class="text-center">
                                        <div class="d-inline-flex table-action-btns">
                                            <span class="action-btn">
                                                <i class="fa-solid fa-pencil rounded-5 p-1 d-inline-flex align-items-center justify-content-center action-btn theme-blue edit-row-btn" data-toggle="tooltip" title="Edit"></i>
                                            </span>
                                            <span class="action-btn">
                                                <i class="fa-solid fa-trash-can rounded-5 p-1 d-inline-flex align-items-center justify-content-center action-btn theme-red delete-row-btn" data-toggle="tooltip" title="Delete"></i>
                                            </span>
                                        </div>
                                    </td>
                                    </tr>
                                @endforeach
                            </tbody>
                            <tfoot>
                                {{-- <tr>
                                    <th colspan="2" class="text-end">Total</th>
                                    <th class="text-end" id="summaryTotalCost">0.00</th>
                                    <th></th>
                                    <th class="text-end" id="summaryTotalQty">0</th>
                                    <th class="text-end" id="summarySubtotal">0.00</th>
                                    <th class="text-end" id="summaryNetTotal">0.00</th>
                                    <th></th>
                                </tr> --}}
                                <tr>
                                    <th colspan="5" class="text-end">Total</th>
                                    <th class="text-end" id="summaryNetTotal">0.00</th>
                                    {{-- <th></th> --}}
                                </tr>
                            </tfoot>
                        </table>
                    </div>

                   
                </div>

            </form>
        </div>
    </div>

    <!-- Import Items Modal -->
    <div class="modal fade" id="importItemsModal" tabindex="-1" aria-labelledby="importItemsModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="importItemsModalLabel">Import Product Selection</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form action="{{ route('csm.event-sales.import', ['type' => $type]) }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="modal-body">
                        <div class="form-group mb-3">
                            <label for="import_file" class="form-label">Choose File</label>
                            <input type="file" name="import_file" id="import_file" class="form-control" accept=".xlsx,.xls,.csv" required>
                        </div>

                        <input type="hidden" name="event_id" value="{{ old('event_id', $sale->event_id) }}">
                        <input type="hidden" name="entry_date" value="{{ old('entry_date') }}">
                        <input type="hidden" name="existing_items" value="">

                        <div class="d-flex flex-column align-items-start mb-3">
                            <button type="submit" class="btn btn-primary mb-2" style="background-color: var(--Brand-1); border-color: var(--Brand-1);">Import</button>
                            <a href="{{ asset('files/event_sales_import_template.xlsx') }}" class="btn btn-primary" style="background-color: var(--Brand-1); border-color: var(--Brand-1);">
                                Download Sample File
                            </a>
                        </div>

                        <div class="alert alert-info mt-2 mb-0">
                            <h5 class="mb-0">Instructions for Event Sales Import</h5>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('css')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <style>
        .select2-container--default .select2-selection--single {
            height: 38px;
            padding: 5px 10px;
            border: 1px solid #ced4da;
            border-radius: 0.25rem;
        }
        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 36px;
        }
    </style>
@endpush

@push('js')
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const itemsTableBody = document.getElementById('itemsTableBody');
            const addItemBtn = document.getElementById('addItemBtn');
            const brandInput = document.getElementById('newItemBrand');
            const skuInput = document.getElementById('newItemSku');
            const costInput = document.getElementById('newItemCost');
            const sellInput = document.getElementById('newItemSellPrice');
            const qtyInput = document.getElementById('newItemQty');

            let nextIndex = itemsTableBody ? itemsTableBody.querySelectorAll('tr').length : 0;
            let editingRow = null;

            function formatNumber(num) {
                return num.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
            }

            function recalcRow(row) {
                const cost = parseFloat(row.querySelector('.item-cost').value) || 0;
                const price = parseFloat(row.querySelector('.item-sell-price').value) || 0;
                const qty = parseInt(row.querySelector('.item-qty').value) || 0;

                const subtotal = cost * qty;
                const total = price * qty;

                // const subtotalEl = row.querySelector('.item-subtotal-display');
                // if (subtotalEl) {
                //     subtotalEl.textContent = formatNumber(subtotal);
                // }

                const totalEl = row.querySelector('.item-total-display');
                if (totalEl) {
                    totalEl.textContent = formatNumber(total);
                }
            }

            function recalcTotals() {
                let totalCost = 0;
                let totalQty = 0;
                let subtotalAll = 0;
                let netTotal = 0;

                if (!itemsTableBody) {
                    return;
                }

                itemsTableBody.querySelectorAll('tr').forEach(function (row) {
                    const cost = parseFloat(row.querySelector('.item-cost').value) || 0;
                    const price = parseFloat(row.querySelector('.item-sell-price').value) || 0;
                    const qty = parseInt(row.querySelector('.item-qty').value) || 0;

                    totalCost += cost * qty;
                    subtotalAll += cost * qty;
                    netTotal += price * qty;
                    totalQty += qty;
                });

                // document.getElementById('summaryTotalCost').textContent = formatNumber(totalCost);
                // document.getElementById('summaryTotalQty').textContent = totalQty.toString();
                // document.getElementById('summarySubtotal').textContent = formatNumber(subtotalAll);
                document.getElementById('summaryNetTotal').textContent = formatNumber(netTotal);
                // document.getElementById('summaryRoi').textContent = (netTotal - totalCost).toFixed(2);
            }

            function clearEntryInputs() {
                if (brandInput) brandInput.value = '';
                if (skuInput) skuInput.value = '';
                if (costInput) costInput.value = '';
                if (sellInput) sellInput.value = '';
                if (qtyInput) qtyInput.value = '';
            }

            function setEditingMode(row) {
                editingRow = row;
                if (brandInput) brandInput.value = row.querySelector('.item-brand').value || '';
                if (skuInput) skuInput.value = row.querySelector('.item-sku').value || '';
                if (costInput) costInput.value = row.querySelector('.item-cost').value || '';
                if (sellInput) sellInput.value = row.querySelector('.item-sell-price').value || '';
                if (qtyInput) qtyInput.value = row.querySelector('.item-qty').value || '';

                if (addItemBtn) {
                    addItemBtn.textContent = 'Update';
                }
            }

            function resetEditingMode() {
                editingRow = null;
                if (addItemBtn) {
                    addItemBtn.textContent = 'ADD +';
                }
            }

            function createRow(index, item) {
                const tr = document.createElement('tr');
                tr.setAttribute('data-index', index.toString());
                tr.innerHTML = `
                    <td>
                        <span class="display-brand">${item.brand}</span>
                        <input type="hidden" name="items[${index}][brand]" class="item-brand" value="${item.brand}">
                    </td>
                    <td>
                        <span class="display-sku">${item.sku}</span>
                        <input type="hidden" name="items[${index}][sku]" class="item-sku" value="${item.sku}">
                    </td>
                    <td class="text-end">
                        <span class="display-cost">${formatNumber(item.cost)}</span>
                        <input type="hidden" name="items[${index}][cost]" class="item-cost" value="${item.cost}">
                    </td>
                    <td class="text-end">
                        <span class="display-sell-price">${formatNumber(item.sell_price)}</span>
                        <input type="hidden" name="items[${index}][sell_price]" class="item-sell-price" value="${item.sell_price}">
                    </td>
                    <td class="text-end">
                        <span class="display-qty">${item.qty}</span>
                        <input type="hidden" name="items[${index}][qty]" class="item-qty" value="${item.qty}">
                    </td>
                    
                    <td class="text-end">
                        <span class="item-total-display">0.00</span>
                    </td>
                    <td class="text-center">
                        <div class="d-inline-flex table-action-btns">
                            <span class="action-btn">
                                <i class="fa-solid fa-pencil rounded-5 p-1 d-inline-flex align-items-center justify-content-center action-btn theme-blue edit-row-btn" data-toggle="tooltip" title="Edit"></i>
                            </span>
                            <span class="action-btn">
                                <i class="fa-solid fa-trash-can rounded-5 p-1 d-inline-flex align-items-center justify-content-center action-btn theme-red delete-row-btn" data-toggle="tooltip" title="Delete"></i>
                            </span>
                        </div>
                    </td>
                `;

                return tr;
            }

            function attachRowEvents(row) {
                const editBtn = row.querySelector('.edit-row-btn');
                const deleteBtn = row.querySelector('.delete-row-btn');

                if (editBtn) {
                    editBtn.addEventListener('click', function () {
                        setEditingMode(row);
                    });
                }

                if (deleteBtn) {
                    deleteBtn.addEventListener('click', function () {
                        row.remove();
                        if (editingRow === row) {
                            clearEntryInputs();
                            resetEditingMode();
                        }
                        recalcTotals();
                    });
                }

                recalcRow(row);
            }

            function addOrUpdateItem() {
                if (!itemsTableBody || !addItemBtn) {
                    return;
                }

                const brand = (brandInput ? brandInput.value.trim() : '');
                const sku = (skuInput ? skuInput.value.trim() : '');
                const cost = parseFloat(costInput ? costInput.value : '') || 0;
                const sellPrice = parseFloat(sellInput ? sellInput.value : '') || 0;
                const qty = parseInt(qtyInput ? qtyInput.value : '') || 0;

                if (!brand) {
                    if (brandInput) brandInput.focus();
                    return;
                }

                if (!qty) {
                    if (qtyInput) qtyInput.focus();
                    return;
                }

                const item = {
                    brand: brand,
                    sku: sku,
                    cost: cost,
                    sell_price: sellPrice,
                    qty: qty,
                };

                if (editingRow) {
                    const idx = editingRow.getAttribute('data-index');
                    editingRow.querySelector('.display-brand').textContent = item.brand;
                    editingRow.querySelector('.display-sku').textContent = item.sku;
                    editingRow.querySelector('.display-cost').textContent = formatNumber(item.cost);
                    editingRow.querySelector('.display-sell-price').textContent = formatNumber(item.sell_price);
                    editingRow.querySelector('.display-qty').textContent = item.qty.toString();

                    editingRow.querySelector('.item-brand').value = item.brand;
                    editingRow.querySelector('.item-sku').value = item.sku;
                    editingRow.querySelector('.item-cost').value = item.cost;
                    editingRow.querySelector('.item-sell-price').value = item.sell_price;
                    editingRow.querySelector('.item-qty').value = item.qty;

                    recalcRow(editingRow);
                } else {
                    const index = nextIndex++;
                    const row = createRow(index, item);
                    itemsTableBody.appendChild(row);
                    attachRowEvents(row);
                }

                clearEntryInputs();
                resetEditingMode();
                recalcTotals();
            }

            if (addItemBtn) {
                addItemBtn.addEventListener('click', function () {
                    addOrUpdateItem();
                });
            }

            if (itemsTableBody) {
                itemsTableBody.querySelectorAll('tr').forEach(function (row) {
                    attachRowEvents(row);
                });
            }

            recalcTotals();
        });

        // Update hidden inputs in import form with current main form values
        document.querySelector('#importItemsModal form').addEventListener('submit', function(e) {
            const eventId = document.getElementById('event_id').value;
            const entryDate = document.getElementById('entry_date').value;
            this.querySelector('input[name="event_id"]').value = eventId;
            this.querySelector('input[name="entry_date"]').value = entryDate;

            const itemsTableBodyEl = document.getElementById('itemsTableBody');
            const items = [];
            if (itemsTableBodyEl) {
                const rows = itemsTableBodyEl.querySelectorAll('tr');
                rows.forEach(function (row) {
                    const brandInputEl = row.querySelector('.item-brand');
                    const skuInputEl = row.querySelector('.item-sku');
                    const costInputEl = row.querySelector('.item-cost');
                    const sellInputEl = row.querySelector('.item-sell-price');
                    const qtyInputEl = row.querySelector('.item-qty');

                    const brand = brandInputEl ? brandInputEl.value : '';
                    const sku = skuInputEl ? skuInputEl.value : '';
                    const cost = costInputEl ? (parseFloat(costInputEl.value) || 0) : 0;
                    const sellPrice = sellInputEl ? (parseFloat(sellInputEl.value) || 0) : 0;
                    const qty = qtyInputEl ? (parseInt(qtyInputEl.value) || 0) : 0;

                    if (!brand || !qty) {
                        return;
                    }

                    items.push({
                        brand: brand,
                        sku: sku,
                        cost: cost,
                        sell_price: sellPrice,
                        qty: qty
                    });
                });
            }

            const existingItemsInput = this.querySelector('input[name="existing_items"]');
            if (existingItemsInput) {
                existingItemsInput.value = JSON.stringify(items);
            }

        });

        // Initialize Select2 for event dropdown
        $(document).ready(function() {
            $('#event_id').select2({
                placeholder: 'Search for an event...',
                allowClear: true,
                width: '100%',
                templateResult: formatEvent,
                templateSelection: formatEventSelection
            });

            function formatEvent(event) {
                if (!event.id) { return event.text; }
                return $('<span>').text(event.text).addClass('text-dark');
            }

            function formatEventSelection(event) {
                if (!event.id) { return event.text; }
                return $('<span>').text(event.text).addClass('text-dark');
            }
        });
    </script>
@endpush