@extends('layouts.app')
@section('title', 'Edit Api List')
@section('content')

 <style>
.action-footer {
    display: flex;
    justify-content: flex-end; /* buttons right side */
    gap: 10px;                 /* space between buttons */
    flex-wrap: wrap;           /* अगर screen छोटी हो तो wrap हो जाएं */
    margin-top: 15px;
}

.action-footer button,
.action-footer a {
    flex: 0 0 auto;   /* buttons apne size ke rahenge */
}


 </style>

    <!-- Main content -->
    <section class="content">
        <div class="row">
            <div class="box-body">
        <h4 class="box-title text-info mb-0"><i class="fa fa-edit me-15"></i> Edit API List </h4>
                                <a href="{{url('/api-data')}}" type="button" style="float:right;" class="waves-effect waves-light btn btn-rounded btn-primary btn-bitbucket btn-sm mb-5"><i class="fa fa-eye fa-sx"></i> API List</a>

								<hr class="my-15">
            <div class="col-md-12">
            <form class="form-inline"  method="post">
                @csrf
                <div class="panel panel-primary">
                        @php
                        $labelStr = "<tr><td><input type='text' class='form-control' name='para_label[]' value='' class='param' required></td><td><select name='label[]' class='form-select' required='required'><option>Select Label</option>";
                            foreach($label_list  as $label)
                            {
                                $labelStr .="<option value=".$label->id.">".$label->title."</option>";
                            }

                        $labelStr .="</select></td><td><button class='btn btn-danger btn-remove'><i class='fa fa-trash-o'></i></button></td></tr>";
                        $constantStr = "<tr><td><input type='text' class='form-control' name='para_constant[]' value='' class='param' required></td><td><input type='text' name='constant[]' class='form-control' value='' required='required'>";
                        $constantStr .="</td><td><button class='btn btn-danger btn-remove'><i class='fa fa-trash-o'></i></button></td></tr>";
                        @endphp

                        <div class="form-group row">
                            <div class=" form-group col-md-6">
                                <label class="form-label">Name </label>
                              
                                    <div class="input-group col-md-12" id="date-range2">
                                        <input type="hidden" class="form-control" name="api_id" value="{{$api_data->id}}" id="api_id" required="">    
                                        <input type="text" class="form-control" name="title" value="{{$api_data->title}}" id="campaign_name" required="">
                                        
                                    </div>
                                
                            </div>

                            <div class="form-group col-md-6">
                                <label class="form-label">Url </label>
                                <div>
                                    <div class="input-group col-md-12" id="date-range2">
                                        <input type="text" class="form-control" name="url" value="{{$api_data->url}}" id="campaign_name" required="">
                                    </div>
                                </div>
                            </div>
                        <div>
                        <div class="form-group row">
                            <div class=" form-group col-md-6">
                                <label class="form-label">Method </label>
                                <select class="form-select"  name="method" autocomplete="off" data-placeholder="Select Group" style="width: 100%;">
                                    <option @if($api_data->method == 'get') selected @endif value="get">GET</option>
                                    <option @if($api_data->method == 'post') selected @endif value="post">POST</option>
                                </select>
                            </div>
                            <div class=" form-group col-md-6">
                                <label class="form-label">Campaign</label>
                                <select class="js-example-basic-single select2"  name="campaign_id" autocomplete="off" data-placeholder="Select Group" style="width: 100%;">

                                    @if(empty($campaign_list))
                                    <option value="0">Default Campaign</option>
                                    @endif

                                    @if(!empty($campaign_list))

                                    @foreach($campaign_list  as $camp)
                                    @if($camp->status==1)
                                    <option @if($api_data->campaign_id == $camp->id) selected @endif  value="{{$camp->id}}">{{$camp->title}}</option>
                                    @endif
                                    @endforeach
                                    @endif
                                </select>
                            </div>
                        </div>
                      

                      
                         
                         <div class="form-group row">
                            <div class="form-group col-md-6">
                                <label class="form-label">Disposition</label>
                                <select class="select2" multiple="multiple" name="disposition_id[]" autocomplete="off" data-placeholder="Select Disposition" style="width: 100%;">

                                    @foreach($disposition_list as $key => $dispo)
                                    <option @if(in_array($dispo->id, $mapping))  selected  @endif value="{{$dispo->id}}">{{$dispo->title}}</option>
                                    @endforeach
                                </select>
                            </div>

                             <div class=" form-group col-md-6">
                                <label class="form-label">Set API Template </label>
                                <select class="form-select"  name="is_default" autocomplete="off" data-placeholder="Select Group" style="width: 100%;">
                                    <option @if($api_data->is_default == '0') selected @endif value="0">No</option>
                                    <option @if($api_data->is_default == '1') selected @endif value="1">Yes</option>
                                </select>
                            </div>
                        </div>

                        <br>
