@extends('layouts.app')
@section('title', __('shop_rma.create'))

@section('content')
<section class="content-header">
    <div class="tw-flex tw-items-start tw-justify-between tw-flex-wrap tw-gap-3">
        <div>
            <h1 class="tw-text-xl md:tw-text-3xl tw-font-bold tw-text-black tw-m-0">@lang('shop_rma.create')</h1>
            <p class="tw-mt-1 tw-text-sm tw-text-gray-600">Quarantine shop stock and prepare a supplier return in one guided form.</p>
        </div>
        <a href="{{ route('shop-rmas.index') }}" class="tw-dw-btn tw-dw-btn-outline tw-dw-btn-primary">
            <i class="fa fa-list"></i> @lang('shop_rma.cases')
        </a>
    </div>
</section>

<section class="content">
    @if($errors->any())
        <div class="alert alert-danger">
            <strong>Please review the highlighted information.</strong>
            <ul class="tw-mt-2">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <div class="alert alert-info">
        <div class="tw-flex tw-items-start tw-gap-3">
            <i class="fa fa-info-circle tw-mt-1"></i>
            <div>
                <strong>@lang('shop_rma.no_customer_notice')</strong>
                <div class="tw-mt-1">@lang('shop_rma.quarantine_notice')</div>
            </div>
        </div>
    </div>

    @if(empty($rma_location))
        <div class="alert alert-danger">
            <i class="fa fa-exclamation-triangle"></i> @lang('shop_rma.no_rma_location')
        </div>
    @else
        {!! Form::open(['route' => 'shop-rmas.store', 'method' => 'post', 'files' => true, 'id' => 'shop_rma_create_form']) !!}

        @component('components.widget', ['class' => 'box-primary', 'title' => '1. Case Setup'])
            <p class="text-muted">Choose where the stock is currently located and which supplier will receive it.</p>
            <div class="row">
                <div class="col-md-4">
                    <div class="form-group">
                        {!! Form::label('location_id', __('shop_rma.shop_location') . ':*') !!}
                        {!! Form::select('location_id', $locations, old('location_id'), ['class' => 'form-control select2', 'style' => 'width:100%', 'placeholder' => __('messages.please_select'), 'required']) !!}
                        <small class="help-block">Product availability will be checked at this location.</small>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        {!! Form::label('supplier_id', __('shop_rma.supplier') . ':*') !!}
                        {!! Form::select('supplier_id', $suppliers, old('supplier_id'), ['class' => 'form-control select2', 'style' => 'width:100%', 'placeholder' => __('messages.please_select'), 'required']) !!}
                        <small class="help-block">Use a separate case for each supplier.</small>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        {!! Form::label('supplier_reference', __('shop_rma.supplier_reference') . ':') !!}
                        {!! Form::text('supplier_reference', old('supplier_reference'), ['class' => 'form-control', 'placeholder' => 'Optional — can also be added when sent']) !!}
                    </div>
                </div>
            </div>
            <div class="tw-rounded-lg tw-bg-gray-50 tw-border tw-border-gray-200 tw-p-3">
                <i class="fa fa-archive tw-text-gray-500"></i>
                <strong class="tw-ml-1">@lang('shop_rma.rma_location'):</strong>
                {{ $rma_location->name }}
                <span class="text-muted tw-ml-2">Items are held here until they are sent to the supplier.</span>
            </div>
        @endcomponent

        @component('components.widget', ['class' => 'box-primary', 'title' => '2. Add Shop Stock'])
            <p class="text-muted">Search and add only the affected items. Available quantity is shown before you add a product.</p>
            <div class="row">
                <div class="col-md-8">
                    <div class="form-group">
                        <label for="shop_rma_product_search">@lang('shop_rma.search_products')</label>
                        <select id="shop_rma_product_search" class="form-control" style="width:100%" disabled></select>
                        <small class="help-block" id="shop_rma_product_help">@lang('shop_rma.select_location_first')</small>
                    </div>
                </div>
            </div>

            <div id="shop_rma_empty_state" class="tw-rounded-lg tw-border-2 tw-border-dashed tw-border-gray-300 tw-p-8 tw-text-center tw-text-gray-500">
                <i class="fa fa-box-open fa-2x tw-mb-2"></i>
                <div><strong>No products added yet</strong></div>
                <div class="tw-text-sm">Select a shop location, then search for the stock you want to return.</div>
            </div>
            <div id="shop_rma_items"></div>
        @endcomponent

        @component('components.widget', ['class' => 'box-primary', 'title' => '3. Review and Save'])
            <div class="form-group">
                {!! Form::label('internal_note', __('shop_rma.internal_note') . ':') !!}
                {!! Form::textarea('internal_note', old('internal_note'), ['class' => 'form-control', 'rows' => 3, 'placeholder' => 'Optional note for your team']) !!}
            </div>
            <div class="alert alert-warning tw-mb-4">
                <i class="fa fa-exclamation-triangle"></i> @lang('shop_rma.quarantine_notice')
            </div>
            <div class="tw-flex tw-justify-end tw-gap-2">
                <a href="{{ route('shop-rmas.index') }}" class="tw-dw-btn tw-dw-btn-outline">@lang('messages.cancel')</a>
                <button type="submit" class="tw-dw-btn tw-dw-btn-primary tw-text-white" id="shop_rma_save">
                    <i class="fa fa-shield-alt"></i> Create and Quarantine Stock
                </button>
            </div>
        @endcomponent
        {!! Form::close() !!}
    @endif
