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

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

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

<div class="card">
    <form action="{{ route('supplier-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">

                {{-- Branch --}}
                <div class="form-group row @error('branch_id') has-error @enderror">
                    <label class="control-label text-right col-md-3">Branch</label>
                    <div class="col-md-5">
                        <select name="branch_id"
                                class="form-control @error('branch_id') is-invalid @enderror"
                                required>
                            <option value="">-- Choose Branch --</option>
                            @foreach($branches as $branch)
                                <option value="{{ $branch->id }}"
                                    {{ old('branch_id') == $branch->id ? 'selected' : '' }}>
                                    {{ $branch->name }}
                                </option>
                            @endforeach
                        </select>
                        @error('branch_id')
                            <div class="text-danger"><small>{{ $message }}</small></div>
                        @enderror
                    </div>
                </div>

                {{-- Order Date --}}
                <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') is-invalid @enderror"
                            autocomplete="off"
                            value="{{ old('order_date', date('Y-m-d')) }}"
                            required>
                        @error('order_date')
                            <div class="text-danger"><small>{{ $message }}</small></div>
                        @enderror
                    </div>
                </div>

                {{-- Notes --}}
                <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') is-invalid @enderror"
                            autocomplete="off"
                            value="{{ old('notes') }}">
                        @error('notes')
                            <div class="text-danger"><small>{{ $message }}</small></div>
                        @enderror
                    </div>
                </div>

                {{-- Items table --}}
                <div class="form-group row @error('purchaseOrderInput') is-invalid @enderror">
                    <div class="col-md-12">
                        <button type="button" id="add_purchase_order" class="btn btn-success mb-4">
                            Add New
                        </button>
                        <div class="table-scrollable">
                            <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]"
                                                    class="form-control choose-product-id" required>
                                                <option value="">-- Choose Product --</option>
                                                @foreach ($products as $product)
                                                    <option value="{{ $product->id }}"
                                                            data-price="{{ $product->price }}"
                                                            title="{{ $product->description }}">
                                                        {{ $product->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </td>
                                        <td>
                                            <input type="text"
                                                   class="form-control quantity"
                                                   name="purchaseOrderInput[0][qty]"
                                                   required>
                                        </td>
                                        <td>
                                            <input type="text"
                                                   class="form-control price"
                                                   name="purchaseOrderInput[0][price]"
                                                   required>
                                        </td>
                                        <td>
                                            <input type="text"
                                                   class="form-control total_amount"
                                                   name="purchaseOrderInput[0][total_amount]">
                                        </td>
                                        <td>
                                            <button type="button"
                                                    class="btn btn-danger remove_purchase_order_row">
                                                Remove
                                            </button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                            <hr>
                        </div>
                    </div>
                </div>

                {{-- Sub Total --}}
                <div class="form-group row">
                    <div class="col-md-7"></div>
                    <div class="col-md-3">
                        <div style="font-weight: bold">
                            Sub Total: <span id="total"></span>
                        </div>
                        <input type="hidden" name="total" id="totalData">
                    </div>
                </div>

            </div>
        </div>

        {{-- Footer --}}
        <div class="card-footer bg-light">
            <div class="form-actions">
                <div class="offset-sm-3 col-md-5">
                    <button type="submit" class="btn btn-primary btn-rounded text-white">
                        <i class="la la-save text-white"></i> Create
                    </button>
                    <a href="{{ route('supplier-orders.index') }}"
                       class="btn btn-info btn-rounded text-white">
                        <i class="la la-chevron-left text-white"></i> Back
                    </a>
                </div>
            </div>
        </div>
    </form>
</div>
@endsection

@push('script')
<script>
    function formatRupiahInput(angka) {
        angka = (angka||'0').toString();
        let cleaned = angka.replace(/[^\d]/g,'');
        let reversed = cleaned.split('').reverse().join('');
        let ribuan = reversed.match(/\d{1,3}/g);
        return ribuan.join('.').split('').reverse().join('');
    }
    function unformatRupiahInput(angka) {
        return angka.replace(/\./g,'');
    }

    // Inisialisasi Select2 & Datepicker
    $(function(){
        $('.choose-product-id').select2({ width:'100%' });
        $('.order_date').datepicker({
            format: 'yyyy-mm-dd',
            autoclose: true,
            todayHighlight: true
        });
    });

    // Produk dipilih → isi harga & total
    $(document).on('change','.choose-product-id',function(){
        const price = $(this).find('option:selected').data('price')||0;
        const row = $(this).closest('tr');
        row.find('.price').val(formatRupiahInput(price));
        const qty = parseFloat(row.find('.quantity').val())||0;
        row.find('.total_amount').val(formatRupiahInput((price*qty).toString()));
    });

    // Input qty/price → recalc
    $(document).on('input','.quantity, .price',function(){
        const row = $(this).closest('tr');
        let price = parseInt(unformatRupiahInput(row.find('.price').val()))||0;
        row.find('.price').val(formatRupiahInput(price));
        let qty = parseInt(row.find('.quantity').val())||0;
        row.find('.total_amount').val(formatRupiahInput((price*qty).toString()));
        $('.purchase_order_table').trigger('recalc');
    });

    // Tambah baris
    let i=0;
    $('#add_purchase_order').click(function(){
        i++;
        const base = parseInt($('.increment_number').val());
        const idx = base + i;
        const newRow = `<tr>
            <td>${idx}</td>
            <td>
                <select name="purchaseOrderInput[${i}][product_id]"
                        class="form-control choose-product-id" required>
                    <option value="">-- Choose Product --</option>
                    @foreach($products as $p)
                        <option value="{{ $p->id }}"
                                data-price="{{ $p->price }}"
                                title="{{ $p->description }}">
                            {{ $p->name }}
                        </option>
                    @endforeach
                </select>
            </td>
            <td><input type="text" class="form-control quantity" name="purchaseOrderInput[${i}][qty]" required></td>
            <td><input type="text" class="form-control price"    name="purchaseOrderInput[${i}][price]" required></td>
            <td><input type="text" class="form-control total_amount" 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 tbody').append(newRow);
        $('.choose-product-id').last().select2({ width:'100%' });
    });

    // Hapus baris
    $(document).on('click','.remove_purchase_order_row',function(){
        $(this).closest('tr').remove();
        $('.purchase_order_table').trigger('recalc');
    });

    // Hitung total
    $(document).on('recalc','.purchase_order_table',function(){
        let sum=0;
        $(this).find('.total_amount').each(function(){
            sum += parseInt(unformatRupiahInput($(this).val()))||0;
        });
        $('#total').text(formatRupiahInput(sum.toString()));
        $('#totalData').val(formatRupiahInput(sum.toString()));
    });

    // Trigger hitung awal
    $('.purchase_order_table').trigger('recalc');
</script>
@endpush