<div class="box-footer action-footer">
    <button class="btn btn-primary" type="submit">
        <i class="fa fa-refresh" aria-hidden="true"></i> Update
    </button>

    <a type="button" class="btn btn-warning" onclick="window.location.reload();">
        <i class="fa fa-refresh fa-lg"></i> Reset
    </a>

    <a type="button" class="btn btn-danger" href="{{ url('/api-data') }}">
        <i class="fa fa-reply fa-lg"></i> Cancel
    </a>
</div>

                        <!-- <div class="box-footer text-end">
                            <button class="btn btn-primary" type="submit"><i class="fa fa-refresh" aria-hidden="true"></i>
                                Update
                            </button>
                            &nbsp;
                            <a type="button" class="btn btn-warning" style="margin-right: 5px;" onclick="window.location.reload();">
                            <i class="fa fa-refresh fa-lg"></i> 
                            Reset
                            </a>
                            &nbsp;
                            <a type="button" class="btn btn-danger" style="margin-right: 5px;" href="{{url('/api-data')}}"><i class="fa fa-reply fa-lg"></i> 
                            Cancel
                            </a>
                        </div> -->
                    </div>
                </div>


                <div class="col-xs-12" style="overflow-x: auto;">
                    <a href="#" class="waves-effect waves-light btn btn-rounded btn-primary btn-bitbucket btn-sm mb-5" data-bs-toggle="modal" data-bs-target="#addRow"style="float:right;margin-right:40px;"><i class="fa fa-plus"></i> Add Parameter
                    </a>
                    <div id="table-responsive">
                    <table class="table mt-0 table-hover no-wrap" data-page-size="10" id="api_table">
                        <thead>
                            <tr>
                                <th>Parameter</th>
                                <th>Data</th>
                                <th>Remove</th>
                            </tr>
                        </thead>

                        <tbody id="param_label">
                            @foreach($api_data->parameter as $parameter)
                            @if($parameter->type == 'label')

                            <tr><td><input type='text' class='form-control' name='para_label[]' value='{{$parameter->parameter}}' class='param' required></td><td>
                                <select name='label[]' class='form-select' required='required'>
                                    @foreach($label_list  as $label)
                                    <option @if($parameter->value == $label->id) selected @endif value="{{$label->id}}">{{$label->title}}</option>
                                    @endforeach
                                </select></td><td><button class='btn btn-danger btn-remove'><i class='fa fa-trash-o'></i></button></td>
                            </tr>
                            @endif

                            @if($parameter->type == 'constant')
                            <tr><td><input type='text' class='form-control' name='para_constant[]' value='{{$parameter->parameter}}' class='param' required></td><td><input type='text' name='constant[]' class='form-control' value='{{$parameter->value}}' required='required'></td><td>
                                <button class='btn btn-danger btn-remove'><i class='fa fa-trash-o'></i></button></td>
                            </tr>
                            @endif
                            @endforeach
                        </tbody>
                    </table>
                        </div>
                </div>

                <div class="modal fade" id="addRow" tabindex="-1" aria-labelledby="addRowLabel" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title">Add Row</h5>
                                <button type="button" class="btn-close close" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                        
                                <div class="modal-body">
                                    <div class="form-group row">
                                        <div class="col-sm-6">
                                                    <label class="form-label">Type</label>
                                                        <select name="row_type" class="form-select" id="row_type" required>
                                                            <option value="label">Parameter & Label</option>
                                                            <option value="constant">Parameter & constant</option>
                                                        </select>
                                        </div>
                                            <div class="col-sm-6">
                                                    <label class="form-label">Number Of Rows</label>
                                                                <select name="row_count" class="form-select" id="row-count" required>
                                                                    <option value="1">1</option>
                                                                    <option value="2">2</option>
                                                                    <option value="3">3</option>
                                                                    <option value="4">4</option>
                                                                    <option value="5">5</option>
                                                                    <option value="6">6</option>
                                                                    <option value="7">7</option>
                                                                    <option value="8">8</option>
                                                                    <option value="9">9</option>
                                                                    <option value="10">10</option>
                                                                </select>
                                            </div>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                                    
                                                <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Close</button>
                                                <button type="button" name="submit"  value="add" class="btn btn-primary btn-sm" onclick="addRow();">Continue</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
        </div>
    </section>

