@extends('layouts.app')
@section('title', 'Middleware | API Configuration')
@section('content')
    <div class="container-fluid mt-2">
        @include('app.settings.index')
        <div class="col-lg-12">
            <div class="card ">
                <div class="card-body">
                    <div class="p-0">
                        <table id="api_datatable" class="table table-bordered nowrap"
                            style="border-collapse: collapse; border-spacing: 0; width: 100%;">
                            <thead>
                                <tr>
                                    <th>Sl No</th>
                                    <th>Client</th>
                                    <th>Created At</th>
                                    <th>Updated At</th>
                                    <th>Status</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody id="apiConfigurationsBody">
                                @foreach ($apiConfigurations as $config)
                                    <tr>
                                        <td>{{ $loop->iteration }}</td>
                                        <td>{{ optional($config->client)->client_name }}</td>
                                        <td>{{ $config->created_at }}</td>
                                        <td>{{ $config->updated_at }}</td>
                                        <td class="text-center">
                                            <div class="custom-control custom-switch">
                                                <input type="checkbox" class="custom-control-input"
                                                    id="customSwitch{{ $config->id }}" value="{{ $config->id }}"
                                                    onclick="ApiStatus('{{ $config->id }}')"
                                                    @if ($config->is_active == 1) checked @endif>
                                                <label class="custom-control-label" for="customSwitch{{ $config->id }}">
                                                    @if ($config->is_active == 1)
                                                        Active
                                                    @else
                                                        Inactive
                                                    @endif
                                                </label>
                                            </div>
                                        </td>
                                        <td class="text-center">
                                            <span class="edit_apiconfig ml-2" style="cursor: pointer"
                                                data-id="{{ $config->id }}">
                                                <img class="menuicon tbl_editbtn"
                                                    src="{{ asset('assets/images/edit.svg') }}">&nbsp;
                                            </span>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{-- AddingAPIConfiguration --}}
    <div class="modal fade" id="myModal">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Add Config</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form method="post" id="apiform" name="apiform" data-parsley-validate>
                    @csrf
                    <input type="hidden" name="user_id" value="{{ auth()->user()->id }}" />
                    <div class="modal-body">
                        <div class="row">
                            @if (Session::get('user_type_id') == 4)
                                <input type="hidden" name="user_type_id" id="user_type_id" value="5">
                            @else
                                <div class="col-lg-4">
                                    <label for="example-email-input" class="col-form-label"> Client <span
                                            class="text-danger"> * </span></label>
                                    <Select required class="form-control select_client" name="client_id" id="user_type_id">
                                        <option selected disabled value="">Select Client</option>
                                        @foreach ($clientList as $client)
                                            <option value="{{ $client->id }}">{{ $client->client_name }}</option>
                                        @endforeach
                                    </Select>
                                </div>
                                <div class="col-lg-8">
                                    <label>Configuration</label>
                                    <textarea class="form-control col-12" style="height: 100%" name="config_data" id="configuration"></textarea>
                                </div>
                            @endif
                        </div>
                        <div class="row mt-1">
                            <div class="col-lg-2">
                                <br>
                                <div class="mt-3">
                                    <input type="checkbox" class="mx-1" value="1" id="is_active" name="is_active" />
                                    <label for="" class="">Is Active ?</label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary" onclick="apiconfig();">Create</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- Edit Config --}}
    <div class="modal fade" id="myModalEdit" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Edit Config</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form method="post" id="update_apiconfigfrm" name="update_apiconfigfrm" data-parsley-validate
                    enctype="multipart/form-data">
                    @csrf
                    <input name="id" value="" id="client_id_ed" type="hidden" />
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-lg-4">
                                <label for="example-email-input" class="col-form-label"> Client <span
                                        class="text-danger"> * </span></label>
                                <select required class="form-control select_client" name="client_id" id="client_name_ed">
                                    <option selected disabled value="">Select Client</option>
                                    @foreach ($clientList as $client)
                                        <option value="{{ $client->id }}">{{ $client->client_name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-lg-8">
                                <label>Configuration</label>
                                <textarea class="form-control col-12" style="height: 100%" name="config_data" id="configuration_ed"></textarea>
                            </div>
                        </div>
                        <div class="row mt-1">
                            <div class="col-lg-2">
                                <br>
                                <div class="mt-3">
                                    <input type="checkbox" class="mx-1" value="1" id="is_active_ed"
                                        name="is_active" />
                                    <label for="" class="">Is Active ?</label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Update</button>
                    </div>
                </form>
            </div>
        </div>
    </div>



    {{-- Js --}}
    <script type="text/javascript">
        $(function() {
            @if (Session::has('success'))
                new PNotify({
                    title: 'Success',
                    delay: 500,
                    text: "{{ Session::get('success') }}",
                    type: 'success'
                });
            @endif
            @if ($errors->any())
                var err = "";
                @foreach ($errors->all() as $error)

                    new PNotify({
                        title: 'Error',
                        text: "{{ $error }}",
                        delay: 800,
                        type: 'error'
                    });
                @endforeach
            @endif
        });

        function userStatus(value) {
            window.location.href = '/userStatus/' + value;
        }
        $(document).ready(function() {
            var $tabid = 'tab3';
            $(".odtabs").not("#tab3").addClass('btn-outline-secondary');
            $("#tab3").addClass('btn-secondary');

            $('.modal').on('hidden.bs.modal', function() {
                $(this).find('form')[0].reset();
                $(this).find('form').parsley().reset();
            });
            $("form").parsley();
            var table = $('#api_datatable').DataTable({
                responsive: true,
                dom: 'l<"toolbar">Bfrtip',
                buttons: [
                    'excel'
                ],
                initComplete: function() {
                    $("div.toolbar").html(
                        '<button id="addConifg" type="button" class="ml-2 btn btn-primary" data-toggle="modal" data-target="#myModal"><img class="menuicon" src="{{ asset('assets/images/add.svg') }}">&nbsp;Add Config</button><br />'
                        );
                }
            });
        });

        function getUsers() {
            window.location.href = "/users";
        }

        function apiconfig() {
            if ($("#apiform").parsley()) {

                if ($("#apiform").parsley().validate()) {
                    event.preventDefault();
                    if ($("#apiform").parsley().isValid()) {
                        $.ajax({
                            type: "POST",
                            cache: false,
                            async: false,
                            url: "{{ url('/apiInsert') }}",
                            data: new FormData($("#apiform")[0]),
                            processData: false,
                            contentType: false,
                            success: function(response) {
                                if (response.msg == "Users Already Exists!") {

                                    new PNotify({
                                        title: 'Error',
                                        text: response.msg,
                                        type: 'error'
                                    });
                                    return false;
                                } else if (response.msg == "Only Image Allowed!") {

                                    new PNotify({
                                        title: 'Error',
                                        text: response.msg,
                                        type: 'error'
                                    });
                                    return false;
                                } else if (response.msg == "Users Added Successfully!") {

                                    new PNotify({
                                        title: 'Success',
                                        text: response.msg,
                                        type: 'success'
                                    });
                                    setTimeout(function() {
                                        location.reload();
                                    }, 1000);
                                }
                            },
                            error: function(response) {

                                var err = "";
                                $.each(response.responseJSON.errors, function(field_name, error) {
                                    err = err + error;
                                });
                                new PNotify({
                                    title: 'Error',
                                    text: err,
                                    type: 'error',
                                    delay: 1000
                                });
                            }
                        });
                    }
                }
            }
        }

        function usersStatus(value) {
            window.location.href = '/usersStatus/' + value;
        }


        // apiStatus
        function ApiStatus(id) {
            var url = '/ApiStatus/' + id;
            var data = {};
            var csrfToken = "{{ csrf_token() }}";

            $.ajax({
                type: 'POST',
                url: url,
                data: data,
                headers: {
                    'X-CSRF-Token': csrfToken,
                },
                success: function(response) {
                    if (response.message == "Status Changed Successfully!") {
                        var label = $('label[for="customSwitch' + id + '"]');
                        if (response.newStatus == 1) {
                            label.text('Active');
                        } else {
                            label.text('Inactive');
                        }
                        new PNotify({
                            title: 'Success',
                            delay: 500,
                            text: "Status Changed Successfully!",
                            type: 'success'
                        });
                    } else {
                        new PNotify({
                            title: 'Error',
                            text: "An issue has arisen during the update",
                            delay: 800,
                            type: 'error'
                        });
                    }
                }
            });
        }

        // addApi
        function apiconfig() {
            var formData = $('#apiform').serialize();

            $.ajax({
                type: 'POST',
                url: "{{ url('/apiInsert') }}",
                data: formData,
                success: function(response) {

                    console.log(response);
                    $('#myModal').modal('hide');
                },
                error: function(xhr, status, error) {

                    console.error('Error submitting form: ' + error);
                }
            });
        }


        // Edit ApiConfig
        $('#api_datatable').on('click', '.edit_apiconfig', function() {
            var id = $(this).data('id');
            var url = '{{ route('edit_apiconfig') }}';
            $.ajax({
                type: "post",
                url: url,
                data: {
                    id: id,
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    var res = response;

                    $('#client_id_ed').val(res.id);
                    $('#client_name_ed').val(res.client_id);
                    $('#configuration_ed').val(res.config_data);


                    if (res.is_active == 1) {
                        $("#is_active_ed").prop('checked', true);
                    } else {
                        $("#is_active_ed").prop('checked', false);
                    }

                    $("#myModalEdit").modal('show');
                }
            });
        });

        // updateapi
        $('#update_apiconfigfrm').on('submit', function(event) {
            event.preventDefault();
            $.ajax({
                type: 'POST',
                url: '{{ route('update_apiconfig') }}',
                data: {
                    id: $('#client_id_ed').val(),
                    client_id: $('#client_name_ed').val(),
                    config_data: $('#configuration_ed').val(),
                    is_active: $('#is_active_ed').is(':checked') ? 1 : 0,
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    var res = response;
                    $('#is_active_ed').prop('checked', res.is_active == 1);
                    $("#myModalEdit").modal('hide');
                    new PNotify({
                        title: 'Success',
                        text: 'Updated successfully!',
                        type: 'success'
                    });

                    setTimeout(function() {
                        location.reload();
                    });
                },
                error: function(response) {
                    console.error(response);
                }
            });
        });
    </script>
@endsection