</section>
@endsection

@section('javascript')
@if(!empty($rma_location))
<script>
$(document).ready(function() {
    var itemIndex = 0;
    var selectedVariations = {};
    var lastLocation = $('#location_id').val() || '';
    var issueTypes = @json($issue_types);
    var reasons = @json($reasons);
    var oldItems = @json(array_values(old('items', [])));
    var serialUrl = @json(route('shop-rmas.available-serials'));

    function optionHtml(options, selectedValue, placeholder) {
        var html = '<option value="">' + $('<div>').text(placeholder).html() + '</option>';
        $.each(options, function(value, label) {
            var selected = String(selectedValue || '') === String(value) ? ' selected' : '';
            html += '<option value="' + $('<div>').text(value).html() + '"' + selected + '>' + $('<div>').text(label).html() + '</option>';
        });
        return html;
    }

    function escapeHtml(value) {
        return $('<div>').text(value == null ? '' : value).html();
    }

    function toggleEmptyState() {
        $('#shop_rma_empty_state').toggle($('#shop_rma_items .shop-rma-item-card').length === 0);
    }

    function initialiseSerialSelect($select, variationId, selectedSerials) {
        $select.select2({
            width: '100%',
            multiple: true,
            placeholder: @json(__('shop_rma.choose_serials')),
            ajax: {
                url: serialUrl,
                dataType: 'json',
                delay: 250,
                data: function(params) {
                    return {
                        term: params.term || '',
                        location_id: $('#location_id').val(),
                        variation_id: variationId
                    };
                },
                processResults: function(data) {
                    return {results: data.results || []};
                },
                cache: true
            }
        });

        $.each(selectedSerials || [], function(_, serial) {
            $select.append(new Option(serial, serial, true, true));
        });
        $select.trigger('change');
    }

    function addProductCard(product) {
        var variationId = parseInt(product.variation_id || product.id, 10);
        if (!variationId || selectedVariations[variationId]) {
            if (selectedVariations[variationId]) {
                toastr.warning(@json(__('shop_rma.duplicate_product')));
            }
            return;
        }

        var index = itemIndex++;
        var available = parseFloat(product.available_qty || 0);
        var serialRequired = product.serial_tracking_required === true || product.serial_tracking_required === 1 || product.serial_tracking_required === '1';
        var serials = product.serial_numbers || [];
        selectedVariations[variationId] = true;

        var card = ''
            + '<div class="shop-rma-item-card tw-rounded-lg tw-border tw-border-gray-200 tw-bg-white tw-p-4 tw-mt-4" data-variation-id="' + variationId + '">'
            + '  <input type="hidden" name="items[' + index + '][product_id]" value="' + parseInt(product.product_id, 10) + '">'
            + '  <input type="hidden" name="items[' + index + '][variation_id]" value="' + variationId + '">'
            + '  <input type="hidden" name="items[' + index + '][product_label]" value="' + escapeHtml(product.text) + '">'
            + '  <input type="hidden" name="items[' + index + '][available_qty]" value="' + available + '">'
            + '  <input type="hidden" name="items[' + index + '][serial_tracking_required]" value="' + (serialRequired ? '1' : '0') + '">'
            + '  <div class="tw-flex tw-items-start tw-justify-between tw-gap-3 tw-mb-3">'
            + '    <div><div class="tw-font-bold tw-text-base">' + escapeHtml(product.text) + '</div>'
            + '      <div class="tw-text-sm tw-text-green-700"><i class="fa fa-check-circle"></i> ' + escapeHtml(product.available_qty_formatted || available) + ' ' + escapeHtml(product.unit_name || '') + ' available in shop</div></div>'
            + '    <button type="button" class="btn btn-link text-danger shop-rma-remove-item" title="Remove"><i class="fa fa-times"></i> Remove</button>'
            + '  </div>'
            + '  <div class="row">'
            + '    <div class="col-md-2"><div class="form-group"><label>' + escapeHtml(@json(__('shop_rma.quantity_to_return'))) + ':*</label>'
            + '      <input type="number" step="0.01" min="0.01" max="' + available + '" class="form-control shop-rma-qty" name="items[' + index + '][quantity]" value="' + escapeHtml(product.quantity || '') + '" data-max="' + available + '" required>'
            + '      <small class="help-block shop-rma-qty-help">Maximum ' + escapeHtml(product.available_qty_formatted || available) + '</small></div></div>'
            + '    <div class="col-md-3"><div class="form-group"><label>' + escapeHtml(@json(__('shop_rma.issue_type'))) + ':*</label>'
            + '      <select class="form-control select2 shop-rma-field" name="items[' + index + '][issue_type]" required>' + optionHtml(issueTypes, product.issue_type, @json(__('messages.please_select'))) + '</select></div></div>'
            + '    <div class="col-md-3"><div class="form-group"><label>' + escapeHtml(@json(__('shop_rma.reason'))) + ':*</label>'
            + '      <select class="form-control select2 shop-rma-field" name="items[' + index + '][reason]" required>' + optionHtml(reasons, product.reason, @json(__('messages.please_select'))) + '</select></div></div>'
            + '    <div class="col-md-4"><div class="form-group"><label>' + escapeHtml(@json(__('shop_rma.picture'))) + '</label>'
            + '      <input type="file" class="form-control" name="item_picture[' + index + ']" accept="image/*"></div></div>'
            + '  </div>'
            + '  <div class="row">'
            + '    <div class="col-md-6"><div class="form-group"><label>' + escapeHtml(@json(__('shop_rma.issue_note'))) + '</label>'
            + '      <textarea class="form-control" rows="2" name="items[' + index + '][issue_note]" placeholder="Describe what is wrong">' + escapeHtml(product.issue_note || '') + '</textarea></div></div>'
            + '    <div class="col-md-6"><div class="form-group"><label>' + escapeHtml(@json(__('shop_rma.condition_note'))) + '</label>'
            + '      <textarea class="form-control" rows="2" name="items[' + index + '][condition_note]" placeholder="Example: sealed box, charger included, visible scratch">' + escapeHtml(product.condition_note || '') + '</textarea></div></div>'
            + '  </div>'
            + (serialRequired
                ? '  <div class="tw-rounded tw-bg-blue-50 tw-border tw-border-blue-200 tw-p-3"><div class="form-group tw-mb-0"><label><i class="fa fa-barcode"></i> ' + escapeHtml(@json(__('shop_rma.serial_numbers'))) + ':*</label><select multiple class="form-control shop-rma-serials" name="items[' + index + '][serial_numbers][]" required style="width:100%"></select><small class="help-block">Select the same number of serials as the return quantity.</small></div></div>'
                : '')
            + '</div>';

        var $card = $(card);
        $('#shop_rma_items').append($card);
        $card.find('.select2').select2({width: '100%'});
        if (serialRequired) {
            initialiseSerialSelect($card.find('.shop-rma-serials'), variationId, serials);
        }
        toggleEmptyState();
    }

    $('#shop_rma_product_search').select2({
        width: '100%',
        placeholder: @json(__('shop_rma.search_products')),
        minimumInputLength: 1,
        ajax: {
            url: @json(route('shop-rmas.search-products')),
            dataType: 'json',
            delay: 250,
            data: function(params) {
                return {term: params.term || '', location_id: $('#location_id').val()};
            },
            processResults: function(data) {
                return {results: data.results || []};
            },
            cache: true
        },
        templateResult: function(item) {
            if (item.loading) return item.text;
            return $('<div><strong></strong><br><small class="text-success"></small></div>')
                .find('strong').text(item.text).end()
                .find('small').text((item.available_qty_formatted || item.available_qty) + ' ' + (item.unit_name || '') + ' available').end();
        }
    }).on('select2:select', function(e) {
        addProductCard(e.params.data);
        $(this).val(null).trigger('change');
    });

    function updateProductSearchState() {
        var hasLocation = !!$('#location_id').val();
        $('#shop_rma_product_search').prop('disabled', !hasLocation);
        $('#shop_rma_product_help').text(hasLocation
            ? @json(__('shop_rma.search_products'))
            : @json(__('shop_rma.select_location_first')));
    }

    $('#location_id').on('change', function() {
        var newLocation = $(this).val() || '';
        if (lastLocation && newLocation !== lastLocation && $('#shop_rma_items .shop-rma-item-card').length) {
            $('#shop_rma_items').empty();
            selectedVariations = {};
            toggleEmptyState();
            toastr.info('The product list was cleared because the shop location changed.');
        }
        lastLocation = newLocation;
        $('#shop_rma_product_search').val(null).trigger('change');
        updateProductSearchState();
    });

    $(document).on('click', '.shop-rma-remove-item', function() {
        var $card = $(this).closest('.shop-rma-item-card');
        delete selectedVariations[$card.data('variation-id')];
        $card.remove();
        toggleEmptyState();
    });

    $(document).on('input change', '.shop-rma-qty', function() {
        var qty = parseFloat($(this).val() || 0);
        var max = parseFloat($(this).data('max') || 0);
        var hasError = qty <= 0 || qty > max;
        $(this).closest('.form-group').toggleClass('has-error', hasError);
    });

    $('#shop_rma_create_form').on('submit', function(e) {
        if (!$('#shop_rma_items .shop-rma-item-card').length) {
            e.preventDefault();
            toastr.error(@json(__('shop_rma.add_at_least_one_item')));
            return false;
        }

        var valid = true;
        var firstInvalid = null;
        $('#shop_rma_items .shop-rma-item-card').each(function() {
            var $card = $(this);
            var qty = parseFloat($card.find('.shop-rma-qty').val() || 0);
            var max = parseFloat($card.find('.shop-rma-qty').data('max') || 0);
            if (qty <= 0 || qty > max) {
                valid = false;
                firstInvalid = firstInvalid || $card.find('.shop-rma-qty')[0];
            }
            var $serials = $card.find('.shop-rma-serials');
            if ($serials.length && ($serials.val() || []).length !== Math.round(qty)) {
                valid = false;
                $serials.closest('.form-group').addClass('has-error');
                firstInvalid = firstInvalid || $serials[0];
                toastr.error(@json(__('shop_rma.serial_count_mismatch', ['count' => 'the selected quantity'])));
            }
        });

        if (!valid) {
            e.preventDefault();
            if (firstInvalid) firstInvalid.focus();
            return false;
        }

        $('#shop_rma_save').prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i> Creating SHOP RMA...');
    });

    $.each(oldItems, function(_, oldItem) {
        if (!oldItem.variation_id) return;
        oldItem.id = oldItem.variation_id;
        oldItem.text = oldItem.product_label || ('Product #' + oldItem.product_id);
        oldItem.available_qty_formatted = oldItem.available_qty || '';
        oldItem.serial_tracking_required = oldItem.serial_tracking_required || false;
        addProductCard(oldItem);
    });

    updateProductSearchState();
    toggleEmptyState();
});
</script>
@endif
@endsection