@extends('layouts.landing-page.index', ['title' => 'Transaksi'])

@section('main')
    <section id="transaction" class="about section mt-5">

        <div class="container" data-aos="fade-up" data-aos-delay="100">

            <div class="container section-title pb-0" data-aos="fade-up">
                <h2>Transaksi</h2>
                <p>Beli Tembakau Terbaik Disini</p>
            </div>

            <div class="row justify-content-center mt-3">
                <div class="col-lg-12">

                    <div class="card shadow border-0">
                        <form id="transactionForm" onsubmit="sendToWhatsapp(event)" class="card-body p-4">

                            <h4 class="mb-4 fw-semibold">Transaksi Penjualan</h4>

                            <!-- DATA PELANGGAN -->
                            <div class="row g-3 mb-4">
                                <div class="col-md-4">
                                    <label class="form-label">Nama</label>
                                    <input type="text" class="form-control" id="customer_name"
                                        placeholder="Nama pelanggan" required>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">Nomor Telepon</label>
                                    <input type="text" class="form-control" id="customer_phone"
                                        placeholder="08xxxxxxxxxx" required>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">Alamat</label>
                                    <textarea name="" cols="30" rows="3" id="customer_address" class="form-control"
                                        placeholder="Alamat Lengkap" required></textarea>
                                </div>
                            </div>

                            <hr class="mb-4">

                            <!-- BARANG -->
                            <h4 class="mb-4 fw-semibold">Data Barang</h4>

                            <div id="item-wrapper">

                                <!-- ROW BARANG -->
                                <div class="row g-2 align-items-end item-row mb-2">

                                    <div class="col-md-6">
                                        <label class="form-label">Produk</label>
                                        <select class="form-select product-select">
                                            <option value="" disabled selected>Pilih produk</option>
                                            <option value="120000">Cerutu Don Juan - Rp120.000</option>
                                            <option value="70000">Johnny Cigar - Rp70.000</option>
                                            <option value="35000">Semar Half Corona - Rp35.000</option>
                                        </select>
                                    </div>

                                    <div class="col-md-2">
                                        <label class="form-label">Jumlah</label>
                                        <input type="number" class="form-control qty-input" value="1" min="1">
                                    </div>

                                    <div class="col-md-3">
                                        <label class="form-label">Subtotal</label>
                                        <input type="text" class="form-control subtotal" readonly>
                                    </div>

                                    <div class="col-md-1 text-end">
                                        <button class="btn btn-danger btn-sm remove-item">
                                            <i class="bi bi-trash"></i> Hapus
                                        </button>
                                    </div>

                                </div>

                            </div>

                            <!-- ACTION -->
                            <a href="{{ route('product') }}" class="btn btn-add-catalog btn-sm mt-3 w-100">
                                <i class="bi bi-plus-circle"></i> Tambah Barang
                            </a>

                            <hr class="my-4">

                            <!-- TOTAL -->
                            <div class="d-flex justify-content-between align-items-center">
                                <h5>Total</h5>
                                <h5 class="fw-bold" id="grandTotal">Rp0</h5>
                            </div>

                            <div class="text-end mt-4">
                                @if (isset($profile->phone))
                                    <button class="btn btn-success px-4" type="submit">
                                        Simpan Transaksi
                                    </button>
                                @else
                                    <div class="alert alert-error mt-3 text-center">
                                        <p><b>Mohon Maaf</b> Transaksi tidak dapat dilakukan, karena gangguan teknis.
                                        </p>
                                    </div>
                                @endif
                            </div>

                            <div class="alert alert-warning mt-3 text-center">
                                <p>Jika anda klik <b>Simpan Transaksi</b> akan kami arahkan ke WhatsApp admin kita untuk
                                    konfirmasi pembelian. Selanjutnya transaksi akan dilaksanakan melalui WhatsApp</p>
                            </div>

                        </form>
                    </div>

                </div>
            </div>

        </div>

    </section>
@endsection

@push('styles')
    <style>
        .select2-container .select2-selection--single {
            height: 38px;
            padding: 5px 10px;
        }

        .select2-selection__rendered {
            line-height: 28px !important;
        }

        .select2-selection__arrow {
            height: 36px !important;
        }

        .btn-add-catalog {
            color: white;
            background: var(--accent-color);
            border: 0;
            padding: 10px 30px;
            transition: 0.4s;
            border-radius: 4px;
        }

        .btn-add-catalog:hover {
            background: color-mix(in srgb, var(--accent-color), transparent 20%);
        }
    </style>
@endpush

