@extends('layouts.app')
@section('title', __('lang_v1.product_discount'))

@section('content')

<!-- Content Header (Page header) -->
<section class="content-header">
    <h1 class="tw-text-xl md:tw-text-3xl tw-font-bold tw-text-black">
        @lang('lang_v1.product_discount'): {{ $product->name }} ({{ $product->sku }})
    </h1>
</section>

<!-- Main content -->
<section class="content">
    <div class="row">
        <div class="col-md-12">
            <div class="box box-solid">
                <div class="box-header">
                    <h3 class="box-title">@lang('lang_v1.quantity_based_discounts')</h3>
                </div>
                <div class="box-body">

                    {!! Form::open(['url' => action([\App\Http\Controllers\ProductController::class, 'saveProductDiscount']), 'method' => 'post', 'id' => 'discount_form']) !!}
                    {!! Form::hidden('product_id', $product->id) !!}
                    
                    <!-- Product Price Information -->
                    <div class="row" style="margin-bottom: 20px;">
                        <div class="col-md-12">
                            <div class="alert alert-info" style="background-color: #f0f8ff; border-color: #b8d4f0;">
                                <div class="row">
                                    <div class="col-md-3">
                                        <strong>@lang('sale.product'):</strong> 
                                        <span class="label label-primary">{{ $product->name }}</span>
                                    </div>
                                    <div class="col-md-3">
                                        <strong>@lang('product.sku'):</strong> 
                                        <span class="label label-default">{{ $product->sku }}</span>
                                    </div>
                                    <div class="col-md-3">
                                        <strong>@lang('lang_v1.default_selling_price'):</strong> 
                                        <span class="label label-success" style="font-size: 14px;">
                                            @if(!empty($product->variations->first()))
                                                {{ $product->variations->first()->sell_price_inc_tax }}
                                            @else
                                                {{ __('lang_v1.not_applicable') }}
                                            @endif
                                        </span>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="checkbox" style="margin: 0;">
                                            <label style="font-weight: normal; font-size: 14px;">
                                                <input type="checkbox" name="discount_allowed" id="discount_allowed" 
                                                       value="1" {{ $product->discount_allowed ? 'checked' : '' }}>
                                                <strong>@lang('lang_v1.apply_discounts')</strong>
                                            </label>
                                            <br>
                                            <small class="text-muted" style="font-size: 11px;">
                                                @lang('lang_v1.enable_quantity_based_discounts_for_this_product')
                                            </small>
                                        </div>
                                    </div>
                                </div>
                                @if($product->type == 'variable')
                                    <div class="row" style="margin-top: 10px;">
                                        <div class="col-md-12">
                                            <small><strong>@lang('lang_v1.note'):</strong> @lang('lang_v1.variable_product_prices_will_apply_to_all_variations')</small>
                                        </div>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>

                    <!-- Variation Prices (if variable product) -->
                    @if($product->type == 'variable' && !empty($product->variations))
                        <div class="row" style="margin-bottom: 20px;">
                            <div class="col-md-12">
                                <div class="box box-solid box-primary collapsed-box">
                                    <div class="box-header with-border">
                                        <h4 class="box-title">
                                            <a data-toggle="collapse" href="#variation_prices" aria-expanded="false">
                                                <i class="fa fa-plus-circle"></i> 
                                                @lang('lang_v1.view_variation_prices')
                                            </a>
                                        </h4>
                                    </div>
                                    <div id="variation_prices" class="panel-collapse collapse">
                                        <div class="box-body">
                                            <table class="table table-condensed table-bordered table-striped">
                                                <thead>
                                                    <tr>
                                                        <th>@lang('lang_v1.variation')</th>
                                                        <th>@lang('lang_v1.sub_sku')</th>
                                                        <th>@lang('lang_v1.default_selling_price')</th>
                                                        <th>@lang('lang_v1.default_purchase_price')</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @foreach($product->variations as $variation)
                                                        <tr>
                                                            <td>
                                                                @if(!empty($variation->product_variation))
                                                                    {{ $variation->product_variation->name }} - 
                                                                @endif
                                                                {{ $variation->name }}
                                                            </td>
                                                            <td>{{ $variation->sub_sku }}</td>
                                                            <td>
                                                                <span class="label label-success">
                                                                    {{ $variation->sell_price_inc_tax }}
                                                                </span>
                                                            </td>
                                                            <td>
                                                                <span class="label label-warning">
                                                                    {{ $variation->dpp_inc_tax }}
                                                                </span>
                                                            </td>
                                                        </tr>
                                                    @endforeach
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif
                    
                    <!-- Discount Table -->
                    <div class="table-responsive">
                        <table class="table table-bordered table-striped" id="discount_table">
                            <thead>
                                <tr>
                                    <th style="width: 20%;">@lang('lang_v1.from_quantity')</th>
                                    <th style="width: 20%;">@lang('lang_v1.to_quantity') </th>
                                    <th style="width: 20%;">@lang('lang_v1.discount_type')</th>
                                    <th style="width: 25%;">@lang('lang_v1.discount_amount')</th>
                                    <th style="width: 15%;">
                                        <button type="button" class="btn btn-success btn-sm" id="add_discount_row">
                                            <i class="fa fa-plus"></i> @lang('messages.add')
                                        </button>
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                @php $row_count = 0; @endphp
                                @if(!empty($discounts))
                                    @foreach($discounts as $discount)
                                        <tr class="discount_row">
                                            <td>
                                                <input type="number" name="from_quantity[]" class="form-control input-sm from_quantity" value="{{ $discount->from_quantity }}" min="0" required>
                                            </td>
                                            <td>
                                                <input type="number" name="to_quantity[]" class="form-control input-sm to_quantity" value="{{ $discount->to_quantity }}" min="0" placeholder="">
                                            </td>
                                            <td>
                                                {!! Form::select('discount_type[]', ['fixed' => __('lang_v1.fixed'), 'percentage' => __('lang_v1.percentage')], $discount->discount_type, ['class' => 'form-control input-sm', 'required']) !!}
                                            </td>
                                            <td>
                                                <input type="number" name="discount_amount[]" class="form-control input-sm" value="{{ $discount->discount_amount }}" min="0" step="0.01" required>
                                                {!! Form::hidden('discount_id[]', $discount->id) !!}
                                            </td>
                                            <td>
                                                <button type="button" class="btn btn-danger btn-sm remove_discount_row">
                                                    <i class="fa fa-trash"></i>
                                                </button>
                                            </td>
                                        </tr>
                                        @php $row_count++; @endphp
                                    @endforeach
                                @endif
                            </tbody>
                        </table>
                    </div>
                    
                    <!-- Submit Buttons -->
                    <div class="row">
                        <div class="col-sm-12 text-center">
                            <div class="btn-group">
                                <button type="submit" class="tw-dw-btn tw-dw-btn-primary tw-text-white tw-dw-btn-lg" id="submit_btn">
                                    <i class="fa fa-save"></i> @lang('messages.save')
                                </button>
                                <a href="{{ action([\App\Http\Controllers\ProductController::class, 'index']) }}" class="tw-dw-btn tw-dw-btn-outline tw-dw-btn-lg">
                                    <i class="fa fa-times"></i> @lang('messages.cancel')
                                </a>
                            </div>
                        </div>
                    </div>
                    
                    {!! Form::close() !!}
                </div>
            </div>
        </div>
    </div>
