@extends('layouts.master')
@section('title', 'Cost Center Create')
@section('page-header')
    <i class="fa fa-plus-circle"></i> Cost Center Create
@stop
@push('style')
    <link rel="stylesheet" href="{{ asset('assets/css/chosen.min.css') }}"/>
    <link rel="stylesheet" href="{{ asset('assets/css/bootstrap-datepicker3.min.css') }}"/>
    <link rel="stylesheet" href="{{ asset('assets/custom_css/chosen-required.css') }}"/>
    <style>
        td {
            padding-bottom: 3px !important;
            padding-top: 3px !important;
        }

        table {
            counter-reset: section;
        }

        .count:before {
            counter-increment: section;
            content: counter(section);
        }

        select:invalid {
            height: 0px !important;
            opacity: 0 !important;
            position: absolute !important;
            display: flex !important;
        }

        select:invalid[multiple] {
            margin-top: 15px !important;
        }

    </style>
@endpush

@section('content')
    <div class="row">
        <div class="col-sm-12">
            @include('partials._alert_message')
            <div class="widget-box widget-color-white ui-sortable-handle clearfix" id="widget-box-7">
                <!-- heading -->
                <div class="widget-header widget-header-small">
                    <h3 class="widget-title smaller text-primary">
                        @yield('page-header')
                    </h3>

                    <div class="widget-toolbar">
                        <a href="{{ route('voucher-payments.index') }}"><i class="fa fa-list-alt"></i> List</a>
                    </div>

                </div>
                <!-- Form  -->
                <form id="voucherForm" action="{{ route('voucher-cost-centers.store') }}" method="post" enctype="multipart/form-data">
                    @csrf
                    <input type="hidden" name="voucher_type" value="Payment">
                    <input type="hidden" name="cost_profit_voucher_type" value="cost_center">
                    <div class="row mt-1">
                        <div class="col-sm-12 px-3">
                            <!-- Heading Row -->
                            <div class="row">
                                <!-- Company -->

                                <div class="col-sm-3 my-1">
                                    <div class="input-group">
                                        <span class="input-group-addon">Company <strong class="text-danger">*</strong></span>
                                        <select required name="company_id" id="account_id" class="chosen-select-100-percent" data-placeholder="- Select Company -">
                                            <option></option>
                                            @foreach($data['company'] as $key => $companies)
                                                <option value="{{$key}}">{{$companies}}</option>
                                            @endforeach
                                        </select>
                                        @error('date')
                                        <span class="text-danger"> {{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-sm-4 my-1">
                                    <div class="input-group"> <span class="input-group-addon">Transaction Type <strong class="text-danger">*</strong></span>
                                        <select required name="v_payment_type" id="v_payment_typeaccount_id" class="chosen-select-100-percent" data-placeholder="- Select Payment Type -">
                                            <option></option>
                                            <option value="Cash">Cash</option>
                                            <option value="Bank">Bank</option>
                                        </select>

                                        @error('date')
                                        <span class="text-danger"> {{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                <!-- Reference -->
                                <div class="col-sm-3 my-1">
                                    <div class="input-group">
                                    <span class="input-group-addon">
                                        Reference
                                    </span>
                                        <input name="reference" value="{{ old('reference') }}" class="form-control" type="text">
                                    </div>
                                </div>
                                <!-- Date -->
                                <div class="col-sm-2 my-1">
                                    <div class="input-group">
                                    <span class="input-group-addon">
                                        Date
                                    </span>
                                        <input name="date" class="form-control date-picker text-center" type="text" value="{{ old('date', date('Y-m-d')) }}" data-date-format="yyyy-mm-dd">
                                        @error('date')
                                        <span class="text-danger"> {{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                            <!-- Item Detail -->
                            <div class="row mt-2">
                                <div class="col-sm-5">
                                    <!-- Expense Account -->
                                    <div class="form-group">
                                        <label style="margin-bottom: 10px;">Expense Account</label>
                                        <select id="expense_account" class="chosen-select-100-percent" name="expense_account_id" onchange="checkCostCenterRequired()" style="color: black">
{{--                                            <option value="218" data-requires-cc="true">Electricity Charges (Cost Center Required)</option>--}}
{{--                                            <option value="220" data-requires-cc="true">Rent (Cost Center Required)</option>--}}
{{--                                            <option value="225" data-requires-cc="false">Office Supplies</option>--}}
{{--                                            <option value="230" data-requires-cc="true">Software Subscription (Cost Center Required)</option>--}}

                                            @foreach($data['acc_group_expense'] as $key => $expense_chart_of_acc)
                                                <option value="{{$expense_chart_of_acc->id}}" data-requires-cc="true">{{$expense_chart_of_acc->name}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="form-group">
                                        <label>Total Amount (৳)</label>
                                        <input type="number" name="credit[]" id="total_amount" step="0.01" oninput="recalculateAmounts()" style="color: black" required>
                                    </div>

                                    <div class="form-group">
                                        <label>Payment From</label>
                                        <select id="payment_account" name="payment_account_id" style="color: black" required>
                                            <option value="#">Select One</option>
                                            @foreach($data['acc_control_cash_bank'] as $payment_chart_of_acc)
                                                <option value="{{$payment_chart_of_acc->id}}">{{$payment_chart_of_acc->name}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-sm-7">
                                    <!-- COST CENTER ALLOCATION SECTION -->
                                    <div id="cost-center-section" class="cost-center-section" style="display: none;">
                                        <p style="color: black;">Distribute the expense across multiple cost centers by entering percentages. Total must equal 100%.</p>
                                        <div id="allocations-container">
                                            <!-- Allocation rows will be added here -->
                                        </div>
                                        <br>
                                        <button type="button" class="btn btn-sm btn-info btn-add" onclick="addAllocationRow()">
                                            <i class="fa fa fa-save"></i>
                                            + Add Cost Center
                                        </button>

                                        <!-- Summary -->
                                        <div class="summary-box">
                                            <div class="summary-item total">
                                                <span>Total Percentage:</span>
                                                <span id="total-percentage">0%</span>
                                            </div>
                                            <div class="summary-item total">
                                                <span>Total Amount:</span>
                                                <span id="total-allocated">৳0.00</span>
                                            </div>
                                        </div>

                                        <!-- Warning -->
                                        <div id="warning-box" class="warning-box">
                                            ⚠️ <strong>Warning:</strong> Total percentage must equal 100%. Current total: <span id="warning-percentage">0</span>%
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-12 px-4 mt-2 mb-2">
                        <div class="row">
                            <div class="input-group " style="width: 100%!important; float: left; ">
                                <label class="input-group-addon">Narration/Description</label>
                                <input type="text" required class="form-control" name="description" value="{{ old('description') }}"  placeholder="Narration / Description">
                                @error('description')
                                <span class="text-danger"> {{ $message }}</span>
                                @enderror
                            </div>

                            <!-- Action -->
                            <div class="pull-right mt-5">
                                <div class="btn-group">
                                    <button type="submit" id="saveBtn" class="btn btn-sm btn-success save-btn">
                                        <i class="fa fa fa-save"></i>
                                        Save
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>

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

    <script>
        let allocationCounter = 0;
        // let costCenters = [
        //     { id: 1, name: 'Main Office', code: 'CC001' },
        //     { id: 2, name: 'Factory - Production', code: 'CC002' },
        //     { id: 3, name: 'Sister Company - ABC Ltd', code: 'CC003' },
        //     { id: 4, name: 'Website Redesign Project', code: 'CC004' },
        //     { id: 5, name: 'Warehouse - Logistics', code: 'CC005' }
        // ];

        let costCenters = @json($data['profit_cost_accounts']);


        // Check if selected account requires cost center
        function checkCostCenterRequired() {
            const expenseAccount = document.getElementById('expense_account');
            const selectedOption = expenseAccount.options[expenseAccount.selectedIndex];
            const requiresCC = selectedOption.getAttribute('data-requires-cc') === 'true';

            const ccSection = document.getElementById('cost-center-section');

            if (requiresCC) {
                ccSection.style.display = 'block';
                // Auto-add first row if none exist
                if (document.querySelectorAll('.allocation-row').length === 0) {
                    addAllocationRow();
                    // Set some default percentages
                    document.querySelectorAll('.percentage-input')[0].value = 40;

                    recalculateAmounts();
                }
            } else {
                ccSection.style.display = 'none';
            }

            // updatePreview();
        }

        // Add new allocation row
        function addAllocationRow() {
            allocationCounter++;

            const container = document.getElementById('allocations-container');
            const row = document.createElement('div');
            row.className = 'allocation-row';
            row.id = 'row-' + allocationCounter;

            let costCenterOptions = '<option value="">-- Select Cost Center --</option>';
            costCenters.forEach(cc => {
                costCenterOptions += `<option value="${cc.id}">${cc.name} (${cc.code})</option>`;
            });

            row.innerHTML = `
<!--        <select class="cc-select" name="profit_cost_account_id[]" onchange="updatePreview()" style="color: black">-->
        <select class="chosen-select-100-percent" name="profit_cost_account_id[]" onchange="updatePreview()" style="color: black">
            ${costCenterOptions}
        </select>
        <input type="number" name="profit_cost_percentage[]" class="percentage-input" style="color: black" placeholder="%" min="0" max="100" step="0.01" oninput="recalculateAmounts()" value="0">
        <input type="number"  name="debit[]" class="amount-display" style="color: black" readonly value="৳0.00">৳
        <button type="button" class="btn btn-sm btn-danger btn-remove" onclick="removeAllocationRow(${allocationCounter})">X</button>
    `;

            container.appendChild(row);
            // Re-initialize chosen for newly added selects
            $(row).find('.chosen-select-100-percent').chosen({
                width: '30%'
            });
        }

        // Remove allocation row
        function removeAllocationRow(id) {
            const row = document.getElementById('row-' + id);
            row.remove();
            recalculateAmounts();
        }

        // Recalculate amounts based on percentages

        function recalculateAmounts() {
            const totalAmount = parseFloat(document.getElementById('total_amount').value) || 0;

            let totalPercentage = 0;
            let totalAllocated  = 0;

            document.querySelectorAll('.allocation-row').forEach(row => {
                const percentageInput = row.querySelector('.percentage-input');
                const amountDisplay   = row.querySelector('.amount-display');

                if (!percentageInput || !amountDisplay) return;

                const val = percentageInput.value;

                // Ignore unstable states
                if (val === '' || val === '.' || val === '-') {
                    amountDisplay.value = '৳0.00';
                    return;
                }

                const percentage = Number(val);
                if (!Number.isFinite(percentage)) return;

                const amount = (totalAmount * percentage) / 100;

                // amountDisplay.value = '৳' + amount.toFixed(2);
                amountDisplay.value = amount.toFixed(2);

                totalPercentage += percentage;
                totalAllocated  += amount;
            });

            document.getElementById('total-percentage').textContent =
                totalPercentage.toFixed(2) + '%';

            document.getElementById('total-allocated').textContent =
                '৳' + totalAllocated.toFixed(2);

            document.getElementById('warning-percentage').textContent =
                totalPercentage.toFixed(2);

            // ✅ Enable / Disable Save button
            const saveBtn = document.getElementById('saveBtn');

            const isValid = Math.abs(totalPercentage - 100) < 0.01;

            saveBtn.disabled = !isValid;
            // const warningBox = document.getElementById('warning-box');
            //
            // if (Math.abs(totalPercentage - 100) > 0.01 && document.querySelectorAll('.allocation-row').length > 0) {
            //     warningBox.classList.add('show');
            //     document.getElementById('warning-percentage').textContent =
            //         totalPercentage.toFixed(2);
            // } else {
            //     warningBox.classList.remove('show');
            // }
        }




        // Update transaction preview
        function updatePreview() {
            // const invoiceNo = document.getElementById('invoice_no').value;
            // const expenseAccount = document.getElementById('expense_account');
            // const expenseAccountName = expenseAccount.options[expenseAccount.selectedIndex].text.split('(')[0].trim();
            // const totalAmount = parseFloat(document.getElementById('total_amount').value) || 0;
            // const paymentAccount = document.getElementById('payment_account');
            // const paymentAccountName = paymentAccount.options[paymentAccount.selectedIndex].text;

            // let preview = `<strong>Invoice: ${invoiceNo} | Date: ${document.getElementById('date').value}</strong><br><br>`;
            // preview += `<strong>Transactions to be created:</strong><br><br>`;

            // const ccSelects = document.querySelectorAll('.cc-select');
            // const percentageInputs = document.querySelectorAll('.percentage-input');
            // const amountDisplays = document.querySelectorAll('.amount-display');

            // let transactionId = 1152;

            // Debit entries (split by cost centers)
            // ccSelects.forEach((select, index) => {
            //     const ccName = select.options[select.selectedIndex].text;
            //     const percentage = percentageInputs[index].value;
            //     const amount = amountDisplays[index].value;
            //
            //     if (select.value && percentage > 0) {
            //         preview += `<span class="debit">Row ${transactionId}: DEBIT → ${expenseAccountName} → ${ccName} → ${amount} [${percentage}%]</span><br>`;
            //         transactionId++;
            //     }
            // });

            // Credit entry (payment account - no cost center)
            //preview += `<!--<br><span class="credit">Row ${transactionId}: CREDIT → ${paymentAccountName} → ৳${totalAmount.toFixed(2)}</span><br>-->`;

            //preview += `<!--<br><em style="color: #666;">All rows will have same invoice_no and batch_id</em>-->`;

            // document.getElementById('transaction-preview').innerHTML = preview;
        }

        // Form submission
        // document.getElementById('voucherForm').addEventListener('submit', function(e) {
        //     e.preventDefault();
        //
        //     const formData = {
        //         invoice_no: document.getElementById('invoice_no').value,
        //         date: document.getElementById('date').value,
        //         expense_account_id: document.getElementById('expense_account').value,
        //         payment_account_id: document.getElementById('payment_account').value,
        //         total_amount: document.getElementById('total_amount').value,
        //         description: document.getElementById('description').value,
        //         cost_center_allocations: []
        //     };
        //
        //     // Collect cost center allocations
        //     const ccSelects = document.querySelectorAll('.cc-select');
        //     const percentageInputs = document.querySelectorAll('.percentage-input');
        //
        //     ccSelects.forEach((select, index) => {
        //         if (select.value) {
        //             formData.cost_center_allocations.push({
        //                 cost_center_id: select.value,
        //                 percentage: parseFloat(percentageInputs[index].value),
        //                 amount: (formData.total_amount * parseFloat(percentageInputs[index].value)) / 100
        //             });
        //         }
        //     });
        //
        //     console.log('Form Data to be sent to Laravel:', formData);
        //     alert('Voucher saved successfully!\n\nCheck console for data structure.');
        //
        //     // In real app:
        //     // fetch('/api/vouchers', {
        //     //     method: 'POST',
        //     //     headers: { 'Content-Type': 'application/json' },
        //     //     body: JSON.stringify(formData)
        //     // });
        // });

        function cancelVoucher() {
            if (confirm('Cancel this voucher?')) {
                window.history.back();
            }
        }

        // Auto-select first account on page load for demo
        window.onload = function() {
            document.getElementById('expense_account').selectedIndex = 1;
            // checkCostCenterRequired();
        };
    </script>


@endsection





@section('js')


    <script src="{{ asset('assets/js/chosen.jquery.min.js') }}"></script>
    <script src="{{ asset('assets/js/bootstrap-datepicker.min.js') }}"></script>
    <script src="{{ asset('assets/custom_js/chosen-box.js') }}"></script>
    <script src="{{ asset('assets/custom_js/date-picker.js') }}"></script>


@endsection