@extends('layouts.main')

@section('content')
<div class="container-fluid">
    <h1 class="h4 mb-4">Bricks Point of Sale</h1>

    <div class="card">
        <div class="card-header">
            <h5>Sell Bricks to Customer</h5>
        </div>
        <div class="card-body">
            <form action="{{ route('bricks-sell.store') }}" method="POST" enctype="multipart/form-data">
                @csrf

                {{-- ============================ --}}
                {{-- Customer / Creditor selector --}}
                {{-- ============================ --}}
                <div class="mb-4">
                    <label class="form-label d-block">Customer Type</label>
                    <div class="btn-group" role="group" aria-label="Customer Type">
                        <input type="radio" class="btn-check" name="customer_type" id="type_customer" value="customer" checked>
                        <label class="btn btn-outline-primary" for="type_customer">Regular Customer</label>

                        <input type="radio" class="btn-check" name="customer_type" id="type_creditor" value="creditor">
                        <label class="btn btn-outline-warning" for="type_creditor">Creditor</label>
                    </div>
                </div>

                {{-- ================ --}}
                {{-- Regular Customer --}}
                {{-- ================ --}}
                <div id="customer_section">
                    <label for="customer_id" class="form-label">Select Customer</label>
                    <div class="input-group">
                        <select name="customer_id" id="customer_id" class="form-select" required>
                            <option value="">Choose Customer</option>
                            @foreach ($customers as $customer)
                                <option value="{{ $customer->id }}">{{ $customer->name }}</option>
                            @endforeach
                        </select>
                        <button type="button" class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#addCustomerModal" title="Add Customer">
                            <i class="material-icons md-add"></i>
                        </button>
                    </div>

                    <div class="mt-3">
                        <label for="new_customer_phone" class="form-label">Customer Phone Number</label>
                        <div class="input-group">
                            <input type="tel"
                                   name="phone_number"
                                   id="new_customer_phone"
                                   class="form-control"
                                   placeholder="07xxxxxxxx"
                                   pattern="0[67][0-9]{8}"
                                   inputmode="numeric"
                                   value="0"
                                   oninput="this.value = this.value.replace(/[^0-9]/g,''); if(this.value.length===1 && this.value!=='0') this.value='0'; if(this.value.length===2 && !['6','7'].includes(this.value[1])) this.value='0';">
                        </div>
                    </div>
                </div>

                {{-- ========= --}}
                {{-- Creditor --}}
                {{-- ========= --}}
                <div id="creditor_section" class="d-none">
                    <label for="creditor_id" class="form-label">Select Creditor</label>
                    <div class="input-group">
                        <select name="creditor_id" id="creditor_id" class="form-select" disabled>
                            <option value="">Choose Creditor</option>
                            @isset($creditors)
                                @foreach ($creditors as $c)
                                    <option value="{{ $c->id }}"
                                            data-balance="{{ $c->balance ?? 0 }}"
                                            data-phone="{{ $c->phone_number ?? '' }}"
                                            data-name="{{ $c->name ?? (($c->first_name ?? '').' '.($c->last_name ?? '')) }}">
                                        {{ $c->name ?? (($c->first_name ?? '').' '.($c->last_name ?? '')) }}
                                    </option>
                                @endforeach
                            @endisset
                        </select>

                        <span id="creditor_balance_badge" class="input-group-text bg-light fw-semibold d-none">
                            Balance: <span id="creditor_balance_text" class="ms-1"></span>
                        </span>
                    </div>
                    <small class="text-muted d-block mt-2">
                        When a creditor is selected, the sale will be associated with that creditor. Phone input is disabled.
                    </small>
                </div>

                {{-- Sale Date --}}
                <div class="mb-4 mt-4">
                    <label for="sale_date" class="form-label">Sale Date</label>
                    <div class="input-group">
                        <input type="date" name="sale_date" id="sale_date" class="form-control">
                    </div>
                </div>

                {{-- Brick Rows --}}
                <div class="mb-4">
                    <div id="brick-rows" class="card">
                        <div class="card-header">
                            <h5>Select brick informations</h5>
                        </div>
                        <div class="card-body">
                            <div id="global-stock-alert" class="alert alert-danger d-none mb-3" role="alert">
                                One or more brick quantities exceed available stock. Please correct them before submitting.
                            </div>
                        </div>

                        <div class="row brick-row g-3 mb-3 border rounded p-3 align-items-end">
                            <div class="col-md-3">
                                <label class="form-label">Brick Type</label>
                                <select name="brick_type_id[]" class="form-select brick-type-select" required>
                                    <option value="">Select Brick Type</option>
                                    @foreach ($bricks as $brick)
                                        <option value="{{ $brick['brick_type_id'] }}"
                                                data-stock="{{ $brick['available'] }}"
                                                data-price="{{ $brick['brick_selling_price'] }}">
                                            {{ $brick['brick_type_name'] }} ({{ $brick['available'] }} in stock)
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-md-2">
                                <label class="form-label">Quantity</label>
                                <div class="position-relative">
                                    <input type="number" name="quantity[]" class="form-control quantity-input" min="1" required>
                                    <div class="text-danger stock-error small mt-1 position-absolute w-100" style="min-height: 18px;"></div>
                                </div>
                            </div>

                            <div class="col-md-2">
                                <label class="form-label">Price per Unit</label>
                                <input type="number" name="price_per_unit[]" class="form-control price-input" step="0.01" readonly>
                            </div>

                            <div class="col-md-3">
                                <label class="form-label">Discount</label>
                                <div class="form-check">
                                    <input class="form-check-input discount-toggle" type="checkbox">
                                    <label class="form-check-label">Apply Discount</label>
                                </div>
                                <input type="number" name="discount[]" class="form-control discount-input mt-2 d-none" step="0.01" min="0">
                                <div class="text-danger discount-error small mt-1"></div>
                            </div>

                            <div class="col-md-2 d-flex justify-content-end">
                                <button type="button" class="btn btn-danger remove-row">
                                    <i class="material-icons md-delete"></i>
                                </button>
                            </div>
                        </div>
                    </div>

                    <div class="text-end mt-2">
                        <button type="button" class="btn btn-sm btn-outline-secondary" id="addRowBtn">
                            <i class="fa fa-plus"></i> Add Another Row
                        </button>
                    </div>
                </div>

                {{-- Payment Options --}}
                <div class="card mb-4">
                    <div class="card-header d-flex align-items-center justify-content-between">
                        <h5 class="mb-0">Payment Options</h5>
                        <div class="d-flex align-items-center gap-2">
                            <span class="fw-semibold">Order Total:</span>
                            <span id="order_total_display" class="badge bg-secondary">TZS 0.00</span>
                        </div>
                    </div>
                    <div class="card-body">
                        <div id="creditor_over_limit_alert" class="alert alert-warning d-none" role="alert"></div>

                        <div class="mb-3">
                            <label for="payment_method" class="form-label">Select Payment Method</label>
                            <select name="payment_method" id="payment_method" class="form-select" required onchange="handlePaymentOption(this.value)">
                                <option value="">Choose Payment Option</option>
                                <option value="Bank_Transfer">Bank Transaction</option>
                                <option value="Cash">Cash</option>
                                <option value="Loan">Loan</option>
                                <option value="Loan">Creditor</option>
                            </select>
                        </div>

                        <div class="mb-3 d-none" id="bank_proof_section">
                            <label for="bank_proof" class="form-label">Attach Bank Payment Proof</label>
                            <input type="file" name="bank_proof" id="bank_proof" class="form-control">
                        </div>

                        <div class="mb-3 d-none" id="loan_section">
                            <label for="loan_due_date" class="form-label">Expected Payment Date</label>
                            <input type="date" name="loan_due_date" id="loan_due_date" class="form-control">
                        </div>
                    </div>
                </div>

                {{-- Remarks --}}
                <div class="mb-4">
                    <label for="remarks" class="form-label">Remarks</label>
                    <textarea name="remarks" id="remarks" class="form-control" rows="2" placeholder="Optional..."></textarea>
                </div>

                {{-- Submit --}}
                <div class="text-end">
                    <button id="submitButton" type="submit" class="btn btn-success">
                        <i class="fa fa-shopping-cart me-1"></i> Confirm Sale
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- ========================= --}}
{{-- Add Customer Modal & UX  --}}
{{-- ========================= --}}
<div class="modal fade" id="addCustomerModal" tabindex="-1" aria-labelledby="addCustomerModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <form id="addCustomerForm">
            @csrf
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Add New Customer</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="new_customer_name" class="form-label">Customer Name</label>
                        <input type="text" name="name" id="new_customer_name" class="form-control" required>
                        <div class="invalid-feedback" id="nameError"></div>
                    </div>
                    <div class="mb-3">
                        <label for="new_customer_location" class="form-label">Location</label>
                        <input type="text" name="location" id="new_customer_location" class="form-control" required>
                        <div class="invalid-feedback" id="locationError"></div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary">Add Customer</button>
                </div>
            </div>
        </form>
    </div>
