@extends('layouts.app')

@section('title', 'Edit Event Budget: ' . $eventBudget->name)

@push('css')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<style>
    .fs-11 {
        font-size: 11px;
    }

    .ls-1 {
        letter-spacing: 0.5px;
    }

    .bg-light-soft {
        background-color: #f8fafc;
    }

    .table>thead>tr>th {
        background-color: #f8fafc;
        border-bottom: 1px solid #edf2f7;
        color: #64748b;
        font-weight: 700;
        text-transform: uppercase;
        font-size: 11px;
        letter-spacing: 0.5px;
        padding: 12px 15px;
    }

    .select2-container--default .select2-selection--single {
        height: 40px !important;
        padding: 5px !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 6px !important;
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 38px !important;
    }
</style>
@endpush

@section('content')
<div class="fixed-action-bar">
    <div class="fw-semibold fixed-nav-title">Edit Event Budget: {{ $eventBudget->name }}</div>
    <div>
        <i id="submitForm"
            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" data-placement="top" title="Update"></i>
        <a href="{{ route('posm.event-budgets.index') }}">
            <i class="fa-solid fa-xmark fixed-nav-btn fixed-nav-btn-active p-1 d-inline-flex align-items-center justify-content-center ms-1"
                data-toggle="tooltip" data-placement="top" title="Cancel"></i>
        </a>
    </div>
</div>

