{{-- resources/views/returns/create.blade.php --}}
@extends('layouts.app')

@section('title', 'Return Entry')

@section('content')
<h1 class="h4 mb-3">Return Entry</h1>

@if ($errors->any())
    <div class="alert alert-danger">
        <ul class="mb-0">
            @foreach ($errors->all() as $err)
                <li>{{ $err }}</li>
            @endforeach
        </ul>
    </div>
@endif

<form action="{{ route('returns.store') }}" method="POST">
    @csrf

    <div class="row mb-3">
        {{-- Type --}}
        <div class="col-md-2">
            <label class="form-label">Type</label>
            @php $oldType = old('type', 'customer'); @endphp
            <select name="type" id="return-type" class="form-select">
                <option value="customer" {{ $oldType === 'customer' ? 'selected' : '' }}>Customer</option>
                <option value="supplier" {{ $oldType === 'supplier' ? 'selected' : '' }}>Supplier</option>
            </select>
        </div>

        {{-- Party (customer/supplier) --}}
        <div class="col-md-4">
            <label class="form-label">Party</label>
            <select name="party_id" id="party-select" class="form-select">
                <option value="">-- Select Party --</option>

                {{-- Customers --}}
                @foreach($customers as $customer)
                    <option value="{{ $customer->id }}" data-type="customer">
                        {{ $customer->name }}
                    </option>
                @endforeach

                {{-- Suppliers --}}
                @foreach($suppliers as $supplier)
                    <option value="{{ $supplier->id }}" data-type="supplier">
                        {{ $supplier->name }}
                    </option>
                @endforeach
            </select>
        </div>

        {{-- Date --}}
        <div class="col-md-3">
            <label class="form-label">Date</label>
            <input type="date"
                   name="date"
                   class="form-control"
                   value="{{ old('date', now()->toDateString()) }}">
        </div>

        {{-- Note --}}
        <div class="col-md-3">
            <label class="form-label">Note</label>
            <input type="text"
                   name="note"
                   class="form-control"
                   value="{{ old('note') }}">
        </div>
    </div>

    {{-- Return Items --}}
    <h5 class="mt-3 mb-2">Return Items</h5>

    <div class="table-responsive mb-3">
        <table class="table table-bordered table-sm" id="return-items-table">
            <thead>
                <tr>
                    <th style="width: 40%">Product</th>
                    <th style="width: 15%">Qty</th>
                    <th style="width: 20%">Unit Price</th>
                    <th style="width: 20%">Total</th>
                    <th style="width: 5%"></th>
                </tr>
            </thead>
            <tbody>
                {{-- প্রথম row (index 0) --}}
                <tr>
                    <td>
                        <div class="d-flex align-items-start gap-2">
                            <div class="flex-grow-1">
                                <select name="items[0][product_id]"
                                        class="form-select product-select">
                                    <option value="">-- Select Product --</option>
                                    @foreach($products as $product)
                                        <option value="{{ $product->id }}"
                                            data-image="{{ $product->image_primary ? asset('storage/'.$product->image_primary) : '' }}">
                                            {{ $product->sku }} - {{ $product->name }}
                                            @if($product->size) (Size: {{ $product->size }}) @endif
                                            @if($product->color) [{{ $product->color }}] @endif
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            {{-- ছোট থাম্বনেইল প্রিভিউ --}}
                            <div class="return-product-preview text-center"
                                 style="width:70px;">
                                <img src="" alt="preview"
                                     class="img-thumbnail d-none">
                                <div class="text-muted small no-image-text">
                                    No image
                                </div>
                            </div>
                        </div>
                    </td>
                    <td>
                        <input type="number"
                               name="items[0][qty]"
                               class="form-control qty-input"
                               value="1"
                               min="1">
                    </td>
                    <td>
                        <input type="number"
                               name="items[0][unit_price]"
                               class="form-control price-input"
                               value="0"
                               min="0"
                               step="0.01">
                    </td>
                    <td>
                        <input type="text"
                               class="form-control total-input"
                               value="0.00"
                               readonly>
                    </td>
                    <td class="text-center">
                        <button type="button"
                                class="btn btn-sm btn-outline-danger remove-row">
                            &times;
                        </button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    <button type="button" id="add-item" class="btn btn-sm btn-secondary mb-3">
        + Add Item
    </button>

    <div>
        <button type="submit" class="btn btn-success">Save</button>
        <a href="{{ route('returns.index') }}" class="btn btn-outline-secondary">Back to List</a>
    </div>