@push('scripts')
    @if (isset($profile->phone))
        <script>
            function sendToWhatsapp(e) {
                e.preventDefault();
                const form = document.getElementById('transactionForm');

                if (!form.checkValidity()) {
                    form.reportValidity();
                    return;
                }
                const name = document.getElementById('customer_name').value;
                const phone = document.getElementById('customer_phone').value;
                const address = document.getElementById('customer_address').value;

                const cart = JSON.parse(localStorage.getItem('transaction_cart')) || [];

                let message = `*STRUK PEMESANAN*\n`;
                message += `Nama: ${name}\n`;
                message += `No HP: ${phone}\n`;
                message += `Alamat: ${address}\n\n`;

                message += `*DETAIL PRODUK :*\n`;

                let total = 0;
                cart.forEach(item => {
                    const subtotal = item.price * item.qty;
                    total += subtotal;
                    message += `- ${item.name} (${item.qty} pcs) \n\t = Rp${subtotal.toLocaleString()}\n`;
                });

                message += `\n*Total: Rp${total.toLocaleString()}*`;

                const adminPhone = "{{ $profile->phone }}";
                const url = `https://wa.me/${adminPhone}?text=${encodeURIComponent(message)}`;

                // console.log(message)

                // localStorage.removeItem('transaction_cart');

                window.open(url, '_blank');
            }
        </script>
    @endif

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            loadCart();
        });

        function loadCart() {
            const cart = JSON.parse(localStorage.getItem('transaction_cart')) || [];
            const wrapper = document.getElementById('item-wrapper');
            wrapper.innerHTML = '';

            cart.forEach((item, index) => {
                const subtotal = item.price * item.qty;

                wrapper.innerHTML += `
        <div class="row g-2 align-items-end item-row mb-2">
            <div class="col-md-6">
                <label class="form-label">Produk</label>
                <input type="text" class="form-control" value="${item.name}" readonly>
            </div>

            <div class="col-md-2">
                <label class="form-label">Jumlah</label>
                <input type="number" class="form-control qty-input"
                       value="${item.qty}" min="1"
                       onchange="updateQty(${index}, this.value)">
            </div>

            <div class="col-md-3">
                <label class="form-label">Subtotal</label>
                <input type="text" class="form-control subtotal"
                       value="Rp${subtotal.toLocaleString()}" readonly>
            </div>

            <div class="col-md-1 text-end">
                <button class="btn btn-danger btn-sm"
                        onclick="removeItem(${index})">
                    <i class="bi bi-trash"></i>
                </button>
            </div>
        </div>
        `;
            });

            calculateTotal();
        }

        function updateQty(index, qty) {
            let cart = JSON.parse(localStorage.getItem('transaction_cart'));
            cart[index].qty = parseInt(qty);
            localStorage.setItem('transaction_cart', JSON.stringify(cart));
            loadCart();
        }

        function removeItem(index) {
            let cart = JSON.parse(localStorage.getItem('transaction_cart')) || [];
            cart.splice(index, 1);

            if (cart.length === 0) {
                localStorage.removeItem('transaction_cart');
                window.location.href = "{{ route('product') }}";
                return;
            }

            localStorage.setItem('transaction_cart', JSON.stringify(cart));
            loadCart();
        }


        function calculateTotal() {
            const cart = JSON.parse(localStorage.getItem('transaction_cart')) || [];
            let total = 0;

            cart.forEach(item => {
                total += item.price * item.qty;
            });

            document.getElementById('grandTotal').innerText =
                'Rp' + total.toLocaleString();
        }
    </script>
    {{-- 
    <script>
        // Hitung subtotal per baris
        function calculateRow(row) {
            const price = parseInt(row.querySelector('.product-select').value) || 0;
            const qty = parseInt(row.querySelector('.qty-input').value) || 0;
            const subtotal = price * qty;

            row.querySelector('.subtotal').value =
                subtotal ? 'Rp' + subtotal.toLocaleString('id-ID') : '';

            calculateTotal();
        }

        // Hitung total keseluruhan
        function calculateTotal() {
            let total = 0;
            document.querySelectorAll('.item-row').forEach(row => {
                const price = parseInt(row.querySelector('.product-select').value) || 0;
                const qty = parseInt(row.querySelector('.qty-input').value) || 0;
                total += price * qty;
            });

            document.getElementById('grandTotal').innerText =
                'Rp' + total.toLocaleString('id-ID');
        }

        // Event change produk & qty
        document.addEventListener('change', function(e) {
            if (e.target.classList.contains('product-select') ||
                e.target.classList.contains('qty-input')) {
                calculateRow(e.target.closest('.item-row'));
            }
        });

        // Tambah baris
        document.getElementById('addItem').addEventListener('click', function() {
            const wrapper = document.getElementById('item-wrapper');
            const firstRow = wrapper.querySelector('.item-row');
            const newRow = firstRow.cloneNode(true);

            // Reset value
            newRow.querySelector('.product-select').value = '';
            newRow.querySelector('.qty-input').value = 1;
            newRow.querySelector('.subtotal').value = '';

            wrapper.appendChild(newRow);
        });

        // Hapus baris
        document.addEventListener('click', function(e) {
            if (e.target.closest('.remove-item')) {
                const rows = document.querySelectorAll('.item-row');
                if (rows.length > 1) {
                    e.target.closest('.item-row').remove();
                    calculateTotal();
                }
            }
        });
    </script> --}}
@endpush