</section>
@stop

@section('javascript')
<script type="text/javascript">
    $(document).ready(function() {
        // Add new discount row
        $('#add_discount_row').click(function() {
            var rowCount = $('.discount_row').length + 1;
            var html = `<tr class="discount_row">
                <td>
                    <input type="number" name="from_quantity[]" class="form-control input-sm from_quantity" min="0" required>
                </td>
                <td>
                    <input type="number" name="to_quantity[]" class="form-control input-sm to_quantity" min="0" placeholder="">
                </td>
                <td>
                    <select name="discount_type[]" class="form-control input-sm" required>
                        <option value="fixed">@lang('lang_v1.fixed')</option>
                        <option value="percentage">@lang('lang_v1.percentage')</option>
                    </select>
                </td>
                <td>
                    <input type="number" name="discount_amount[]" class="form-control input-sm" min="0" step="0.01" required>
                </td>
                <td>
                    <button type="button" class="btn btn-danger btn-sm remove_discount_row">
                        <i class="fa fa-trash"></i>
                    </button>
                </td>
            </tr>`;
            
            $('#discount_table tbody').append(html);
        });
        
        // Remove discount row
        $(document).on('click', '.remove_discount_row', function() {
            $(this).closest('tr').remove();
        });
        
        // Function to validate quantity range
        function validateQuantityRange(row, showError = true) {
            var fromInput = row.find('.from_quantity');
            var toInput = row.find('.to_quantity');
            var fromValue = fromInput.val();
            var toValue = toInput.val();
            
            // Clear previous error states
            fromInput.removeClass('has-error');
            toInput.removeClass('has-error');
            
            // If to is empty, it's valid (infinity)
            if (fromValue !== '' && toValue !== '') {
                var from = parseFloat(fromValue) || 0;
                var to = parseFloat(toValue) || 0;
                
                // Allow 0-5 and 5.01-10 (from must be less than to)
                if (from >= to) {
                    fromInput.addClass('has-error');
                    toInput.addClass('has-error');
                    
                    if (showError) {
                        toastr.error('@lang("lang_v1.from_quantity_must_be_less_than_to_quantity")');
                    }
                    return false;
                }
            }
            return true;
        }
        
        // Validate on blur (when user leaves the field)
        $(document).on('blur', '.from_quantity, .to_quantity', function() {
            var row = $(this).closest('tr');
            var fromInput = row.find('.from_quantity');
            var toInput = row.find('.to_quantity');
            
            // Only validate if both fields have values
            if (fromInput.val() !== '' && toInput.val() !== '') {
                validateQuantityRange(row, true);
            }
        });
        
        // Clear error state when user starts typing
        $(document).on('focus', '.from_quantity, .to_quantity', function() {
            $(this).removeClass('has-error');
            // Also remove error from sibling field
            var row = $(this).closest('tr');
            row.find('.from_quantity, .to_quantity').removeClass('has-error');
        });
        
        // Real-time validation only if both fields have values (without showing error)
        $(document).on('input', '.from_quantity, .to_quantity', function() {
            var row = $(this).closest('tr');
            var fromInput = row.find('.from_quantity');
            var toInput = row.find('.to_quantity');
            
            // Only validate if both fields have values, but don't show error on input
            if (fromInput.val() !== '' && toInput.val() !== '') {
                validateQuantityRange(row, false);
            }
        });
        
        // Validate on form submit
        $('#discount_form').on('submit', function(e) {
            var isValid = true;
            var errorMessage = '';
            var ranges = [];
            
            // First validate all individual rows
            $('.discount_row').each(function(index) {
                var row = $(this);
                var fromInput = row.find('.from_quantity');
                var toInput = row.find('.to_quantity');
                var fromValue = fromInput.val();
                var toValue = toInput.val();
                
                if (fromValue === '') {
                    fromInput.addClass('has-error');
                    errorMessage = '@lang("lang_v1.please_fill_from_quantity")';
                    isValid = false;
                    return false;
                }
                
                // toValue can be empty (infinity)
                if (toValue !== '') {
                    var from = parseFloat(fromValue) || 0;
                    var to = parseFloat(toValue) || 0;
                    
                    if (from >= to) {
                        fromInput.addClass('has-error');
                        toInput.addClass('has-error');
                        errorMessage = '@lang("lang_v1.from_quantity_must_be_less_than_to_quantity") in row ' + (index + 1);
                        isValid = false;
                        return false;
                    }
                    
                    ranges.push({ from: from, to: to, index: index });
                } else {
                    ranges.push({ from: parseFloat(fromValue) || 0, to: null, index: index });
                }
            });
            
            // Check for overlapping ranges only if all rows are valid
            if (isValid) {
                // Sort ranges by from
                ranges.sort(function(a, b) {
                    return a.from - b.from;
                });
                
                for (var i = 1; i < ranges.length; i++) {
                    var prev = ranges[i - 1];
                    var curr = ranges[i];
                    
                    // If previous has no 'to', it's infinity - can't have more ranges
                    if (prev.to === null) {
                        errorMessage = '@lang("lang_v1.infinity_range_must_be_last")';
                        isValid = false;
                        break;
                    }
                    
                    // Check if ranges overlap or touch
                    if (curr.from <= prev.to) {
                        errorMessage = 'Ranges cannot overlap or touch. Please use 0-5, 6-10, 11-15 etc. (Range ' + (i) + ' starts at ' + curr.from + ' but previous ends at ' + prev.to + ')';
                        isValid = false;
                        
                        // Highlight the problematic fields
                        var rows = $('.discount_row');
                        var prevRow = rows.eq(prev.index);
                        var currRow = rows.eq(curr.index);
                        prevRow.find('.to_quantity').addClass('has-error');
                        currRow.find('.from_quantity').addClass('has-error');
                        break;
                    }
                }
            }
            
            if (!isValid) {
                e.preventDefault();
                toastr.error(errorMessage);
                
                var firstError = $('.has-error').first();
                if (firstError.length) {
                    firstError.focus();
                }
                return false;
            }
            
            // If validation passes, submit via AJAX
            e.preventDefault(); // Prevent default form submission
            
            var form = $(this);
            var formData = form.serialize();
            var submitBtn = $('#submit_btn');
            var originalText = submitBtn.html();
            
            // Disable button and show loading
            submitBtn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i> @lang("messages.saving")...');
            
            $.ajax({
                url: form.attr('action'),
                type: 'POST',
                data: formData,
                dataType: 'json',
                success: function(response) {
                    if (response.success) {
                        toastr.success(response.msg);
                        // Redirect to products index
                        if (response.redirect_url) {
                            window.location.href = response.redirect_url;
                        } else {
                            window.location.href = "{{ action([\App\Http\Controllers\ProductController::class, 'index']) }}";
                        }
                    } else {
                        toastr.error(response.msg);
                        submitBtn.prop('disabled', false).html(originalText);
                    }
                },
                error: function(xhr) {
                    if (xhr.responseJSON && xhr.responseJSON.msg) {
                        toastr.error(xhr.responseJSON.msg);
                    } else if (xhr.status === 422) {
                        // Validation errors
                        var errors = xhr.responseJSON.errors;
                        if (errors) {
                            $.each(errors, function(key, value) {
                                toastr.error(value[0]);
                            });
                        } else {
                            toastr.error('@lang("messages.something_went_wrong")');
                        }
                    } else {
                        toastr.error('@lang("messages.something_went_wrong")');
                    }
                    submitBtn.prop('disabled', false).html(originalText);
                }
            });
            
            return false;
        });
    });
</script>
@endsection