<form id="editBudgetForm" action="{{ route('posm.event-budgets.update', $eventBudget->id) }}" method="POST">
    @csrf
    @method('PUT')
    <div class="row mt-3 mb-5">
        <div class="col-md-12 mb-4">
            <div class="card">
                <h5 class="card-title">Event & Budget Settings</h5>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="name" class="form-label">Event Name <span class="text-danger">*</span></label>
                            <input type="text" class="form-control @error('name') is-invalid @enderror" id="name"
                                name="name" value="{{ old('name', $eventBudget->name) }}" required>
                            @error('name')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-3 mb-3">
                            <label for="budget_code" class="form-label">Budget Code <span
                                    class="text-danger">*</span></label>
                            <input type="text" class="form-control @error('budget_code') is-invalid @enderror"
                                id="budget_code" name="budget_code"
                                value="{{ old('budget_code', $eventBudget->budget_code) }}" required>
                            @error('budget_code')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-3 mb-3">
                            <label for="total_budget" class="form-label">Total Allocated Budget (LKR) <span
                                    class="text-danger">*</span></label>
                            <input type="number" step="0.01"
                                class="form-control @error('total_budget') is-invalid @enderror" id="total_budget"
                                name="total_budget" value="{{ old('total_budget', $eventBudget->total_budget) }}"
                                required>
                            @error('total_budget')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="row align-items-center">
                        <div class="col-md-4 mb-3">
                            <label for="status" class="form-label">Status <span class="text-danger">*</span></label>
                            <div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input @error('status') is-invalid @enderror" type="radio"
                                        id="statusEnable" name="status" value="enabled" {{ old('status',
                                        $eventBudget->is_active ? 'enabled' : 'disabled') == 'enabled' ? 'checked' : ''
                                    }}>
                                    <label class="form-check-label" for="statusEnable">Enable</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input @error('status') is-invalid @enderror" type="radio"
                                        id="statusDisable" name="status" value="disabled" {{ old('status',
                                        $eventBudget->is_active ? 'enabled' : 'disabled') == 'disabled' ? 'checked' : ''
                                    }}>
                                    <label class="form-check-label" for="statusDisable">Disable</label>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-8 text-end">
                            <span class="text-muted small">Current Total Consumption: </span>
                            <span class="fw-bold text-dark">LKR {{ number_format($eventBudget->allocated_amount, 2)
                                }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-12">
            <div class="card p-0 overflow-hidden">
                <div class="p-4 d-flex justify-content-between align-items-center border-bottom">
                    <div class="d-flex align-items-center">
                        <div class="avatar-icon-sm me-3"
                            style="background-color: rgba(59, 130, 246, 0.1); color: #3b82f6;">
                            <i class="fa-solid fa-box-open"></i>
                        </div>
                        <h5 class="card-title p-0 m-0">Update Itemized Allocation</h5>
                    </div>
                    <button type="button" class="btn btn-primary btn-sm rounded-pill px-4 fw-bold" id="add-item-btn">
                        <i class="fa-solid fa-plus-circle me-2"></i> Add Item
                    </button>
                </div>

                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0" id="itemsTable">
                        <thead>
                            <tr>
                                <th class="ps-4">Product / Material</th>
                                <th class="text-center" style="width: 200px;">Quantity</th>
                                <th class="text-center" style="width: 200px;">Unit Cost (LKR)</th>
                                <th class="text-end" style="width: 200px;">Line Total</th>
                                <th class="pe-4 text-end" style="width: 80px;"></th>
                            </tr>
                        </thead>
                        <tbody id="items-container">
                            @foreach($eventBudget->items as $item)
                            <tr class="item-row border-bottom border-light">
                                <td class="ps-4">
                                    <select name="items[{{ $loop->index }}][product_id]"
                                        class="form-control product-select" required>
                                        <option value="">Select Product</option>
                                        @foreach($products as $product)
                                        <option value="{{ $product->id }}" data-price="{{ $product->unit_price ?? 0 }}"
                                            {{ $product->id == $item->product_id ? 'selected' : '' }}>
                                            {{ $product->name }} ({{ $product->code }})
                                        </option>
                                        @endforeach
                                    </select>
                                </td>
                                <td>
                                    <input type="number" name="items[{{ $loop->index }}][quantity]"
                                        class="form-control text-center quantity-input" min="0.01" step="0.01" required
                                        value="{{ $item->quantity }}">
                                </td>
                                <td>
                                    <input type="number" name="items[{{ $loop->index }}][unit_cost]"
                                        class="form-control text-center cost-input" min="0" step="0.01" required
                                        value="{{ $item->unit_cost }}">
                                </td>
                                <td class="line-total fw-bold text-dark text-end">LKR {{
                                    number_format($item->total_cost, 2) }}</td>
                                <td class="pe-4 text-end">
                                    <button type="button" class="btn btn-link text-danger remove-item-btn p-0 border-0">
                                        <i class="fa-regular fa-trash-can"></i>
                                    </button>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                        <tfoot class="bg-light-soft border-top font-monospace">
                            <tr>
                                <td colspan="3" class="text-end py-3 fw-bold text-muted text-uppercase fs-11 ls-1">
                                    Subtotal</td>
                                <td class="text-end py-3 fw-bold text-dark" id="subtotal-display">LKR 0.00</td>
                                <td></td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>
    </div>
</form>

<template id="row-template">
    <tr class="item-row border-bottom border-light">
        <td class="ps-4">
            <select name="items[INDEX][product_id]" class="form-control product-select" required>
                <option value="">Select Product</option>
                @foreach($products as $product)
                <option value="{{ $product->id }}" data-price="{{ $product->unit_price ?? 0 }}">
                    {{ $product->name }} ({{ $product->code }})
                </option>
                @endforeach
            </select>
        </td>
        <td>
            <input type="number" name="items[INDEX][quantity]" class="form-control text-center quantity-input"
                min="0.01" step="0.01" required placeholder="0.00">
        </td>
        <td>
            <input type="number" name="items[INDEX][unit_cost]" class="form-control text-center cost-input" min="0"
                step="0.01" required placeholder="0.00">
        </td>
        <td class="line-total fw-bold text-dark text-end">LKR 0.00</td>
        <td class="pe-4 text-end">
            <button type="button" class="btn btn-link text-danger remove-item-btn p-0 border-0">
                <i class="fa-regular fa-trash-can"></i>
            </button>
        </td>
    </tr>
</template>
@endsection

@push('js')
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
    $(document).ready(function () {
        let index = {{ count($eventBudget -> items)
    }};
    const container = $('#items-container');
    const template = $('#row-template').html();

    $('.product-select').select2({
        width: '100%',
        placeholder: 'Select Product'
    });

    calculateTotals();

    $('#submitForm').click(function () {
        const rowCount = container.children().length;
        if (rowCount === 0) {
            alert('Please add at least one item to the budget allocation.');
            return;
        }

        const subtotal = calculateTotals();
        const totalBudget = parseFloat($('#total_budget').val()) || 0;

        if (subtotal > totalBudget) {
            if (!confirm(`Warning: Itemized subtotal (LKR ${subtotal.toLocaleString()}) exceeds total budget (LKR ${totalBudget.toLocaleString()}). Proceed anyway?`)) {
                return;
            }
        }

        $('#editBudgetForm').submit();
    });

    function addItem() {
        const newRowVal = template.replace(/INDEX/g, index++);
        const $newRow = $(newRowVal);
        container.append($newRow);

        $newRow.find('.product-select').select2({
            width: '100%',
            placeholder: 'Select Product'
        });

        calculateTotals();
    }

    function calculateTotals() {
        let total = 0;
        $('.item-row').each(function () {
            const row = $(this);
            const qty = parseFloat(row.find('.quantity-input').val()) || 0;
            const cost = parseFloat(row.find('.cost-input').val()) || 0;
            const lineTotal = qty * cost;

            row.find('.line-total').text('LKR ' + lineTotal.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 }));
            total += lineTotal;
        });
        $('#subtotal-display').text('LKR ' + total.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 }));
        return total;
    }

    $('#add-item-btn').on('click', addItem);

    container.on('click', '.remove-item-btn', function () {
        $(this).closest('tr').remove();
        calculateTotals();
    });

    container.on('change', '.product-select', function () {
        const selected = $(this).find('option:selected');
        const price = selected.data('price') || 0;
        $(this).closest('tr').find('.cost-input').val(price);
        calculateTotals();
    });

    container.on('input', '.quantity-input, .cost-input', calculateTotals);
        });
</script>
@endpush