@extends('layouts.app')

@section('content')
<div class="mb-4 d-flex">
    <h3 class="text-muted my-auto"><b><i class="fa fa-cogs mr-2"></i>API Services</b></h3>
    <a href="javascript:void();" onclick="showFormBar()" class="btn btn-primary ml-auto">Add API Services</a>
</div>
<div class="card">
    <div class="card-body">
        <table class="datatable table table-hover table-center">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>URL</th>
                    <th>Code</th>
                    <th class="text-right">Action</th>
                </tr>
            </thead>
            <tbody>
                @foreach($apis as $_api)
                <tr>
                    <td>{{ $_api->name }}</td>
                    <td>
                        {{ substr($_api->url, 0, 30) }}
                        @if(strlen($_api->url) > 30)
                            <b>... </b>
                        @endif
                    </td>
                    <td>{{ substr($_api->body, 0, 45) }}
                        @if(strlen($_api->body) > 45)
                            <b>... </b>
                        @endif
                    </td>
                    <td class="text-right">
                        <div class="d-flex">
                            <a href="{{ route('api.edit', $_api->id) }}" class="btn btn-primary btn-sm ml-auto mr-2">Edit</a>
                            <form action="{{ route('api.destroy', $_api->id) }}" method="POST">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-primary btn-sm ml-auto">Delete</button>
                            </form>
                        </div>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
        <div class="mt-4">
            {{ $apis->links() }}
        </div>
    </div>
</div>
@endsection

