@extends('layouts.app')

@section('title', 'Create Sale')

@section('content')

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

    <div>
        <h2 class="mb-1">Create Sale</h2>

        <p class="text-muted mb-0">
            Add customer and sold products
        </p>
    </div>

    <a href="{{ route('sales.index') }}"
       class="btn btn-secondary">

        ← Back to Sales

    </a>

</div>


@if($errors->any())

    <div class="alert alert-danger">

        <strong>Please fix the following errors:</strong>

        <ul class="mb-0 mt-2">

            @foreach($errors->all() as $error)

                <li>{{ $error }}</li>

            @endforeach

        </ul>

    </div>

@endif


<div class="alert alert-info">

    <strong>Note:</strong>
    Fields marked with <span class="text-danger">*</span>
    are mandatory.

</div>


{{-- ========================================================= --}}
{{-- SALE INFORMATION --}}
{{-- ========================================================= --}}

<div class="card shadow-sm mb-4">

    <div class="card-header">

        <strong>Sale Information</strong>

    </div>

    <div class="card-body">

        <div class="row g-3">

            {{-- Customer Name --}}
            <div class="col-md-4">

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

                <input
                    type="text"
                    name="customer_name"
                    id="customer_name"
                    form="saleForm"
                    class="form-control"
                    placeholder="Walk-in Customer"
                    value="{{ old('customer_name') }}"
                >

            </div>


            {{-- Customer Phone --}}
            <div class="col-md-4">

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

                <input
                    type="text"
                    name="customer_phone"
                    id="customer_phone"
                    form="saleForm"
                    class="form-control"
                    placeholder="Enter phone number"
                    value="{{ old('customer_phone') }}"
                >

            </div>


            {{-- Sale Date --}}
            <div class="col-md-4">

                <label class="form-label">
                    Sale Date <span class="text-danger">*</span>
                </label>

                <input
                    type="date"
                    name="sale_date"
                    form="saleForm"
                    class="form-control"
                    value="{{ old('sale_date', now()->format('Y-m-d')) }}"
                    required
                >

            </div>


            {{-- Invoice Number --}}
            <div class="col-md-4">

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

                <input
                    type="text"
                    name="invoice_no"
                    form="saleForm"
                    class="form-control"
                    placeholder="Enter invoice number"
                    value="{{ old('invoice_no') }}"
                >

            </div>


            {{-- Payment Status --}}
            <div class="col-md-4">

                <label class="form-label">
                    Payment Status <span class="text-danger">*</span>
                </label>

                <select
                    name="payment_status"
                    form="saleForm"
                    class="form-select"
                    required
                >

                    <option value="Paid"
                        {{ old('payment_status') === 'Paid' ? 'selected' : '' }}>
                        Paid
                    </option>

                    <option value="Partial"
                        {{ old('payment_status') === 'Partial' ? 'selected' : '' }}>
                        Partial
                    </option>

                    <option value="Unpaid"
                        {{ old('payment_status', 'Unpaid') === 'Unpaid' ? 'selected' : '' }}>
                        Unpaid
                    </option>

                </select>

            </div>


            {{-- Notes --}}
            <div class="col-md-4">

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

                <textarea
                    name="notes"
                    form="saleForm"
                    class="form-control"
                    rows="1"
                    placeholder="Optional notes"
                >{{ old('notes') }}</textarea>

            </div>

        </div>

    </div>

</div>



{{-- ========================================================= --}}
{{-- PRODUCTS --}}
{{-- ========================================================= --}}

<form
    action="{{ route('sales.store') }}"
    method="POST"
    id="saleForm"
