@extends('layouts.app')

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

@section('content')

<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h2 class="mb-1">Create Purchase</h2>
        <p class="text-muted mb-0">Add supplier and purchased products</p>
    </div>

    <a href="{{ route('purchases.index') }}" class="btn btn-secondary">
        ← Back to Purchases
    </a>
</div>

@include('partials.form-note')


{{-- 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
    action="{{ route('purchases.store') }}"
    method="POST"
    id="purchaseForm"
>

    @csrf


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

    <div class="card mb-4">

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

        <div class="card-body">

            <div class="row">

                {{-- Supplier --}}
                <div class="col-md-6 mb-3">

                    <label class="form-label">
                        Supplier
                        @include('partials.required')
                    </label>

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

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

                        @foreach($suppliers as $supplier)

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

                        @endforeach

                    </select>

                </div>


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

                    <label class="form-label">
                        Purchase Date
                        @include('partials.required')
                    </label>

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

                </div>


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

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

                    <input
                        type="date"
                        name="invoice_date"
                        class="form-control"
                        value="{{ old('invoice_date') }}"
                    >

                </div>


                {{-- Invoice Number --}}
                <div class="col-md-6 mb-3">

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

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

                </div>

            </div>

        </div>

    </div>



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

    <div class="card mb-4">

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

            <strong>Products</strong>

            <button
                type="button"
                id="addProduct"
                class="btn btn-success btn-sm"
            >
                + Add Product
            </button>

        </div>


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

            <div class="table-responsive">

                <table class="table table-bordered table-hover mb-0">

                    <thead class="table-light">

                        <tr>

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

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

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

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

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

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

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

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

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

                        </tr>

                    </thead>


                    <tbody id="productTable">

                        {{-- First Row --}}
                        <tr class="product-row">

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

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

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

                                    @foreach($products as $product)

                                        <option
                                            value="{{ $product->id }}"
                                            data-purchase="{{ $product->purchase_price }}"
                                            data-mrp="{{ $product->mrp }}"
                                            data-selling="{{ $product->selling_price }}"
                                            data-gst="{{ $product->gst_rate }}"
                                        >
                                            {{ $product->name }}
                                        </option>

                                    @endforeach

                                </select>

                            </td>


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

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

                            </td>


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

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

                            </td>


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

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

                            </td>


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

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

                            </td>


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

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

                            </td>


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

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

                            </td>


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

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

                            </td>


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

                                <button
                                    type="button"
                                    class="btn btn-danger btn-sm removeRow"
                                >
                                    ×
                                </button>

                            </td>

                        </tr>

                    </tbody>

                </table>

            </div>

        </div>

    </div>



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

    <div class="card mb-4">

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


        <div class="card-body">

            <div class="row">

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

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

                    <textarea
                        name="notes"
                        rows="5"
                        class="form-control"
                        placeholder="Enter purchase notes..."
                    >{{ old('notes') }}</textarea>

                </div>


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

                    <table class="table table-bordered">

                        <tr>

                            <th width="60%">
                                Subtotal
                            </th>

                            <td>

                                <input
                                    id="subtotal"
                                    type="text"
                                    class="form-control text-end"
                                    value="0.00"
                                    readonly
                                >

                            </td>

                        </tr>


                        <tr>

                            <th>
                                Discount
                            </th>

                            <td>

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

                            </td>

                        </tr>


                        <tr>

                            <th>
                                GST
                            </th>

                            <td>

                                <input
                                    id="gstTotal"
                                    type="text"
                                    class="form-control text-end"
                                    value="0.00"
                                    readonly
                                >

                            </td>

                        </tr>


                        <tr class="table-success">

                            <th>
                                Grand Total
                            </th>

                            <td>

                                <input
                                    id="grandTotal"
                                    type="text"
                                    class="form-control fw-bold text-end"
                                    value="0.00"
                                    readonly
                                >

                            </td>

                        </tr>

                    </table>

                </div>

            </div>

        </div>


        {{-- Footer --}}
        <div class="card-footer text-end">

            <a
                href="{{ route('purchases.index') }}"
                class="btn btn-secondary me-2"
            >
                Cancel
            </a>

            <button
                type="submit"
                class="btn btn-primary"
            >
                Save Purchase
            </button>

        </div>

    </div>

</form>

@endsection


@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const table = document.getElementById('productTable');
    const addButton = document.getElementById('addProduct');
    const discountInput = document.getElementById('discount');

    if (!table || !addButton) return;

    const num = (el) => {
        const n = parseFloat(el?.value);
        return Number.isFinite(n) ? n : 0;
    };

    const money = (n) => Number(n).toFixed(2);

    function calculateRow(row) {
        const qty = num(row.querySelector('.qty'));
        const purchase = num(row.querySelector('.purchasePrice'));
        const gstRate = num(row.querySelector('.gstRate'));

        const subtotal = qty * purchase;
        const gst = subtotal * gstRate / 100;
        const total = subtotal + gst;

        const totalInput = row.querySelector('.lineTotal');
        if (totalInput) totalInput.value = money(total);

        return { subtotal, gst };
    }

    function calculatePurchase() {
        let subtotal = 0;
        let gstTotal = 0;

        table.querySelectorAll('.product-row').forEach(row => {
            const result = calculateRow(row);
            subtotal += result.subtotal;
            gstTotal += result.gst;
        });

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

        document.getElementById('subtotal').value = money(subtotal);
        document.getElementById('gstTotal').value = money(gstTotal);
        document.getElementById('grandTotal').value = money(grandTotal);
    }

    function fillProductData(row) {
        const product = row.querySelector('.product');
        const option = product?.options[product.selectedIndex];

        if (!option || !option.value) {
            row.querySelector('.purchasePrice').value = '';
            row.querySelector('.mrp').value = '';
            row.querySelector('.sellingPrice').value = '';
            row.querySelector('.gstRate').value = '0';
            calculatePurchase();
            return;
        }

        row.querySelector('.purchasePrice').value = option.dataset.purchase || '';
        row.querySelector('.mrp').value = option.dataset.mrp || '';
        row.querySelector('.sellingPrice').value = option.dataset.selling || '';
        row.querySelector('.gstRate').value = option.dataset.gst || '0';

        calculatePurchase();
    }

    function updateNames() {
        table.querySelectorAll('.product-row').forEach((row, index) => {
            row.querySelector('.product').name = `items[${index}][product_id]`;
            row.querySelector('.qty').name = `items[${index}][qty]`;
            row.querySelector('.freeQty').name = `items[${index}][free_qty]`;
            row.querySelector('.purchasePrice').name = `items[${index}][purchase_price]`;
            row.querySelector('.mrp').name = `items[${index}][mrp]`;
            row.querySelector('.sellingPrice').name = `items[${index}][selling_price]`;
            row.querySelector('.gstRate').name = `items[${index}][gst_rate]`;
        });
    }

    function isDuplicate(select) {
        if (!select.value) return false;

        return [...table.querySelectorAll('.product')]
            .some(other => other !== select && other.value === select.value);
    }

    addButton.addEventListener('click', function () {
        const firstRow = table.querySelector('.product-row');
        if (!firstRow) return;

        const row = firstRow.cloneNode(true);

        row.querySelector('.product').selectedIndex = 0;
        row.querySelector('.qty').value = '1';
        row.querySelector('.freeQty').value = '0';
        row.querySelector('.purchasePrice').value = '';
        row.querySelector('.mrp').value = '';
        row.querySelector('.sellingPrice').value = '';
        row.querySelector('.gstRate').value = '0';
        row.querySelector('.lineTotal').value = '0.00';

        table.appendChild(row);
        updateNames();
        calculatePurchase();
        row.querySelector('.product').focus();
    });

    table.addEventListener('change', function (e) {
        const target = e.target;
        const row = target.closest('.product-row');

        if (target.classList.contains('product')) {
            if (isDuplicate(target)) {
                alert('This product is already added. Please select another product.');
                target.value = '';
            }
            fillProductData(row);
            return;
        }

        if (row) calculatePurchase();
    });

    table.addEventListener('input', function (e) {
        const target = e.target;

        if (
            target.classList.contains('qty') ||
            target.classList.contains('freeQty') ||
            target.classList.contains('purchasePrice') ||
            target.classList.contains('mrp') ||
            target.classList.contains('sellingPrice') ||
            target.classList.contains('gstRate')
        ) {
            calculatePurchase();
        }
    });

    table.addEventListener('click', function (e) {
        const button = e.target.closest('.removeRow');
        if (!button) return;

        const rows = table.querySelectorAll('.product-row');
        const row = button.closest('.product-row');

        if (rows.length === 1) {
            row.querySelector('.product').selectedIndex = 0;
            row.querySelector('.qty').value = '1';
            row.querySelector('.freeQty').value = '0';
            row.querySelector('.purchasePrice').value = '';
            row.querySelector('.mrp').value = '';
            row.querySelector('.sellingPrice').value = '';
            row.querySelector('.gstRate').value = '0';
        } else {
            row.remove();
        }

        updateNames();
        calculatePurchase();
    });

    if (discountInput) {
        discountInput.addEventListener('input', calculatePurchase);
        discountInput.addEventListener('change', calculatePurchase);
    }

    updateNames();
    calculatePurchase();
});
</script>
@endpush