@extends('layouts.dashboard')
<style>
    .table td {
        vertical-align: middle !important;
        padding: 8px !important;
    }

    .rangepicker-wrapper {
        padding: 55px 0 20px 0;
    }

    .range_container {
        width: 100%;
        max-width: 600px;
        display: flex;
        flex-direction: column;
    }

    .sliders_control {
        position: relative;
    }

    .slider-tooltip {
        position: absolute;
        top: -42px;
        left: 0;
        width: fit-content;
        background-color: #000;
        color: #fff;
        /* This is the value of --_tooltip-txt-clr */
        font-size: 0.8rem;
        border-radius: 4px;
        padding: 4px 6px;
        text-align: center;
        translate: -50% 0;
    }

    .slider-tooltip::before {
        content: "";
        position: absolute;
        bottom: -0.25rem;
        left: 50%;
        translate: -50% 0;
        width: .5rem;
        height: .5rem;
        rotate: 45deg;
        z-index: -1;
        background-color: #000;
        /* This is the value of --_tooltip-bg-clr */
    }

    input[type=range]::-webkit-slider-thumb {
        -webkit-appearance: none;
        pointer-events: all;
        width: 15px;
        /* This is the value of --_marker-size */
        height: 15px;
        /* This is the value of --_marker-size */
        background-color: #0EA5E9;
        /* This is the value of --_marker-border-clr */
        border-radius: 50%;
        box-shadow: 0 0 0 1px #0EA5E9;
        /* This is the value of --_marker-border-clr */
        cursor: pointer;
    }

    input[type=range]::-moz-range-thumb {
        -webkit-appearance: none;
        pointer-events: all;
        width: 15px;
        /* This is the value of --_marker-size */
        height: 15px;
        /* This is the value of --_marker-size */
        background-color: #0EA5E9;
        /* This is the value of --_marker-border-clr */
        border-radius: 50%;
        box-shadow: 0 0 0 1px #0EA5E9;
        /* This is the value of --_marker-border-clr */
        cursor: pointer;
    }

    input[type=range]::-webkit-slider-thumb:hover {
        background: #f7f7f7;
    }

    input[type=range]::-webkit-slider-thumb:active {
        box-shadow: inset 0 0 3px #387bbe, 0 0 9px #387bbe;
        -webkit-box-shadow: inset 0 0 3px #387bbe, 0 0 9px #387bbe;
    }

    input[type="range"] {
        -webkit-appearance: none;
        appearance: none;
        height: 3px;
        /* This is the value of --_track-heigt */
        width: 100%;
        position: absolute;
        background-color: #0EA5E9;
        /* This is the value of --_marker-border-clr */
        pointer-events: none;
    }

    #fromSlider {
        height: 0;
        z-index: 1;
    }

    .scale {
        display: flex;
        justify-content: space-between;
        margin-top: 2rem;
        position: relative;
        width: calc(100% - 15px);
        /* This is the value of --_marker-size */
        margin-inline: auto;
        font-size: 0.8rem;
    }

    .scale div {
        position: absolute;
        translate: -50% 0;
    }

    .scale div::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        translate: -50% -125%;
        width: 1px;
        height: 10px;
        background-color: #666;
    }

    .btn-link, .btn-link:hover {
        text-decoration: none !important;
    }

    .accordion .btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
    }

    .accordion .icon {
        font-size: 1.25rem;
        margin-left: auto;
    }

    .accordion>.card .card-header {
        padding: 0px 5px;
        margin-bottom: 0px !important;
    }
    .card-box{
        margin-top: 20px;
        padding:10px;
        box-shadow:rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
    }
    .clone-btn{
        width: 200px;
        margin: 0 auto;
        text-align: center;
    }
</style>
@section('content')

<div class="breadcrumbs">
    <div class="col-sm-4">
        <div class="page-header float-left">
            <div class="page-title">
                <h1>Global Parameter Lists</h1>
            </div>
        </div>
    </div>
</div>

@if (Session::has('message'))
<div class="col-sm-12">
    <div class="alert  {{ Session::get('alert-class', 'alert-info') }} alert-dismissible fade show"
        role="alert">
        {{ Session::get('message') }}
    </div>
</div>
@endif

<div class="content mt-3">
    <div class="animated fadeIn">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                      <div id="modeTypeMessage" class="mt-2"></div>
                    <div class="card-header">
                        <nav>
                            <div class="nav nav-tabs" id="nav-tab" role="tablist">
                                <button class="nav-link active" id="nav-settings-tab" data-toggle="tab" data-target="#nav-settings" type="button" role="tab" aria-controls="nav-settings" aria-selected="true">Settings</button>
                                <button class="nav-link" id="nav-email-config-tab" data-toggle="tab" data-target="#nav-email-config" type="button" role="tab" aria-controls="nav-email-config" aria-selected="true">Email Config</button>
                            </div>
                        </nav>
                    </div>
                    <div class="card-body">
                        <div class="tab-content" id="nav-tabContent">
                            @include('admin.global-parameters.partials._settings')
                            @include('admin.global-parameters.partials._email-config')
                        </div>
                    </div>
                </div>
            </div>


        </div>
    </div><!-- .animated -->
</div><!-- .content -->

@endsection

@push('scripts')
<script>
    $('.chkToggle').change(function() {
        var id = $(this).data('id');
        var checked = $(this).prop('checked');

        Swal.fire({
            title: "Are you sure to change the status?",
            showDenyButton: true,
            denyButtonText: "No",
            confirmButtonText: "Yes",
        }).then((result) => {
            if (result.isConfirmed) {

                $.ajax({
                    type: "POST",
                    url: "{{ route('global-parameters.change-status') }}",
                    data: {
                        "_token": "{{ csrf_token() }}",
                        'id': id
                    },
                    success: function(data) {
                        if (data.status == "success") {
                            Swal.fire("Status changed successfully!", "", "success")
                        } else {
                            Swal.fire("Not able to change status!", "", "info");
                        } // End if-else
                    },
                    error: function(data) {
                        console.log('error data = ', data)
                        Swal.fire("Not able to change status!", "", "info");
                    },

                });

            } else if (result.isDenied) {
                Swal.fire("Denied", "", "info");
                location.reload();
            }
        });
    });


    $(document).on('change', '.mode-type-select', function() {
    const id = $(this).data('id');
    const mode = $(this).val();

    $.ajax({
      url: "{{ route('global-parameters.change-mode') }}",
      method: 'POST',
      data: {
        "_token": "{{ csrf_token() }}",
        id: id,
        mode: mode
      },
      success: function(response) {
        if (response.success) {
          $('#modeTypeMessage')
            .html('<div class="alert alert-success">Mode updated successfully</div>')
            .fadeIn().delay(2000).fadeOut();
        } else {
          $('#modeTypeMessage')
            .html('<div class="alert alert-danger">Failed to update mode</div>')
            .fadeIn().delay(2000).fadeOut();
        }
      },
      error: function() {
        $('#loginTypeMessage')
          .html('<div class="alert alert-danger">Something went wrong!</div>')
          .fadeIn().delay(2000).fadeOut();
      }
    });
  });



    $(document).on('click', '#api1Modal', function() {
    let dataId = $(this).data('id');
    console.log("Data ID:", dataId);

    // You can also pass this ID to the modal or perform other actions
    //$('#exampleModal').find('.modal-body').text('Data ID is: ' + dataId);
    $('#merchant_id').val(dataId);
});
</script>

@endpush