>

    @csrf


    <div class="card shadow-sm mb-4">

        <div class="card-header d-flex justify-content-between align-items-center">

            <strong>
                Products
            </strong>

            <button
                type="button"
                class="btn btn-success btn-sm"
                id="addProductBtn"
            >

                + Add Product

            </button>

        </div>


        <div class="card-body p-0">

            <div class="table-responsive">

                <table class="table table-bordered align-middle mb-0">

                    <thead class="table-light">

                        <tr>

                            <th style="min-width:240px;">
                                Product
                            </th>

                            <th style="width:100px;">
                                Stock
                            </th>

                            <th style="width:100px;">
                                Qty
                            </th>

                            <th style="width:130px;">
                                MRP
                            </th>

                            <th style="width:140px;">
                                Selling
                            </th>

                            <th style="width:110px;">
                                GST %
                            </th>

                            <th style="width:130px;">
                                Tax
                            </th>

                            <th style="width:140px;">
                                Total
                            </th>

                            <th style="width:70px;">
                                Action
                            </th>

                        </tr>

                    </thead>


                    <tbody id="productRows">

                        {{-- First Product Row --}}

                        <tr class="product-row">

                            <td>

                                <select
                                    name="items[0][product_id]"
                                    class="form-select product-select"
                                    required
                                >

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

                                    @foreach($products as $product)

                                        <option
                                            value="{{ $product->id }}"
                                            data-stock="{{ $product->current_stock ?? $product->opening_stock ?? 0 }}"
                                            data-mrp="{{ $product->mrp ?? 0 }}"
                                            data-selling="{{ $product->selling_price ?? 0 }}"
                                            data-gst="{{ $product->gst_rate ?? 0 }}"
                                        >

                                            {{ $product->name }}
                                            @if($product->sku)
                                                — {{ $product->sku }}
                                            @endif

                                        </option>

                                    @endforeach

                                </select>

                            </td>


                            <td>

                                <input
                                    type="text"
                                    class="form-control stock-display"
                                    value="0.00"
                                    readonly
                                >

                            </td>


                            <td>

                                <input
                                    type="number"
                                    name="items[0][qty]"
                                    class="form-control qty-input"
                                    min="0.01"
                                    step="0.01"
                                    value="1"
                                    required
                                >

                            </td>


                            <td>

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

                            </td>


                            <td>

                                <input
                                    type="number"
                                    name="items[0][selling_price]"
                                    class="form-control selling-input"
                                    min="0"
                                    step="0.01"
                                    value="0"
                                    required
                                >

                            </td>


                            <td>

                                <input
                                    type="number"
                                    name="items[0][gst_rate]"
                                    class="form-control gst-input"
                                    min="0"
                                    step="0.01"
                                    value="0"
                                >

                            </td>


                            <td>

                                <input
                                    type="number"
                                    class="form-control tax-display"
                                    value="0.00"
                                    readonly
                                >

                            </td>


                            <td>

                                <input
                                    type="number"
                                    class="form-control line-total"
                                    value="0.00"
                                    readonly
                                >

                            </td>


                            <td class="text-center">

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

                                    ×

                                </button>

                            </td>

                        </tr>

                    </tbody>

                </table>

            </div>

        </div>

    </div>



    {{-- ========================================================= --}}
    {{-- SALE SUMMARY --}}
    {{-- ========================================================= --}}

    <div class="row justify-content-end">

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

            <div class="card shadow-sm">

                <div class="card-header">

                    <strong>
                        Sale Summary
                    </strong>

                </div>


                <div class="card-body">

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

                        <span>
                            Subtotal
                        </span>

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

                    </div>


                    {{-- Discount --}}
                    <div class="mb-3">

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

                        <input
                            type="number"
                            name="discount"
                            id="discount"
                            form="saleForm"
                            class="form-control"
                            min="0"
                            step="0.01"
                            value="{{ old('discount', 0) }}"
                        >

                    </div>


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

                        <span>
                            GST Total
                        </span>

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

                    </div>


                    <hr>


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

                        <h5 class="mb-0">
                            Grand Total
                        </h5>

                        <h5 class="mb-0">
                            ₹<span id="grandTotal">0.00</span>
                        </h5>

                    </div>


                    <button
                        type="submit"
                        class="btn btn-primary w-100 mt-4"
                    >

                        Save Sale

                    </button>

                </div>

            </div>

        </div>

    </div>

</form>



@push('scripts')

<script>

