{{-- 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 --}}
            <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: 10%">Qty</th>
                    <th style="width: 20%">Unit Price</th>
                    <th style="width: 20%">Total</th>
                    <th style="width: 5%"></th>
                </tr>
                </thead>
                <tbody>
                {{-- first 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)
                                        @php
                                            $img = $product->image_primary
                                                ? asset('storage/'.$product->image_primary)
                                                : '';
                                            $title = $product->sku.' - '.$product->name;
                                            if ($product->size)  { $title .= ' (Size: '.$product->size.')'; }
                                            if ($product->color) { $title .= ' ['.$product->color.']'; }
                                        @endphp
                                        <option value="{{ $product->id }}"
                                                data-image="{{ $img }}"
                                                data-title="{{ $title }}">
                                            {{ $title }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            {{-- small thumbnail on right --}}
                            <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>

    {{-- === ROW TEMPLATE (used for new rows) === --}}
    <script type="text/template" id="return-row-template">
        <tr>
            <td>
                <div class="d-flex align-items-start gap-2">
                    <div class="flex-grow-1">
                        <select name="items[__INDEX__][product_id]"
                                class="form-select product-select">
                            <option value="">-- Select Product --</option>
                            @foreach($products as $product)
                                @php
                                    $img = $product->image_primary
                                        ? asset('storage/'.$product->image_primary)
                                        : '';
                                    $title = $product->sku.' - '.$product->name;
                                    if ($product->size)  { $title .= ' (Size: '.$product->size.')'; }
                                    if ($product->color) { $title .= ' ['.$product->color.']'; }
                                @endphp
                                <option value="{{ $product->id }}"
                                        data-image="{{ $img }}"
                                        data-title="{{ $title }}">
                                    {{ $title }}
                                </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[__INDEX__][qty]"
                       class="form-control qty-input"
                       value="1"
                       min="1">
            </td>
            <td>
                <input type="number"
                       name="items[__INDEX__][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>
    </script>
@endsection

@push('styles')
    {{-- Select2 CSS --}}
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet"/>

    <style>
        /* dropdown image + text */
        .select2-container--default .select2-results__option .prod-option {
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .select2-container--default .select2-results__option .prod-option img {
            width: 30px;
            height: 38px;
            object-fit: cover;
            border-radius: 3px;
        }
        .select2-container--default .select2-selection--single .prod-selection {
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .select2-container--default .select2-selection--single .prod-selection img {
            width: 26px;
            height: 34px;
            object-fit: cover;
            border-radius: 3px;
        }
    </style>
@endpush

@push('scripts')
    {{-- jQuery + Select2 (jodi layout-e jQuery thake, oi line ta bad dite paro) --}}
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

    <script>
        $(function () {
            /** ---------- TYPE & PARTY FILTER ---------- */
            const $typeSelect  = $('#return-type');
            const $partySelect = $('#party-select');
            const allPartyOptions = $partySelect.find('option[value!=""]').clone();
            const oldPartyId = @json(old('party_id'));

            function refreshPartyOptions() {
                const currentType = $typeSelect.val();

                $partySelect.empty()
                    .append('<option value="">-- Select Party --</option>');

                allPartyOptions.each(function () {
                    const $opt = $(this);
                    if ($opt.data('type') === currentType) {
                        const $clone = $opt.clone();
                        if (oldPartyId && oldPartyId == $clone.val()) {
                            $clone.prop('selected', true);
                        }
                        $partySelect.append($clone);
                    }
                });
            }

            refreshPartyOptions();

            $typeSelect.on('change', function () {
                $partySelect.val('');
                refreshPartyOptions();
            });

            /** ---------- SELECT2 WITH IMAGE ---------- */
            function formatProductOption(option) {
                if (!option.id) return option.text;
                const $el   = $(option.element);
                const img   = $el.data('image');
                const title = $el.data('title') || option.text;

                if (!img) {
                    return '<span class="prod-option">' + title + '</span>';
                }
                return $(
                    '<span class="prod-option">' +
                        '<img src="' + img + '" alt="">' +
                        '<span>' + title + '</span>' +
                    '</span>'
                );
            }

            function formatProductSelection(option) {
                if (!option.id) return option.text;
                const $el   = $(option.element);
                const img   = $el.data('image');
                const title = $el.data('title') || option.text;

                if (!img) return title;
                return $(
                    '<span class="prod-selection">' +
                        '<img src="' + img + '" alt="">' +
                        '<span>' + title + '</span>' +
                    '</span>'
                );
            }

            function initProductSelect($select) {
                $select.select2({
                    width: '100%',
                    templateResult: formatProductOption,
                    templateSelection: formatProductSelection,
                    escapeMarkup: function (m) { return m; }
                });
            }

            // first row select2 init
            initProductSelect($('.product-select'));

            /** ---------- ITEMS TABLE (ADD / REMOVE / TOTAL / PREVIEW) ---------- */
            let rowIndex = 1;
            const $tbody = $('#return-items-table tbody');
            const rowTemplate = $('#return-row-template').html();

            function recalcRowTotal($row) {
                const qty   = parseFloat($row.find('.qty-input').val())   || 0;
                const price = parseFloat($row.find('.price-input').val()) || 0;
                $row.find('.total-input').val((qty * price).toFixed(2));
            }

            function updateRowPreview($row, $select) {
                const imgUrl = $select.find(':selected').data('image') || '';
                const $img   = $row.find('.return-product-preview img');
                const $noImg = $row.find('.return-product-preview .no-image-text');

                if (imgUrl) {
                    $img.attr('src', imgUrl).removeClass('d-none');
                    $noImg.addClass('d-none');
                } else {
                    $img.attr('src', '').addClass('d-none');
                    $noImg.removeClass('d-none');
                }
            }

            // Add new row from template (no cloning)
            $('#add-item').on('click', function () {
                let html = rowTemplate.replace(/__INDEX__/g, rowIndex);
                $tbody.append(html);

                const $newRow    = $tbody.find('tr').last();
                const $newSelect = $newRow.find('.product-select');

                initProductSelect($newSelect);
                updateRowPreview($newRow, $newSelect); // default: no image
                rowIndex++;
            });

            // Remove row
            $tbody.on('click', '.remove-row', function () {
                const $rows = $tbody.find('tr');
                if ($rows.length > 1) {
                    $(this).closest('tr').remove();
                }
            });

            // qty / price change → total
            $tbody.on('input', '.qty-input, .price-input', function () {
                const $row = $(this).closest('tr');
                recalcRowTotal($row);
            });

            // product change → preview
            $tbody.on('change', '.product-select', function () {
                const $row = $(this).closest('tr');
                updateRowPreview($row, $(this));
            });

            // initial preview for first row (in case of old values later)
            const $firstRow = $tbody.find('tr:first');
            updateRowPreview($firstRow, $firstRow.find('.product-select'));
        });
    </script>
@endpush