@extends('Admin.layout')

@section('content')
    <div class="container-xxl flex-grow-1 container-p-y">

        {{-- PAGE HEADER --}}
        <div class="d-flex justify-content-between align-items-center mb-4">

            <h4 class="fw-bold mb-1">
                Create Bill
            </h4>

            <a href="{{ route('bill_report') }}" class="btn btn-outline-primary">

                <i class="icon-base ti tabler-file-invoice me-1"></i>

                Bill Report

            </a>

        </div>


        {{-- BILL FORM --}}
        <div class="card">

            <div class="card-body">

                <form action="{{ route('billing_store') }}" method="POST" id="billingForm">

                    @csrf


                    {{-- CUSTOMER DETAILS --}}
                    <div class="row g-3 mb-4">

                        {{-- CUSTOMER SEARCH --}}
                        <div class="col-md-3">

                            <label class="form-label">
                                Customer Search
                            </label>

                            <input type="text" id="customer_search" class="form-control"
                                placeholder="Search name or phone" autocomplete="off">

                            <input type="hidden" name="customer_id" id="customer_id" value="{{ old('customer_id') }}">

                            <div id="customer_results" class="list-group mt-1"></div>


                            {{-- CUSTOMER DATA --}}
                            <div id="customer_data" class="d-none">

                                @foreach ($customers as $customer)
                                    <div class="customer-data" data-id="{{ $customer->customer_id }}"
                                        data-name="{{ $customer->name }}" data-phone="{{ $customer->phone_no }}"
                                        data-place="{{ $customer->address }}"></div>
                                @endforeach

                            </div>

                        </div>


                        {{-- CUSTOMER NAME --}}
                        <div class="col-md-3">

                            <label class="form-label">
                                Customer Name
                            </label>

                            <input type="text" name="customer_name" id="customer_name"
                                class="form-control @error('customer_name') is-invalid @enderror"
                                value="{{ old('customer_name') }}" placeholder="Enter name">

                            @error('customer_name')
                                <div class="text-danger">
                                    {{ $message }}
                                </div>
                            @enderror

                        </div>


                        {{-- PHONE --}}
                        <div class="col-md-3">

                            <label class="form-label">
                                Phone Number
                            </label>

                            <input type="text" name="phone_no" id="phone_no"
                                class="form-control @error('phone_no') is-invalid @enderror" value="{{ old('phone_no') }}"
                                placeholder="Enter phone number">

                            @error('phone_no')
                                <div class="text-danger">
                                    {{ $message }}
                                </div>
                            @enderror

                        </div>


                        {{-- PLACE --}}
                        <div class="col-md-3">

                            <label class="form-label">
                                Place
                            </label>

                            <input type="text" name="place" id="place"
                                class="form-control @error('place') is-invalid @enderror" value="{{ old('place') }}"
                                placeholder="Enter place">

                            @error('place')
                                <div class="text-danger">
                                    {{ $message }}
                                </div>
                            @enderror

                        </div>

                    </div>


                    <hr class="my-4">


                    {{-- BILL ITEMS --}}
                    <h5 class="fw-bold mb-3">
                        Bill Items
                    </h5>


                    <div id="itemsContainer">


                        {{-- FIRST ITEM --}}
                        <div class="row g-3 align-items-end item-row mb-3">


                            {{-- TYPE --}}
                            <div class="col-md-2">

                                <label class="form-label">
                                    Type
                                </label>

                                <select name="items[0][type]" class="form-select item-type">

                                    <option value="Product">
                                        Product
                                    </option>

                                    <option value="Service">
                                        Service
                                    </option>

                                </select>

                            </div>


                            {{-- PRODUCT --}}
                            <div class="col-md-3 product-field">

                                <label class="form-label">
                                    Product
                                </label>

                                <select name="items[0][product_id]"
                                    class="form-select item-product @error('items.0.product_id') is-invalid @enderror">

                                    <option value="">
                                        Select Product
                                    </option>

                                    @foreach ($products as $product)
                                        <option value="{{ $product->product_id }}"
                                            data-price="{{ $product->selling_price }}"
                                            {{ old('items.0.product_id') == $product->product_id ? 'selected' : '' }}>

                                            {{ $product->name }}

                                            -
                                            ₹{{ number_format($product->selling_price, 2) }}

                                            (Stock:
                                            {{ $product->quantity }})
                                        </option>
                                    @endforeach

                                </select>


                                @error('items.0.product_id')
                                    <div class="text-danger small mt-1">
                                        {{ $message }}
                                    </div>
                                @enderror

                            </div>


                            {{-- SERVICE --}}
                            <div class="col-md-3 service-field d-none">

                                <label class="form-label">
                                    Service Name
                                </label>

                                <input type="text" name="items[0][item_name]" class="form-control item-service"
                                    placeholder="Enter service name">

                            </div>


                            {{-- QUANTITY --}}
                            <div class="col-md-2 quantity-field">

                                <label class="form-label">
                                    Qty
                                </label>

                                <input type="number" name="items[0][quantity]" class="form-control item-quantity"
                                    min="1" value="1">

                            </div>


                            {{-- PRICE --}}
                            <div class="col-md-2">

                                <label class="form-label item-price-label">
                                    Price
                                </label>

                                <input type="number" step="0.01" min="0" name="items[0][price]"
                                    class="form-control item-price" value="0" placeholder="Price">

                            </div>


                            {{-- ADD --}}
                            <div class="col-md-1">

                                <button type="button" class="btn btn-outline-primary add-item-btn w-100">

                                    <i class="icon-base ti tabler-plus"></i>

                                </button>

                            </div>

                        </div>

                    </div>


                    {{-- DESCRIPTION --}}
                    <div class="row g-3 mb-4">

                        <div class="col-md-8">

                            <label class="form-label">
                                Description
                            </label>

                            <textarea name="description" id="description" rows="3"
                                class="form-control @error('description') is-invalid @enderror" placeholder="Enter remark">{{ old('description') }}</textarea>

                            @error('description')
                                <div class="text-danger">
                                    {{ $message }}
                                </div>
                            @enderror

                        </div>


                        <div class="col-md-4">

                            <label class="form-label">
                                Item Total
                            </label>

                            <input type="text" id="itemTotal" class="form-control" value="₹0.00" readonly>

                        </div>

                    </div>


                    <hr class="my-4">


                    {{-- PAYMENT --}}
                    <div class="row g-4">

                        <div class="col-lg-7">

                            <h5 class="fw-bold mb-3">
                                Payment Details
                            </h5>

                            <div class="row g-3">


                                {{-- SERVICE CHARGE --}}
                                <div class="col-md-6">

                                    <label class="form-label">
                                        Service Charge
                                    </label>

                                    <input type="number" step="0.01" min="0" name="service_charge"
                                        id="paymentServiceCharge"
                                        class="form-control @error('service_charge') is-invalid @enderror"
                                        value="{{ old('service_charge', 0) }}" placeholder="Enter service charge">

                                    @error('service_charge')
                                        <div class="text-danger">
                                            {{ $message }}
                                        </div>
                                    @enderror

                                </div>


                                {{-- DISCOUNT --}}
                                <div class="col-md-6">

                                    <label class="form-label">
                                        Discount (%)
                                    </label>

                                    <input type="number" step="0.01" min="0" max="100"
                                        name="discount_percentage" id="discount_percentage"
                                        class="form-control @error('discount_percentage') is-invalid @enderror"
                                        value="{{ old('discount_percentage', 0) }}"
                                        placeholder="Enter discount percentage">

                                    @error('discount_percentage')
                                        <div class="text-danger">
                                            {{ $message }}
                                        </div>
                                    @enderror

                                </div>

                            </div>

                        </div>


                        {{-- BILL SUMMARY --}}
                        <div class="col-lg-5">

                            <h5 class="fw-bold mb-3">
                                Bill Summary
                            </h5>


                            <div class="border rounded p-3">


                                {{-- PRODUCT TOTAL --}}
                                <div class="d-flex justify-content-between mb-3">

                                    <span class="text-muted">
                                        Product Total
                                    </span>

                                    <strong>
                                        ₹<span id="productTotal">0.00</span>
                                    </strong>

                                </div>


                                {{-- SERVICE CHARGE --}}
                                <div class="d-flex justify-content-between mb-3">

                                    <span class="text-muted">
                                        Service Charge
                                    </span>

                                    <strong>
                                        ₹<span id="serviceTotal">0.00</span>
                                    </strong>

                                </div>


                                {{-- ITEMS TOTAL --}}
                                <div class="d-flex justify-content-between mb-3">

                                    <span class="text-muted">
                                        Items Total
                                    </span>

                                    <strong>
                                        ₹<span id="subtotal">0.00</span>
                                    </strong>

                                </div>


                                {{-- DISCOUNT --}}
                                <div class="d-flex justify-content-between mb-3">

                                    <span class="text-muted">
                                        Discount
                                    </span>

                                    <strong>
                                        ₹<span id="discountTotal">0.00</span>
                                    </strong>

                                </div>


                                <hr>


                                {{-- FINAL --}}
                                <div class="d-flex justify-content-between">

                                    <span class="fw-bold">
                                        Final Amount
                                    </span>

                                    <strong class="fs-5">
                                        ₹<span id="grandTotal">0.00</span>
                                    </strong>

                                </div>

                            </div>

                        </div>

                    </div>


                    {{-- SAVE --}}
                    <div class="d-flex justify-content-end mt-4">

                        <button type="submit" class="btn btn-primary" id="saveBillBtn">

                            <i class="icon-base ti tabler-device-floppy me-1"></i>

                            Save Bill

                        </button>

                    </div>


                </form>

            </div>

        </div>

    </div>
