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

@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 d-flex align-items-center justify-content-between">
        <div class="fw-semibold fixed-nav-title">Create New Event Budget</div>
        <div class="d-flex align-items-center ms-auto">
            <!-- Mandatory Action Set (Right) -->
            <!-- Add -->
            <i class="fa-regular fa-plus fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center mx-1" data-toggle="tooltip" title="Add" style="cursor: default;"></i>

            <!-- Save -->
            <i id="submitForm"
                class="fa-regular fa-save fixed-nav-btn fixed-nav-btn-active p-1 d-inline-flex align-items-center justify-content-center mx-1"
                data-toggle="tooltip" title="Save" style="cursor: pointer;"></i>

            <!-- Edit -->
            <i class="fa-regular fa-edit fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center mx-1" data-toggle="tooltip" title="Edit" style="cursor: default;"></i>

            <!-- Delete -->
            <i class="fa-regular fa-trash-can fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center mx-1" data-toggle="tooltip" title="Delete" style="cursor: default;"></i>

            <!-- Close -->
            <a href="{{ route('posm.event-budgets.index') }}" class="mx-1">
                <i class="fa-solid fa-xmark fixed-nav-btn fixed-nav-btn-active p-1 d-inline-flex align-items-center justify-content-center"
                    data-toggle="tooltip" title="Cancel"></i>
            </a>

            <!-- Column Visibility -->
            <i class="fa-solid fa-columns fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center mx-1" data-toggle="tooltip" title="Columns" style="cursor: default;"></i>
        </div>
    </div>

<form id="createBudgetForm" action="{{ route('posm.event-budgets.store') }}" method="POST">
    @csrf
    <div class="row mt-3 mb-5">
        <div class="col-md-12 mb-4">
            <div class="card">
                <h5 class="card-title">Define Event & Overall Budget</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') }}" placeholder="e.g. Summer Festival 2026" 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') }}"
                                placeholder="e.g. BUD-2026-001" 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') }}" placeholder="0.00" required>
                            @error('total_budget')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="row align-items-end">
                        <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', 'enabled'
                                        )=='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')=='disabled'
                                        ? 'checked' : '' }}>
                                    <label class="form-check-label" for="statusDisable">Disable</label>
                                </div>
                            </div>
                        </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">Itemized Budget 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">
                            <!-- Rows added via JS -->
                        </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 = 0;
        const container = $('#items-container');
        const template = $('#row-template').html();

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

            // Verify subtotal vs total budget
            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;
                }
            }

            $('#createBudgetForm').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);

        // Add first row
        addItem();
    });
</script>
@endpush