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

@section('content')
    <section class="content-header">
        <h1 class="tw-text-xl md:tw-text-3xl tw-font-bold tw-text-black">@lang('lang_v1.shipping_settings')
        </h1>

    </section>
    <section class="content">

        {!! Form::open([
            'url' => action([\App\Http\Controllers\ShippingController::class, 'storeShippingCharges']),
            'method' => 'post',
        ]) !!}

        @component('components.widget', ['class' => 'box-primary'])
            <div class="row">

                <div class="col-sm-2">
                    <div class="form-group">
                        {!! Form::label('name', __('lang_v1.shipping_company') . ' ' . $company->name . ':*') !!}
                    </div>

                </div>

                <input type="hidden" name="shipping_company" value="{{ $company->id }}">

                <div class="col-sm-8">
                    @foreach ($cities as $city_id => $city_name)
                        <div class="form-group">
                            <label for="{{ $city_id }}">{{ $city_name }}</label>
                            {!! Form::text($city_id, isset($charges[$city_id]) ? @num_format($charges[$city_id]) : '', [
                                'class' => 'form-control payment_amount',
                                'min' => 1,
                                'required',
                            ]) !!}
                        </div>
                    @endforeach
                </div>
                <div class="row">
                    <div class="col-sm-12 text-center mt-4">
                        <button type="submit" class="tw-dw-btn tw-dw-btn-primary tw-dw-btn-lg tw-text-white">
                            @lang('messages.save')
                        </button>
                    </div>
                </div>
            </div>
        @endcomponent
        {!! Form::close() !!}
    </section>
@endsection
@section('javascript')
    <script>
        $(document).ready(function() {
            $('.payment_amount').on('input', function() {
                let input = $(this);
                let val = input.val();

                // Allow only digits and one decimal point
                let cleaned = val.replace(/[^0-9.]/g, '');

                // Handle multiple dots (keep only the first)
                let parts = cleaned.split('.');
                let integerPart = parts[0];
                let decimalPart = parts[1] !== undefined ? parts[1].slice(0, 2) : '';

                // Add commas to integer part
                let formattedInt = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ',');

                // Don't add dot if user typed it but there's no decimal part yet
                let result = decimalPart !== '' ?
                    `${formattedInt}.${decimalPart}` :
                    cleaned.endsWith('.') ? `${formattedInt}.` : formattedInt;

                input.val(result);
            });

            // On form submit: remove commas
            $('form').on('submit', function() {
                $('.payment_amount').each(function() {
                    $(this).val($(this).val().replace(/,/g, ''));
                });
            });
        });
    </script>
@endsection