@endsection


@section('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {


            const customerSearch =
                document.getElementById('customer_search');

            const customerId =
                document.getElementById('customer_id');

            const customerResults =
                document.getElementById('customer_results');

            const customerData =
                document.querySelectorAll('.customer-data');

            const customerName =
                document.getElementById('customer_name');

            const phone =
                document.getElementById('phone_no');

            const place =
                document.getElementById('place');



            function enableCustomerFields() {
                customerName.readOnly = false;
                phone.readOnly = false;
                place.readOnly = false;
            }


            function disableCustomerFields() {
                customerName.readOnly = true;
                phone.readOnly = true;
                place.readOnly = true;
            }


            function clearCustomerSelection() {
                customerId.value = '';

                enableCustomerFields();
            }


            customerSearch.addEventListener('input', function() {

                const search =
                    this.value.toLowerCase().trim();


                customerResults.innerHTML = '';


                // Searching means no existing customer is selected
                clearCustomerSelection();


                if (!search) {
                    return;
                }


                let found = false;


                customerData.forEach(function(customer) {

                    const name =
                        (customer.dataset.name || '').toLowerCase();

                    const phoneNumber =
                        (customer.dataset.phone || '').toLowerCase();

                    const customerPlace =
                        (customer.dataset.place || '').toLowerCase();


                    if (
                        name.includes(search) ||
                        phoneNumber.includes(search) ||
                        customerPlace.includes(search)
                    ) {

                        found = true;


                        const result =
                            document.createElement('button');


                        result.type = 'button';

                        result.className =
                            'list-group-item list-group-item-action';


                        result.innerHTML = `

                    <strong>
                        ${customer.dataset.name || ''}
                    </strong>

                    <br>

                    <small>

                        ${customer.dataset.phone || ''}

                        ${
                            customer.dataset.place
                            ? ' - ' + customer.dataset.place
                            : ''
                        }

                    </small>

                `;


                        //    SELECT CUSTOMER

                        result.addEventListener('click', function() {

                            customerSearch.value =
                                customer.dataset.name +
                                ' - ' +
                                customer.dataset.phone;


                            customerId.value =
                                customer.dataset.id;


                            customerName.value =
                                customer.dataset.name || '';


                            phone.value =
                                customer.dataset.phone || '';


                            place.value =
                                customer.dataset.place || '';


                            disableCustomerFields();


                            customerResults.innerHTML = '';

                        });


                        customerResults.appendChild(result);

                    }

                });


                // CUSTOMER NOT FOUND

                if (!found) {

                    customerResults.innerHTML = `

                <div class="list-group-item text-danger">

                    <i class="icon-base ti tabler-user-x me-1"></i>

                    Customer not found.
                    Enter the customer details below
                    to create a new customer.

                </div>

            `;



                    customerId.value = '';

                    enableCustomerFields();

                }

            });


            customerSearch.addEventListener(
                'keydown',
                function(event) {

                    if (event.key === 'Escape') {

                        customerSearch.value = '';

                        customerId.value = '';

                        customerResults.innerHTML = '';

                        customerName.value = '';

                        phone.value = '';

                        place.value = '';

                        enableCustomerFields();

                    }

                }
            );


            customerName.addEventListener('input', function() {

                if (!this.readOnly) {
                    customerId.value = '';
                }

            });


            phone.addEventListener('input', function() {

                if (!this.readOnly) {
                    customerId.value = '';
                }

            });


            place.addEventListener('input', function() {

                if (!this.readOnly) {
                    customerId.value = '';
                }

            });


            let itemIndex = 1;


            const productSelect =
                document.querySelector('.item-product');

            const productOptions =
                productSelect ?
                productSelect.innerHTML :
                '';


            // ADD ITEM modal
            document.addEventListener('click', function(event) {

                const addButton =
                    event.target.closest('.add-item-btn');


                if (!addButton) {
                    return;
                }


                const item =
                    document.createElement('div');


                item.className =
                    'card border mb-3 item-row';


                item.innerHTML = `

            <div class="card-body">

                <div class="row g-3">


                    {{-- TYPE --}}
                    <div class="col-md-2">

                        <label class="form-label">
                            Type
                        </label>

                        <select
                            name="items[${itemIndex}][type]"
                            class="form-select item-type"
                        >

                            <option value="Product">
                                Product
                            </option>

                            <option value="Service">
                                Service
                            </option>

                        </select>

                    </div>


                    {{-- PRODUCT --}}
                    <div class="col-md-4 product-field">

                        <label class="form-label">
                            Product
                        </label>

                        <select
                            name="items[${itemIndex}][product_id]"
                            class="form-select item-product"
                        >

                            ${productOptions}

                        </select>

                    </div>


                    {{-- SERVICE --}}
                    <div class="col-md-4 service-field d-none">

                        <label class="form-label">
                            Service Name
                        </label>

                        <input
                            type="text"
                            name="items[${itemIndex}][item_name]"
                            class="form-control item-service"
                            placeholder="Enter service name"
                        >

                    </div>


                    {{-- QUANTITY --}}
                    <div class="col-md-2 quantity-field">

                        <label class="form-label">
                            Qty
                        </label>

                        <input
                            type="number"
                            name="items[${itemIndex}][quantity]"
                            class="form-control item-quantity"
                            min="1"
                            value="1"
                        >

                    </div>


                    {{-- PRICE --}}
                    <div class="col-md-2">

                        <label class="form-label item-price-label">
                            Price
                        </label>

                        <input
                            type="number"
                            step="0.01"
                            min="0"
                            name="items[${itemIndex}][price]"
                            class="form-control item-price"
                            value="0"
                            placeholder="Price"
                        >

                    </div>


                    {{-- ADD --}}
                    <div class="col-md-2">

                        <label class="form-label d-block">
                            &nbsp;
                        </label>

                        <button
                            type="button"
                            class="btn btn-outline-primary add-item-btn w-100"
                        >

                            <i class="icon-base ti tabler-plus"></i>

                        </button>

                    </div>


                    {{-- REMOVE --}}
                    <div class="col-md-1">

                        <label class="form-label d-block">
                            &nbsp;
                        </label>

                        <button
                            type="button"
                            class="btn btn-outline-danger remove-item"
                        >

                            <i class="icon-base ti tabler-trash"></i>

                        </button>

                    </div>

                </div>

            </div>

        `;


                document
                    .getElementById('itemsContainer')
                    .appendChild(item);


                itemIndex++;


                calculateBill();

            });


            // CHANGE ITEM TYPE
            document.addEventListener('change', function(event) {

                if (
                    !event.target.classList.contains('item-type')
                ) {
                    return;
                }


                const row =
                    event.target.closest('.item-row');


                const isService =
                    event.target.value === 'Service';


                row.querySelector('.product-field')
                    .classList.toggle(
                        'd-none',
                        isService
                    );


                row.querySelector('.service-field')
                    .classList.toggle(
                        'd-none',
                        !isService
                    );


                row.querySelector('.quantity-field')
                    .classList.toggle(
                        'd-none',
                        isService
                    );


                const product =
                    row.querySelector('.item-product');

                const service =
                    row.querySelector('.item-service');

                const quantity =
                    row.querySelector('.item-quantity');

                const price =
                    row.querySelector('.item-price');

                const priceLabel =
                    row.querySelector('.item-price-label');


                if (isService) {

                    product.value = '';

                    quantity.value = 1;

                    price.value = '';

                    price.placeholder =
                        'Service Charge';

                    priceLabel.textContent =
                        'Service Charge';

                } else {

                    service.value = '';

                    price.value = 0;

                    price.placeholder =
                        'Price';

                    priceLabel.textContent =
                        'Price';

                }


                calculateBill();

            });


            //    CHANGE PRODUCT
            document.addEventListener('change', function(event) {

                if (
                    !event.target.classList.contains('item-product')
                ) {
                    return;
                }


                const row =
                    event.target.closest('.item-row');


                const selected =
                    event.target.options[
                        event.target.selectedIndex
                    ];


                const price =
                    row.querySelector('.item-price');


                price.value =
                    selected.value ?
                    selected.dataset.price || 0 :
                    0;


                calculateBill();

            });

            // INPUT

            document.addEventListener('input', function(event) {

                const target =
                    event.target;


                if (

                    target.classList.contains(
                        'item-quantity'
                    )

                    ||

                    target.classList.contains(
                        'item-price'
                    )

                    ||

                    target.id ===
                    'paymentServiceCharge'

                    ||

                    target.id ===
                    'discount_percentage'

                ) {

                    calculateBill();

                }

            });


            //    REMOVE ITEM
            document.addEventListener('click', function(event) {

                const removeButton =
                    event.target.closest('.remove-item');


                if (!removeButton) {
                    return;
                }


                const rows =
                    document.querySelectorAll('.item-row');


                if (rows.length <= 1) {
                    return;
                }


                removeButton
                    .closest('.item-row')
                    .remove();


                calculateBill();

            });


            //    CALCULATE BILL
            function calculateBill() {

                let productTotal = 0;

                let serviceItemTotal = 0;


                document
                    .querySelectorAll('.item-row')
                    .forEach(function(row) {


                        const type =
                            row.querySelector(
                                '.item-type'
                            ).value;


                        const price =
                            parseFloat(
                                row.querySelector(
                                    '.item-price'
                                ).value
                            ) || 0;



                        if (type === 'Product') {

                            const quantity =
                                parseFloat(
                                    row.querySelector(
                                        '.item-quantity'
                                    ).value
                                ) || 0;


                            productTotal +=
                                quantity * price;

                        } else {

                            serviceItemTotal +=
                                price;

                        }

                    });


                const paymentField =
                    document.getElementById(
                        'paymentServiceCharge'
                    );


                const manualServiceCharge =
                    parseFloat(
                        paymentField.value
                    ) || 0;



                let hasServiceItem = false;


                document
                    .querySelectorAll('.item-row')
                    .forEach(function(row) {

                        if (
                            row.querySelector(
                                '.item-type'
                            ).value === 'Service'
                        ) {

                            hasServiceItem = true;

                        }

                    });


                if (hasServiceItem) {

                    if (
                        document.activeElement !==
                        paymentField
                    ) {

                        paymentField.value =
                            serviceItemTotal.toFixed(2);

                    }

                }

                let finalServiceCharge =
                    parseFloat(
                        paymentField.value
                    ) || 0;


                if (!hasServiceItem) {

                    finalServiceCharge =
                        manualServiceCharge;

                }


                const itemTotal =
                    productTotal +
                    serviceItemTotal;

                const subtotal =
                    productTotal +
                    finalServiceCharge;


                const discountPercentage =
                    parseFloat(
                        document.getElementById(
                            'discount_percentage'
                        ).value
                    ) || 0;


                const discount =
                    subtotal *
                    discountPercentage /
                    100;


                //  FINAL AMOUNT

                const finalAmount =
                    subtotal -
                    discount;


                // DISPLAY
                document.getElementById(
                        'itemTotal'
                    ).value =
                    '₹' +
                    itemTotal.toFixed(2);


                document.getElementById(
                        'productTotal'
                    ).textContent =
                    productTotal.toFixed(2);


                document.getElementById(
                        'serviceTotal'
                    ).textContent =
                    finalServiceCharge.toFixed(2);


                document.getElementById(
                        'subtotal'
                    ).textContent =
                    subtotal.toFixed(2);


                document.getElementById(
                        'discountTotal'
                    ).textContent =
                    discount.toFixed(2);


                document.getElementById(
                        'grandTotal'
                    ).textContent =
                    finalAmount.toFixed(2);

            }


            // SAVE BUTTON
            document
                .getElementById('billingForm')
                .addEventListener('submit', function() {

                    const button =
                        document.getElementById(
                            'saveBillBtn'
                        );


                    button.disabled = true;


                    button.innerHTML =

                        '<span class="spinner-border spinner-border-sm me-1"></span>' +
                        ' Saving...';

                });

            // FIRST CALCULATION
            calculateBill();

        });
    </script>
@endsection