@extends('layouts.admin-simple')

@section('title', 'New Easy In Purchase')

@section('breadcrumb')
    <li class="breadcrumb-item">Warehouse</li>
    <li class="breadcrumb-item">Incoming Operations</li>
    <li class="breadcrumb-item"><a href="{{ route('warehouse.easy-in.index') }}">Easy In</a></li>
    <li class="breadcrumb-item active">New Purchase</li>
@endsection

@section('page-title')
    <div class="d-flex justify-content-between align-items-center w-100">
        <div class="page-title-left">
            <h3 class="mb-1">New Easy In Purchase</h3>
            <p class="text-muted mb-0" style="font-size: 13px;">Record purchase header details and add item rows below</p>
        </div>
        <div class="page-actions-right">
            <a href="{{ route('warehouse.easy-in.index') }}" class="btn btn-sm btn-outline-secondary">
                <i class="material-icons mr-1" style="font-size: 16px;">arrow_back</i> Back
            </a>
        </div>
    </div>
@endsection

@section('content')
    @if($errors->any())
        <div class="alert alert-danger">
            <strong>Please correct the highlighted fields.</strong>
        </div>
    @endif

    <form method="POST" action="{{ route('warehouse.easy-in.store') }}" id="easyInForm">
        @csrf

        <div class="card mb-3">
            <div class="card-header">
                <h6 class="mb-0"><i class="material-icons mr-2 align-middle">receipt_long</i>Purchase Header</h6>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-3">
                        <div class="form-group">
                            <label class="font-weight-bold">Supplier Name</label>
                            <input type="text" name="supplier_name" class="form-control @error('supplier_name') is-invalid @enderror"
                                   value="{{ old('supplier_name') }}" placeholder="Supplier / vendor name">
                            @error('supplier_name') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label class="font-weight-bold">Invoice Number</label>
                            <input type="text" name="invoice_number" class="form-control @error('invoice_number') is-invalid @enderror"
                                   value="{{ old('invoice_number') }}" placeholder="Bill / invoice number">
                            @error('invoice_number') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label class="font-weight-bold">LPO Number</label>
                            <input type="text" name="lpo_number" class="form-control @error('lpo_number') is-invalid @enderror"
                                   value="{{ old('lpo_number') }}" placeholder="LPO #">
                            @error('lpo_number') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label class="font-weight-bold">Date of Purchase <span class="text-danger">*</span></label>
                            <input type="date" name="purchase_date" class="form-control @error('purchase_date') is-invalid @enderror"
                                   value="{{ old('purchase_date', date('Y-m-d')) }}" required>
                            @error('purchase_date') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="card mb-3">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h6 class="mb-0"><i class="material-icons mr-2 align-middle">table_chart</i>Purchase Items</h6>
                <div class="font-weight-bold">Grand Total: AED <span id="grandTotal">0.00</span></div>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-sm mb-0 easy-lines-table">
                        <thead class="thead-light">
                            <tr>
                                <th style="min-width: 240px;">Item Description <span class="text-danger">*</span></th>
                                <th style="min-width: 120px;">Unit <span class="text-danger">*</span></th>
                                <th style="min-width: 120px;">Quantity <span class="text-danger">*</span></th>
                                <th style="min-width: 130px;">Unit Price</th>
                                <th style="min-width: 140px;">Total Amount</th>
                                <th style="min-width: 180px;">Division</th>
                                <th style="min-width: 220px;">Notes</th>
                                <th style="width: 64px;"></th>
                            </tr>
                        </thead>
                        <tbody id="purchaseRows"></tbody>
                    </table>
                </div>
            </div>
            <div class="card-footer d-flex justify-content-between align-items-center">
                <button type="button" class="btn btn-outline-primary" id="addRowBtn">
                    <i class="material-icons mr-1" style="font-size: 16px;">add</i> Add Row
                </button>
                <small class="text-muted">Each line will be saved as a purchase item under this header.</small>
            </div>
        </div>

        <div class="card">
            <div class="card-body text-center py-3">
                <button type="submit" class="btn btn-success mr-3">
                    <i class="material-icons mr-1" style="font-size: 16px;">save</i> Save Purchase
                </button>
                <a href="{{ route('warehouse.easy-in.index') }}" class="btn btn-outline-secondary">Cancel</a>
            </div>
        </div>
    </form>

    <template id="purchaseRowTemplate">
        <tr>
            <td>
                <input type="text" class="form-control form-control-sm" data-name="item_description" required placeholder="Item description">
            </td>
            <td>
                <select class="form-control form-control-sm" data-name="unit" required>
                    <option value="">Unit</option>
                    @foreach(['Pcs', 'Kg', 'Box', 'Meter', 'Set', 'Ltr', 'Bag', 'Roll'] as $unit)
                        <option value="{{ $unit }}">{{ $unit }}</option>
                    @endforeach
                </select>
            </td>
            <td>
                <input type="number" class="form-control form-control-sm line-quantity" data-name="quantity" step="0.01" min="0.01" required>
            </td>
            <td>
                <input type="number" class="form-control form-control-sm line-price" data-name="unit_price" step="0.01" min="0" value="0">
            </td>
            <td>
                <input type="text" class="form-control form-control-sm bg-light line-total" value="0.00" readonly>
            </td>
            <td>
                <select class="form-control form-control-sm" data-name="division_id">
                    <option value="">Select Division</option>
                    @foreach($divisions as $division)
                        <option value="{{ $division->id }}">{{ $division->division_name }}</option>
                    @endforeach
                </select>
            </td>
            <td>
                <input type="text" class="form-control form-control-sm" data-name="notes" placeholder="Notes">
            </td>
            <td class="text-center">
                <button type="button" class="btn btn-sm btn-outline-danger delete-row" title="Delete Row">
                    <i class="material-icons" style="font-size: 16px;">delete</i>
                </button>
            </td>
        </tr>
    </template>
@endsection

@push('styles')
<style>
    .easy-lines-table th,
    .easy-lines-table td { vertical-align: middle; }
    .easy-lines-table .form-control-sm { min-height: 34px; }
</style>
@endpush

@push('scripts')
<script>
$(function () {
    var rowIndex = 0;

    function refreshNames(row) {
        row.find('[data-name]').each(function () {
            $(this).attr('name', 'items[' + rowIndex + '][' + $(this).data('name') + ']');
        });
        rowIndex++;
    }

    function calculateRow(row) {
        var qty = parseFloat(row.find('.line-quantity').val()) || 0;
        var price = parseFloat(row.find('.line-price').val()) || 0;
        row.find('.line-total').val((qty * price).toFixed(2));
        calculateGrandTotal();
    }

    function calculateGrandTotal() {
        var total = 0;
        $('.line-total').each(function () {
            total += parseFloat($(this).val()) || 0;
        });
        $('#grandTotal').text(total.toFixed(2));
    }

    function addRow() {
        var row = $($('#purchaseRowTemplate').html());
        refreshNames(row);
        $('#purchaseRows').append(row);
        calculateRow(row);
    }

    $('#addRowBtn').on('click', addRow);

    $('#purchaseRows').on('input', '.line-quantity, .line-price', function () {
        calculateRow($(this).closest('tr'));
    });

    $('#purchaseRows').on('click', '.delete-row', function () {
        if ($('#purchaseRows tr').length > 1) {
            $(this).closest('tr').remove();
            calculateGrandTotal();
        }
    });

    addRow();
});
</script>
@endpush