</form>
@endsection

@push('scripts')
<script>
(function () {
    // ---------- Party filter ----------
    const typeSelect  = document.getElementById('return-type');
    const partySelect = document.getElementById('party-select');

    // সব option backup (placeholder বাদে)
    const allPartyOptions = Array.from(partySelect.options).filter(o => o.value !== "");

    function refreshPartyOptions() {
        const currentType = typeSelect.value; // customer / supplier
        const oldPartyId  = "{{ old('party_id') }}";

        partySelect.innerHTML = '<option value="">-- Select Party --</option>';

        allPartyOptions.forEach(function (opt) {
            if (opt.getAttribute('data-type') === currentType) {
                const clone = opt.cloneNode(true);
                if (oldPartyId && oldPartyId == clone.value) {
                    clone.selected = true;
                }
                partySelect.appendChild(clone);
            }
        });
    }

    refreshPartyOptions();

    typeSelect.addEventListener('change', function () {
        partySelect.value = "";
        refreshPartyOptions();
    });

    // ---------- Return items table + image preview ----------
    let index = 1; // first row index 0, নতুনগুলোর জন্য 1 থেকে

    const tableBody = document.querySelector('#return-items-table tbody');
    const addBtn    = document.getElementById('add-item');

    // এক রোয়ের প্রিভিউ আপডেট
    function updateRowPreview(row) {
        const select   = row.querySelector('.product-select');
        const preview  = row.querySelector('.return-product-preview img');
        const noImage  = row.querySelector('.return-product-preview .no-image-text');

        if (!select || !preview || !noImage) return;

        const opt   = select.options[select.selectedIndex];
        const src   = opt ? opt.getAttribute('data-image') : '';

        if (src) {
            preview.src = src;
            preview.classList.remove('d-none');
            noImage.classList.add('d-none');
        } else {
            preview.src = '';
            preview.classList.add('d-none');
            noImage.classList.remove('d-none');
        }
    }

    // নতুন row add
    addBtn.addEventListener('click', function () {
        const firstRow = tableBody.querySelector('tr');
        const newRow   = firstRow.cloneNode(true);

        newRow.querySelectorAll('select, input').forEach(function (el) {
            if (el.classList.contains('product-select')) {
                el.name  = `items[${index}][product_id]`;
                el.value = "";
            } else if (el.classList.contains('qty-input')) {
                el.name  = `items[${index}][qty]`;
                el.value = 1;
            } else if (el.classList.contains('price-input')) {
                el.name  = `items[${index}][unit_price]`;
                el.value = 0;
            } else if (el.classList.contains('total-input')) {
                el.value = '0.00';
            }
        });

        // নতুন প্রিভিউ ডিফল্ট "No image"
        const img = newRow.querySelector('.return-product-preview img');
        const noImg = newRow.querySelector('.return-product-preview .no-image-text');
        if (img && noImg) {
            img.src = '';
            img.classList.add('d-none');
            noImg.classList.remove('d-none');
        }

        tableBody.appendChild(newRow);
        index++;
    });

    // row remove + total calc + image preview
    tableBody.addEventListener('click', function (e) {
        if (e.target.classList.contains('remove-row')) {
            const rows = tableBody.querySelectorAll('tr');
            if (rows.length > 1) {
                e.target.closest('tr').remove();
            }
        }
    });

    // qty / price change → total
    tableBody.addEventListener('input', function (e) {
        if (e.target.classList.contains('qty-input') ||
            e.target.classList.contains('price-input')) {

            const row   = e.target.closest('tr');
            const qty   = parseFloat(row.querySelector('.qty-input').value) || 0;
            const price = parseFloat(row.querySelector('.price-input').value) || 0;
            const total = (qty * price).toFixed(2);

            row.querySelector('.total-input').value = total;
        }
    });

    // product change → image preview
    tableBody.addEventListener('change', function (e) {
        if (e.target.classList.contains('product-select')) {
            const row = e.target.closest('tr');
            updateRowPreview(row);
        }
    });

    // পেজ লোডে প্রথম রোতে প্রিভিউ সেট (যদি future-এ old value থাকে)
    const firstRow = tableBody.querySelector('tr');
    if (firstRow) {
        updateRowPreview(firstRow);
    }
})();
</script>
@endpush