@extends('layouts.main')
@section('content')
@php
    use App\Helpers\Helper;
    use Illuminate\Support\Str;
@endphp
  <div class="content-wrapper">
    <div class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1 class="m-0">Faktur Penjualan</h1>
          </div>
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="#">Home</a></li>
              <li class="breadcrumb-item active">Faktur Penjualan</li>
            </ol>
          </div>
        </div>
      </div>
    </div>

<style>
    thead tr {
        background-color: #001f3f; 
        color: white;
    }

    .form-control {
        height: 36px;
        padding: 0.25rem 0.5rem;
    }

    .table td, .table th {
        vertical-align: middle;
    }

    .produk-column {
        min-width: 200px;
    }

    .number-input {
        text-align: right;
    }
</style>

<section class="content">
    <form action="{{ route('penjualan.store') }}" method="POST">
        @csrf
        <div class="card">
            <div class="card-body">
                <!-- Informasi Penjualan -->
                <div class="row mb-3">
                    <div class="col-md-4">
                        <label>No Faktur</label>
                        <input type="text" name="no_faktur" class="form-control" value="{{ $no_faktur }}" readonly>
                    </div>
                    <div class="col-md-4">
                        <label>Tanggal</label>
                        <input type="date" name="tanggal" class="form-control" value="{{ date('Y-m-d') }}" required>
                    </div>
                    <div class="col-md-4">
                        <label>Pelanggan</label>
                        <select name="pelanggan_id" id="pelanggan_id" class="form-control" required>
                            <option value="">-- Pilih Pelanggan --</option>
                            @foreach ($pelanggan as $p)
                                <option value="{{ $p->id }}"{{ request('pelanggan_id') == $p->id ? 'selected' : '' }}>
                                    {{ $p->nama }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <!-- Tambahan Info -->
                <div class="row mb-3">
                    <div class="col-md-6">
                        <label>No PO</label>
                        <input type="text" name="no_po" class="form-control" placeholder="Masukkan nomor PO (jika ada)">
                    </div>
                    <div class="col-md-6">
                        <label>Status Pembayaran</label>
                        <select name="status_pembayaran" class="form-control" required>
                            <option value="Belum Lunas" selected>Belum Lunas</option>
                            <option value="Lunas">Lunas</option>
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label>Biaya Pengiriman</label>
                        <input type="hidden" name="biaya_kirim" class="biaya_kirim" value="0">
                        <input type="text" class="form-control biaya_kirim_display" value="0">
                    </div>
                    <div class="col-md-6">
                        <label>Termin (Hari dari Tanggal)</label>
                        <input type="number" name="termin_hari" id="termin_hari" class="form-control" min="0" max="365" value="14" required>
                        <small class="text-muted">Jatuh tempo: <span id="preview_jatuh_tempo">-</span></small>
                        <input type="hidden" name="jatuh_tempo" id="jatuh_tempo_hidden">
                    </div>
                </div>

        <div class="row">
        <!-- Tabel Produk -->
        <div class="mb-4">
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th class="produk-column">Produk</th>
                        <th>Qty</th>
                        <th>Satuan</th>
                        <th>Harga</th>
                        <th>Diskon</th>
                        <th>Subtotal</th>
                        <th><button type="button" class="btn btn-sm btn-success" onclick="tambahBaris()">+</button></th>
                    </tr>
                </thead>
                <tbody id="produk-body">
                    <tr>
                        <td>
                            <select name="produk_id[]" class="form-control produk-select w-100" required></select>
                        </td>
                        <td><input type="number" name="qty[]" class="form-control number-input qty" required></td>
                        <td>
                            <input type="text" class="form-control satuan" readonly>
                        </td>
                        <td>
                            <input type="hidden" name="harga_jual[]" class="harga">
                            <input type="text"class="form-control harga_display number-input" required>
                        </td>
                        <td>
                            <input type="hidden" name="diskon[]" class="diskon">
                            <input type="text" class="form-control diskon_display number-input" value="0">
                        </td>
                        <td>
                            <input type="hidden" name="subtotal[]" class="subtotal">
                            <input type="text" class="form-control subtotal_display number-input " readonly>
                        </td>
                        <td><button type="button" class="btn btn-sm btn-danger" onclick="hapusBaris(this)">x</button></td>
                    </tr>
                </tbody>
            </table>
        </div>

            <!-- Kolom Catatan -->
            <div class="col-md-6">
                <div class="form-group">
                    <label for="catatan"><strong>Catatan / Note</strong></label>
                    <textarea name="catatan" class="form-control" rows="6" placeholder="Tulis catatan di sini..."></textarea>
                </div>
            </div>

            <!-- Kolom Ringkasan -->
            <div class="col-md-6 align-self-end">
                <table class="table table-bordered">
                    <tr>
                        <th style="width: 40%">Subtotal</th>
                        <td>
                            <input type="hidden" name="total_subtotal" class="total_subtotal">
                            <input type="text" class="form-control total_subtotal_display number-input" readonly>
                        </td>
                    </tr>
                    <tr>
                        <th>PPN / Pajak (%)</th>
                        <td><input type="number" name="pajak" class="form-control number-input" value="0"></td>
                    </tr>
                    <tr>
                        <th>Biaya Kirim</th>
                        <td>
                            <input type="hidden" name="biaya_kirim" class="biaya_kirim ">
                            <input type="text" class="form-control biaya_kirim_display number-input " readonly>
                        </td>
                    </tr>
                    <tr>
                        <th>Total Diskon</th>
                        <td>
                            <input type="hidden" name="total_diskon" class="total_diskon">
                            <input type="text" class="form-control total_diskon_display number-input " readonly>
                        </td>
                    </tr>
                    <tr>
                        <th><strong>Total Bayar</strong></th>
                        <td>
                            <input type="hidden" name="total" class="total">
                            <input type="text"  class="form-control number-input total_display " readonly>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
            <div class="text-right">
                <a href="{{ route('penjualan.index') }}" class="btn btn-secondary btn-sm">Kembali</a>
                <button type="submit" class="btn btn-sm btn-primary">Simpan Transaksi</button>
            </div>
            </div>
        </div>
    </form>
</section>
<template id="produk-row-template">
<tr>
    <td>
        <select name="produk_id[]" class="form-control produk-select" required></select>
    </td>
    <td><input type="number" name="qty[]" class="form-control number-input qty" required></td>
    <td>
        <input type="text" class="form-control satuan" readonly>
    </td>
    <td>
        <input type="hidden" name="harga_jual[]" class="harga">
        <input type="text"class="form-control harga_display number-input" required>
    </td>
    {{-- <td><input type="text" name="harga_jual[]" class="form-control harga-input number-input harga" required></td> --}}
    <td>
        <input type="hidden" name="diskon[]" class="diskon">
        <input type="text" class="form-control diskon_display number-input" value="0">
    </td>
    <td>
        <input type="hidden" name="subtotal[]" class="subtotal">
        <input type="text" class="form-control subtotal_display number-input " readonly>
    </td>
    {{-- <td><input type="number" name="diskon[]" class="form-control number-input diskon " value="0"></td>
    <td><input type="number" name="subtotal[]" class="form-control number-input subtotal" readonly></td> --}}
    <td><button type="button" class="btn btn-sm btn-danger" onclick="hapusBaris(this)">x</button></td>
</tr>
</template>

<script>
    function initSelect2() {
        $('.produk-select').select2({
            placeholder: 'Cari Produk...',
            ajax: {
                url: '{{ route("produk.search") }}',
                dataType: 'json',
                delay: 250,
                processResults: function (data) {
                    return {
                        results: data.results
                    };
                }
            }
        }).on('select2:select', function (e) {
            const data = e.params.data;
            const row = $(this).closest('tr');
            row.find('.harga').val(data.harga_jual);
            row.find('.harga_display').val('Rp ' + data.harga_jual.toString().replace(/\B(?=(\d{3})+(?!\d))/g, "."));
            row.find('.qty').val(1).trigger('input');
            row.find('.satuan').val(data.satuan ?? '');
        });
    }

function tambahBaris() {
    const template = document.getElementById('produk-row-template').content.cloneNode(true);
    $('#produk-body').append(template);
    initSelect2(); // jalankan ulang select2 agar aktif
}

    function hapusBaris(btn) {
        if ($('#produk-body tr').length > 1) {
            $(btn).closest('tr').remove();
            hitungTotal();
        }
    }


function formatRupiah(angka) {
    if (!angka) return 'Rp 0';
    return 'Rp ' + angka.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
}

function hitungTotal() {
    let total = 0;
    let totalDiskon = 0;
 
    $('#produk-body tr').each(function () {
        const qty = parseFloat($(this).find('.qty').val()) || 0;
        const harga = parseFloat($(this).find('.harga').val()) || 0; // hidden murni
        const diskon = parseFloat($(this).find('.diskon').val()) || 0; // hidden murni
        const subtotal = (qty * harga) - (qty * diskon);

        $(this).find('.diskon').val(diskon);
        $(this).find('.diskon_display').val(formatRupiah(diskon));
        // set ke hidden
        $(this).find('.subtotal').val(subtotal);

        // set ke display (Rp format)
        $(this).find('.subtotal_display').val(formatRupiah(subtotal));

        total += subtotal;
        totalDiskon += diskon;
    });

    const pajak = parseFloat($('[name="pajak"]').val()) || 0;
    const biayaKirim = parseFloat($('.biaya_kirim').val()) || 0;
    const totalPajak = (total * pajak) / 100;
    const grandTotal = total + totalPajak + biayaKirim;

    // set hidden
    $('[name="total_subtotal"]').val(total);
    $('[name="total_diskon"]').val(totalDiskon);
    $('[name="biaya_kirim"]').val(biayaKirim);
    $('[name="total"]').val(grandTotal);

    // set display
    $('.total_subtotal_display').val(formatRupiah(total));
    $('.total_diskon_display').val(formatRupiah(totalDiskon));
    $('.biaya_kirim_display').val(formatRupiah(biayaKirim));
    $('.total_display').val(formatRupiah(grandTotal));
}

$(document).ready(function () {
    initSelect2();
    hitungTotal();

    // trigger total setiap input berubah
    $(document).on('input', '.qty, .harga_display, .diskon_display, .biaya_kirim_display, [name="pajak"]', function () {
        // konversi display ke hidden murni dulu
        if ($(this).hasClass('harga_display')) {
            let value = $(this).val().replace(/[^0-9]/g, '');
            $(this).closest('tr').find('.harga').val(value);
        }
        if ($(this).hasClass('diskon_display')) {
            let value = $(this).val().replace(/[^0-9]/g, '');
            $(this).closest('tr').find('.diskon').val(value);
        }
        if ($(this).hasClass('biaya_kirim_display')) {
            let value = $(this).val().replace(/[^0-9]/g, '');
            $('.biaya_kirim').val(value);
        }

        hitungTotal();
    });
});
</script>
<script>
$(function () {
    $('#pelanggan_id').select2({
        placeholder: 'Pilih Pelanggan',
        allowClear: true,
        width: '100%'
    });
});
</script>
<script>
function updateJatuhTempoPreview() {
    var tanggalVal = $('input[name="tanggal"]').val();
    var hari = parseInt($('#termin_hari').val()) || 0;
    if (tanggalVal) {
        var d = new Date(tanggalVal);
        d.setDate(d.getDate() + hari);
        var yyyy = d.getFullYear();
        var mm = String(d.getMonth()+1).padStart(2,'0');
        var dd = String(d.getDate()).padStart(2,'0');
        var jatuh = yyyy + '-' + mm + '-' + dd;
        var display = dd + '-' + mm + '-' + yyyy + ' (' + hari + ' hari)';
        $('#preview_jatuh_tempo').text(display);
        $('#jatuh_tempo_hidden').val(jatuh);
    }
}
$(document).ready(function(){ updateJatuhTempoPreview(); });
$(document).on('change input', 'input[name="tanggal"], #termin_hari', updateJatuhTempoPreview);
$('form').on('submit', updateJatuhTempoPreview);
</script>
@endsection