document.addEventListener('DOMContentLoaded', function () {

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

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

    const discountInput =
        document.getElementById('discount');


    let rowIndex = 1;


    /*
    |--------------------------------------------------------------------------
    | Product Data
    |--------------------------------------------------------------------------
    */

    const productOptions = `
        <option value="">Select Product</option>

        @foreach($products as $product)

            <option
                value="{{ $product->id }}"
                data-stock="{{ $product->current_stock ?? $product->opening_stock ?? 0 }}"
                data-mrp="{{ $product->mrp ?? 0 }}"
                data-selling="{{ $product->selling_price ?? 0 }}"
                data-gst="{{ $product->gst_rate ?? 0 }}"
            >

                {{ addslashes($product->name) }}
                @if($product->sku)
                    — {{ addslashes($product->sku) }}
                @endif

            </option>

        @endforeach
    `;


    /*
    |--------------------------------------------------------------------------
    | Format Number
    |--------------------------------------------------------------------------
    */

    function number(value)
    {
        const n = parseFloat(value);

        return isNaN(n)
            ? 0
            : n;
    }


    /*
    |--------------------------------------------------------------------------
    | Calculate Row
    |--------------------------------------------------------------------------
    */

    function calculateRow(row)
    {
        const qty =
            number(
                row.querySelector('.qty-input').value
            );

        const selling =
            number(
                row.querySelector('.selling-input').value
            );

        const gst =
            number(
                row.querySelector('.gst-input').value
            );

        const stock =
            number(
                row.querySelector('.stock-display').value
            );


        /*
        |--------------------------------------------------------------------------
        | Stock Warning
        |--------------------------------------------------------------------------
        */

        const qtyInput =
            row.querySelector('.qty-input');


        if (qty > stock && stock >= 0) {

            qtyInput.classList.add(
                'is-invalid'
            );

        } else {

            qtyInput.classList.remove(
                'is-invalid'
            );
        }


        /*
        |--------------------------------------------------------------------------
        | Tax
        |--------------------------------------------------------------------------
        */

        const subtotal =
            qty * selling;

        const tax =
            subtotal * gst / 100;

        const total =
            subtotal + tax;


        row.querySelector('.tax-display').value =
            tax.toFixed(2);

        row.querySelector('.line-total').value =
            total.toFixed(2);


        calculateSummary();
    }


    /*
    |--------------------------------------------------------------------------
    | Calculate Summary
    |--------------------------------------------------------------------------
    */

    function calculateSummary()
    {
        let subtotal = 0;

        let gstTotal = 0;


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

                const qty =
                    number(
                        row.querySelector(
                            '.qty-input'
                        ).value
                    );

                const selling =
                    number(
                        row.querySelector(
                            '.selling-input'
                        ).value
                    );

                const gst =
                    number(
                        row.querySelector(
                            '.gst-input'
                        ).value
                    );


                const rowSubtotal =
                    qty * selling;

                const rowTax =
                    rowSubtotal * gst / 100;


                subtotal += rowSubtotal;

                gstTotal += rowTax;
            });


        const discount =
            number(
                discountInput.value
            );


        const grandTotal =
            Math.max(
                0,
                subtotal -
                discount +
                gstTotal
            );


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


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


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


    /*
    |--------------------------------------------------------------------------
    | Product Selection
    |--------------------------------------------------------------------------
    */

    function handleProductChange(row)
    {
        const select =
            row.querySelector(
                '.product-select'
            );

        const option =
            select.options[
                select.selectedIndex
            ];


        if (!option || !option.value) {

            row.querySelector(
                '.stock-display'
            ).value = '0.00';

            row.querySelector(
                '.mrp-input'
            ).value = '0';

            row.querySelector(
                '.selling-input'
            ).value = '0';

            row.querySelector(
                '.gst-input'
            ).value = '0';

            calculateRow(row);

            return;
        }


        const stock =
            number(
                option.dataset.stock
            );

        const mrp =
            number(
                option.dataset.mrp
            );

        const selling =
            number(
                option.dataset.selling
            );

        const gst =
            number(
                option.dataset.gst
            );


        row.querySelector(
            '.stock-display'
        ).value =
            stock.toFixed(2);


        row.querySelector(
            '.mrp-input'
        ).value =
            mrp.toFixed(2);


        row.querySelector(
            '.selling-input'
        ).value =
            selling.toFixed(2);


        row.querySelector(
            '.gst-input'
        ).value =
            gst.toFixed(2);


        calculateRow(row);
    }


    /*
    |--------------------------------------------------------------------------
    | Add Product
    |--------------------------------------------------------------------------
    */

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

            const row =
                document.createElement('tr');

            row.classList.add(
                'product-row'
            );


            row.innerHTML = `

                <td>

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

                        ${productOptions}

                    </select>

                </td>


                <td>

                    <input
                        type="text"
                        class="form-control stock-display"
                        value="0.00"
                        readonly
                    >

                </td>


                <td>

                    <input
                        type="number"
                        name="items[${rowIndex}][qty]"
                        class="form-control qty-input"
                        min="0.01"
                        step="0.01"
                        value="1"
                        required
                    >

                </td>


                <td>

                    <input
                        type="number"
                        name="items[${rowIndex}][mrp]"
                        class="form-control mrp-input"
                        min="0"
                        step="0.01"
                        value="0"
                    >

                </td>


                <td>

                    <input
                        type="number"
                        name="items[${rowIndex}][selling_price]"
                        class="form-control selling-input"
                        min="0"
                        step="0.01"
                        value="0"
                        required
                    >

                </td>


                <td>

                    <input
                        type="number"
                        name="items[${rowIndex}][gst_rate]"
                        class="form-control gst-input"
                        min="0"
                        step="0.01"
                        value="0"
                    >

                </td>


                <td>

                    <input
                        type="number"
                        class="form-control tax-display"
                        value="0.00"
                        readonly
                    >

                </td>


                <td>

                    <input
                        type="number"
                        class="form-control line-total"
                        value="0.00"
                        readonly
                    >

                </td>


                <td class="text-center">

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

                        ×

                    </button>

                </td>

            `;


            productRows.appendChild(row);

            rowIndex++;

            attachRowEvents(row);

            calculateRow(row);
        }
    );


    /*
    |--------------------------------------------------------------------------
    | Attach Row Events
    |--------------------------------------------------------------------------
    */

    function attachRowEvents(row)
    {
        row.querySelector(
            '.product-select'
        ).addEventListener(
            'change',
            function () {

                handleProductChange(row);
            }
        );


        row.querySelector(
            '.qty-input'
        ).addEventListener(
            'input',
            function () {

                calculateRow(row);
            }
        );


        row.querySelector(
            '.selling-input'
        ).addEventListener(
            'input',
            function () {

                calculateRow(row);
            }
        );


        row.querySelector(
            '.gst-input'
        ).addEventListener(
            'input',
            function () {

                calculateRow(row);
            }
        );


        row.querySelector(
            '.remove-row'
        ).addEventListener(
            'click',
            function () {

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


                if (rows.length <= 1) {

                    alert(
                        'At least one product is required.'
                    );

                    return;
                }


                row.remove();

                calculateSummary();
            }
        );
    }


    /*
    |--------------------------------------------------------------------------
    | Initial Row
    |--------------------------------------------------------------------------
    */

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

            attachRowEvents(row);

            calculateRow(row);
        });


    /*
    |--------------------------------------------------------------------------
    | Discount Change
    |--------------------------------------------------------------------------
    */

    discountInput.addEventListener(
        'input',
        calculateSummary
    );


    /*
    |--------------------------------------------------------------------------
    | Form Submit Stock Check
    |--------------------------------------------------------------------------
    */

    document
        .getElementById('saleForm')
        .addEventListener(
            'submit',
            function (event) {

                let valid = true;


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

                        const stock =
                            number(
                                row.querySelector(
                                    '.stock-display'
                                ).value
                            );

                        const qty =
                            number(
                                row.querySelector(
                                    '.qty-input'
                                ).value
                            );


                        if (qty > stock) {

                            valid = false;

                            row.querySelector(
                                '.qty-input'
                            ).classList.add(
                                'is-invalid'
                            );
                        }

                    });


                if (!valid) {

                    event.preventDefault();

                    alert(
                        'Sale quantity cannot be greater than available stock.'
                    );

                }

            }
        );

});

</script>

@endpush

@endsection