@section('form-bar')
<h4>Add API Services</h4>
<form action="{{ isset($id)? route('api.update', $id) : route('api.store') }}" method="POST">
    @csrf
    @if(isset($id))
        @method('PUT')
    @endif
    <div class="form-group">
        <label for="">Name</label>
        <input type="text" name="name" class="form-control" value="{{ isset($id)? $api->name : '' }}" required>
    </div>
    <div class="form-group">
        <label for="">URL</label>
        <input type="text" name="url" class="form-control" value="{{ isset($id)? $api->url : '' }}" required>
    </div>
    <div class="form-group">
        <label for="">Type</label>
        <select name="type" class="form-control" id="type">
            <option value="REST">REST</option>
            <option value="SOAP">SOAP</option>
        </select>
    </div>
    <div class="form-group">
        <label for="">Method</label>
        <select name="method" class="form-control" id="method">
            <option value="POST">POST</option>
            <option value="GET">GET</option>
        </select>
    </div>

    <div class="card">
        <label for="">Headers</label>
        <div class="form-group">
            <div class="header_field">
                @if(isset($id))
                    @foreach($header_val as $key1 => $val1)
                        <div class="mb-2">
                            <div class="form-group"> 
                                <div class="row p-2"> 
                                    <div class="col-md-6"> 
                                        <input type="text" data-role="tagsinput" class="input-tags form-control" name="header_field_key[]" value="{{ $key1 }}" required> 
                                    </div> 
                                    <div class="col-md-6"> 
                                        <input type="text" data-role="tagsinput" class="input-tags form-control" name="header_field_value[]" value="{{ $val1 }}" required> 
                                    </div> 
                                </div> 
                            </div> 
                            <a href="javascript:void(0);" class="remove-field pl-2" onclick="remove_field(this);">
                            <i class="fas fa-times"></i></i> Remove</a>
                        </div>
                    @endforeach
                @endif
            </div>
            <div class="add-more mb-4">
                <a href="javascript:void(0);" class="add-service" onclick="add_header_field(this);"><i 
                    class="fas fa-plus"></i> Add</a>
            </div>
        </div>
    </div>
    <hr>

    <div class="card">
        <label for="">Body</label>
        <div class="form-group">
            <div class="body">
                @if(isset($id))
                    @foreach($body_val as $key2 => $val2)
                        <div class="mb-2">
                            <div class="form-group"> 
                                <div class="row p-2"> 
                                    <div class="col-md-6"> 
                                        <input type="text" data-role="tagsinput" class="input-tags form-control" name="body_key[]" value="{{ $key2 }}" required> 
                                    </div> 
                                    <div class="col-md-6"> 
                                        <input type="text" data-role="tagsinput" class="input-tags form-control" name="body_value[]" value="{{ $val2 }}" required> 
                                    </div> 
                                </div> 
                            </div> 
                            <a href="javascript:void(0);" class="remove-field pl-2" onclick="remove_field(this);">
                            <i class="fas fa-times"></i></i> Remove</a>
                        </div>
                    @endforeach
                @else
                    <div class="mb-2">
                        <div class="form-group"> 
                            <div class="row p-2"> 
                                <div class="col-md-6"> 
                                    <input type="text" data-role="tagsinput" class="input-tags form-control" name="body_key[]" placeholder="userName" required> 
                                </div> 
                                <div class="col-md-6"> 
                                    <input type="text" data-role="tagsinput" class="input-tags form-control" name="body_value[]" placeholder="api_username" required> 
                                </div> 
                            </div> 
                        </div> 
                    </div>
                    <div class="mb-2">
                        <div class="form-group"> 
                            <div class="row p-2"> 
                                <div class="col-md-6"> 
                                    <input type="text" data-role="tagsinput" class="input-tags form-control" name="body_key[]" placeholder="password" required> 
                                </div> 
                                <div class="col-md-6"> 
                                    <input type="text" data-role="tagsinput" class="input-tags form-control" name="body_value[]" placeholder="api_password" required> 
                                </div> 
                            </div> 
                        </div> 
                    </div>
                    <div class="mb-2">
                        <div class="form-group"> 
                            <div class="row p-2"> 
                                <div class="col-md-6"> 
                                    <input type="text" data-role="tagsinput" class="input-tags form-control" name="body_key[]" placeholder="costCenterCode" required> 
                                </div> 
                                <div class="col-md-6"> 
                                    <input type="text" data-role="tagsinput" class="input-tags form-control" name="body_value[]" placeholder="api_cost_center_code" required> 
                                </div> 
                            </div> 
                        </div> 
                    </div>
                @endif
            </div>
            <div class="add-more mb-4">
                <a href="javascript:void(0);" class="add-service" onclick="add_field(this);"><i 
                    class="fas fa-plus"></i> Add</a>
            </div>
        </div>
    </div>
    <hr>

    <div class="card">
        <label for="">Key Fields</label>
        <div class="form-group">
            <div class="key_field">
                @if(isset($id))
                    @foreach($key_val as $key3 => $val3)
                        <div class="mb-2">
                            <div class="form-group"> 
                                <div class="row p-2"> 
                                    <div class="col-md-6"> 
                                        <input type="text" data-role="tagsinput" class="input-tags form-control" name="key_field_num[]" value="{{ $key3 }}" required> 
                                    </div> 
                                    <div class="col-md-6"> 
                                        <input type="text" data-role="tagsinput" class="input-tags form-control" name="key_field_val[]" value="{{ $val3 }}" required> 
                                    </div> 
                                </div> 
                            </div> 
                            <a href="javascript:void(0);" class="remove-field pl-2" onclick="remove_field(this);">
                            <i class="fas fa-times"></i></i> Remove</a>
                        </div>
                    @endforeach
                @endif
            </div>
            <div class="add-more mb-4">
                <a href="javascript:void(0);" class="add-service" onclick="add_key_field(this);"><i 
                    class="fas fa-plus"></i> Add</a>
            </div>
        </div>
    </div>
    <hr>

    <div class="form-group">
        <label for="">Extra Fields</label>
        <textarea name="extra_fields" rows="10" class="form-control">{{ isset($id)? $api->extra_fields : '' }}</textarea>
    </div>

    <!-- <div class="card">
        <label for="">Extra Fields</label>
        <div class="form-group">
            <div class="extra_field">
                @if(isset($id))
                    @foreach($body_val as $key => $val)
                        <div class="mb-2">
                            <div class="form-group"> 
                                <div class="row p-2"> 
                                    <div class="col-md-6"> 
                                        <input type="text" data-role="tagsinput" class="input-tags form-control" name="extra_field_key[]" value="{{ $key }}"> 
                                    </div> 
                                    <div class="col-md-6"> 
                                        <input type="text" data-role="tagsinput" class="input-tags form-control" name="extra_field_value[]" value="{{ $val }}"> 
                                    </div> 
                                </div> 
                            </div> 
                            <a href="javascript:void(0);" class="remove-field pl-2" onclick="remove_field(this);">
                            <i class="fas fa-times"></i></i> Remove</a>
                        </div>
                    @endforeach
                @endif
            </div>
            <div class="add-more mb-4">
                <a href="javascript:void(0);" class="add-service" onclick="add_extra_field(this);"><i 
                    class="fas fa-plus"></i> Add</a>
            </div>
        </div>
    </div>
    <hr> -->

    <div class="form-group">
        <label for="">Shipping Description</label>
        <input type="text" name="shippind_desc" class="form-control" value="{{ isset($id)? $api->shippind_desc : '' }}" required>
    </div>
    <button type="submit" class="btn btn-primary">Save</button>
    <a @if(isset($id)) href="{{ route('api.index') }}" @else onclick="hideFormBar();" @endif class="btn btn-primary ml-auto text-light">Close</a>
</form>
@endsection

