@extends('layouts.admin.base-dashboard')

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

@section('content')
@include('layouts.admin.include.message')

<div class="card">
    <form action="{{ route('purchase-orders.store') }}" method="POST"
        class="form-horizontal needs-validation">
        @csrf

        <h5 class="card-header">Create Purchase Order</h5>
        <div class="card-body">
            <div class="form-body">
                <div class="form-group row @error('order_date') has-error @enderror">
                    <label class="control-label text-right col-md-3">Order Date</label>
                    <div class="col-md-5">
                        <input type="text" name="order_date"
                            class="form-control order_date @error('order_date') has-error @enderror" autocomplete="order_date"
                            value="{{ old('order_date', date('Y-m-d')) }}">

                        @error('order_date')
                            <div class="text-danger">
                                <small>{{ $message }}</small>
                            </div>
                        @enderror
                    </div>
                </div>

                <div class="form-group row @error('notes') has-error @enderror">
                    <label class="control-label text-right col-md-3">Notes</label>
                    <div class="col-md-5">
                        <input type="text" name="notes"
                            class="form-control notes @error('notes') has-error @enderror" autocomplete="notes"
                            value="{{ old('notes') }}">

                        @error('notes')
                            <div class="text-danger">
                                <small>{{ $message }}</small>
                            </div>
                        @enderror
                    </div>
                </div>

                <div class="form-group row @error('purchase_order') is-invalid @enderror">
                    <div class="col-md-12">
                        <button type="button" id="add_purchase_order" class="addCF btn btn-success mb-4">
                            Add New
                        </button>
                        <div class="table-scrollable form-body">
                            <table class="table table-bordered table-striped table-hover purchase_order_table">
                                <thead>
                                    <tr>
                                        <th>No</th>
                                        <th>Product Name</th>
                                        <th>Qty</th>
                                        <th>Unit Price</th>
                                        <th>Total Amount</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td class="table-no">
                                            1
                                            <input type="hidden" class="increment_number" value="1">
                                        </td>
                                        <td>
                                            <select name="purchaseOrderInput[0][product_id]" id="product_id"
                                                class="form-control product_id choose-product-id" required>
                                                <option value="">-- Choose Product --</option>
                                                @foreach ($products as $product)
                                                    <option value="{{ $product->id }}"
                                                            data-price="{{ $product->price }}"
                                                            data-toggle="tooltip"
                                                            title="{{ $product->description }}">
                                                        {{ $product->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </td>
                                        <td>
                                            <input type="text" class="form-control quantity" size="5" name="purchaseOrderInput[0][qty]" required>
                                        </td>
                                        <td>
                                            <input type="text" class="form-control price" size="5" name="purchaseOrderInput[0][price]" required>
                                        </td>
                                        <td>
                                            <input type="text" class="form-control total_amount" size="7" name="purchaseOrderInput[0][total_amount]">
                                        </td>
                                        <td>
                                            <button class="btn btn-danger remove_purchase_order_row">Remove</button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                            <hr>
                        </div>
                    </div>
                </div>

                <div class="form-group row @error('discount') has-error @enderror">
                    {{-- <label class="control-label text-right col-md-3">Discount</label> --}}
                    <div class="col-md-1">
                        {{-- <input type="text" name="discount"
                            class="form-control @error('discount') has-error @enderror" id="discount" autocomplete="discount"
                            value="{{ old('discount') }}">

                        @error('discount')
                            <div class="text-danger">
                                <small>{{ $message }}</small>
                            </div>
                        @enderror --}}
                    </div>
                    <div class="col-md-5"></div>
                    <div class="col-md-3">
                        <div style="font-weight: bold">Sub Total:
                            <span id="total"></span>
                        </div>
                        {{-- <div style="font-weight: bold">Nett Price:
                            <span id="nettPrice"></span>
                        </div> --}}

                        <input type="hidden" name="nettPrice" id="subTotal">
                        <input type="hidden" name="total" id="totalData">
                    </div>
                </div>
            </div>
        </div>
        <div class="card-footer bg-light">
            <div class="form-actions">
                <div class="row">
                    <div class="col-md-12">
                        <div class="row">
                            <div class="offset-sm-3 col-md-5">
                                <button type="submit" class="btn btn-primary btn-rounded">
                                    <i class="la la-save" style="color: #fff; font-size: 1.5em;"></i> Create
                                </button>
                                <a href="{{ route('purchase-orders.index') }}" class="btn btn-info btn-rounded"
                                    style="color: #fff;"> <i class="la la-chevron-left" style="color: #fff; font-size: 1.5em;"></i> Back
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
@endsection

@push('script')
<script>
    function formatRupiahInput(angka) {
        angka = (angka || 0).toString(); // konversi ke string + fallback jika undefined/null
        let cleaned = angka.replace(/[^\d]/g, '');  // Hapus selain angka
        let reversed = cleaned.split('').reverse().join('');  // Balik urutan angka
        let ribuan = reversed.match(/\d{1,3}/g);  // Pecah tiap 3 angka
        let formatted = ribuan.join('.').split('').reverse().join('');  // Gabungkan kembali
        return formatted;
    }

    // Hapus format (misal: 10.000 → 10000)
    function unformatRupiahInput(angka) {
        return angka.replace(/\./g, '');  // Hapus titik
    }

    $(document).on('change', '.choose-product-id', function () {
        const selectedOption = $(this).find('option:selected');
        const rawPrice = selectedOption.data('price') || 0;

        const row = $(this).closest('tr');
        const priceFormatted = formatRupiahInput(rawPrice);  // Format harga dalam rupiah
        row.find('.price').val(priceFormatted);  // Set harga terformat di kolom harga

        // Hitung total jika qty sudah ada
        const qty = parseFloat(row.find('.quantity').val()) || 0;
        const total = rawPrice * qty;
        row.find('.total_amount').val(formatRupiahInput(total.toString()));
    });

    $(document).on("input", ".price, .quantity", function () {
        const row = $(this).closest("tr");

        // Format harga
        let priceInput = row.find(".price");
        let priceRaw = unformatRupiahInput(priceInput.val());
        let price = parseInt(priceRaw || 0);
        priceInput.val(formatRupiahInput(priceRaw));  // Set kembali harga yang sudah diformat

        // Ambil qty
        let qty = parseInt(row.find(".quantity").val() || 0);

        // Hitung total & format
        let total = price * qty;
        row.find(".total_amount").val(formatRupiahInput(total.toString()));

        $(".purchase_order_table").trigger("recalc");
    });

    $(function () {
        $(".choose-product-id").select2({
            tags: false,
            width: '100%'
        });

        $('.order_date').datepicker({
            format: 'yyyy-mm-dd',
            autoclose: true,
            todayHighlight: true
        });
    });

    let i = 0;
    $("#add_purchase_order").click(function() {
        i++;

        const incrementNumber = parseInt($('.increment_number').val());
        const newRow = `
            <tr>
                <td>${incrementNumber + i}</td>
                <td>
                    <select name="purchaseOrderInput[${i}][product_id]" class="form-control product_id choose-product-id" required>
                        <option value="">-- Choose Product --</option>
                        @foreach ($products as $product)
                            <option
                                value="{{ $product->id }}"
                                data-price="{{ $product->price }}"
                                data-toggle="tooltip"
                                title="{{ $product->description }} {{ $product->brand->name }}">
                                {{ $product->name }}
                            </option>
                        @endforeach
                    </select>
                </td>
                <td>
                    <input type="text" class="form-control quantity" size="5" name="purchaseOrderInput[${i}][qty]" required>
                </td>
                <td>
                    <input type="text" class="form-control price" size="5" name="purchaseOrderInput[${i}][price]" required>
                </td>
                <td>
                    <input type="text" class="form-control total_amount" size="7" name="purchaseOrderInput[${i}][total_amount]">
                </td>
                <td>
                    <button type="button" class="btn btn-danger remove_purchase_order_row">Remove</button>
                </td>
            </tr>
        `;

        $(".purchase_order_table").append(newRow);

        // Terapkan select2 pada elemen select yang baru ditambahkan
        $('.choose-product-id').last().select2({
            tags: false,
            width: '100%'
        });
    });

    // Hapus row saat tombol remove ditekan
    $(document).on("click", ".remove_purchase_order_row", function () {
        var $table = $(this).closest('table');
        $(this).closest('tr').remove();
        $table.trigger("recalc");
    });

    // Menghitung total setiap kali input berubah
    $(document).on("keyup", ".purchase_order_table input", function () {
        $(this).trigger("recalc");
    });

    // Fungsi untuk perhitungan total per baris
    $(document).on("recalc", ".purchase_order_table tr", function () {
        const qty = parseFloat($(this).find(".quantity").val()) || 0;
        const priceRaw = unformatRupiahInput($(this).find(".price").val());
        const price = parseInt(priceRaw || 0);
        const total = price * qty;
        $(this).find(".total_amount").val(formatRupiahInput(total.toString()));
    });

    // Menghitung total keseluruhan
    $(document).on("recalc", ".purchase_order_table", function () {
        let total = 0;
        $(this).find(".total_amount").each(function () {
            total += parseInt(unformatRupiahInput($(this).val()) || 0);
        });

        $("#total").text(formatRupiahInput(total.toString()));
        $("#totalData").text(formatRupiahInput(total.toString()));

        let netAmount = total;
        let discount = $("#discount").val() / 100;
        if (discount) {
            netAmount = total - discount;
        }

        $("#subTotal").val(formatRupiahInput(netAmount.toString()));
    });

    $(".purchase_order_table").trigger("recalc");

    var total = $('#totalData').val();

    // Fungsi untuk mengupdate nett price berdasarkan diskon
    $("#discount").keyup(function() {
        let discount = $("#discount").val();
        let subTotal = $('#subTotal').val();
        let nettPrice = subTotal - (subTotal * (discount / 100))
        $("#nettPrice").html(formatRupiahInput(nettPrice.toString()));
    });
</script>
@endpush