</div>

<div class="modal fade" id="customerSuccessModal" tabindex="-1" aria-labelledby="customerSuccessModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm modal-dialog-centered">
        <div class="modal-content text-center">
            <div class="modal-body">
                <h5 class="mb-2">Customer Created Successfully!</h5>
                <button type="button" class="btn btn-light btn-sm mt-2" data-bs-dismiss="modal">OK</button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
    .card { border-radius: 10px; box-shadow: 0 4px 6px rgba(0,0,0,.08); margin-bottom: 20px; }
    .card-header { background-color: #f8f9fa; border-bottom: 1px solid #e3e6f0; }
    .brick-row .stock-error { min-height: 18px; }
    .btn-sm { padding: .25rem .5rem; font-size: .75rem; }
</style>
@endpush

@push('scripts')
<script>
    // ===== Payment option toggles =====
    function handlePaymentOption(value) {
        document.getElementById('bank_proof_section').classList.toggle('d-none', value !== 'Bank_Transfer');
        document.getElementById('loan_section').classList.toggle('d-none', value !== 'Loan');
    }

    // ===== Utilities =====
    function formatTZS(n) {
        const num = parseFloat(n || 0);
        return 'TZS ' + num.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
    }

    function calcOrderTotal() {
        let total = 0;
        document.querySelectorAll('.brick-row').forEach(row => {
            const qty   = parseFloat(row.querySelector('.quantity-input')?.value || '0');
            const price = parseFloat(row.querySelector('.price-input')?.value || '0');
            if (!isNaN(qty) && !isNaN(price)) total += qty * price;
        });
        return total;
    }

    function updateOrderTotalAndCheckBalance() {
        const total = calcOrderTotal();
        document.getElementById('order_total_display').textContent = formatTZS(total);

        const isCreditor = document.getElementById('type_creditor').checked;
        const creditorId = document.getElementById('creditor_id').value;
        const alertBox   = document.getElementById('creditor_over_limit_alert');
        const submitBtn  = document.getElementById('submitButton');

        if (isCreditor && creditorId) {
            const opt = document.querySelector(`#creditor_id option[value="${creditorId}"]`);
            const bal = parseFloat(opt?.getAttribute('data-balance') || '0');
            if (total > bal) {
                alertBox.innerHTML = `Order total <strong>${formatTZS(total)}</strong> exceeds creditor balance <strong>${formatTZS(bal)}</strong>.`;
                alertBox.classList.remove('d-none');
                submitBtn.disabled = true; // prevent accidental submission
            } else {
                alertBox.classList.add('d-none');
                alertBox.innerHTML = '';
                submitBtn.disabled = false;
            }
        } else {
            alertBox.classList.add('d-none');
            alertBox.innerHTML = '';
            submitBtn.disabled = false;
        }
    }

    // Prevent double-selecting same brick type across rows
    function updateBrickOptions() {
        const selectedValues = Array.from(document.querySelectorAll('.brick-type-select'))
            .map(select => select.value).filter(Boolean);

        document.querySelectorAll('.brick-type-select').forEach(select => {
            const currentValue = select.value;
            Array.from(select.options).forEach(opt => {
                if (!opt.value) return;
                opt.disabled = (opt.value !== currentValue && selectedValues.includes(opt.value));
            });
        });
    }

    function attachValidationEvents(container) {
        const brickSelect   = container.querySelector('.brick-type-select');
        const quantityInput = container.querySelector('.quantity-input');
        const priceInput    = container.querySelector('.price-input');
        const discountToggle= container.querySelector('.discount-toggle');
        const discountInput = container.querySelector('.discount-input');
        const discountError = container.querySelector('.discount-error');
        const errorDiv      = container.querySelector('.stock-error');

        let selectedStock = 0;
        let basePrice = 0;

        function validateStock() {
            const q = parseInt(quantityInput.value) || 0;
            if (q > selectedStock) {
                errorDiv.innerText = `Exceeds stock (${selectedStock})`;
                quantityInput.classList.add('is-invalid');
                return false;
            } else {
                errorDiv.innerText = '';
                quantityInput.classList.remove('is-invalid');
                return true;
            }
        }

        function validateDiscount() {
            const disc = parseFloat(discountInput.value) || 0;
            const q    = parseInt(quantityInput.value) || 1;
            const totalDisc = disc * q;
            const maxDisc   = basePrice * 0.2 * q;

            if (totalDisc > maxDisc) {
                discountError.innerText = 'Discount cannot exceed 20% of total price';
                priceInput.value = basePrice.toFixed(2);
                updateOrderTotalAndCheckBalance();
                return false;
            } else {
                discountError.innerText = '';
                priceInput.value = (basePrice - disc).toFixed(2);
                updateOrderTotalAndCheckBalance();
                return true;
            }
        }

        brickSelect.addEventListener('change', function () {
            const opt = brickSelect.options[brickSelect.selectedIndex];
            selectedStock = parseInt(opt?.dataset.stock || '0');
            basePrice     = parseFloat(opt?.dataset.price || '0');
            priceInput.value = basePrice || '';
            validateStock();
            updateBrickOptions();
            updateOrderTotalAndCheckBalance();
        });

        quantityInput.addEventListener('input', function () {
            validateStock();
            if (!discountInput.classList.contains('d-none')) validateDiscount();
            updateOrderTotalAndCheckBalance();
        });

        discountToggle.addEventListener('change', function () {
            if (this.checked) {
                discountInput.classList.remove('d-none');
                priceInput.removeAttribute('readonly');
            } else {
                discountInput.classList.add('d-none');
                discountError.innerText = '';
                discountInput.value = '';
                priceInput.setAttribute('readonly', true);
                priceInput.value = basePrice || '';
            }
            updateOrderTotalAndCheckBalance();
        });

        discountInput.addEventListener('input', validateDiscount);
    }

    // ===== Customer vs Creditor UI logic =====
    function applyCustomerTypeUI(type) {
        const isCreditor = (type === 'creditor');

        const customerSection  = document.getElementById('customer_section');
        const creditorSection  = document.getElementById('creditor_section');
        const customerSelect   = document.getElementById('customer_id');
        const creditorSelect   = document.getElementById('creditor_id');
        const phoneInput       = document.getElementById('new_customer_phone');
        const badge            = document.getElementById('creditor_balance_badge');
        const badgeText        = document.getElementById('creditor_balance_text');

        customerSection.classList.toggle('d-none', isCreditor);
        creditorSection.classList.toggle('d-none', !isCreditor);

        customerSelect.disabled = isCreditor;
        creditorSelect.disabled = !isCreditor;
        if (phoneInput) phoneInput.disabled = isCreditor;

        if (!isCreditor) {
            creditorSelect.value = '';
            badge.classList.add('d-none');
            badgeText.textContent = '';
            restorePaymentMethodOptions(); // back to normal options
            updateOrderTotalAndCheckBalance();
        }
    }

    // ===== Payment Method behavior for creditor =====
    let originalPaymentOptionsHTML = '';
    function setPaymentMethodBankOnly() {
    const pm = document.getElementById('payment_method');
    if (!originalPaymentOptionsHTML) originalPaymentOptionsHTML = pm.innerHTML;

        pm.innerHTML = '<option value="Creditor" selected>Creditor Transaction</option>';
        pm.value = 'Creditor';

        // visually/interaction lock without disabling (so it submits)
        pm.setAttribute('aria-disabled', 'true');
        pm.classList.add('locked-select');
        pm.tabIndex = -1;
        pm.addEventListener('mousedown', e => e.preventDefault()); // prevent opening
        pm.addEventListener('keydown', e => e.preventDefault());   // prevent keyboard changes
        handlePaymentOption('Bank_Transfer');
    }

    function restorePaymentMethodOptions() {
    const pm = document.getElementById('payment_method');
    if (originalPaymentOptionsHTML) pm.innerHTML = originalPaymentOptionsHTML;

        pm.removeAttribute('aria-disabled');
        pm.classList.remove('locked-select');
        pm.tabIndex = 0;
        // you may also remove the event listeners if you attached them with named handlers
        handlePaymentOption('');
    }


    document.addEventListener('DOMContentLoaded', function () {
        // Init brick row validation & options
        document.querySelectorAll('.brick-row').forEach(row => attachValidationEvents(row));
        updateBrickOptions();
        updateOrderTotalAndCheckBalance();

        // Add row
        document.getElementById('addRowBtn').addEventListener('click', function () {
            const row = document.querySelector('.brick-row');
            const clone = row.cloneNode(true);

            // Reset inputs/errors
            clone.querySelectorAll('input').forEach(i => {
                if (i.type === 'checkbox') i.checked = false;
                else i.value = '';
                i.classList.remove('is-invalid');
            });
            clone.querySelectorAll('select').forEach(s => s.value = '');
            clone.querySelectorAll('.stock-error').forEach(e => e.innerText = '');
            clone.querySelectorAll('.discount-input').forEach(d => d.classList.add('d-none'));
            clone.querySelectorAll('.discount-error').forEach(d => d.innerText = '');

            document.getElementById('brick-rows').appendChild(clone);
            attachValidationEvents(clone);
            updateBrickOptions();
            updateOrderTotalAndCheckBalance();
        });

        // Remove row
        document.getElementById('brick-rows').addEventListener('click', function (e) {
            if (e.target.closest('.remove-row')) {
                const rows = document.querySelectorAll('.brick-row');
                if (rows.length > 1) {
                    e.target.closest('.brick-row').remove();
                    updateBrickOptions();
                    updateOrderTotalAndCheckBalance();
                }
            }
        });

        // Customer/Creditor radio handlers
        document.getElementById('type_customer').addEventListener('change', function(){
            if (this.checked) applyCustomerTypeUI('customer');
        });
        document.getElementById('type_creditor').addEventListener('change', function(){
            if (this.checked) applyCustomerTypeUI('creditor');
        });
        applyCustomerTypeUI('customer'); // default

        // On creditor change: show balance, enforce Bank_Transfer, and re-check totals vs balance
        const creditorSelect = document.getElementById('creditor_id');
        const badge          = document.getElementById('creditor_balance_badge');
        const balanceText    = document.getElementById('creditor_balance_text');

        creditorSelect.addEventListener('change', function () {
            const opt = this.options[this.selectedIndex];
            if (!opt || !opt.value) {
                badge.classList.add('d-none');
                balanceText.textContent = '';
                restorePaymentMethodOptions();
                updateOrderTotalAndCheckBalance();
                return;
            }

            // Enforce Bank Transaction when a creditor is selected
            setPaymentMethodBankOnly();

            const embedded = opt.getAttribute('data-balance');
            const val = parseFloat(embedded || '0');
            balanceText.textContent = formatTZS(val);
            balanceText.classList.toggle('text-danger', val < 0);
            badge.classList.remove('d-none');

            updateOrderTotalAndCheckBalance();
        });

        // Guard before submit: ensure correct party selected; re-check totals vs balance
        const form = document.querySelector('form[action="{{ route('bricks-sell.store') }}"]');
        form.addEventListener('submit', function (e) {
            updateOrderTotalAndCheckBalance();
            const isCreditor = document.getElementById('type_creditor').checked;
            const customerId = document.getElementById('customer_id').value;
            const creditorId = document.getElementById('creditor_id').value;
            const alertBox   = document.getElementById('creditor_over_limit_alert');

            if (isCreditor && !creditorId) {
                e.preventDefault();
                alert('Please select a creditor.');
                document.getElementById('creditor_id').focus();
                return;
            }
            if (!isCreditor && !customerId) {
                e.preventDefault();
                alert('Please select a customer.');
                document.getElementById('customer_id').focus();
                return;
            }
            if (!alertBox.classList.contains('d-none')) {
                // prevent submission if over balance
                e.preventDefault();
                alert('Order total exceeds creditor balance. Please adjust the order or top up the balance.');
                return;
            }
        });
    });

    // ===== Add Customer via AJAX (kept from your code) =====
    document.addEventListener('DOMContentLoaded', function () {
        const customerForm = document.getElementById('addCustomerForm');

        customerForm.addEventListener('submit', function (e) {
            e.preventDefault();

            const name = document.getElementById('new_customer_name');
            const location = document.getElementById('new_customer_location');
            const nameError = document.getElementById('nameError');
            const locationError = document.getElementById('locationError');

            name.classList.remove('is-invalid');
            location.classList.remove('is-invalid');
            nameError.textContent = '';
            locationError.textContent = '';

            fetch("{{ route('customers.ajax-store') }}", {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('input[name=\"_token\"]').value,
                    'Accept': 'application/json',
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    name: name.value,
                    location: location.value
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.errors) {
                    if (data.errors.name) {
                        name.classList.add('is-invalid');
                        nameError.textContent = data.errors.name[0];
                    }
                    if (data.errors.location_name || data.errors.location) {
                        location.classList.add('is-invalid');
                        locationError.textContent = (data.errors.location_name?.[0] || data.errors.location?.[0] || '');
                    }
                } else if (data.status === 'success') {
                    const newOption = document.createElement('option');
                    newOption.value = data.customer.id;
                    newOption.text  = data.customer.name;
                    newOption.selected = true;
                    document.getElementById('customer_id').appendChild(newOption);

                    const addModal = bootstrap.Modal.getInstance(document.getElementById('addCustomerModal'));
                    addModal.hide();
                    customerForm.reset();

                    const successModal = new bootstrap.Modal(document.getElementById('customerSuccessModal'));
                    successModal.show();
                }
            })
            .catch(error => console.error('Error:', error));
        });
    });
</script>
@endpush