@extends('layout.app')
@section('content')
    <style>
        .step {
            background: antiquewhite;
            padding: 2%;
            margin: 2% 0;
            border-radius: 2%;
        }
    </style>
    <div class="jumbotron col-8 offset-2 my-4">
        <div class="row">
            <div class="col-lg-12 margin-tb">
                <div class="float-left mb-2">
                    <h2>Add Mapping</h2>
                </div>
                <div class="float-right">
                    <a class="btn btn-primary" href="{{ route('mappings.index') }}"> Back</a>
                </div>
            </div>
        </div>

        @if (session('status'))
            <div class="alert alert-success mb-1 mt-1">
                {{ session('status') }}
            </div>
        @endif

        <form action="{{ route('mappings.store') }}" method="POST" enctype="multipart/form-data">
            @csrf

            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-12">
                    <div class="form-group">
                        <strong>Type:</strong>
                        <input type="text" name="type" class="form-control" placeholder="Type">
                        @error('type')
                            <div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>
                        @enderror
                    </div>

                    @foreach ($availablePlatforms as $platform)
                        <h3>{{ ucfirst($platform) }}</h3>

                        <div class="{{ $platform }}">
                            <div class="step">

                                <div class="form-group">
                                    <strong>Step #:</strong>
                                    <input type="text" name="{{ $platform }}|1|step" class="form-control step_num"
                                        placeholder="Step" value="1" readonly>
                                    @error('{{ $platform }}|1|step')
                                        <div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="form-group">
                                    <strong>URL:</strong>
                                    <input type="text" name="{{ $platform }}|1|url" class="form-control"
                                        placeholder="URL">
                                    @error('{{ $platform }}|1|url')
                                        <div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="form-group">
                                    <strong>Method:</strong>
                                    <input type="text" name="{{ $platform }}|1|method" class="form-control"
                                        placeholder="Method">
                                    @error('{{ $platform }}|1|method')
                                        <div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="form-group">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" value="1"
                                            id="dependent_check|1" name="{{ $platform }}|1|dependent">
                                        <label class="form-check-label" for="dependent_check|1">
                                            Has dependent parameters
                                        </label>
                                    </div>
                                </div>

                                <div class="form-group dependent_div">
                                    <strong>Dependent Params:</strong>
                                    <input type="text" name="{{ $platform }}|1|dependent_params"
                                        class="form-control" placeholder="Enter params(comma seperated)">
                                    @error('{{ $platform }}|1|dependent_params')
                                        <div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="form-group">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" value="1"
                                            id="repetitive_check|1" name="{{ $platform }}|1|repetitive">
                                        <label class="form-check-label" for="repetitive_check|1">
                                            Has repetitive parameter
                                        </label>
                                    </div>
                                </div>

                                <div class="form-group repetitive_div">
                                    <strong>Repetitive Param:</strong>
                                    <input type="text" name="{{ $platform }}|1|repetitive_params"
                                        class="form-control" placeholder="Enter repetitive param">
                                    @error('{{ $step->platform }}|1|repetitive_params')
                                        <div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="form-group">
                                    <strong>Payload (JSON):</strong>
                                    <textarea name="{{ $platform }}|1|json_payload" class="form-control" placeholder="Payload"></textarea>
                                    @error('json_payload')
                                        <div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <button id="addStepButton" class="btn btn-primary ml-3 col-2 float-right" type="button">Add
                                Step</button>
                            <button id="removeStepButton" class="btn btn-primary ml-3 col-3 float-right"
                                type="button">Remove
                                Step</button>
                        </div>
                    @endforeach

                    <button type="submit" class="btn btn-primary ml-3 col-2">Submit</button>
                </div>
            </div>

        </form>
    </div>
@endsection
@section('script')
    <script>
        $(document).ready(function() {
            step = 1;
            $('#removeStepButton').css('display', 'none');
            $("#addStepButton").on("click", function() {
                $('#removeStepButton').css('display', 'block')
                step++;
                // Clone the last step class div
                var lastStepDiv = $(".step").last();
                var clonedStepDiv = lastStepDiv.clone();

                previous_step = step - 1;
                // Construct the regular expression
                var regex = new RegExp("\\|" + previous_step + "\\|", "g");

                // Update input field names with step number
                clonedStepDiv.find("input[type='text']").each(function() {
                    var fieldName = $(this).attr("name");
                    $(this).attr("name", fieldName.replace(regex, "|" + step + "|"));
                });
                // Update input field names with step number
                clonedStepDiv.find("input[type='checkbox']").each(function() {
                    var fieldName = $(this).attr("name");
                    $(this).attr("name", fieldName.replace(regex, "|" + step + "|"));
                });
                // Update textarea name with step number
                clonedStepDiv.find("textarea").each(function() {
                    var fieldName = $(this).attr("name");
                    $(this).attr("name", fieldName.replace(regex, "|" + step + "|"));
                });
                var regex2 = new RegExp("\\|" + previous_step, "g");

                clonedStepDiv.find("input[id^='dependent_check']").each(function() {
                    var id = $(this).attr("id");
                    console.log(id)
                    $(this).attr("id", id.replace(regex2, "|" + step));
                });

                clonedStepDiv.find("label[for^='dependent_check']").each(function() {
                    var htmlFor = $(this).attr("for");
                    $(this).attr("for", htmlFor.replace(regex2, "|" + step));
                });
                clonedStepDiv.find("input[id^='repetitive_check']").each(function() {
                    var id = $(this).attr("id");
                    $(this).attr("id", id.replace(regex2, "|" + step));
                });
                clonedStepDiv.find("label[for^='repetitive_check']").each(function() {
                    var htmlFor = $(this).attr("for");
                    $(this).attr("for", htmlFor.replace(regex2, "|" + step));
                });
                // Clear input values in the cloned div
                clonedStepDiv.find("input[type='text']").val('');
                clonedStepDiv.find('.step_num').val(step);
                clonedStepDiv.find("textarea").val('');
                // Add margin-top of 2%
                // clonedStepDiv.css("margin-top", "2%");

                clonedStepDiv.insertAfter(lastStepDiv);
            });
            // Add click event to remove the latest step
            $("#removeStepButton").on("click", function() {
                if (step > 1) { // Ensure there is at least one step left
                    $(".step").last().remove();
                    step--;
                }
                // Hide the "Remove Step" button if there are no steps left
                if (step === 1) {
                    $('#removeStepButton').css('display', 'none');
                }
            });
        })
    </script>
@endsection