@extends('layouts.app-merchant')
@section('content')
    <div class="container">
        <div class="col-md-12 mt-4">
            {{-- @include('errors')
        @include('layouts.messages') --}}
            <form id="paymentform" action="{{ route('test.generate_mcif_test_file') }}" >
                @csrf
                <div class="col">
                    <div class="card shadow-sm border-0 rounded">
                        <div class="card-header" style="background-color:  #f1f1f1;">
                            <h5 class="text-black text-center"><strong>Generate MCIF Test File</strong></h5>
                        </div>
                        <div class="card-body">

                            <div class="row">
                                <!-- Left Column -->
                                <div class="col-md-12">
                                    <div class="row">
                                        <div class="form-group row col-md-12">
                                            <label for="valid_count" class="col-sm-4 col-form-label text-sm-right pt-1">1. Valid Body Data</label>
                                            <div class="col-sm-8">
                                                <input type="text" class="form-control form-control-sm" id="valid_count" name="valid_count"
                                                    value="3">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="form-group row col-md-12">
                                            <label for="duplicate_count" class="col-sm-4 col-form-label text-sm-right pt-1">2. Body Data with Same Payment Refno (Duplicate_...)</label>
                                            <div class="col-sm-8">
                                                <input type="numeric" class="form-control form-control-sm" id="duplicate_count" name="duplicate_count"
                                                    value="2">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="form-group row col-md-12">
                                            <label for="invalid_date_count" class="col-sm-4 col-form-label text-sm-right pt-1">3. Body Data with invalid date format</label>
                                            <div class="col-sm-8">
                                                <input type="text" class="form-control form-control-sm" id="invalid_date_count" name="invalid_date_count"
                                                    value="1">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row my-4">
                        <div class="col text-center">
                            <button type="submit" class="btn" style="background-color: #ff0000; color: #f0f0f0;">Generate</button>
                        </div>
                    </div>
                    <div id="result"></div>
                </div>
            </form>
        </div>
    </div>
    <script>
        function updateResultCount() {
            let validCount = parseInt(document.getElementById('valid_count').value) || 0;
            let duplicateCount = parseInt(document.getElementById('duplicate_count').value) || 0;
            let invalidDateCount = parseInt(document.getElementById('invalid_date_count').value) || 0;

            let successCount = validCount + (duplicateCount > 0 ? 1 : 0);
            let failCount = invalidDateCount + (duplicateCount > 1 ? duplicateCount - 1 : 0);

            document.getElementById('result').innerHTML = `
                <div class="alert alert-info mt-3">
                    <strong>Processing later will create .txt file with</strong><br>
                    Success Data: ${successCount}<br>
                    Fail Data: ${failCount}
                </div>
            `;
        }

        document.querySelectorAll('#valid_count, #duplicate_count, #invalid_date_count')
            .forEach(input => {
                input.addEventListener('input', updateResultCount);
            });

        // Initial calculation
        updateResultCount();
    </script>
@endsection