@extends('admin.layouts.app')

@section('style')
    <style>
        .sync-api-date,
        #sync_all_balance:hover {
            cursor: pointer;
        }
    </style>
@endsection

@section('content')

        <!--begin::Content container-->
        <div id="kt_app_content_container" class="app-container container-fluid" data-bs-backdrop='static'>
            <div class="p-2"></div>
            <!--begin::Card-->
            <div class="card">
                <!--begin::Card header-->
                <div class="card-header border-0 pt-6">
                    <!--begin::Card title-->
                                        @if($panelDetails->type != 'child')
                    <div class="card-title">
                        <a href="javascript:void(0);" class="btn btn-sm fw-bold btn-dark add-payment-btn">New
                            Provider</a>&nbsp;
                        <!--<a href="javascript:void(0);" class="btn btn-sm fw-bold btn-primary change-password-btn">Change
                            Providers Password</a> -->
                    </div>
                    @endif
                    <!--begin::Card title-->
                </div>
                <!--end::Card header-->
                <!--begin::Card body-->
                <div class="card-body py-4">
                    @if (session('success'))
                        <div class="alert alert-success">
                            {{ session('success') }}
                        </div>
                    @endif
                    @if (session('error'))
                        <div class="alert alert-warning">
                            {{ session('error') }}
                        </div>
                    @endif
                    <div class="table-responsive mt-5">
                        <!--begin::Table-->
                        <table class="table table-rounded table-striped table-row-bordered table-row-gray-400 gy-7 gs-7" id="kt_table_payments">
                            <!--begin::Table head-->
                            <thead>
                                <!--begin::Table row-->
                                <tr class="fw-semibold fs-6 text-gray-800 border-bottom border-gray-700">
                                    <th class="min-w-100px text-dark fw-bold">Provider</th>
                                    <th class="min-w-100px text-dark fw-bold">Balance <span id="sync_all_balance" data-toggle="tooltip"
                                            title="Sync"
                                            class="fas fa-sync-alt animate__animated animate__bounceIn"></span></th>
                                    <th class="min-w-100px text-dark fw-bold"">Action</th>
                                </tr>
                                <!--end::Table row-->
                            </thead>
                            <!--end::Table head-->
                            <!--begin::Table body-->
                            <tbody class="text-dark fw-semibold">
                            </tbody>
                            <!--end::Table body-->
                        </table>
                    </div>
                    <!--end::Table-->
                </div>
                <!--end::Card body-->
            </div>
            <!--end::Card-->
        </div>

    <!--end::Content container-->
    <div class="modal fade" id="addPayment" tabindex="-1" role="dialog" aria-labelledby="addPaymentTitle"
        aria-hidden="true" data-bs-backdrop='static'>
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <form action="{{ route('admin.storeproviders') }}" method="POST" id="addBugReportForm">
                    <div class="modal-header">
                        <h2>New Provider</h2>
                        <div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal"
                            aria-label="Close">
                            <!--begin::Svg Icon | path: icons/duotune/arrows/arr061.svg-->
                            <span class="svg-icon svg-icon-1">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1"
                                        transform="rotate(-45 6 17.3137)" fill="currentColor" />
                                    <rect x="7.41422" y="6" width="16" height="2" rx="1"
                                        transform="rotate(45 7.41422 6)" fill="currentColor" />
                                </svg>
                            </span>
                            <!--end::Svg Icon-->
                        </div>
                    </div>
                    <div class="modal-body">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-dark">Add new Provider</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="editprovider" tabindex="-1" role="dialog" aria-labelledby="editproviderTitle"
        aria-hidden="true" data-bs-backdrop='static'>
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <form action="{{ route('admin.updateProviders') }}" method="POST" id="editproviderForm">
                    <div class="modal-header">
                        <h2>Edit Provider</h2>
                        <div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal"
                            aria-label="Close">
                            <!--begin::Svg Icon | path: icons/duotune/arrows/arr061.svg-->
                            <span class="svg-icon svg-icon-1">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1"
                                        transform="rotate(-45 6 17.3137)" fill="currentColor" />
                                    <rect x="7.41422" y="6" width="16" height="2" rx="1"
                                        transform="rotate(45 7.41422 6)" fill="currentColor" />
                                </svg>
                            </span>
                            <!--end::Svg Icon-->
                        </div>
                    </div>
                    <div class="modal-body">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-dark">Update</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="updatepassword" tabindex="-1" role="dialog" aria-labelledby="updatepasswordTitle"
        aria-hidden="true" data-bs-backdrop='static'>
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <form action="{{ route('admin.updatePasswordProviders') }}" method="POST" id="updatepasswordForm">
                    <div class="modal-header">
                        <h2>Change Password</h2>
                        <div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal"
                            aria-label="Close">
                            <!--begin::Svg Icon | path: icons/duotune/arrows/arr061.svg-->
                            <span class="svg-icon svg-icon-1">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1"
                                        transform="rotate(-45 6 17.3137)" fill="currentColor" />
                                    <rect x="7.41422" y="6" width="16" height="2" rx="1"
                                        transform="rotate(45 7.41422 6)" fill="currentColor" />
                                </svg>
                            </span>
                            <!--end::Svg Icon-->
                        </div>
                    </div>
                    <div class="modal-body">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-dark">Change Password</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="verification" tabindex="-1" role="dialog" aria-labelledby="verificationTitle"
        aria-hidden="true" data-bs-backdrop='static'>
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <form action="{{ route('admin.passwordUnlockProviders') }}" method="POST" id="verificationForm">
                    <div class="modal-header">
                        <h2>Password</h2>
                        <div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal"
                            aria-label="Close">
                            <!--begin::Svg Icon | path: icons/duotune/arrows/arr061.svg-->
                            <span class="svg-icon svg-icon-1">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1"
                                        transform="rotate(-45 6 17.3137)" fill="currentColor" />
                                    <rect x="7.41422" y="6" width="16" height="2" rx="1"
                                        transform="rotate(45 7.41422 6)" fill="currentColor" />
                                </svg>
                            </span>
                            <!--end::Svg Icon-->
                        </div>
                    </div>
                    <div class="modal-body">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-dark">Submit</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script>
        var table = $('#kt_table_payments').DataTable({
            "lengthMenu": [200, 500, 1000],
            ajax: "{{ route('admin.providersSetting') }}",
            columns: [{
                    data: 'api_name',
                    name: 'api_name',
                    orderable: true
                },
                {
                    data: 'balance',
                    name: 'balance',
                    orderable: false
                },
                {
                    data: 'action',
                    name: 'action',
                    orderable: false
                },
            ],
            order: false
        });
        var currentRequest = null;
        var currentRequest = null;
        $(document).on('click', '.add-payment-btn', function() {
            $.LoadingOverlay("show");
            var formData = new FormData();
            formData.append('id', '');
            currentRequest = jQuery.ajax({
                type: 'POST',
                data: formData,
                url: "{{ route('admin.addProviders') }}",
                dataType: 'JSON',
                processData: false,
                contentType: false,
                beforeSend: function() {
                    if (currentRequest != null) {
                        currentRequest.abort();
                    }
                },
                success: function(data) {
                    $.LoadingOverlay("hide");
                    $('#addPayment .modal-body').html(data.htmls)
                    $('#addPayment').modal('show')
                },
                error: function(e) {
                    // Error
                    $.LoadingOverlay("hide");
                    return false;
                }
            });
            return false;
        });

        $(document).on('click', '.edit-payment-btn', function() {
            $.LoadingOverlay("show");
            var id = $(this).attr('data-id');
            var formData = new FormData();
            formData.append('id', id);
            currentRequest = jQuery.ajax({
                type: 'POST',
                data: formData,
                url: "{{ route('admin.editProviders') }}",
                dataType: 'JSON',
                processData: false,
                contentType: false,
                beforeSend: function() {
                    if (currentRequest != null) {
                        currentRequest.abort();
                    }
                },
                success: function(data) {
                    $.LoadingOverlay("hide");
                    $('#editprovider .modal-body').html(data.htmls)
                    $('#editprovider').modal('show')
                },
                error: function(e) {
                    // Error
                    $.LoadingOverlay("hide");
                    return false;
                }
            });
            return false;
        });

        $(document).on('click', '.delete-payment-btn', function() {
            $.LoadingOverlay("show");
            var id = $(this).attr('data-id');
            var formData = new FormData();
            formData.append('id', id);
            currentRequest = jQuery.ajax({
                type: 'POST',
                data: formData,
                url: "{{ route('admin.deleteProviders') }}",
                dataType: 'JSON',
                processData: false,
                contentType: false,
                beforeSend: function() {
                    if (currentRequest != null) {
                        currentRequest.abort();
                    }
                },
                success: function(data) {
                    $.LoadingOverlay("hide");
                    location.reload();
                },
                error: function(e) {
                    // Error
                    $.LoadingOverlay("hide");
                    return false;
                }
            });
            return false;
        });

        $('#sync_all_balance').click(function() {
            $(".sync-api-date").each(function() {
                $(this).click();
            });
        });

        $(document).on('click', '.sync-api-date', function() {
            var $icon = $(this);
            var id = $icon.attr('data-id');
            $icon.addClass("fa-spin");
            $.ajax({
                type: 'POST',
                data: {
                    id: id
                },
                url: "{{ route('admin.syncProviders') }}",
                dataType: 'JSON',
                success: function(data) {
                    $("#sync_icon_" + id).removeClass("fa-spin");
                    $("#balance_" + id).text(data.balance);
                },
                error: function(e) {
                    $icon.removeClass("fa-spin");
                }
            });
        });

        $(document).on('click', '.change-password-btn', function() {
            $.LoadingOverlay("show");
            var formData = new FormData();
            formData.append('id', '');
            currentRequest = jQuery.ajax({
                type: 'POST',
                data: formData,
                url: "{{ route('admin.passwordProviders') }}",
                dataType: 'JSON',
                processData: false,
                contentType: false,
                beforeSend: function() {
                    if (currentRequest != null) {
                        currentRequest.abort();
                    }
                },
                success: function(data) {
                    $.LoadingOverlay("hide");
                    $('#updatepassword .modal-body').html(data.htmls)
                    $('#updatepassword').modal('show')
                },
                error: function(e) {
                    // Error
                    $.LoadingOverlay("hide");
                    return false;
                }
            });
            return false;
        });

        $(document).ready(function() {
            $("#addBugReportForm").validate({
                rules: {
                    name: "required",
                    url: "required",
                    apikey: "required",
                }
            });
        })

        $(document).ready(function() {
            $("#editprovider").validate({
                rules: {
                    name: "required",
                    url: "required",
                    apikey: "required",
                }
            });
        })

        $(document).ready(function() {
            $("#updatepasswordForm").validate({
                rules: {
                    old_password: "required",
                    new_password: "required",
                }
            });
        })
    </script>
@endsection