@section('script')
@if(isset($id))
<script>
    $(document).ready(function(){
        var formBar = $('.form-bar');
        var formBarOverlay = $('.form-bar-overlay');

        formBar.addClass('show-form-bar'); 
        formBarOverlay.addClass('show-form-bar-overlay');

        $('#type').val('{{ isset($id)? $api->type : '' }}');
        $('#method').val('{{ isset($id)? $api->method : '' }}');
    });

    function add_service(obj) {
        var container = $('.body');

        container.append('<div class="mb-2"><div class="form-group"> <div class="row p-2"> <div class="col-md-6"> <input type="text" data-role="tagsinput" class="input-tags form-control" name="body_key[]" placeholder="Example:{product_detail}" required> </div> <div class="col-md-6"> <input type="text" data-role="tagsinput" class="input-tags form-control" name="body_value[]" placeholder="Example:product_details" required> </div> </div> </div> <a href="javascript:void(0);" class="remove-field pl-2" onclick="remove_field(this);"><i class="fas fa-times"></i></i> Remove</a></div>');
    }

    function add_key_field(obj) {
        var container = $('.key_field');

        container.append('<div class="mb-2"><div class="form-group"> <div class="row p-2"> <div class="col-md-6"> <input type="text" data-role="tagsinput" class="input-tags form-control" name="key_field[]" required> </div> <div class="col-md-6"> <input type="text" data-role="tagsinput" class="input-tags form-control" name="key_val[]" placeholder="Key Fields" required> </div> </div> </div> <a href="javascript:void(0);" class="remove-field pl-2" onclick="remove_field(this);"><i class="fas fa-times"></i></i> Remove</a></div>');
    }

    function add_header_field(obj) {
        var container = $('.header_field');

        container.append('<div class="mb-2"><div class="form-group"> <div class="row p-2"> <div class="col-md-6"> <input type="text" data-role="tagsinput" class="input-tags form-control" name="header_field_key[]" required> </div> <div class="col-md-6"> <input type="text" data-role="tagsinput" class="input-tags form-control" name="header_field_value[]" placeholder="Key Fields" required> </div> </div> </div> <a href="javascript:void(0);" class="remove-field pl-2" onclick="remove_field(this);"><i class="fas fa-times"></i></i> Remove</a></div>');
    }

    // function add_extra_field(obj) {
    //     var container = $('.extra_field');

    //     container.append('<div class="mb-2"><div class="form-group"> <div class="row p-2"> <div class="col-md-6"> <input type="text" data-role="tagsinput" class="input-tags form-control" name="extra_field_key[]" disabled> </div> <div class="col-md-6"> <input type="text" data-role="tagsinput" class="input-tags form-control" name="extra_field_value[]" placeholder="Key Fields"> </div> </div> </div> <a href="javascript:void(0);" class="remove-field pl-2" onclick="remove_field(this);"><i class="fas fa-times"></i></i> Remove</a></div>');
    // }

    function remove_control(obj) {
        var _this = $(obj);

        _this.parent().remove();
    }
</script>
@endif

<script>
    function add_field(obj) {
        var container = $('.body');

        container.append('<div class="mb-2"><div class="form-group"> <div class="row p-2"> <div class="col-md-6"> <input type="text" data-role="tagsinput" class="input-tags form-control" name="body_key[]" required> </div> <div class="col-md-6"> <input type="text" data-role="tagsinput" class="input-tags form-control" name="body_value[]" required> </div> </div> </div> <a href="javascript:void(0);" class="remove-field pl-2" onclick="remove_field(this);"><i class="fas fa-times"></i></i> Remove</a></div>');
    }

    function add_key_field(obj) {
        var container = $('.key_field');

        container.append('<div class="mb-2"><div class="form-group"> <div class="row p-2"> <div class="col-md-6"> <input type="text" data-role="tagsinput" class="input-tags form-control" name="key_field_num[]" required> </div> <div class="col-md-6"> <input type="text" data-role="tagsinput" class="input-tags form-control" name="key_field_val[]" required> </div> </div> </div> <a href="javascript:void(0);" class="remove-field pl-2" onclick="remove_field(this);"><i class="fas fa-times"></i></i> Remove</a></div>');
    }

    function add_header_field(obj) {
        var container = $('.header_field');

        container.append('<div class="mb-2"><div class="form-group"> <div class="row p-2"> <div class="col-md-6"> <input type="text" data-role="tagsinput" class="input-tags form-control" name="header_field_key[]" required> </div> <div class="col-md-6"> <input type="text" data-role="tagsinput" class="input-tags form-control" name="header_field_value[]" required> </div> </div> </div> <a href="javascript:void(0);" class="remove-field pl-2" onclick="remove_field(this);"><i class="fas fa-times"></i></i> Remove</a></div>');
    }

    // function add_extra_field(obj) {
    //     var container = $('.extra_field');

    //     container.append('<div class="mb-2"><div class="form-group"> <div class="row p-2"> <div class="col-md-6"> <input type="text" data-role="tagsinput" class="input-tags form-control" name="extra_field_key[]"> </div> <div class="col-md-6"> <input type="text" data-role="tagsinput" class="input-tags form-control" name="extra_field_value[]"> </div> </div> </div> <a href="javascript:void(0);" class="remove-field pl-2" onclick="remove_field(this);"><i class="fas fa-times"></i></i> Remove</a></div>');
    // }

    function remove_field(obj) {
        var _this = $(obj);

        _this.parent().remove();
    }
</script>
@endsection