@extends('layouts.app')

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

@section('content')

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

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

        <p class="text-muted mb-0">
            Update sale information and sold products
        </p>
    </div>

    <div class="d-flex gap-2">

        <a href="{{ route('sales.show', $sale) }}"
           class="btn btn-secondary">
            ← Back
        </a>

    </div>

</div>


{{-- Errors --}}
@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


{{-- Info --}}
<div class="alert alert-info">

    <strong>Sale:</strong>
    {{ $sale->sale_no }}

    <br>

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

</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', $sale->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', $sale->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',
                        optional($sale->sale_date)->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', $sale->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', $sale->payment_status) === 'Paid' ? 'selected' : '' }}>
                        Paid
                    </option>

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

                    <option value="Unpaid"
                        {{ old('payment_status', $sale->payment_status) === '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', $sale->notes) }}</textarea>

            </div>

        </div>

    </div>

</div>



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

<form
    action="{{ route('sales.update', $sale) }}"
    method="POST"
    id="saleForm"
>

    @csrf

    @method('PUT')


    <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">

                        @foreach($sale->items as $index => $item)

                            @php

                                $product = $item->product;

                                $currentStock = (float) ($product->current_stock ?? $product->opening_stock ?? 0);

                                /*
                                | Original sold quantity ko current stock me temporarily
                                | add kar rahe hain, taki same sale ki existing quantity
                                | ko edit karte waqt invalid na maana jaye.
                                */
                                $availableStock = $currentStock + (float) $item->qty;

                            @endphp

                            <tr
                                class="product-row"
                                data-original-product="{{ $item->product_id }}"
                                data-original-qty="{{ $item->qty }}"
                            >

                                <td>

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

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

                                        @foreach($products as $productOption)

                                            <option
                                                value="{{ $productOption->id }}"
                                                data-stock="{{ $productOption->current_stock ?? $productOption->opening_stock ?? 0 }}"
                                                data-mrp="{{ $productOption->mrp ?? 0 }}"
                                                data-selling="{{ $productOption->selling_price ?? 0 }}"
                                                data-gst="{{ $productOption->gst_rate ?? 0 }}"
                                                {{ $item->product_id == $productOption->id ? 'selected' : '' }}
                                            >

                                                {{ $productOption->name }}

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

                                            </option>

                                        @endforeach

                                    </select>

                                </td>


                                <td>

                                    <input
                                        type="text"
                                        class="form-control stock-display"
                                        value="{{ number_format($availableStock, 2, '.', '') }}"
                                        readonly
                                    >

                                </td>


                                <td>

                                    <input
                                        type="number"
                                        name="items[{{ $index }}][qty]"
                                        class="form-control qty-input"
                                        min="0.01"
                                        step="0.01"
                                        value="{{ old("items.$index.qty", $item->qty) }}"
                                        required
                                    >

                                </td>


                                <td>

                                    <input
                                        type="number"
                                        name="items[{{ $index }}][mrp]"
                                        class="form-control mrp-input"
                                        min="0"
                                        step="0.01"
                                        value="{{ old("items.$index.mrp", $item->mrp) }}"
                                    >

                                </td>


                                <td>

                                    <input
                                        type="number"
                                        name="items[{{ $index }}][selling_price]"
                                        class="form-control selling-input"
                                        min="0"
                                        step="0.01"
                                        value="{{ old("items.$index.selling_price", $item->selling_price) }}"
                                        required
                                    >

                                </td>


                                <td>

                                    <input
                                        type="number"
                                        name="items[{{ $index }}][gst_rate]"
                                        class="form-control gst-input"
                                        min="0"
                                        step="0.01"
                                        value="{{ old("items.$index.gst_rate", $item->gst_rate) }}"
                                    >

                                </td>


                                <td>

                                    <input
                                        type="number"
                                        class="form-control tax-display"
                                        value="{{ number_format((float) $item->tax_amount, 2, '.', '') }}"
                                        readonly
                                    >

                                </td>


                                <td>

                                    <input
                                        type="number"
                                        class="form-control line-total"
                                        value="{{ number_format((float) $item->line_total, 2, '.', '') }}"
                                        readonly
                                    >

                                </td>


                                <td class="text-center">

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

                                </td>

                            </tr>

                        @endforeach


                        {{-- Fallback if somehow sale has no items --}}
                        @if($sale->items->count() === 0)

                            <tr
                                class="product-row"
                                data-original-product=""
                                data-original-qty="0"
                            >

                                <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"
                                        value="0"
                                        min="0"
                                        step="0.01"
                                    >
                                </td>


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


                                <td>
                                    <input
                                        type="number"
                                        name="items[0][gst_rate]"
                                        class="form-control gst-input"
                                        value="0"
                                        min="0"
                                        step="0.01"
                                    >
                                </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>

                        @endif

                    </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', $sale->discount) }}"
                        >

                    </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"
                    >
                        Update 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');


    /*
    |--------------------------------------------------------------------------
    | Row Index
    |--------------------------------------------------------------------------
    */

    let rowIndex =
        document.querySelectorAll('.product-row').length;


    /*
    |--------------------------------------------------------------------------
    | Product Options
    |--------------------------------------------------------------------------
    */

    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

    `;


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

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

        return isNaN(n) ? 0 : n;
    }


    /*
    |--------------------------------------------------------------------------
    | Get Available Stock
    |--------------------------------------------------------------------------
    */

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

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

        if (!option || !option.value) {
            return 0;
        }

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


        /*
        |--------------------------------------------------------------------------
        | Existing sale item ki original quantity ko
        | wapas available stock me add karo.
        |--------------------------------------------------------------------------
        */

        const originalProduct =
            row.dataset.originalProduct;

        const originalQty =
            number(row.dataset.originalQty);


        if (
            originalProduct &&
            originalProduct == option.value
        ) {

            stock += originalQty;

        }


        return stock;
    }


    /*
    |--------------------------------------------------------------------------
    | 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
            );


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


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

        if (qty > stock) {

            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 =
            getAvailableStock(row);

        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.dataset.originalProduct = '';

            row.dataset.originalQty = '0';


            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 Rows
    |--------------------------------------------------------------------------
    */

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

            attachRowEvents(row);

            /*
            | Existing row ka stock already server side
            | calculate ho chuka hai.
            */

            calculateRow(row);

        });


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

    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