@extends('layouts.app')

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

@section('content')

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

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

        <div class="text-muted">
            {{ $purchase->purchase_no }}
        </div>
    </div>

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

</div>


{{-- Validation 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


<form
    method="POST"
    action="{{ route('purchases.update', $purchase) }}"
    id="purchaseForm"
>

    @csrf
    @method('PUT')


    {{-- ========================================================= --}}
    {{-- PURCHASE INFORMATION --}}
    {{-- ========================================================= --}}

    <div class="card mb-4">

        <div class="card-header">
            <strong>Purchase Information</strong>
        </div>

        <div class="card-body">

            <div class="row g-3">


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

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

                    <select
                        name="supplier_id"
                        class="form-select"
                        required
                    >

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

                        @foreach ($suppliers as $supplier)

                            <option
                                value="{{ $supplier->id }}"
                                {{ old('supplier_id', $purchase->supplier_id) == $supplier->id ? 'selected' : '' }}
                            >
                                {{ $supplier->company_name }}
                            </option>

                        @endforeach

                    </select>

                </div>


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

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

                    <input
                        type="date"
                        name="purchase_date"
                        class="form-control"
                        value="{{ old('purchase_date', optional($purchase->purchase_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"
                        class="form-control"
                        value="{{ old('invoice_no', $purchase->invoice_no) }}"
                        placeholder="Enter invoice number"
                    >

                </div>


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

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

                    <input
                        type="date"
                        name="invoice_date"
                        class="form-control"
                        value="{{ old('invoice_date', optional($purchase->invoice_date)->format('Y-m-d')) }}"
                    >

                </div>


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

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

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

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

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

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

                    </select>

                </div>


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

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

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

                </div>

            </div>

        </div>

    </div>



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

    <div class="card mb-4">

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

            <strong>Purchased Products</strong>

            <button
                type="button"
                class="btn btn-primary"
                id="addItemBtn"
            >
                + Add Product
            </button>

        </div>


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

            <div class="table-responsive">

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

                    <thead class="table-light">

                        <tr>

                            <th style="width:45px;">#</th>

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

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

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

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

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

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

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

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

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

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

                        </tr>

                    </thead>


                    <tbody id="itemsBody">

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

                            <tr class="item-row">

                                {{-- Number --}}
                                <td class="row-number">
                                    {{ $index + 1 }}
                                </td>


                                {{-- Product --}}
                                <td>

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

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

                                        @foreach ($products as $product)

                                            <option
                                                value="{{ $product->id }}"
                                                data-purchase-price="{{ $product->purchase_price }}"
                                                data-mrp="{{ $product->mrp }}"
                                                data-selling-price="{{ $product->selling_price }}"
                                                data-gst="{{ $product->gst_rate }}"
                                                {{ $item->product_id == $product->id ? 'selected' : '' }}
                                            >

                                                {{ $product->name }}

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

                                            </option>

                                        @endforeach

                                    </select>

                                </td>


                                {{-- Qty --}}
                                <td>

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

                                </td>


                                {{-- Free Qty --}}
                                <td>

                                    <input
                                        type="number"
                                        step="0.01"
                                        min="0"
                                        name="items[{{ $index }}][free_qty]"
                                        class="form-control free-qty"
                                        value="{{ $item->free_quantity ?? 0 }}"
                                    >

                                </td>


                                {{-- Purchase Price --}}
                                <td>

                                    <input
                                        type="number"
                                        step="0.01"
                                        min="0"
                                        name="items[{{ $index }}][purchase_price]"
                                        class="form-control purchase-price"
                                        value="{{ $item->purchase_price }}"
                                        required
                                    >

                                </td>


                                {{-- MRP --}}
                                <td>

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

                                </td>


                                {{-- Selling Price --}}
                                <td>

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

                                </td>


                                {{-- GST --}}
                                <td>

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

                                </td>


                                {{-- Tax Amount --}}
                                <td>

                                    <input
                                        type="text"
                                        class="form-control tax-amount"
                                        value="0.00"
                                        readonly
                                    >

                                </td>


                                {{-- Line Total --}}
                                <td>

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

                                </td>


                                {{-- Remove --}}
                                <td class="text-center">

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

                                </td>

                            </tr>

                        @endforeach

                    </tbody>

                </table>

            </div>

        </div>

    </div>



    {{-- ========================================================= --}}
    {{-- PURCHASE SUMMARY --}}
    {{-- ========================================================= --}}

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

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

            <div class="card">

                <div class="card-header">
                    <strong>Purchase Summary</strong>
                </div>

                <div class="card-body">


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

                        <span>
                            Subtotal
                        </span>

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

                    </div>


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

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

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

                    </div>


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

                        <span>
                            GST Total
                        </span>

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

                    </div>


                    <hr>


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

                        <strong class="fs-5">
                            Grand Total
                        </strong>

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

                    </div>

                </div>

            </div>

        </div>

    </div>



    {{-- ========================================================= --}}
    {{-- BUTTONS --}}
    {{-- ========================================================= --}}

    <div class="d-flex justify-content-end gap-2 mt-4 mb-5">

        <a
            href="{{ route('purchases.show', $purchase) }}"
            class="btn btn-secondary"
        >
            Cancel
        </a>

        <button
            type="submit"
            class="btn btn-success"
        >
            Update Purchase
        </button>

    </div>

</form>



{{-- ============================================================= --}}
{{-- JAVASCRIPT --}}
{{-- ============================================================= --}}

<script>

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


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


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


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


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

    const products = @json($products);


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

    function getProductOptions() {

        let html = `
            <option value="">
                Select Product
            </option>
        `;


        products.forEach(function (product) {

            html += `
                <option
                    value="${product.id}"
                    data-purchase-price="${product.purchase_price ?? 0}"
                    data-mrp="${product.mrp ?? 0}"
                    data-selling-price="${product.selling_price ?? 0}"
                    data-gst="${product.gst_rate ?? 0}"
                >
                    ${product.name}
                    ${product.sku ? ' — ' + product.sku : ''}
                </option>
            `;

        });


        return html;

    }



    /*
    |--------------------------------------------------------------------------
    | Fill Product Prices
    |--------------------------------------------------------------------------
    */

    function fillProductData(row) {

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


        if (!select) {
            return;
        }


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


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

            row.querySelector('.purchase-price').value = 0;

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

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

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

            calculateTotals();

            return;
        }


        const purchasePrice =
            parseFloat(
                option.dataset.purchasePrice
            ) || 0;


        const mrp =
            parseFloat(
                option.dataset.mrp
            ) || 0;


        const sellingPrice =
            parseFloat(
                option.dataset.sellingPrice
            ) || 0;


        const gstRate =
            parseFloat(
                option.dataset.gst
            ) || 0;


        row.querySelector('.purchase-price').value =
            purchasePrice.toFixed(2);


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


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


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


        calculateTotals();

    }



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

    itemsBody.addEventListener(
        'change',
        function (event) {

            if (
                event.target.classList.contains(
                    'product-select'
                )
            ) {

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


                fillProductData(row);

            }

        }
    );



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

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

            const index =
                itemsBody.querySelectorAll(
                    '.item-row'
                ).length;


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


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


            row.innerHTML = `

                <td class="row-number">
                    ${index + 1}
                </td>


                <td>

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

                        ${getProductOptions()}

                    </select>

                </td>


                <td>

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

                </td>


                <td>

                    <input
                        type="number"
                        step="0.01"
                        min="0"
                        name="items[${index}][free_qty]"
                        class="form-control free-qty"
                        value="0"
                    >

                </td>


                <td>

                    <input
                        type="number"
                        step="0.01"
                        min="0"
                        name="items[${index}][purchase_price]"
                        class="form-control purchase-price"
                        value="0"
                        required
                    >

                </td>


                <td>

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

                </td>


                <td>

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

                </td>


                <td>

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

                </td>


                <td>

                    <input
                        type="text"
                        class="form-control tax-amount"
                        value="0.00"
                        readonly
                    >

                </td>


                <td>

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

                </td>


                <td class="text-center">

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

                </td>

            `;


            itemsBody.appendChild(row);


            updateNumbers();

            calculateTotals();

        }
    );



    /*
    |--------------------------------------------------------------------------
    | Remove Product
    |--------------------------------------------------------------------------
    */

    itemsBody.addEventListener(
        'click',
        function (event) {

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


            if (!button) {
                return;
            }


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


            if (rows.length <= 1) {

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

                return;

            }


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


            reindexRows();

            updateNumbers();

            calculateTotals();

        }
    );



    /*
    |--------------------------------------------------------------------------
    | Reindex Rows
    |--------------------------------------------------------------------------
    */

    function reindexRows() {

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


        rows.forEach(
            function (row, index) {

                row.querySelector(
                    '.product-select'
                ).name =
                    `items[${index}][product_id]`;


                row.querySelector(
                    '.qty'
                ).name =
                    `items[${index}][qty]`;


                row.querySelector(
                    '.free-qty'
                ).name =
                    `items[${index}][free_qty]`;


                row.querySelector(
                    '.purchase-price'
                ).name =
                    `items[${index}][purchase_price]`;


                row.querySelector(
                    '.mrp'
                ).name =
                    `items[${index}][mrp]`;


                row.querySelector(
                    '.selling-price'
                ).name =
                    `items[${index}][selling_price]`;


                row.querySelector(
                    '.gst-rate'
                ).name =
                    `items[${index}][gst_rate]`;

            }
        );

    }



    /*
    |--------------------------------------------------------------------------
    | Row Numbers
    |--------------------------------------------------------------------------
    */

    function updateNumbers() {

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


        rows.forEach(
            function (row, index) {

                row.querySelector(
                    '.row-number'
                ).textContent =
                    index + 1;

            }
        );

    }



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

    function calculateRow(row) {

        const qty =
            parseFloat(
                row.querySelector('.qty').value
            ) || 0;


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


        const gstRate =
            parseFloat(
                row.querySelector('.gst-rate').value
            ) || 0;


        const subtotal =
            qty * purchasePrice;


        const tax =
            subtotal * gstRate / 100;


        const lineTotal =
            subtotal + tax;


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


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


        return {

            subtotal: subtotal,

            tax: tax,

            total: lineTotal

        };

    }



    /*
    |--------------------------------------------------------------------------
    | Calculate All Totals
    |--------------------------------------------------------------------------
    */

    function calculateTotals() {

        let subtotal = 0;

        let gstTotal = 0;


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


        rows.forEach(
            function (row) {

                const result =
                    calculateRow(row);


                subtotal +=
                    result.subtotal;


                gstTotal +=
                    result.tax;

            }
        );


        const discount =
            parseFloat(
                discountInput.value
            ) || 0;


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


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


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


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

    }



    /*
    |--------------------------------------------------------------------------
    | Input Event
    |--------------------------------------------------------------------------
    */

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

            if (

                event.target.classList.contains(
                    'qty'
                ) ||

                event.target.classList.contains(
                    'purchase-price'
                ) ||

                event.target.classList.contains(
                    'gst-rate'
                )

            ) {

                calculateTotals();

            }

        }
    );



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

    discountInput.addEventListener(
        'input',
        calculateTotals
    );



    /*
    |--------------------------------------------------------------------------
    | Initial Calculation
    |--------------------------------------------------------------------------
    */

    calculateTotals();


});

</script>

@endsection