<script src="https://code.jquery.com/jquery-3.7.0.js" integrity="sha256-JlqSTELeR4TLqP0OG9dxM7yDPqX1ox/HfgiSLBj8+kM=" crossorigin="anonymous"></script>
<script>
    
///////////////api //////////////


   $( document ).ready(function() {
       
        displayTable();
    });


    function addRow() {
        $('#addRow .close').trigger( "click" );
        var typ = $('#row_type').val();
        var num = $('#row-count').val();
        if(typ == "label")
        {
            for(var i = 0; i < num; i++)
            {
                $("#param_label").append("<?php echo $labelStr;?>");
            }
        }
        else if(typ == "constant")
        {
            for(var i = 0; i < num; i++) {
                $("#param_label").append("<?php echo $constantStr;?>");
            }
        }
        displayTable();
        return false;
    }
  
    function displayTable() {
        var rowCount = $('#param_label tr').length;
        if(rowCount > 0)
        {
            $('#api_table').removeClass('hidden');
        }
        else
        {
            $('#api_table').addClass('hidden');
        }

    }
    $('#api_table').on('click', '#param_label .btn-remove', function() {
        $(this).closest("tr").remove();
        displayTable();
    });



    $(document).on("click", ".deleteApi" , function() {
    if(confirm("Are you sure you want to delete this record?")){
        var api = $(this).data('api');
        // alert(api);
        //var account_no = $(this).data('account_no');
        //alert(account_no);
        var el = this;
        $.ajax({
            url: 'deleteApi/'+api,
            type: 'get',
            success: function(response){
                alert(response);
            }
        });
        window.location.reload(1);
    }
    else{
        return false;
    }
});


    $("#openLabelForm").click(function(){
        $("#myModal").modal();
        $("#name").val('');
        $("#status").val('1');
        $("#id").val('');
        $("#add-edit").html('Add Label');
    });


    $(document).on("click", ".editLabel" , function() {
    $("#myModal").modal();
    $("#add-edit").html('Edit Label');
    var edit_id = $(this).data('id');
    $.ajax({
        url: 'editLabel/'+edit_id,
        type: 'get',
        success: function(response){
            $("#name").val(response.name);
            $("#status").val(response.status);
            $("#id").val(response.id);
        }
    });
});


    $(document).on("click", ".deleteLabel" , function() {
    if(confirm("Are you sure you want to delete this?")){
        var delete_id = $(this).data('id');
        var el = this;
        $.ajax({
            url: 'deleteLabel/'+delete_id,
            type: 'get',
            success: function(response){
                $(el).closest( "tr" ).remove();
            }
        });
        window.location.reload(1);
    }
    else
    {
        return false;
    }
});


//////////////close api ///////////////


</script>


<script>
$(document).ready(function() {
    function initializeSelect2() {
        $('.js-example-basic-single.select2').select2({
            dropdownParent: $('#listModal')
        });

       
        $('.select2-container').css({
            'width': '100%',
            'display': 'block'
        });
        $('.select2-selection').css({
            'height': '38px',
            
            'border-radius': '1px'
        });
    }

    $('#listModal').on('shown.bs.modal', function() {
        initializeSelect2(); 
    });

    if ($('#listModal').hasClass('show')) {
        initializeSelect2();
    }
});
</script>

<style>
.select2-container {
    width: 100% !important;
}
.select2-selection--single {
    height: 38px !important; 
    display: flex;
    align-items: center;
}
.select2-selection__rendered {
    line-height: 36px !important;
}
.select2-selection__arrow {
    height: 36px !important;
}
</style>

@endsection